export default function HomepageFeatures()

in src/components/HomepageMain/index.tsx [98:197]
38 lines of code
1 McCabe index (conditional complexity)

export default function HomepageFeatures(): JSX.Element {
  const bannerList = [
    {
      laptop: require('@site/static/img/home-laptop@2x.png').default,
      mobile: require('@site/static/img/home-mobile@2x.png').default,
    },
    {
      laptop: require('@site/static/img/answers-laptop@2x.png').default,
      mobile: require('@site/static/img/answers-mobile@2x.png').default,
    },
    {
      laptop: require('@site/static/img/profile-laptop@2x.png').default,
      mobile: require('@site/static/img/profile-mobile@2x.png').default,
    },
  ];
  return (
    <div className="container" style={{ overflow: 'auto' }}>
      <Slider {...settings}>
        {bannerList.map((banner) => {
          return (
            <div key={banner.laptop}>
              <section>
                  <div className={styles.screenContent}>
                      <div className={styles.pcScreen}>
                        <img
                          src={banner.laptop}
                          alt=""
                          width="100%"
                          height="auto"
                          className={clsx('d-block', styles.smmothImg)}
                        />
                      </div>

                    <div className={styles.screenMobile}>
                      <img
                        src={banner.mobile}
                        alt=""
                        width="100%"
                        height="auto"
                        className={clsx('d-block', styles.smmothImg)}
                      />
                    </div>
                  </div>
                </section>
            </div>
          );
        })}
      </Slider>

      <Row className="row justify-content-center">
        <Col className="col-12">
          <section>
            <h3 className="text-center mb-5 h1">
              <Translate id="home.features.title">Features</Translate>
            </h3>
            <div className={styles.features}>
              <div className="row">
                {FeatureList.map((props, idx) => (
                  <Feature key={idx} {...props} />
                ))}
              </div>
            </div>
          </section>

          <section style={{ marginBottom: '96px' }}>
            <h3 className="text-center h1">
              <Translate id="home.contribute.title">We welcome all contributions</Translate>
            </h3>
            <p className="text-center text-secondary mb-4 fs-20">
              <Translate id="home.contribute.ways">
                Here are some quick ways you can help the community.
              </Translate>
            </p>
            <div className={styles.linkWrap}>
              <ul>
                <li className={clsx('mb-2', styles.li)}>
                  <a href="/community/contributing">
                    <Translate id="home.contribute.item1">
                      Contribute to our open-source codebase
                    </Translate>
                  </a>
                </li>
                <li className={clsx('mb-2', styles.li)}>
                  <a href="/docs">
                    <Translate id="home.contribute.item2">Help us improve the docs</Translate>
                  </a>
                </li>
                <li className={styles.li}>
                  <a href="/community/translation">
                    <Translate id="home.contribute.item3">Help us translate language resources</Translate>
                  </a>
                </li>
              </ul>
            </div>
          </section>
        </Col>
      </Row>
    </div>
  );
}