Repository: h2oai/wave
File: website/src/pages/index.js (JavaScript)

Code before:
          <iframe
            src="https://ghbtns.com/github-btn.html?user=h2oai&repo=wave&type=star&count=true&size=large"
            style={{ marginTop: 15 }}
            height="30"
            width='150'
            title="Wave repo Github stars"
          />
        </div>
      </header>
      <main>
        {features && features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
              <div className="row">
                {features.map((props, idx) => (
                  <Feature key={idx} {...props} />
                ))}
              </div>
            </div>
          </section>
        )}
        {showcase && showcase.apps.length > 0 && (
          <section className='container'>
            <div className={clsx('row', styles.showcaseTitleContainer)} >
              <div className={styles.divider} style={{ marginRight: 10 }} />
              <h1 className={styles.showcaseTitle}>{`See what you can build\nwith Wave`}</h1>
              <div className={styles.divider} style={{ marginLeft: 10 }} />
            </div>
            <div className={clsx('row', styles.showcaseContainer)}>
              {showcase.apps.map(({ title, description, images }, idx) =>
                <div className={styles.showcaseRow} key={`row-${idx}`}>
                  <img src={images[0].path} onClick={() => openLightbox(images)} className={styles.showcaseImg} />
                  <div className={styles.showcaseDescriptionContainer}>
                    <h2 className={styles.underline} >{title}</h2>
                    <p className={styles.showcaseDescription}>{description}</p>
                  </div>
                </div>
              )}
            </div>
          </section>
        )}
        {lightboxVisible && <Lightbox {...lightboxProps.current} />}
      </main>
    </Layout >
  )
}

export default Home


Review comment (suggestion):
There should be just a single `h1` per page in general. Please adjust the rest of the headings accordingly.
```suggestion
              <h2 className={styles.showcaseTitle}>What can Wave achieve?</h2>
```

Code after:
          <iframe
            src="https://ghbtns.com/github-btn.html?user=h2oai&repo=wave&type=star&count=true&size=large"
            style={{ marginTop: 15 }}
            height="30"
            width='150'
            title="Wave repo Github stars"
          />
        </div>
      </header>
      <main>
        {features && features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
              <div className="row">{features.map((props, idx) => <Feature key={idx} {...props} />)}</div>
            </div>
          </section>
        )}
        {showcase && showcase.apps.length > 0 && (
          <section className='container'>
            <div className={clsx('row', styles.showcaseTitleContainer)} >
              <div className={styles.divider} style={{ marginRight: 10 }} />
              <h2 className={styles.showcaseTitle}>What can Wave achieve?</h2>
              <div className={styles.divider} style={{ marginLeft: 10 }} />
            </div>
            <div className={clsx('row', styles.showcaseSubtitleContainer)} >
              <p>The following are just a few of hundreds of Wave apps built within H2O.ai. The most mind-blowing thing is that all <b>presented apps were built by our data science and machine learning people</b>, no software engineer necessary.</p>
            </div>
            <div className={clsx('row', styles.showcaseContainer)}>
              {showcase.apps.map(({ title, description, images }, idx) =>
                <div className={styles.showcaseRow} key={idx}>
                  {/* TODO: Add support for modern image formats to improve loading perf. */}
                  <img src={images[0].path} onClick={() => openLightbox(images)} className={styles.showcaseImg} />
                  <div className={styles.showcaseDescriptionContainer}>
                    <h3 className={styles.underline} >{title}</h3>
                    <p>{description}</p>
                  </div>
                </div>
              )}
            </div>
          </section>
        )}
        {lightboxVisible && <Lightbox {...lightboxProps.current} />}
      </main>
    </Layout >
  )
}

export default Home