Indeed Responsive Layout

README.md

Indeed Responsive Layout

In this gist, you can find my attempt to create Indeed website layout and page navigation using Chakra-UI & React Router. To test the code,

App.js

import React from 'react';
import {
  ChakraProvider,
  Grid,
  Box,
  Flex,
  List,
  ListItem,
  Heading,
} from '@chakra-ui/react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch,
} from 'react-router-dom';
// import './style.css';

export default function App() {
  return (
    <ChakraProvider>
      <div className="App">
        <Router>
          <Navbar />
          <Box h="100px" w="100%" bg="blue.100"></Box>
          <Box minH="95vh" bg="yellow.100">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/topics">
                <Topics />
              </Route>
            </Switch>
          </Box>
        </Router>
      </div>
    </ChakraProvider>
  );
}

const Navbar = () => {
  return (
    <Box bg="green.200" h="5vh">
      <List d="flex" alignItems="center" justifyContent="center" h="100%">
        <ListItem>
          <Link to="/">Home</Link>
        </ListItem>
        <ListItem ml={5}>
          <Link to="/topics">Topics</Link>
        </ListItem>
      </List>
    </Box>
  );
};

const Home = () => {
  return <Box>Homepage</Box>;
};

const Topics = () => {
  const { path, url } = useRouteMatch();
  console.log('path:', path);
  console.log('url:', url);

  return (
    <Box px={20}>
      <Flex h="100%">
        <TopicsDesktopNav url={url} />
        <Flex
          w="100%"
          h="100vh"
          bg="gray.100"
          overflow="scroll"
          sx={{
            '&::-webkit-scrollbar': {
              display: 'none',
            },
            '&::-webkit-scrollbar-thumb': {
              display: 'none',
            },
            position: '-webkit-sticky',
            /* Safari */ position: 'sticky',
            top: '0',
          }}
        >
          <Switch>
            <Route exact path={path}>
              <TopicsMobileNav url={url} />
              <Heading as="h2" size="lg" d={{ base: 'none', md: 'block' }}>
                Please Select a Topic
              </Heading>
            </Route>
            <Route path={`${path}/:topicId`}>
              <Topic />
            </Route>
          </Switch>
        </Flex>
      </Flex>
    </Box>
  );
};

const TopicsMobileNav = ({ url }) => {
  return (
    <Box d={{ base: 'block', md: 'none' }} w={{ base: '100%', md: '0px' }}>
      <TopicsNav url={url} />
    </Box>
  );
};

const TopicsDesktopNav = ({ url }) => {
  return (
    <Box
      d={{ base: 'none', md: 'block' }}
      h="100%"
      w={{ base: 0, md: '400px' }}
    >
      <TopicsNav url={url} />
    </Box>
  );
};

const TopicsNav = ({ url }) => {
  return (
    <Box w="100%" bg="red.100" h="100%">
      <Heading as="h2" size="xl">
        Topics
      </Heading>
      <List>
        <ListItem>
          <Link to={`${url}/rendering`}>Rendering with React</Link>
        </ListItem>
        <ListItem>
          <Link to={`${url}/components`}>Components</Link>
        </ListItem>
        <ListItem>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </ListItem>
        <ListItem mt={10}>
          <LongText />
        </ListItem>
      </List>
    </Box>
  );
};

const Topic = () => {
  const { topicId } = useParams();
  console.log(topicId);

  return (
    <Box>
      <Heading as="h3" size="lg">
        {topicId}
      </Heading>
      <LongText />
    </Box>
  );
};

const ExperimentFirst = () => {
  const data = [1, 2, 3, 4, 5, 6, 7];

  return (
    <div>
      <Box bg="green.200" h="8vh">
        Hello
      </Box>
      <Grid
        templateColumns={{
          base: 'none',
          md: '20em repeat(1, 1fr)',
        }}
        templateRows={{ base: '80px repeat(1, 1fr)', md: 'none' }}
        h="90vh"
      >
        <Flex
          bg="blue.200"
          flexDir={{ base: 'row', md: 'column' }}
          justifyContent={{ base: 'space-evenly', md: 'none' }}
        >
          {data.map(item => {
            return (
              <Box
                bg="yellow.200"
                h="8em"
                w={{ base: '50px', md: '100%' }}
                mt={{ base: 0, md: '10px' }}
                key={item}
              ></Box>
            );
          })}
        </Flex>
        <Box bg="red.200"></Box>
      </Grid>
    </div>
  );
};

const LongText = () => {
  return (
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint ullam unde
      repudiandae velit. Quos vitae neque, quasi ullam itaque ea consequatur
      eaque maxime, qui fugit provident iste libero veritatis assumenda deserunt
      velit cumque architecto ab delectus voluptatum minus cupiditate id
      dolorum. Laudantium provident exercitationem consequatur veritatis
      consectetur dolore nostrum dolorum similique et explicabo voluptatibus
      ullam iste eum rerum praesentium quidem obcaecati aliquid cum error, culpa
      voluptate quis. Quod similique facilis numquam praesentium esse laborum,
      dicta, quasi laudantium assumenda corporis commodi recusandae, sed velit
      alias doloribus natus neque repellat molestiae vitae dolor! Illum odit
      pariatur in voluptas rem repellendus adipisci sed, ut quam nam porro qui
      nulla dicta debitis libero fugiat impedit officiis vel nihil cupiditate
      dolorum quas, beatae voluptatibus. Fuga laboriosam voluptatum consequuntur
      consequatur suscipit laborum veritatis, cum dolor. Saepe expedita
      doloremque corrupti magnam ullam hic exercitationem deserunt, animi
      aliquid eligendi neque. Illum debitis modi perspiciatis. Aut eos
      blanditiis doloremque vitae quasi tenetur, laborum sapiente eaque sit,
      quod nemo ipsam, repellendus nobis quibusdam dignissimos possimus nulla
      quos id. Veniam placeat, soluta est tempora exercitationem, eligendi
      commodi tempore in dicta fuga eaque voluptas! Sunt nesciunt dolores
      officiis omnis deserunt adipisci numquam sit placeat praesentium ea harum
      non eligendi quidem sapiente blanditiis temporibus, perspiciatis voluptas
      dicta neque deleniti! Impedit maxime esse unde officiis, hic incidunt
      explicabo suscipit facere rerum harum iste fuga autem id delectus minus
      corrupti culpa, molestiae eos maiores, cum consectetur ipsam dignissimos
      expedita eligendi. Nesciunt assumenda incidunt eligendi magni quas sequi
      atque voluptates distinctio adipisci, quos ea tempore laborum sed est
      deserunt explicabo quasi suscipit libero! Ducimus aut nesciunt tenetur
      nisi culpa aliquid rem earum id velit ipsum reprehenderit consectetur,
      sunt quae commodi doloribus dolorum sint blanditiis deleniti at recusandae
      sed. Aperiam similique optio explicabo deleniti quasi esse perferendis
      architecto omnis tempore repellat porro nisi fugiat pariatur, nesciunt
      voluptate quas suscipit, quibusdam a, cum asperiores provident. Pariatur
      autem cum labore? Commodi itaque quaerat explicabo veniam nisi aliquam,
      impedit placeat quod quam in, rem numquam qui aliquid perferendis,
      voluptatem ducimus saepe sint tempore quasi consequuntur? Minima dolor,
      qui veritatis, quia ea, rem tempore placeat porro eaque non quod nobis
      quos nulla? Minima enim veritatis totam nostrum quaerat numquam officia
      ipsam, fugit deserunt ratione earum in iure, nulla soluta facere similique
      maiores, quos architecto sit quod. Mollitia eum fugiat blanditiis placeat
      possimus ea aperiam neque asperiores natus perferendis libero recusandae
      exercitationem quidem molestiae facilis, accusamus iusto, culpa nesciunt
      tempora porro consequuntur dolorum, doloribus eveniet! Praesentium velit
      commodi soluta et quasi corporis distinctio minima consequuntur molestiae
      repellat, quos suscipit, maxime sapiente, odio perspiciatis repellendus
      laborum quo fuga! Accusamus perspiciatis veniam molestiae velit. Error
      vero impedit, quis vitae quaerat nulla ullam perspiciatis delectus,
      deserunt similique officiis, ipsum cumque saepe. Soluta libero quisquam
      fugiat odio sint hic corporis vitae asperiores tenetur error nemo omnis ad
      dignissimos amet accusamus, eius nulla quas suscipit neque voluptatem nisi
      corrupti! Dignissimos earum consequuntur ad. Veritatis eveniet ad ipsum
      nobis impedit architecto esse necessitatibus eos, vel iste, provident
      ullam culpa blanditiis consequuntur. Qui, repellat molestiae? Nostrum
      veritatis officia quod tempore amet aliquam asperiores distinctio eum
      velit facilis harum quos atque provident perspiciatis in, tempora
      perferendis! Necessitatibus obcaecati accusantium corporis, sequi
      consectetur odit. Nihil laudantium voluptatem saepe illo facilis ratione
      mollitia labore nesciunt laboriosam? Reprehenderit ipsam ea totam
      inventore voluptate minus quia, alias enim debitis iusto tempore dolore
      nesciunt, amet nisi et, repellendus natus quis vitae. Facere optio unde
      maxime quaerat distinctio, delectus molestias velit corrupti
      exercitationem possimus dolore veritatis perferendis voluptates temporibus
      ex error asperiores deleniti? Distinctio cupiditate nobis quasi
      praesentium modi! Nulla cupiditate voluptatum, culpa repellat quos dicta
      aspernatur magni numquam placeat sapiente voluptas illo, animi cumque
      impedit non aut molestiae sed eius. Quasi illo cumque rem assumenda
      mollitia quos odio tenetur temporibus necessitatibus sit error hic natus
      facere quod numquam autem inventore officia omnis voluptate perspiciatis,
      nam itaque? Numquam molestiae architecto, reprehenderit corrupti, totam ea
      a inventore ut, modi atque exercitationem rerum nisi minus voluptatem
      sapiente natus? Saepe corrupti quia rerum nobis suscipit omnis eius
      ratione perferendis amet hic atque fugiat exercitationem, quasi
      repellendus distinctio fuga voluptatum consequatur rem sit. Consequuntur
      cumque obcaecati voluptas explicabo officiis possimus dolor est
      consequatur doloremque, modi cupiditate nobis in. Sequi quo, neque nihil
      optio reprehenderit deserunt aut exercitationem eligendi a dolore
      reiciendis quidem repellendus consequuntur, amet quod. Quisquam corporis
      maxime nesciunt rem. Accusantium commodi ad iste velit, ipsum ut odit
      perspiciatis vitae veritatis odio. Dolorem, dolores consequatur.
      Cupiditate veritatis architecto tempora minus sapiente quae, aliquid aut
      deleniti, voluptatibus asperiores, consectetur eos quis officiis molestias
      recusandae ipsam consequuntur pariatur nulla? Omnis ratione id, repellat,
      sed ullam ab necessitatibus ducimus suscipit hic aspernatur vitae
      recusandae in molestias molestiae. Delectus consectetur tempore hic velit
      officiis similique, totam tenetur possimus voluptatem neque! Sit quaerat
      voluptates eos nam! Omnis consequuntur minus commodi officiis suscipit
      voluptates id laudantium quod excepturi ipsa provident dicta ex placeat,
      recusandae qui ab, adipisci porro eveniet nam doloremque voluptate!
      Eligendi quisquam consectetur atque laboriosam dolores eveniet voluptate,
      tempora sequi doloremque explicabo odio magnam, ipsa sunt ab nisi, eius
      numquam quas. Neque, doloribus alias natus repellendus deserunt eaque
      fugit blanditiis esse quas iusto, labore porro expedita. Id maxime
      expedita molestiae, quos tempore nobis unde, quam odit explicabo quidem ut
      quaerat quisquam ducimus inventore sunt earum molestias velit saepe! Quas
      vero, architecto sed nulla quae laudantium totam obcaecati a recusandae
      maxime accusamus voluptas, praesentium, quia aliquid? Placeat quibusdam
      voluptas sapiente optio odio nisi atque. Eos quidem adipisci reprehenderit
      enim quos dolorum suscipit, non quibusdam ipsum minima eligendi corporis
      dolores, veniam molestias voluptatum impedit magnam, ab voluptatibus
      asperiores necessitatibus! Ea tempora cumque velit at perferendis sint nam
      sunt sed inventore nostrum ad excepturi odit eius maiores, obcaecati
      eveniet! Quia magnam sed commodi nesciunt sit alias maiores quidem neque,
      quis autem ipsa tenetur tempora saepe vel aliquam cupiditate, magni
      consequatur temporibus voluptatibus molestiae dignissimos? Sequi quod
      minima ab, rerum inventore quae molestias consequuntur qui vel a, eum
      voluptas commodi! Error aliquid molestiae aperiam deserunt rem repudiandae
      illum modi? Cupiditate consectetur reiciendis quibusdam placeat cumque,
      quia earum aspernatur, culpa ipsum expedita ipsam odit totam laborum
      eligendi inventore, iure hic! Quae ex nesciunt dolorum doloremque unde
      officiis nostrum dolores maxime animi eaque cupiditate iure incidunt dicta
      voluptatum facilis quibusdam pariatur, qui earum sapiente veniam
      veritatis! Adipisci ut expedita, molestias nobis dolore veritatis sequi.
      Quidem consectetur repellat nam doloribus numquam perspiciatis quibusdam
      officiis cupiditate voluptatum. Doloremque aliquid ducimus aperiam
      voluptatibus eligendi itaque animi omnis voluptate nostrum adipisci, saepe
      nam cupiditate reiciendis quibusdam veritatis laboriosam. Facilis nostrum
      aspernatur neque culpa dolorem provident aut molestiae officiis et vero
      soluta ex reiciendis nobis eius voluptatum quisquam, fugiat harum. Officia
      neque a vel est eius, atque, placeat blanditiis, repellendus non
      laudantium rem dolor quod dignissimos odio cum! Error recusandae debitis
      harum optio, asperiores nemo, consequuntur, molestias dolorum distinctio
      incidunt dolorem possimus blanditiis tempore! Distinctio qui illum sit
      dolorum est, voluptatem quisquam sapiente, maxime amet maiores voluptas.
      Harum eaque officiis esse id repudiandae neque distinctio quidem
      architecto reprehenderit, consectetur quam cum omnis sunt veniam magnam,
      velit laudantium minus libero repellendus! Cum, eveniet accusantium sequi
      est delectus quis iste culpa molestias architecto vero impedit, itaque
      enim doloribus. Similique voluptate placeat commodi. Id fuga voluptas,
      excepturi in natus sunt sed beatae temporibus eligendi assumenda labore
      dolorum. Ea itaque corporis officia cumque ex eaque, nisi non commodi,
      quibusdam explicabo eveniet quia voluptatem recusandae. Incidunt non sed
      corporis. Sunt repudiandae iste nesciunt, dignissimos magnam nostrum
      commodi et soluta porro, alias totam magni? Eius sunt nobis porro et,
      necessitatibus cum animi itaque pariatur non soluta tempore a velit
      aliquam nihil obcaecati minus doloribus totam natus nisi consectetur
      veniam nesciunt. Doloribus saepe tempora, tenetur perspiciatis asperiores
      ex. Doloremque animi sunt placeat nesciunt dolorum, reprehenderit ipsum
      maxime pariatur rem minima mollitia non recusandae tempore fuga autem,
      deserunt quod accusamus eligendi commodi necessitatibus. Earum aut aliquam
      ut amet ullam vitae incidunt impedit optio ea et praesentium, accusantium
      minus perspiciatis dignissimos quibusdam officiis dolorum illum magnam
      quis. Iure quia sequi quisquam totam odio consequuntur similique aliquid
      laudantium incidunt dolore, ipsam, alias molestiae corporis aliquam ea
      error exercitationem voluptate vitae optio aperiam veniam accusantium?
      Laboriosam nihil maiores vel necessitatibus nemo! Pariatur voluptatibus
      deleniti placeat officia consequatur natus architecto asperiores hic
      possimus quasi, perspiciatis totam ducimus eligendi doloribus veritatis
      non voluptatum quos reiciendis inventore aliquid facilis sed. Dolores at
      suscipit totam est repellendus culpa accusantium doloribus velit eum
      inventore, nihil, earum minima odit, ad debitis soluta ex fugiat? Cum eos
      veniam alias impedit ipsam! Magni consequuntur ratione minus a, temporibus
      nisi illo ex! Nobis excepturi incidunt dolore quod, soluta eum nulla quas
      fuga fugit mollitia et rerum ducimus adipisci deserunt placeat dignissimos
      veniam optio culpa repudiandae nisi velit dolor alias ipsa! Fugiat
      distinctio perspiciatis accusamus eum dolorem nostrum sed? Libero expedita
      omnis consectetur tempora consequatur ipsam facilis neque error nulla cum
      rem consequuntur debitis officia iusto, eius ut enim. Commodi magni quasi
      debitis nobis distinctio architecto porro? Exercitationem repudiandae,
      neque veritatis qui iure nulla eum voluptas rem quae rerum quaerat ut eos
      necessitatibus optio quo, molestias fugit at a ratione, tempora quam
      asperiores repellendus deleniti commodi. Laborum qui illo nobis a,
      delectus ex. Unde ut blanditiis sint vel quasi esse beatae corrupti
      doloremque est eligendi quo officiis repellat commodi atque eos debitis,
      molestiae, itaque harum. Dignissimos dolore reprehenderit corporis,
      temporibus voluptatibus aut numquam veniam suscipit ea doloribus velit
      consequuntur repellat dolorem labore. Illum magni minima amet! Iure nam
      error sapiente nemo, harum et cumque illo delectus voluptate eveniet amet
      vel excepturi, aut soluta neque necessitatibus magni rerum ab quaerat. Id,
      blanditiis ipsum repellendus amet fuga fugit fugiat magni optio
      praesentium sunt veniam reprehenderit consequuntur. A nihil quisquam
      corrupti aliquid iste eum vitae esse mollitia libero! Atque fugiat eius
      quos quae. Laudantium veritatis deleniti provident necessitatibus facere
      esse? Velit praesentium modi obcaecati doloribus blanditiis consequatur,
      iste illum cupiditate repellat culpa harum molestias corporis minus
      eveniet neque rerum asperiores ex ratione quisquam repellendus quidem
      placeat expedita inventore iure. Saepe modi maiores quibusdam sunt animi
      ducimus dolore non quam iure commodi voluptas fugiat soluta, impedit, rem,
      necessitatibus perspiciatis! Error similique deleniti vero minus, placeat
      rem voluptate tenetur eaque sit facere, pariatur sequi veniam eius odio ut
      dolore consequatur earum numquam amet excepturi est saepe repellat!
      Eveniet impedit quis odio, laborum commodi alias necessitatibus ratione
      itaque, quasi odit veniam quaerat quae cumque dolore animi earum tenetur
      magnam, nemo voluptate veritatis sed amet harum consectetur. Quaerat, quis
      delectus! Animi a corporis unde velit provident quasi cumque dolore
      delectus impedit aliquam nam id, cum itaque consequuntur rem voluptatem
      cupiditate qui, hic veniam ipsum? Dolore doloribus, repellendus inventore
      tempora eveniet quaerat, nisi sunt, incidunt vero ullam consequuntur
      beatae. Accusamus numquam ducimus aspernatur autem magnam culpa
      repellendus deserunt cumque dolorum dolore et impedit distinctio adipisci
      totam fugiat temporibus ratione, ex ad itaque eos! Officiis dolor fuga ab
      voluptate enim deserunt magnam laboriosam illo perspiciatis asperiores,
      facere nobis! Necessitatibus vero perspiciatis sit dolores ipsum similique
      quidem! A quae omnis dolores, architecto ipsa facere nam suscipit
      blanditiis veniam dolorum harum excepturi asperiores sunt voluptates
      fugit, nobis exercitationem. Quos eveniet necessitatibus quo eaque,
      nesciunt ullam quod minima magni inventore quibusdam fuga eius dolores,
      fugit cumque voluptatibus aut neque unde vitae repellendus quidem quas
      cupiditate deleniti rem iusto. Modi, perferendis sed. Repudiandae quaerat
      omnis voluptatem fugit animi obcaecati veniam eum mollitia blanditiis
      nesciunt molestiae odit eos, dolorum, delectus voluptates reiciendis
      placeat neque, autem iusto non! Dolore accusantium explicabo perferendis
      ullam asperiores harum voluptate consequatur, saepe veritatis quos, quasi
      expedita qui ut neque dolorum praesentium fuga aliquam placeat, minus
      facilis officia delectus. Quae corrupti beatae sit accusantium ex. Autem,
      quia rem aperiam nisi numquam dolorem alias exercitationem quisquam
      asperiores suscipit deserunt. Ea odit tenetur dolor impedit fugiat
      voluptatem laborum dolorum illum, placeat inventore, sunt eveniet facilis
      dicta nesciunt culpa, totam harum! Dolorem eligendi praesentium veritatis
      id, nemo possimus quis velit hic architecto neque sit ea mollitia deleniti
      iusto ducimus enim molestias repellat unde doloribus? Facilis voluptate
      aliquid dolorum unde error quaerat natus. Animi, hic magnam. Rem esse
      incidunt repudiandae dicta ut, ipsum est molestias debitis consectetur
      velit alias quo accusantium dolor, culpa modi. Placeat odit enim expedita,
      numquam distinctio aliquid. Sequi dolorem dicta perferendis totam illum
      incidunt fugiat alias. Consequuntur officia dolores veniam vitae quidem
      incidunt eaque quam cumque animi, necessitatibus velit molestias quae.
      Repudiandae est doloribus expedita ipsam enim minus mollitia asperiores ex
      perferendis sint in quasi, labore, laudantium blanditiis ut! Ipsam odit
      facilis consectetur ipsum possimus necessitatibus quod eius aliquam quae,
      temporibus voluptatibus recusandae eveniet cum maxime sit atque eos beatae
      dolorum, facere ducimus veniam! Atque culpa illo accusamus amet laboriosam
      harum, dolorem repudiandae doloremque molestias ex, deleniti quae fugiat
      consequuntur exercitationem ipsum architecto cumque eius voluptatem. Modi
      quo eveniet maxime ducimus saepe incidunt vitae impedit a earum. A eveniet
      veritatis molestias voluptates sapiente corporis adipisci totam, dicta sit
      sunt dolorum dolorem exercitationem accusamus, distinctio officiis nam,
      aliquid minus? Repellat, fuga assumenda ea veniam eligendi adipisci animi
      harum, minus atque, vitae dolores. Corrupti, nisi nulla vero molestias cum
      amet tempora? Deleniti quae iure fuga enim neque similique, perspiciatis
      aspernatur quisquam voluptates officiis optio quidem inventore, cum
      facilis architecto nobis, distinctio numquam vel ea mollitia? Maiores
      atque autem fuga? Illo animi doloribus labore maxime cupiditate, autem
      excepturi repellat asperiores commodi temporibus quibusdam exercitationem,
      quaerat possimus repudiandae architecto. Voluptate accusamus aut porro
      quia laboriosam eligendi aspernatur, repudiandae vero ex aliquam possimus
      molestias veniam magni exercitationem ipsam praesentium et fugiat. Tempora
      alias accusantium error soluta omnis libero numquam, cum ullam accusamus
      est praesentium sequi assumenda quo voluptatem aut deleniti amet magni
      perspiciatis, iste voluptates necessitatibus natus illum. Earum ea
      aspernatur ut adipisci quaerat distinctio debitis quis est. Accusamus
      veritatis corrupti dolore rerum omnis ipsam est et ipsum eligendi. Quae
      libero blanditiis fugit modi cum quo omnis harum, delectus earum, adipisci
      quaerat reprehenderit maiores? Odit reiciendis odio corporis aspernatur
      vitae error incidunt architecto minus molestiae delectus quaerat fugit
      temporibus repellat, sed et vero dolore veritatis. Error rerum voluptatem
      natus quaerat cupiditate, consequatur numquam optio possimus atque beatae
      nemo asperiores veniam eos. Rem a possimus eaque dolore suscipit ea minima
      obcaecati accusamus explicabo perferendis, repellat omnis, magnam rerum
      incidunt quis libero aspernatur quae quod. Vero, eos facere laudantium
      optio quis alias libero officia doloremque, temporibus nisi ullam minima
      expedita fugiat perferendis incidunt porro dignissimos quas facilis ea
      magnam rem fuga? Distinctio mollitia veniam enim voluptatem modi
      accusamus, molestias, soluta nam error necessitatibus esse recusandae
      impedit hic magni sed id tempore officia aperiam natus at fugit placeat,
      voluptates labore reprehenderit. Fugiat numquam quisquam minus impedit
      esse odio nobis porro, suscipit illum blanditiis quas mollitia optio rem
      necessitatibus ratione doloremque, eum provident. Natus, architecto.
      Dignissimos aspernatur et vero. Incidunt mollitia dolores accusantium,
      aliquid possimus obcaecati quisquam! Quibusdam hic vitae quod dolores ea
      doloremque qui cupiditate, ipsum natus, fugit praesentium repudiandae,
      fuga excepturi vero id nemo minus harum voluptatibus velit. Hic
      consequuntur earum ea maiores cupiditate amet minus saepe, nam libero
      dolores harum, odit perspiciatis nostrum atque voluptatibus, quae eveniet
      animi voluptatum velit sint necessitatibus quis rerum ex quod! Et
      molestias dicta ullam temporibus dolor iste dignissimos illo corporis
      maxime ea excepturi optio eius repellendus fuga aut, quidem culpa
      aspernatur accusantium! Et ducimus laboriosam beatae libero doloremque
      exercitationem repellat soluta recusandae! Ratione placeat debitis libero
      expedita deserunt dolores quia illo nesciunt. Tempora non eveniet vero
      quos! Corporis temporibus ipsum voluptates quia ad neque, quaerat porro
      totam consequatur, voluptatem quos, aspernatur nesciunt atque corrupti
      cumque beatae itaque mollitia. Atque est repellat, veritatis
      exercitationem ex sed, laborum dolores praesentium repellendus eligendi
      beatae minus quas eos ad incidunt? Reiciendis quaerat ipsa odio
      consequatur, voluptatum earum harum possimus quos. Tempora ipsam nesciunt
      saepe culpa corrupti laudantium iure voluptate placeat tenetur? Aperiam
      nostrum consectetur quae cupiditate atque earum recusandae quasi
      reiciendis deleniti! Repellat provident dolores debitis ut quisquam hic
      modi sint ratione error molestiae animi nam, eos vero beatae quam. Totam
      recusandae nisi nulla aperiam minus sequi tenetur, placeat dolorum
      perspiciatis nihil tempore nemo exercitationem saepe ex perferendis. Ipsum
      quidem ullam sequi dolore commodi est voluptatem in nihil? Deleniti ipsam
      delectus numquam perspiciatis, illum et asperiores incidunt at, accusamus
      ratione placeat? Libero cum iusto explicabo molestiae tempora qui
      corrupti, placeat nemo similique ipsam cumque aliquid animi ad inventore
      molestias dignissimos, impedit, error natus dicta veniam. Corrupti aliquam
      quas vitae veniam ea magni doloremque iusto facilis! Odio delectus
      similique quibusdam, ad amet necessitatibus ipsa earum tenetur, eos ab
      alias rem sint sequi sunt. Rerum illo officiis culpa voluptatibus,
      architecto explicabo necessitatibus animi praesentium hic sequi, porro,
      saepe esse repudiandae modi earum cum ipsum. Ducimus amet soluta,
      repudiandae velit architecto ex animi quam assumenda deleniti quasi
      molestiae natus modi iusto, id inventore! Pariatur, repudiandae fuga eaque
      sapiente alias corrupti at cupiditate labore non blanditiis et consequatur
      reiciendis temporibus omnis. Rem, quisquam saepe. Corrupti omnis culpa quo
      fuga iure quasi esse ducimus fugiat! Voluptas architecto eius quisquam
      quae animi sed! Sapiente quo fuga commodi voluptate cupiditate asperiores
      harum reprehenderit ipsam quisquam provident, esse natus, est, eaque
      debitis tempore! Dolorem delectus esse at sunt fugiat officia quas sit, ex
      dignissimos exercitationem? Nostrum animi voluptas ut inventore modi
      distinctio, quam aliquid aut amet ipsam impedit id aliquam, at sint nihil
      suscipit perspiciatis explicabo! Exercitationem voluptate debitis nisi
      totam consequatur neque fuga? Modi sint cum sapiente eum porro itaque
      voluptatum unde non, atque eos. Assumenda reiciendis nihil minus dolorum
      quidem asperiores doloremque, dignissimos veniam delectus voluptate fuga,
      placeat quasi illo nulla esse id pariatur voluptatem eius. Similique esse
      voluptate molestiae officiis! Delectus eveniet qui itaque quod ut beatae
      laudantium aliquam sed dolores eum magni accusamus omnis corrupti
      excepturi ex tempora, nam deleniti saepe illo explicabo repellat
      doloremque. Velit ab aliquid facere aliquam eos nemo voluptatibus adipisci
      minus consequatur maxime dolores repellendus pariatur aperiam deserunt vel
      repellat, quam porro, expedita aspernatur impedit reiciendis, numquam
      quaerat? Iste quam consectetur, ullam nostrum odio ut non consequatur
      nulla quia sed porro sapiente esse numquam quae tempore! Quo, ut. Debitis,
      id soluta consequatur cumque enim, illum asperiores qui eos ipsa sint
      pariatur iusto et molestiae? Optio veniam tempore est? Deleniti,
      consectetur laborum obcaecati, incidunt animi laboriosam quisquam possimus
      voluptatum dolore ut quis, quaerat error dolores vero perferendis?
      Consequuntur ipsa unde, mollitia dolorem deleniti quibusdam amet!
      Explicabo, dolore libero consectetur possimus fugit minima voluptatum
      excepturi, maxime placeat incidunt ipsam cum nostrum illum, atque vero ut
      omnis deserunt sequi a laudantium quod? Mollitia non, temporibus hic
      voluptate omnis ad eveniet a odit libero, dolorem doloribus minima
      repellendus reiciendis fugit aspernatur quisquam quo assumenda similique
      nisi quis accusantium natus nesciunt labore. Non quo asperiores impedit
      nobis consectetur minima doloribus est nulla corrupti. Optio voluptatem
      asperiores molestias aliquid obcaecati consectetur iusto? Libero
      exercitationem fugiat nobis? Praesentium maxime expedita quas dicta.
      Quisquam ratione quae tenetur doloremque sed et distinctio vero. Harum
      libero nobis ab ratione, reprehenderit pariatur? Inventore commodi,
      quibusdam aperiam dolorum nesciunt obcaecati nam quis distinctio enim.
      Incidunt consequatur laborum sunt soluta, omnis iste repellendus?
      Temporibus magnam atque deserunt odio! Voluptatum numquam accusamus rem
      incidunt esse officiis commodi! Exercitationem temporibus adipisci
      voluptates impedit iure dicta quaerat ipsa, optio illo voluptatum, nulla
      perferendis sint? Doloremque deserunt voluptas facere ipsum quidem magni
      dolores saepe quam corporis veritatis. Facilis voluptatum earum cum vel!
      Ullam distinctio molestias earum accusantium mollitia illo, voluptatem
      modi atque perspiciatis, incidunt debitis beatae unde fugiat asperiores
      accusamus cum voluptas sunt. Iste tenetur explicabo quas itaque cumque
      dolorem suscipit repellat blanditiis? Dignissimos aliquam inventore error
      ducimus id voluptate esse a odio excepturi expedita animi modi dolore
      facilis, iusto cupiditate! Eius repudiandae in ipsum similique accusantium
      qui officiis. Impedit consequatur accusantium fuga, ducimus quasi
      laboriosam ea unde assumenda laudantium. Placeat eveniet rerum neque
      recusandae cumque quibusdam quod molestiae consequatur illum. Repellat
      modi rem cum ducimus, sit, facilis odit laboriosam aliquid fugit aliquam
      quisquam ab hic ratione iure temporibus nisi beatae doloribus a natus eum!
      Nostrum soluta sed accusamus obcaecati ducimus, quibusdam unde fugit
      tenetur voluptas, atque reiciendis aut iure aliquid, rem nobis nam
      consequatur maiores eum molestias voluptatum eos cum earum architecto.
      Laboriosam similique fuga perspiciatis possimus? Quam veniam blanditiis,
      aspernatur vel reprehenderit officia totam iure nihil, quasi, numquam quod
      voluptatibus odit repudiandae eum tempore ab impedit sit harum cumque
      voluptatum esse obcaecati. Culpa voluptatibus, unde amet excepturi illo
      quasi atque inventore vero sint, explicabo debitis consequatur est dolores
      ea aliquam, consequuntur corrupti? Adipisci dolorem necessitatibus
      accusantium dolore, odit non quas ut vitae sapiente facilis? Maiores eos
      labore cum odio nisi enim temporibus ut, minus corrupti repudiandae
      doloribus, sequi unde nemo explicabo quo sint sapiente, consequatur libero
      placeat totam ad optio incidunt est? Facere impedit asperiores at suscipit
      placeat! Rem voluptatibus, officiis nulla quidem culpa voluptates eligendi
      a incidunt, repellendus sunt, dolorum inventore consequuntur autem
      tempore! Modi repellat rerum earum, et a soluta, vel magnam sequi
      explicabo aut magni iste est qui error ratione? Iusto possimus nobis,
      numquam necessitatibus, recusandae, ipsam corporis eaque nemo quas sint
      quae voluptatem. Eius alias incidunt debitis, earum itaque ipsum cum
      explicabo rerum animi consectetur, commodi accusamus velit expedita neque
      excepturi numquam ad veritatis natus molestias. Commodi ipsum fuga
      nesciunt expedita sit. Ea magnam reprehenderit nemo architecto, quo ad,
      voluptates illo odit nulla maiores laudantium pariatur corrupti eos
      voluptatum excepturi consectetur tenetur debitis, adipisci iste tempore
      aliquam. Pariatur at ab expedita debitis commodi totam asperiores omnis
      nemo! Recusandae illo delectus assumenda error non, veritatis ullam neque
      aspernatur nam sed? Earum, culpa dolore veniam ut eius quidem impedit,
      assumenda vitae fugit mollitia enim. Ab, iure ipsam? Quam, qui expedita
      aperiam nihil rem ipsam vero voluptates voluptas ratione perferendis
      necessitatibus pariatur! Earum, obcaecati soluta! Porro minima enim
      quibusdam tenetur dicta nisi officiis sit cupiditate mollitia atque
      repellendus soluta culpa sequi nemo, labore ab nihil cum? Iste placeat
      fugit mollitia dolorum maiores corporis officiis labore iusto quaerat
      dolorem autem qui alias sapiente soluta nobis quam accusamus, ullam
      laboriosam molestiae eum natus exercitationem sequi ipsam odit? Inventore
      labore iure suscipit delectus corrupti quasi sapiente rerum magni odit
      qui. Veniam fugit ipsum itaque fugiat tempora inventore molestias facilis
      reprehenderit ex! Cumque sint consequuntur aliquam eligendi dignissimos
      eaque aperiam dicta? Quo laboriosam nostrum adipisci, dolorem ratione, vel
      aliquid, dolor magni quasi cumque hic officiis. Temporibus rem nesciunt
      optio veniam autem, minus enim magnam, adipisci architecto illum a qui ad
      similique. Magni nobis ratione recusandae aliquid autem? Perspiciatis, et
      blanditiis? Aspernatur veritatis ducimus eveniet voluptas suscipit nemo
      neque, hic sapiente ipsam quidem laudantium fuga eos deserunt libero nam
      quisquam, possimus doloremque sit mollitia tempore ex! Provident, eligendi
      reiciendis mollitia omnis ducimus quod esse fugiat illo enim eius culpa
      nisi tempora expedita hic cumque officiis dolores voluptas? Aliquam
      perspiciatis ducimus voluptas quia, sit vero, iste fugit dolorum, illo
      repellat nobis tempore. Sint, labore reprehenderit. Doloremque, laborum
      tempore iste voluptas ullam et, ducimus sunt fugit in voluptatibus vero
      provident impedit architecto quasi error quo nulla iusto quod
      exercitationem est, asperiores maxime illum. Provident minima ab id quos,
      ex est a ipsam animi deleniti libero illo omnis sed error corrupti numquam
      enim nam. Dicta magnam error aliquid veniam odio ipsum repudiandae
      repellat doloremque commodi. Nostrum ea inventore, quo dolorum iure esse
      obcaecati tempora. Commodi voluptatem perferendis nihil quidem et dolores!
      Alias quas temporibus soluta, modi suscipit ipsum voluptates fugit
      assumenda unde. Quam, labore quos ab voluptas voluptatum ratione commodi
      a! Expedita necessitatibus ea, placeat sequi ab cumque totam dolorem,
      dicta ducimus explicabo provident ut consequatur harum? Nisi magni
      pariatur perferendis dignissimos at necessitatibus beatae recusandae
      reprehenderit distinctio accusantium incidunt voluptas eligendi quod
      possimus corporis, odio omnis tempore nulla ullam? Ullam at,
      necessitatibus suscipit modi consequatur perferendis. Repellendus eos unde
      facilis eaque temporibus consequatur, facere repudiandae dolorum mollitia
      ut? Nam, perspiciatis. Pariatur ex facilis porro nemo, quaerat
      reprehenderit, deleniti vitae accusamus reiciendis, nesciunt magnam
      voluptatibus eos labore! Accusantium vel, possimus enim et animi,
      obcaecati hic rem sequi quod, ipsa amet asperiores fuga impedit unde. Eius
      voluptate impedit facilis dignissimos repellendus consequuntur ea
      asperiores. Assumenda a totam libero illo fuga error, molestiae nulla quae
      adipisci numquam quam rerum impedit ipsum. Iste accusamus odit ipsum amet
      vel nobis expedita voluptas voluptatem quas laborum in perferendis
      consequuntur molestias deserunt numquam molestiae eum explicabo quasi
      quidem dolor blanditiis, enim pariatur earum optio! Odit, illo! Omnis nisi
      ipsum asperiores illo atque unde alias, nobis laboriosam qui sunt aliquid,
      a optio. Vel, aut quaerat facere perferendis autem cum mollitia?
      Dignissimos laborum corporis distinctio placeat dolore deleniti obcaecati
      blanditiis, dolores esse ab. Cumque ea voluptatem odio voluptatibus
      veritatis dolorum dignissimos, ex reprehenderit incidunt possimus aperiam
      unde exercitationem magnam, animi deserunt. Vitae modi illum, dolorum
      impedit facilis eligendi a obcaecati saepe. Accusamus rem perspiciatis
      illum velit mollitia perferendis, commodi pariatur porro repellendus ipsum
      facere cupiditate recusandae quis at cumque hic magni eos! Pariatur,
      quaerat. Dignissimos suscipit iusto ea nemo consequatur culpa, sit harum
      magni maiores distinctio laudantium laboriosam minima corrupti voluptate
      voluptatem porro magnam omnis labore velit quaerat quae quidem obcaecati
      provident assumenda! Illo voluptatum porro maxime ab voluptates, dolores,
      non deserunt sed totam deleniti molestiae quibusdam consectetur adipisci.
      Iusto in ipsam cupiditate molestiae aspernatur voluptas expedita enim
      veniam eveniet, quis optio necessitatibus obcaecati qui earum consectetur
      at omnis officia odio, quos ex! Consequatur cupiditate sequi suscipit
      tempore expedita fuga laborum eius. Saepe nemo error voluptatibus,
      repellendus fugit accusantium sapiente praesentium ex amet aut
      reprehenderit earum rem deleniti, cumque vitae culpa iusto temporibus
      dignissimos itaque modi necessitatibus! Quos nobis deleniti eveniet!
      Voluptatem ducimus consequatur illum! Quas cupiditate libero vitae ipsum
      alias perspiciatis iusto itaque consequatur. Exercitationem assumenda eius
      voluptatem quas repudiandae quo dolor ex nostrum sed explicabo. Molestiae
      qui vel ipsa obcaecati velit quod sint doloremque minima, quisquam minus
      saepe, illo natus est veritatis rem officia sequi eveniet veniam iusto
      sunt recusandae. Tenetur distinctio perferendis ut nesciunt. Beatae cumque
      repellat ut, reprehenderit enim accusamus? Corrupti facilis, rerum nemo
      dolores impedit soluta dolore debitis tempore veniam consequuntur,
      similique omnis error culpa adipisci ipsum laboriosam. Corporis cupiditate
      inventore, enim, ipsum debitis iusto quas minima ipsa, deserunt quam
      fugiat labore minus velit odio nesciunt saepe quis expedita sed unde
      consequuntur! Fugit veniam exercitationem blanditiis. Molestiae quam
      dolore laborum, animi cumque, cum nostrum aut, totam voluptatibus dicta
      veniam ducimus atque odit quibusdam doloribus architecto earum! Atque,
      eligendi tempore explicabo fuga aspernatur eius quia harum optio
      blanditiis, ratione laborum nostrum, quibusdam temporibus itaque quisquam
      id quod eum! Fugiat dolores facilis itaque alias neque, rem suscipit,
      veniam cupiditate molestiae expedita, nostrum voluptas dignissimos. Alias
      aperiam obcaecati modi tempore doloremque, veniam recusandae quae sapiente
      minus dolor, placeat sequi maxime a accusantium debitis quia. Cum placeat
      et molestias velit perferendis excepturi delectus a aperiam optio, vero
      deleniti eum architecto corrupti harum nihil, qui ex nesciunt culpa
      expedita? Nesciunt harum illum eveniet id quod porro dignissimos,
      veritatis cupiditate quo beatae, mollitia doloremque autem possimus
      expedita optio iste pariatur eos consectetur molestiae similique
      temporibus saepe magnam? Rem explicabo minima nihil porro incidunt error
      sed totam repudiandae velit nulla, sapiente necessitatibus sunt, voluptas
      ipsam veritatis amet praesentium quod quos. Eaque nisi laudantium fugiat
      unde repellendus eius voluptates culpa numquam, fuga debitis quaerat sint?
      Repudiandae ad id veniam illum quae et, assumenda officia adipisci
      consectetur qui ea nemo iste fuga natus eos expedita dignissimos ipsam
      optio accusantium delectus eum rem est dolores aliquam! Error deleniti
      voluptatum, deserunt fugit voluptatibus libero a doloribus eum repellat
      dolore maiores debitis minus, sunt sit expedita optio nobis ullam! Facere
      impedit, inventore iste necessitatibus commodi obcaecati. Ducimus veniam
      numquam modi et unde cupiditate quia tenetur dignissimos, quam laborum qui
      sunt accusamus earum sapiente praesentium provident enim, iusto atque
      soluta dolorem architecto nostrum voluptatem debitis? Illum rerum nemo
      voluptate a animi aliquid aspernatur, pariatur libero minus quas ut unde
      minima saepe distinctio ratione repellendus accusamus adipisci magni.
      Placeat repellat ipsam architecto voluptatum doloribus possimus
      perspiciatis quod explicabo sequi repudiandae eius eum a quam, quis nisi
      modi veritatis minima dolore quos similique. Iusto atque culpa amet
      doloribus nam eligendi et cupiditate illum? Quis aut in corporis, error
      molestiae ex perferendis unde exercitationem dolorum dolores itaque
      asperiores quae fugiat, excepturi beatae delectus animi tempore! Illum
      architecto asperiores minima esse error obcaecati, harum doloremque
      expedita, eveniet officiis tempora deleniti id facere eos. Minus nulla
      voluptates pariatur cumque amet reiciendis quidem odit? Aperiam, aliquid
      fuga placeat distinctio ipsum consectetur sapiente quas quaerat maiores
      quidem? Sequi eligendi aut repudiandae eius consectetur ipsam incidunt,
      animi labore adipisci! Adipisci molestias provident alias animi quisquam
      fugit autem sequi. Veritatis quo laudantium molestias neque voluptate
      voluptas enim facere illum amet accusamus illo in dicta et autem
      exercitationem, officia consequatur debitis? Maxime, quas ratione
      veritatis quia hic quo commodi alias dolorum blanditiis doloremque
      similique asperiores incidunt optio sunt aliquam laboriosam dolores
      ducimus eos ex inventore voluptas fugiat assumenda mollitia. Dolore quo
      magni optio quasi deserunt laudantium eveniet excepturi, odio similique
      assumenda placeat nihil, fugiat cumque minima repellat? Natus fugiat ad
      cupiditate ipsa aut, distinctio ducimus unde quidem, deleniti provident
      fugit reprehenderit. Sequi consequatur iste optio at tempora, sint
      consectetur fuga provident velit eligendi ipsa esse illum odio natus iure
      corrupti error cumque. Aspernatur minus iusto quos facere sequi, fuga
      veritatis tempore porro iure, sunt repellendus impedit dolorem labore unde
      dolore facilis nisi aliquam blanditiis accusantium ipsam necessitatibus
      magni. Sint nihil excepturi vero recusandae, delectus odio ab laudantium!
      Nam rem alias beatae fugiat aliquid, consectetur voluptate quo laborum ad
      nisi, ut, pariatur quis explicabo atque! Quae accusamus libero nobis totam
      reiciendis quidem tempore temporibus quaerat. Cupiditate magni sint
      voluptates sed sit? Odio assumenda voluptates numquam dolor, ea doloribus
      molestias libero ab illum quod cum nulla, quisquam eaque laborum aliquam?
      Cumque autem, ea doloremque earum dolores officia veniam inventore labore
      ab eveniet ad illo, facilis consequuntur, fuga sunt iure asperiores
      corporis rem officiis? Vero id tempore minus nemo temporibus quod pariatur
      ducimus! Id natus excepturi minima beatae eius commodi consequatur
      blanditiis sit perspiciatis quasi nisi, nemo quae illum laboriosam vero
      aspernatur molestias dolores soluta velit? Esse itaque, incidunt harum
      quo, voluptatum perferendis nulla ad odit sit quidem facere dignissimos
      repellendus ratione eaque molestiae illum illo excepturi dolore deleniti
      consequuntur dicta. Similique placeat, dolorum exercitationem fugiat, fuga
      nisi nihil deserunt nam laudantium recusandae, atque eum ipsa accusantium
      omnis facilis quo officiis voluptates sed hic nostrum quisquam. Iusto
      nostrum autem laboriosam corporis mollitia, quae aperiam suscipit quaerat
      a tenetur tempora ullam omnis quasi magnam molestiae totam dignissimos
      aliquid illo! Omnis optio ex quia quae sint repellat a similique cumque
      libero quo repudiandae, iusto hic ratione repellendus ab commodi facilis,
      aperiam sit incidunt. Ab blanditiis corrupti, totam earum quia molestiae
      dolorum facere eius recusandae vero. Quae, tempore officiis quia numquam
      et quos.
    </p>
  );
};