function Home()

in website/src/pages/index.js [49:121]
72 lines of code
4 McCabe index (conditional complexity)

function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  return (
    <Layout
      title={`${siteConfig.title}`}
      description="A framework for elegantly configuring complex applications">
      <header className={classnames('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          {/* Left */}
          <div className={styles.heroLeft}>
            <div className={styles.imageLogo}><img src="img/logo.svg" /></div>
          </div>
          {/* Right */}
          <div className={styles.heroRight}>
            <h1 className={"hero__title"}>{siteConfig.title}</h1>
            <p className="hero__subtitle">{siteConfig.tagline}</p>
            <div className={styles.buttonContainer}>
              <div className={styles.buttons}>
                <Link
                  className={classnames(
                    'button button--success button--lg',
                    styles.getStarted,
                  )}
                  to={useBaseUrl('docs/intro')}>
                  Get Started
                </Link>
                <span className={styles['index-ctas-github-button']}>
                  <iframe
                    src="https://ghbtns.com/github-btn.html?user=facebookresearch&amp;repo=hydra&amp;type=star&amp;count=true&amp;size=large"
                    frameBorder={0}
                    scrolling={0}
                    width={160}
                    height={30}
                    title="GitHub Stars"
                  />
                </span>
              </div>
            </div>
          </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={'col col--4'}>
                    <div className={styles.feature}>
                      {imageUrl && (
                        <div className={styles.thumbnail}>
                          <img
                            className={styles.featureImage}
                            src={useBaseUrl(imageUrl)}
                            alt={title}
                          />
                        </div>
                      )}
                      <h3 className="feature">{title}</h3>
                      <p>{description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}
      </main>
    </Layout>
  );
}