add Landing page (#7)

src/components/landing/BenefitsSection/BenefitsSection.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import {
+  MdEco,
+  MdMiscellaneousServices,
+  MdPlace,
+  MdHandshake,
+} from 'react-icons/md';
+import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
+import { CtaButton, PageSection } from '../';
+import { ListItem } from './ListItem';
+
+export const BenefitsSection: FC = () => {
+  return (
+    <PageSection>
+      <VStack w='full' spacing={2}>
+        <Heading as='h2'>Преимущества экологичной автомойки</Heading>
+        <Text>
+          Откройте для себя преимущества наших услуг по химчистке автомобилей
+        </Text>
+      </VStack>
+      <List display='flex' flexDirection='column' spacing={3}>
+        {[
+          {
+            Icon: MdEco,
+            children: 'Экологически безопасные продукты',
+          },
+          {
+            Icon: MdMiscellaneousServices,
+            children: 'Быстрое и эффективное обслуживание',
+          },
+          {
+            Icon: MdPlace,
+            children: 'Удобный мобильный доступ',
+          },
+          {
+            Icon: MdHandshake,
+            children: 'Надежный и заслуживающий доверия',
+          },
+        ].map((props, i) => (
+          <ListItem key={i} {...props} />
+        ))}
+      </List>
+      <HStack w='full' justify='flex-end'>
+        <CtaButton />
+      </HStack>
+    </PageSection>
+  );
+};

src/components/landing/BenefitsSection/ListItem/ListItem.tsx

@@ -0,0 +1,16 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { ListIcon, ListItem as ChakraListItem } from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+
+type ListItemProps = PropsWithChildren & {
+  Icon: IconType;
+};
+
+export const ListItem: FC<ListItemProps> = ({ Icon, children }) => {
+  return (
+    <ChakraListItem display='inline-flex'>
+      <ListIcon as={Icon} color='primary.500' boxSize='6' />
+      {children}
+    </ChakraListItem>
+  );
+};

src/components/landing/BenefitsSection/ListItem/index.ts

@@ -0,0 +1 @@
+export { ListItem } from './ListItem';

src/components/landing/BenefitsSection/index.ts

@@ -0,0 +1 @@
+export { BenefitsSection } from './BenefitsSection';