text: /**
   * Copyright (c) 2017-present, Facebook, Inc.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */
  
  import React from "react";
  import classnames from "classnames";
  import Layout from "@theme/Layout";
  import Link from "@docusaurus/Link";
  import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
  import useBaseUrl from "@docusaurus/useBaseUrl";
  import styles from "./styles.module.css";
  
  const features = [
    {
      title: <>Easy to Use</>,
      imageUrl: "img/undraw_docusaurus_mountain.svg",
      description: (
        <>
          Docusaurus was designed from the ground up to be easily installed and
          used to get your website up and running quickly.
        </>
      )
    },
    {
      title: <>Focus on What Matters</>,
      imageUrl: "img/undraw_docusaurus_tree.svg",
      description: (
        <>
          Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
          ahead and move your docs into the <code>docs</code> directory.
        </>
      )
    },
    {
      title: <>Powered by React</>,
      imageUrl: "img/undraw_docusaurus_react.svg",
      description: (
        <>
          Extend or customize your website layout by reusing React. Docusaurus can
          be extended while reusing the same header and footer.
        </>
      )
    }
  ];
  
  function Home() {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
    return (
      <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />"
      >
        <header className={classnames("hero hero--primary", styles.heroBanner)}>
          <div className="container">
            <img src={useBaseUrl("img/sylo-white.png")} alt={""} />
            <p className="hero__subtitle">{siteConfig.tagline}</p>
            <div className={styles.buttons}>
              <Link
                className={classnames(
                  "button button--outline button--secondary button--lg",
                  styles.getStarted
                )}
                to={useBaseUrl("docs/what-is-it")}
              >
                Get Started
              </Link>
            </div>
          </div>
        </header>
        <main>
          {features && features.length && (
            <section className={styles.features}>
              <div className="container">
                <div className="row">
                  {features.map(({ imageUrl, title, description }, idx) => (
                    <div
                      key={idx}
                      className={classnames("col col--4", styles.feature)}
                    >
                      {imageUrl && (
                        <div className="text--center">
                          <img
                            className={styles.featureImage}
                            src={useBaseUrl(imageUrl)}
                            alt={title}
                          />
                        </div>
                      )}
                      <h3>{title}</h3>
                      <p>{description}</p>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          )}
        </main>
      </Layout>
    );
  }
  
  export default Home;
  