mvfront-react/pages/index.tsx

import {useState} from 'react';
import Link from 'next/link';
import Image from 'next/image';
import {GetStaticProps} from 'next';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
import {useTranslation} from 'next-i18next';
import {Container, Row, Col, Button, Input} from 'reactstrap';
import Logo from '@components/Logo';
import Share from '@components/Share';
import {CREATE_ELECTION} from '@services/routes';
import ballotBox from '../public/urne.svg';
import email from '../public/email.svg';
import respect from '../public/respect.svg';
import vote from '../public/vote.svg';
import arrowRight from '../public/arrow-white.svg';

export const getStaticProps: GetStaticProps = async ({locale}) => ({
  props: {
    ...(await serverSideTranslations(locale, ['resource'])),
  },
});

const StartForm = () => {
  const {t} = useTranslation('resource');
  const [name, setName] = useState(null);

  return (
    <form className="sectionOneHomeForm" autoComplete="off">
      <Row className="sectionOneHomeRowOne">
        <Col className="sectionOneHomeContent">
          <Logo height="128" />
          <Row>
            <h4>{t('home.motto')}</h4>
          </Row>
          <Row>
            <h2>{t('home.slogan')}</h2>
          </Row>
          <Row className="justify-content-end">
            <Input
              placeholder={t('home.writeQuestion')}
              autoFocus
              required
              className="mt-2 mb-0 sectionOneHomeInput"
              name="name"
              value={name ? name : ''}
              onChange={(e) => setName(e.target.value)}
            />

            <p className="pt-0 mt-0 maxLength">250</p>
          </Row>
          <Row>
            <Link href={{pathname: CREATE_ELECTION, query: {name: name}}}>
              <Button color="secondary" outline={true} type="submit">
                <Row className="justify-content-md-center  p-2">
                  <Col className="col-auto">{t('home.start')}</Col>
                  <Col className="col-auto d-flex">
                    <Image
                      src={arrowRight}
                      width={22}
                      height={22}
                      alt={t('home.start')}
                      className="align-self-center"
                    />
                  </Col>
                </Row>
              </Button>
            </Link>
          </Row>
          <Row className="noAds">
            <p>{t('home.noAds')}</p>
          </Row>
        </Col>
        <Col></Col>
      </Row>
    </form>
  );
};

const AdvantagesRow = () => {
  const {t} = useTranslation('resource');
  const resources = [
    {
      src: ballotBox,
      alt: t('home.alt-icon-ballot-box'),
      name: t('home.advantage-1-name'),
      desc: t('home.advantage-1-desc'),
    },
    {
      src: email,
      alt: t('home.alt-icon-envelop'),
      name: t('home.advantage-2-name'),
      desc: t('home.advantage-2-desc'),
    },
    {
      src: respect,
      alt: t('home.alt-icon-respect'),
      name: t('home.advantage-3-name'),
      desc: t('home.advantage-3-desc'),
    },
  ];
  return (
    <Row className="sectionTwoRowOne">
      {resources.map((item, i) => (
        <Col key={i} className="sectionTwoRowOneCol">
          <Image
            src={item.src}
            alt={item.alt}
            height="128"
            className="d-block mx-auto"
          />
          <h4>{item.name}</h4>
          <p>{item.desc}</p>
        </Col>
      ))}
    </Row>
  );
};

const ExperienceRow = () => {
  const {t} = useTranslation('resource');
  return (
    <Row className="sectionTwoRowTwo">
      <Row className="sectionTwoHomeImage">
        <Image src={vote} alt={t('home.alt-icon-ballot')} />
      </Row>
      <Row className="sectionTwoRowTwoCol">
        <h3 className="col-md-8">{t('home.experience-name')}</h3>
      </Row>
      <Row className="sectionTwoRowTwoCol">
        <Col className="sectionTwoRowTwoColText col-md-4">
          <h5 className="">{t('home.experience-1-name')}</h5>
          <p>{t('home.experience-1-desc')}</p>
        </Col>
        <Col className="sectionTwoRowTwoColText col-md-4 offset-md-1">
          <h5 className="">{t('home.experience-2-name')}</h5>
          <p>{t('home.experience-2-desc')}</p>
          <p></p>
        </Col>
      </Row>
      <Row className="sectionTwoRowThreeCol mt-5">
        <Col>
          <Button color="primary" className="p-4 fs-5">
            {t('home.experience-call-to-action')}
            <Image
              src={arrowRight}
              width={22}
              height={22}
              alt="icon arrow right"
            />
          </Button>
        </Col>
      </Row>
    </Row>
  );
};

const Home = () => {
  const {t} = useTranslation('resource');
  return (
    <Container fluid={true} className="p-0">
      <section>
        <StartForm />
      </section>
      <section className="sectionTwoHome">
        <AdvantagesRow />
        <ExperienceRow />
        <Share />
      </section>
    </Container>
  );
};

export default Home;