fix: update bro cli and delete @brojs/i18nextreactconfig (#17)

Reviewed-on: #21
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

.gitignore

@@ -130,3 +130,4 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+.idea

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "always",
+  "max-len": ["error", 140, 2],
+  "tabWidth": 2,
+  "useTabs": false
+}

Jenkinsfile

@@ -0,0 +1,57 @@
+pipeline {
+    agent {
+        docker {
+            image 'node:20'
+        }
+    }
+
+    stages {
+        stage('install (ci)') {
+            steps {
+                sh 'node -v'
+                sh 'npm -v'
+                script {
+                    String tag = sh(returnStdout: true, script: 'git tag --contains').trim()
+                    String branchName = sh(returnStdout: true, script: 'git rev-parse --abbrev-ref HEAD').trim()
+                    String commit = sh(returnStdout: true, script: 'git log -1 --oneline').trim()
+                    String commitMsg = commit.substring(commit.indexOf(' ')).trim()
+
+                    if (tag) {
+                        currentBuild.displayName = "#${BUILD_NUMBER}, tag ${tag}"
+                    } else {
+                        currentBuild.displayName = "#${BUILD_NUMBER}, branch ${branchName}"
+                    }
+
+                    String author = sh(returnStdout: true, script: "git log -1 --pretty=format:'%an'").trim()
+                    currentBuild.description = "${author}<br />${commitMsg}"
+                    echo 'starting installing'
+                    sh 'npm ci'
+                }
+            }
+        }
+
+        stage('checks') {
+            parallel {
+                stage('eslint') {
+                    steps {
+                        sh 'npm run eslint'
+                    }
+                }
+
+                stage('build') {
+                    steps {
+                        sh 'npm run build'
+                    }
+                }
+            }
+        }
+
+        stage('clean-all') {
+            steps {
+                sh 'rm -rf .[!.]*'
+                sh 'rm -rf ./*'
+                sh 'ls -a'
+            }
+        }
+    }
+}

bro.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const pkg = require("./package");
 
 module.exports = {

eslint.config.mjs

@@ -0,0 +1,39 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import stylistic from '@stylistic/eslint-plugin';
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    plugins: {
+      '@stylistic': stylistic
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", // or "error"
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ],
+      "sort-imports": ["error", {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": true
+      }],
+      semi: ["error", "always"],
+      '@stylistic/indent': ['error', 2],
+      'react/prop-types': 'off'
+    },
+  }
+];

locales/ru.json

@@ -0,0 +1,33 @@
+{
+  "dry-wash.arm.master.add": "Добавить",
+  "dry-wash.arm.order.title": "Заказы",
+  "dry-wash.arm.order.status.progress": "Выполняется",
+  "dry-wash.arm.order.status.complete": "Завершено",
+  "dry-wash.arm.order.status.pending": "в ожидании",
+  "dry-wash.arm.order.status.working": "В работе",
+  "dry-wash.arm.order.status.canceled": "Отменено",
+  "dry-wash.arm.order.status.placeholder": "Выберите статус",
+  "dry-wash.arm.order.table.header.carNumber": "Номер машины",
+  "dry-wash.arm.order.table.header.washingTime": "Время мойки",
+  "dry-wash.arm.order.table.header.orderDate": "Дата заказа",
+  "dry-wash.arm.order.table.header.status": "Статус",
+  "dry-wash.arm.order.table.header.telephone": "Телефон",
+  "dry-wash.arm.order.table.header.location": "Расположение",
+  "dry-wash.arm.master.title": "Мастера",
+  "dry-wash.arm.master.table.header.name": "Имя",
+  "dry-wash.arm.master.table.header.currentJob": "Актуальная занятость",
+  "dry-wash.arm.master.table.header.phone": "Телефон",
+  "dry-wash.arm.master.table.header.actions": "Действия",
+  "dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера",
+  "dry-wash.arm.master.drawer.title": "Добавить нового мастера",
+  "dry-wash.arm.master.drawer.inputName.label": "ФИО",
+  "dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО",
+  "dry-wash.arm.master.drawer.inputPhone.label": "Номер телефона",
+  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
+  "dry-wash.arm.master.drawer.button.save": "Сохранить",
+  "dry-wash.arm.master.drawer.button.cancel": "Отменить",
+  "dry-wash.arm.master.sideBar.title": " Сухой мастер",
+  "dry-wash.arm.master.sideBar.title.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы"
+
+}

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "dry-wash-pl",
+    "name": "dry-wash",
     "version": "0.0.0",
     "description": "<a id=\"readme-top\"></a>",
     "main": "./src/index.tsx",
@@ -8,16 +8,38 @@
         "start": "brojs server --port=8099 --with-open-browser",
         "build": "npm run clean && brojs build --dev",
         "build:prod": "npm run clean && brojs build",
-        "clean": "rimraf dist"
+        "clean": "rimraf dist",
+        "eslint": "npx eslint .",
+        "eslint:fix": "npx eslint . --fix",
+        "preversion": "npm run eslint"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@brojs/cli": "^1.3.0",
+        "@brojs/cli": "^1.6.1",
+        "@chakra-ui/icons": "^2.2.4",
+        "@chakra-ui/react": "^2.4.2",
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@fontsource/open-sans": "^5.1.0",
+        "@types/react": "^18.3.12",
         "express": "^4.21.1",
+        "framer-motion": "^6.2.8",
+        "i18next": "^23.16.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.14.0",
+        "@stylistic/eslint-plugin": "^2.10.1",
+        "@types/react-dom": "^18.3.1",
+        "eslint": "^9.14.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.11.0",
+        "prettier": "3.3.3",
+        "typescript-eslint": "^8.12.2"
     }
 }

src/app.tsx

@@ -1,12 +1,15 @@
-import React from "react";
-import { BrowserRouter } from "react-router-dom";
-import Routers from "./routes";
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import Routers from './routes';
+import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
 
 const App = () => {
   return (
-    <BrowserRouter>
-      <Routers></Routers>
-    </BrowserRouter>
+    <ChakraProvider theme={chakraTheme}>
+      <BrowserRouter>
+        <Routers></Routers>
+      </BrowserRouter>
+    </ChakraProvider>
   );
 };
 

src/assets/icons/index.ts

@@ -0,0 +1 @@
+export { default as LogoSvg } from './dry-master-logo.svg';

src/assets/images/index.ts

@@ -0,0 +1 @@
+export { default as DemoVideoPosterImg } from './demo-video-poster.webp';

src/components/LayoutArm/LayoutArm.tsx

@@ -0,0 +1,17 @@
+import { Box, Flex } from '@chakra-ui/react';
+import Sidebar from '../Sidebar';
+import Orders from '../Orders';
+import Masters from '../Masters';
+import React from 'react';
+
+const LayoutArm = ({ currentPage, onSelectPage }) => (
+  <Flex h='100vh'>
+    <Sidebar onSelectPage={onSelectPage} />
+    <Box flex='1' bg='gray.50'>
+      {currentPage === 'orders' && <Orders />}
+      {currentPage === 'masters' && <Masters />}
+    </Box>
+  </Flex>
+);
+
+export default LayoutArm;

src/components/LayoutArm/index.ts

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

src/components/MasterActionsMenu/MasterActionsMenu.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from '@chakra-ui/react';
+import { EditIcon } from '@chakra-ui/icons';
+import i18next from 'i18next';
+
+const MasterActionsMenu = () => {
+  return (
+    <Menu>
+      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
+      <MenuList>
+        <MenuItem>
+          {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default MasterActionsMenu;

src/components/MasterActionsMenu/index.ts

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

src/components/MasterDrawer/MasterDrawer.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react';
+import i18next from 'i18next';
+
+const MasterDrawer = ({ isOpen, onClose }) => {
+  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
+
+  const handleSave = () => {
+    console.log(`Сохранение мастера: ${newMaster}`);
+    onClose();
+  };
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>
+          {i18next.t('dry-wash.arm.master.drawer.title')}
+        </DrawerHeader>
+        <DrawerBody>
+          <FormControl mb='4'>
+            <FormLabel>
+              {i18next.t('dry-wash.arm.master.drawer.inputName.label')}
+            </FormLabel>
+            <Input
+              value={newMaster.name}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, name: e.target.value })
+              }
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputName.placeholder',
+              )}
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel>
+              {' '}
+              {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
+            </FormLabel>
+            <Input
+              value={newMaster.phone}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, phone: e.target.value })
+              }
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputPhone.placeholder',
+              )}
+            />
+          </FormControl>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button colorScheme='teal' mr={3} onClick={handleSave}>
+            {i18next.t('dry-wash.arm.master.drawer.button.save')}
+          </Button>
+          <Button variant='ghost' onClick={onClose}>
+            {i18next.t('dry-wash.arm.master.drawer.button.cancel')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default MasterDrawer;

src/components/MasterDrawer/index.ts

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

src/components/MasterItem/MasterItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+import MasterActionsMenu from '../MasterActionsMenu';
+
+const MasterItem = ({ name, schedule, phone }) => {
+  return (
+    <Tr>
+      <Td>{name}</Td>
+      <Td>
+        <Stack direction='row'>
+          {schedule.map((time, index) => (
+            <Badge colorScheme={'green'} key={index}>
+              {time}
+            </Badge>
+          ))}
+        </Stack>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>
+        <MasterActionsMenu />
+      </Td>
+    </Tr>
+  );
+};
+
+export default MasterItem;

src/components/MasterItem/index.ts

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

src/components/Masters/Masters.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Button,
+  useDisclosure,
+  Flex,
+} from '@chakra-ui/react';
+import { mastersData } from '../../mocks';
+import MasterItem from '../MasterItem';
+import MasterDrawer from '../MasterDrawer';
+import i18next from 'i18next';
+
+const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];
+
+const Masters = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <Box p='8'>
+      <Flex justifyContent='space-between' alignItems='center' mb='5'>
+        <Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
+        <Button colorScheme='green' onClick={onOpen}>
+          + {i18next.t('dry-wash.arm.master.add')}
+        </Button>
+      </Flex>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name) => (
+              <Th key={name}>
+                {i18next.t(`dry-wash.arm.master.table.header.${name}`)}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {mastersData.map((master, index) => (
+            <MasterItem key={index} {...master} />
+          ))}
+        </Tbody>
+      </Table>
+      <MasterDrawer isOpen={isOpen} onClose={onClose} />
+    </Box>
+  );
+};
+
+export default Masters;

src/components/Masters/index.ts

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

src/components/OrderItem/OrderItem.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];
+
+const OrderItem = ({
+  carNumber,
+  washTime,
+  orderDate,
+  status,
+  phone,
+  location,
+}) => {
+  const [statusSelect, setStatus] = useState(status);
+
+  return (
+    <Tr>
+      <Td>{carNumber}</Td>
+      <Td>{washTime}</Td>
+      <Td>{orderDate}</Td>
+      <Td>
+        <Select
+          value={statusSelect}
+          onChange={(e) => setStatus(e.target.value)}
+          placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
+        >
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {i18next.t(`dry-wash.arm.order.status.${status}`)}
+            </option>
+          ))}
+        </Select>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>{location}</Td>
+    </Tr>
+  );
+};
+
+export default OrderItem;

src/components/OrderItem/index.ts

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

src/components/Orders/Orders.tsx

@@ -0,0 +1,40 @@
+import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+import { ordersData } from '../../mocks';
+import OrderItem from '../OrderItem';
+import i18next from 'i18next';
+const Orders = () => {
+  const TABLE_HEADERS = [
+    'carNumber',
+    'washingTime',
+    'orderDate',
+    'status',
+    'telephone',
+    'location',
+  ];
+  return (
+    <Box p='8'>
+      <Heading size='lg' mb='5'>
+        {i18next.t('dry-wash.arm.order.title')}
+      </Heading>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name, key) => (
+              <Th key={key}>
+                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {ordersData.map((order, index) => (
+            <OrderItem key={index} {...order} />
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default Orders;

src/components/Orders/index.ts

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

src/components/PageSpinner/PageSpinner.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { Flex, Spinner } from '@chakra-ui/react';
+
+export const PageSpinner: FC = () => {
+  return (
+    <Flex w='full' h='100vh' justifyContent='center' alignItems='center'>
+      <Spinner
+        thickness='5px'
+        speed='0.65s'
+        emptyColor='gray.200'
+        color='green.500'
+        size='xl'
+      />
+    </Flex>
+  );
+};

src/components/PageSpinner/index.ts

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

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,42 @@
+import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import React from 'react';
+import { Divider } from '@chakra-ui/react';
+import i18next from 'i18next';
+const Sidebar = ({ onSelectPage }) => (
+  <Box
+    borderRight='1px solid black'
+    bg='gray.50'
+    color='white'
+    w='250px'
+    p='5'
+    pt='8'
+  >
+    <Heading color='green' size='lg' mb='5'>
+      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
+    </Heading>
+
+    <VStack align='start' spacing='4'>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('orders')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
+      </Button>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('masters')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
+      </Button>
+      <Divider />
+    </VStack>
+  </Box>
+);
+
+export default Sidebar;

src/components/Sidebar/index.ts

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

src/components/index.ts

@@ -0,0 +1 @@
+export * from './PageSpinner';

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';

src/components/landing/CtaButton/CtaButton.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { ButtonProps, Button } from '@chakra-ui/react';
+
+export const CtaButton: FC<ButtonProps> = (props) => {
+  return (
+    <Button as={RouterLink} to='/dry-wash/order-form' colorScheme='primary' {...props}>
+      Сделать заказ
+    </Button>
+  );
+};

src/components/landing/CtaButton/index.ts

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

src/components/landing/Footer/Copyright/Copyright.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { Text } from '@chakra-ui/react';
+
+const currentYear = new Date().getFullYear();
+
+export const Copyright: FC = () => {
+  return <Text color='whiteAlpha.500'>&copy; {currentYear} DryMaster. Все права защищены</Text>;
+};

src/components/landing/Footer/Copyright/index.ts

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

src/components/landing/Footer/Footer.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { Link, List, ListItem } from '@chakra-ui/react';
+import { Link as RouterLink } from 'react-router-dom';
+import { SiteLogo, PageSection } from '../';
+import { Copyright } from './Copyright';
+
+export const Footer: FC = () => {
+  return (
+    <PageSection as='footer' py={5} bg='gray.700' color='white'>
+      <SiteLogo />
+      <Copyright />
+      <List spacing={2}>
+        {[
+          { to: '#', label: 'Политика конфиденциальности' },
+          { to: '#', label: 'Условия обслуживания' },
+          { to: '#', label: 'FAQ' },
+        ].map(({ to, label }, i) => (
+          <ListItem key={i}>
+            <Link as={RouterLink} to={to}>
+              {label}
+            </Link>
+          </ListItem>
+        ))}
+      </List>
+    </PageSection>
+  );
+};

src/components/landing/Footer/index.ts

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

src/components/landing/HeroSection/HeroSection.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
+import { DemoVideoPosterImg } from '../../../assets/images';
+import { CtaButton, SiteLogo, PageSection } from '../';
+
+type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
+
+export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
+  return (
+    <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
+      <Box
+        as='video'
+        src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
+        poster={DemoVideoPosterImg}
+        autoPlay
+        loop
+        muted
+        w='full'
+        h='full'
+        pos='absolute'
+        objectFit='cover'
+        filter='brightness(50%)'
+        zIndex={-1}
+      />
+      <PageSection
+        h='full'
+        minH='375px'
+        maxH='1000px'
+        py={10}
+        justifyContent='center'
+        alignItems='center'
+        spacing={8}
+      >
+        <Center>
+          <SiteLogo />
+        </Center>
+        <VStack spacing={4}>
+          <Heading
+            as='h1'
+            textAlign='center'
+            color='white'
+            __css={{ textWrap: 'balance' }}
+          >
+            Оживите свою поездку с помощью экологически чистого ухода!
+          </Heading>
+          <Text
+            textAlign='center'
+            __css={{ textWrap: 'balance' }}
+            color='white'
+          >
+            Ощутите максимальное удобство сухой мойки автомобилей, созданной для
+            того, чтобы планета стала чище
+          </Text>
+        </VStack>
+        <CtaButton size='lg' />
+      </PageSection>
+    </Box>
+  );
+};

src/components/landing/HeroSection/index.ts

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

src/components/landing/PageSection/PageSection.tsx

@@ -0,0 +1,12 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { StackProps, VStack } from '@chakra-ui/react';
+
+type PageSectionProps = StackProps & PropsWithChildren;
+
+export const PageSection: FC<PageSectionProps> = ({ children, ...restProps }) => {
+  return (
+    <VStack as='section' w='full' px={5} py={5} spacing={6} alignItems='flex-start' {...restProps}>
+      {children}
+    </VStack>
+  );
+};

src/components/landing/PageSection/index.ts

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

src/components/landing/SiteLogo/SiteLogo.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { Image } from '@chakra-ui/react';
+import { LogoSvg } from '../../../assets/icons';
+
+export const SiteLogo: FC = () => {
+  return <Image src={LogoSvg} alt='Логотип компании "Сухой мастер"' w={40} />;
+};
+
+// todo: add i18n for alt
+// todo: replace Image by SVG React component

src/components/landing/SiteLogo/index.ts

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

src/components/landing/SocialProofSection/ReviewsSlider/ReviewCard/ReviewCard.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { Card, Avatar, Text } from '@chakra-ui/react';
+
+type ReviewCardProps = {
+  firstname: string;
+  lastname: string;
+  picture: string;
+  text: string;
+};
+
+export const ReviewCard: FC<ReviewCardProps> = ({
+  firstname,
+  lastname,
+  picture,
+  text,
+}) => {
+  const name = [firstname, lastname].join(' ');
+
+  return (
+    <Card p={4} gap={2} alignItems='center' variant='elevated'>
+      <Avatar
+        name={name}
+        src={picture}
+        size='xl'
+        boxShadow='2px 2px 0 1px var(--chakra-colors-secondary-500)'
+      />
+      <Text
+        as='q'
+        fontSize='sm'
+        textAlign='center'
+        __css={{ textWrap: 'balance' }}
+      >
+        {text}
+      </Text>
+    </Card>
+  );
+};

src/components/landing/SocialProofSection/ReviewsSlider/ReviewCard/index.ts

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

src/components/landing/SocialProofSection/ReviewsSlider/ReviewsSlider.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useEffect, useState } from 'react';
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from '@chakra-ui/react';
+import { mockReviews } from '../../../../mocks/landing';
+import { ReviewCard } from './ReviewCard';
+
+const reviewsCount = mockReviews.length;
+const SLIDE_CHANGE_INTERVAL = 5000;
+
+export const ReviewsSlider: FC = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSlideShowStopped, setIsSlideShowStopped] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const newActiveTab = (activeTab + 1) % reviewsCount;
+      setActiveTab(newActiveTab);
+    }, SLIDE_CHANGE_INTERVAL);
+
+    if (isSlideShowStopped) {
+      clearInterval(timer);
+    }
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [activeTab]);
+
+  return (
+    <Tabs
+      index={activeTab}
+      onChange={(selectedTab) => {
+        setIsSlideShowStopped(true);
+        setActiveTab(selectedTab);
+      }}
+      display='flex'
+      flexDir='column'
+      alignItems='center'
+      variant='soft-rounded'
+      colorScheme='gray'
+    >
+      <TabList gap={2}>
+        {mockReviews.map(({ id }, i) => (
+          <Tab
+            key={id}
+            w={4}
+            h={4}
+            p={0}
+            bg='gray.100'
+            _selected={{
+              bg: 'secondary.100',
+            }}
+          >
+            <Text visibility='hidden'>{i}</Text>
+          </Tab>
+        ))}
+      </TabList>
+      <TabPanels>
+        {mockReviews.map(({ id, ...reviewProps }) => (
+          <TabPanel key={id}>
+            <ReviewCard {...reviewProps} />
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </Tabs>
+  );
+};

src/components/landing/SocialProofSection/ReviewsSlider/index.ts

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

src/components/landing/SocialProofSection/SocialProofSection.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import {
+  Heading,
+  HStack,
+} from '@chakra-ui/react';
+import { CtaButton, PageSection } from '../';
+import { ReviewsSlider } from './ReviewsSlider';
+
+export const SocialProofSection: FC = () => {
+  return (
+    <PageSection>
+      <Heading as='h2'>Нас выбирают</Heading>
+      <ReviewsSlider />
+      <HStack w='full' justify='flex-end'>
+        <CtaButton />
+      </HStack>
+    </PageSection>
+  );
+};

src/components/landing/SocialProofSection/index.ts

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

src/components/landing/index.ts

@@ -0,0 +1,7 @@
+export * from './CtaButton';
+export * from './PageSection';
+export * from './BenefitsSection'; // CtaButton, PageSection
+export * from './SocialProofSection'; // CtaButton, PageSection
+export * from './SiteLogo';
+export * from './Footer'; // PageSection, SiteLogo
+export * from './HeroSection'; // CtaButton, PageSection, SiteLogo

src/containers/LandingThemeProvider/Fonts.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Global } from '@emotion/react';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/700.css';
+
+const Fonts = () => (
+  <Global
+    styles={`
+      /* open-sans-cyrillic-400-normal */
+      @font-face {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url(./files/open-sans-cyrillic-400-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-400-normal.woff) format('woff');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* open-sans-cyrillic-700-normal */
+      @font-face {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url(./files/open-sans-cyrillic-700-normal.woff2) format('woff2'), url(./files/open-sans-cyrillic-700-normal.woff) format('woff');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      `}
+  />
+);
+
+export default Fonts;

src/containers/LandingThemeProvider/LandingThemeProvider.tsx

@@ -0,0 +1,13 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { default as landingTheme } from './theme-config';
+import Fonts from './Fonts';
+
+export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ChakraProvider theme={landingTheme}>
+      <Fonts />
+      {children}
+    </ChakraProvider>
+  );
+};

src/containers/LandingThemeProvider/index.ts

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

src/containers/LandingThemeProvider/theme-config.ts

@@ -0,0 +1,42 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const overrides = {
+  colors: {
+    primary: {
+      50: "#F1F8ED",
+      100: "#D9EACC",
+      200: "#C0DDAC",
+      300: "#A8D08B",
+      400: "#8FC26B",
+      500: "#77B54A",
+      600: "#5F913B",
+      700: "#476D2C",
+      800: "#2F481E",
+      900: "#18240F"
+    },
+    secondary: {
+      50: "#E7F7FD",
+      100: "#BCEAFB",
+      200: "#91DCF8",
+      300: "#66CEF5",
+      400: "#3BC1F2",
+      500: "#0FB3F0",
+      600: "#0C8FC0",
+      700: "#096B90",
+      800: "#064860",
+      900: "#032430"
+    }
+  },
+  fonts: {
+    heading: `'Open Sans', sans-serif`,
+  },
+  styles: {
+    global: {
+      body: {
+        bg: 'gray.100'
+      }
+    },
+  },
+};
+
+export default extendTheme(overrides);

src/containers/index.ts

@@ -0,0 +1 @@
+export * from './LandingThemeProvider';

src/index.tsx

@@ -1,22 +1,28 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/display-name */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-  
+import { i18nextReactInitConfig } from '@brojs/cli';
 import App from './app';
-  
-export default () => <App/>;
-  
-let rootElement: ReactDOM.Root
-  
-export const mount = (Сomponent, element = document.getElementById('app')) => {
-  const rootElement = ReactDOM.createRoot(element);
-  rootElement.render(<Сomponent/>);
+import i18next from 'i18next';
 
-  if(module.hot) {
-      module.hot.accept('./app', ()=> {
-        rootElement.render(<Сomponent/>);
-      })
+i18next.t = i18next.t.bind(i18next);
+const i18nextPromise = i18nextReactInitConfig(i18next);
+export default () => <App />;
+
+let rootElement: ReactDOM.Root;
+
+export const mount = async (
+  Component,
+  element = document.getElementById('app'),
+) => {
+  const rootElement = ReactDOM.createRoot(element);
+  await i18nextPromise;
+  rootElement.render(<Component />);
+  if (module.hot) {
+    module.hot.accept('./app', async () => {
+      await i18next.reloadResources();
+      rootElement.render(<Component />);
+    });
   }
 };
 

src/mocks/index.ts

@@ -0,0 +1,35 @@
+export const mastersData = [
+  {
+    id: 'masters1',
+    name: 'Иван Иванов',
+    schedule: ['15:00 - 16:30', '17:00 - 18:00'],
+    phone: '+7 900 123 45 67',
+  },
+  {
+    id: 'masters2',
+    name: 'Сергей Петров',
+    schedule: ['10:00 - 12:30', '14:00 - 15:30', '16:00 - 17:00'],
+    phone: '+7 900 234 56 78',
+  },
+];
+
+export const ordersData = [
+  {
+    id: 'order1',
+    carNumber: 'A123BC',
+    washTime: '10:30',
+    orderDate: '2024-10-31',
+    status: 'progress',
+    phone: '79001234567',
+    location: 'Казань, ул. Баумана, 1',
+  },
+  {
+    id: 'order2',
+    carNumber: 'B456CD',
+    washTime: '11:00',
+    orderDate: '2024-10-31',
+    status: 'complete',
+    phone: '79002345678',
+    location: 'Казань, ул. Кремлёвская, 3',
+  },
+];

src/mocks/landing/index.ts

@@ -0,0 +1,34 @@
+type ReviewItem = {
+  id: string;
+  firstname: string;
+  lastname: string;
+  picture: string;
+  text: string;
+};
+
+export const mockReviews: ReviewItem[] = [
+  {
+    firstname: 'Анна',
+    lastname: 'Смирнова',
+    picture: 'https://img.freepik.com/free-photo/indoor-portrait-beautiful-freckled-woman-with-dark-curly-hair-wears-fashionable-striped-shirt-rejoices-day-off-isolated-white-wall-curly-satisfied-woman-stands-indoor-alone_273609-15765.jpg',
+    text: "Недавно воспользовалась услугами сухой мойки автомобилей и осталась крайне удовлетворена. Процесс был проведён профессионально: сотрудники использовали качественные средства, которые не повредили лакокрасочное покрытие. Особенно впечатлила возможность мыть машину без воды, что не только экономит ресурсы, но и бережет окружающую среду. Рекомендую всем, кто заботится о своём автомобиле и экологии!"
+  },
+  {
+    firstname: 'Дмитрий',
+    lastname: 'Петров',
+    picture: 'https://img.freepik.com/free-photo/calm-handsome-curly-haired-boy-posing-isolated-light-grey-standing-still-looks-peaceful-wearing-casual-manner-youth-style-concept_176532-8831.jpg',
+    text: "Как же я рад, что нашел эту сухую мойку! Моя машина сияет, как новенькая! 🌟 Сначала был скептически настроен, думал, как же без воды можно отмыть всё это? Но результат превзошёл все ожидания! Ветеринар мойки профессионально подошёл к делу, и она теперь выглядит потрясающе. Если вы хотите, чтобы ваш автомобиль всегда выглядел на 100%, обязательно попробуйте!"
+  },
+  {
+    firstname: 'Алексей',
+    lastname: 'Сидоров',
+    picture: 'https://img.freepik.com/free-photo/waist-up-portrait-handsome-serious-unshaven-male-keeps-hands-together-dressed-dark-blue-shirt-has-talk-with-interlocutor-stands-against-white-wall-self-confident-man-freelancer_273609-16320.jpg',
+    text: "Сухая мойка автомобилей - интересное решение, которое я опробовал недавно. В целом остался доволен качеством работы. Однако, не все загрязнения удалось удалить с первого раза, но сотрудник предложил дополнительные услуги, что меня устроило. Плюс, большое внимание уделили защите поверхности, что тоже немаловажно. Думаю, в следующий раз снова воспользуюсь этой услугой."
+  },
+  {
+    firstname: 'Екатерина',
+    lastname: 'Иванова',
+    picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
+    text: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
+  },
+].map((data, i) => ({ id: `review${i}`, ...data }));

src/pages/arm/index.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from 'react';
+import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {
-  return <h1>Arm </h1>;
+  const [currentPage, setCurrentPage] = useState('orders');
+
+  return <LayoutArm currentPage={currentPage} onSelectPage={setCurrentPage} />;
 };
 
 export default Page;

src/pages/landing/index.tsx

@@ -1,7 +1,37 @@
-import React from "react";
+import React, { FC } from 'react';
+import { Box, Container, VStack } from '@chakra-ui/react';
+import {
+  BenefitsSection,
+  Footer,
+  HeroSection,
+  SocialProofSection,
+} from '../../components/landing';
+import { LandingThemeProvider } from '../../containers';
 
-const Page = () => {
-  return <h1>Landing</h1>;
+const Page: FC = () => {
+  return (
+    <LandingThemeProvider>
+      <Container
+        w='full'
+        maxWidth='container.xl'
+        minH='100vh'
+        padding={0}
+        bg='white'
+        centerContent
+      >
+        <VStack w='full' h='full' alignItems='stretch'>
+          <HeroSection flexShrink={0} />
+          <Box flexGrow={1}>
+            <VStack as='main'>
+              <BenefitsSection />
+              <SocialProofSection />
+            </VStack>
+          </Box>
+          <Footer />
+        </VStack>
+      </Container>
+    </LandingThemeProvider>
+  );
 };
 
 export default Page;

src/routes.tsx

@@ -1,16 +1,24 @@
-import React from "react";
-import { Routes, Route } from "react-router-dom";
-import Arm from "./pages/arm";
-import Order from "./pages/order-view";
-import Landing from "./pages/landing";
+import React, { lazy, Suspense } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { PageSpinner } from './components';
+import Arm from './pages/arm';
+
+const Landing = lazy(() => import('./pages/landing'));
+const OrderForm = lazy(() => import('./pages/order-form'));
+const OrderView = lazy(() => import('./pages/order-view'));
 
 const Routers = () => {
   return (
-    <Routes>
-      <Route path="/dry-wash-pl" element={<Landing />}></Route>
-      <Route path="/dry-wash-pl/order" element={<Order />}></Route>
-      <Route path="/dry-wash-pl/arm" element={<Arm />}></Route>
-    </Routes>
+    <Suspense fallback={<PageSpinner />}>
+      <Routes>
+        <Route path='/dry-wash'>
+          <Route index element={<Landing />} />
+          <Route path='order-form' element={<OrderForm />} />
+          <Route path='order-view' element={<OrderView />} />
+        </Route>
+        <Route path='/dry-wash/arm' element={<Arm />}></Route>
+      </Routes>
+    </Suspense>
   );
 };
 

stubs/api/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const router = require('express').Router();
 
 module.exports = router;

types.d.ts

@@ -0,0 +1,19 @@
+declare interface NodeModule {
+  hot?: {
+    accept: (path: string, callback: () => void) => void;
+  };
+}
+
+declare module "*.svg" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const value: any;
+  export = value;
+}
+
+declare module "*.webp" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const value: any;
+  export = value;
+}
+
+declare const __webpack_public_path__: string;