function Home()

in home/src/pages/index.js [21:132]
111 lines of code
3 McCabe index (conditional complexity)

function Home() {
  const context = useDocusaurusContext()
  useEffect(() => autoRedirect(), [])
  const { siteConfig = {} } = context
  return (
      <>
        <Layout
            title={`${siteConfig.title} · ${siteConfig.tagline}`}
            description={`${siteConfig.tagline}`}
        >
          <header className={clsx('hero--primary', styles.heroBanner)}>
            <div className="container">
              <h1 className="hero__title">
                <img
                    style={{ width: '500px', marginTop: '100px' }}
                    src={'/img/hertzbeat-brand.svg'}
                    alt={'#'}
                />
              </h1>
              <p className="hero__subtitle">
                <Translate>slogan</Translate>
              </p>
              <div className={styles.buttons}>
                <Link
                    to="/docs/"
                    className={clsx(
                        'button button--primary button--lg'
                    )}
                >
                  <Translate>quickstart</Translate>
                </Link>
              </div>
            </div>
          </header>
          <main>
            <div>
              <Swiper
                  modules={[Autoplay, EffectFade, Navigation]}
                  watchSlidesProgress={true}
                  navigation={{
                    nextEl: '.user-swiper-button-next',
                    prevEl: '.user-swiper-button-prev',
                  }}
                  grabCursor
                  // effect will disable when auto scroll
                  // effect={'fade'}
                  // fadeEffect={{
                  //   crossFade: true
                  // }}
                  // slidesPerView={1}
                  // auto scroll
                  loop={true}
                  speed={0}
                  autoplay={{
                    delay: 6000,
                    disableOnInteraction: false,
                    waitForTransition: false,
                  }}
              >
                <SwiperSlide>
                  <img
                      style={{ width: '1400px', display: 'block', margin: '0 auto' }}
                      src={useBaseUrl('/img/docs/hertzbeat-arch.png')}
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                      style={{ width: '1400px', display: 'block', margin: '0 auto' }}
                      src={useBaseUrl('/img/home/status.png')}
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                      style={{ width: '1400px', display: 'block', margin: '0 auto' }}
                      src={useBaseUrl('/img/home/0.png')}
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                      style={{ width: '1400px', display: 'block', margin: '0 auto' }}
                      src={useBaseUrl('/img/home/1.png')}
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                      style={{ width: '1400px', display: 'block', margin: '0 auto' }}
                      src={useBaseUrl('/img/home/9.png')}
                  />
                </SwiperSlide>
              </Swiper>
            </div>

            <div
                className="swiper-button-prev user-swiper-button-prev"
                style={{ top: '880px', left: '50px', color: '#000033' }}
            />
            <div
                className="swiper-button-next user-swiper-button-next"
                style={{ top: '880px', right: '50px', color: '#000033' }}
            />
            {features && features.length > 0 && (
                <Section>
                  {features.map((props, idx) => (
                      <Feature key={idx} {...props} />
                  ))}
                </Section>
            )}
          </main>
        </Layout>
      </>
  )
}