0.1.1

Reviewed-on: #34
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'
+            }
+        }
+    }
+}

README.md

@@ -45,10 +45,12 @@
 ### MVP1
 
 **1. Landing**
+
 - преимущества сервиса
   - оставить заявку (редирект на Страницу оформления заказа)
 
 **2. Страница для оформления заказа**
+
 - форма
   - номер машины (mask input)
   - цвет машины
@@ -58,10 +60,12 @@
 - после заполнения редирект на страницу с деталями заказа
 
 **3. Страница с деталями заказа**
+
 - описание заказа
 - детали заказа (id, статус)
 
 **3. АРМ оператора**
+
 - список заказов (RUD)
   - id заказа
   - статус заказа (готово / не готово)
@@ -72,7 +76,6 @@
   - кнопка "Добавить"
   - кнопка "Удалить"
 
-
 ### Built With
 
 [![React][React.js]][React-url]
@@ -103,6 +106,14 @@
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+## Instructions
+### Stubs types generation
+1. generate types with json-literal-typer (should be installed globally)
+   ```sh
+   npx json-literal-typer -i <path to json> -o <path to output ts-file>
+   ```
+2. export default type from output file
+
 <!-- PARTICIPANTS -->
 
 ## Participants

bro.config.js

@@ -1,7 +1,9 @@
-const pkg = require("./package");
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
+const pkg = require('./package');
 
 module.exports = {
-  apiPath: "stubs/api",
+  apiPath: 'stubs/api',
   webpackConfig: {
     output: {
       publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
@@ -9,17 +11,19 @@ module.exports = {
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
-    "dry-wash.main": "/dry-wash",
+    'dry-wash.main': '/dry-wash',
-    "dry-wash.create": "/order",
+    'dry-wash.create': '/order',
-    "dry-wash.view.order": "/order/:orderId",
+    'dry-wash.view.order': '/order/:orderId',
-    "dry-wash.arm": "/arm",
+    'dry-wash.arm.master': 'master',
+    'dry-wash.arm.order': 'order',
+    'dry-wash.arm': '/arm/*',
   },
   features: {
-    "dry-wash-pl": {
+    'dry-wash-pl': {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    "dry-wash-pl.api": "/api",
+    'dry-wash-pl.api': '/api',
   },
 };

eslint.config.mjs

@@ -0,0 +1,48 @@
+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';
+import pluginImport from 'eslint-plugin-import';
+
+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,
+      'import': pluginImport,
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", // or "error"
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ],
+      "sort-imports": ["off"],
+      "import/order": [
+        "error",
+        {
+          "groups": [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            ["sibling", "index"]
+          ],
+          "newlines-between": "always",
+        }
+      ],
+      semi: ["error", "always"],
+      '@stylistic/indent': ['error', 2],
+      'react/prop-types': 'off'
+    },
+  }
+];

locales/en.json

@@ -0,0 +1,53 @@
+{
+  "dry-wash.landing.benefits-section.description": "Discover the benefits of our car dry cleaning services",
+  "dry-wash.landing.benefits-section.heading": "Advantages of an eco-friendly car wash",
+  "dry-wash.landing.benefits-section.list.0": "Environmentally friendly products",
+  "dry-wash.landing.benefits-section.list.1": "Fast and efficient service",
+  "dry-wash.landing.benefits-section.list.2": "Convenient mobile access",
+  "dry-wash.landing.benefits-section.list.3": "Reliable and trustworthy",
+  "dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. All rights reserved",
+  "dry-wash.landing.footer.links.faq": "FAQ",
+  "dry-wash.landing.footer.links.privacy-policy": "Privacy policy",
+  "dry-wash.landing.footer.links.service-terms": "Terms of service",
+  "dry-wash.landing.hero-section.description": "Experience the ultimate convenience of a dry car wash, designed for a cleaner planet.",
+  "dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
+  "dry-wash.landing.make-order-button": "Make order",
+  "dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
+  "dry-wash.landing.social-proof-section.heading": "We are being chosen",
+  "dry-wash.arm.master.add": "Add",
+  "dry-wash.arm.order.title": "Orders",
+  "dry-wash.arm.order.status.progress": "In Progress",
+  "dry-wash.arm.order.status.complete": "Completed",
+  "dry-wash.arm.order.status.pending": "Pending",
+  "dry-wash.arm.order.status.working": "Working",
+  "dry-wash.arm.order.status.canceled": "Canceled",
+  "dry-wash.arm.order.status.placeholder": "Select Status",
+  "dry-wash.arm.order.table.header.carNumber": "Car Number",
+  "dry-wash.arm.order.table.header.washingTime": "Washing Time",
+  "dry-wash.arm.order.table.header.orderDate": "Order Date",
+  "dry-wash.arm.order.table.header.status": "Status",
+  "dry-wash.arm.order.table.header.telephone": "Telephone",
+  "dry-wash.arm.order.table.header.location": "Location",
+  "dry-wash.arm.master.title": "Masters",
+  "dry-wash.arm.master.table.header.name": "Name",
+  "dry-wash.arm.master.table.header.currentJob": "Current Job",
+  "dry-wash.arm.master.table.header.phone": "Phone",
+  "dry-wash.arm.master.table.header.actions": "Actions",
+  "dry-wash.arm.master.table.actionsMenu.delete": "Delete Master",
+  "dry-wash.arm.master.drawer.title": "Add New Master",
+  "dry-wash.arm.master.drawer.inputName.label": "Full Name",
+  "dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name",
+  "dry-wash.arm.master.drawer.inputPhone.label": "Phone Number",
+  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
+  "dry-wash.arm.master.drawer.button.save": "Save",
+  "dry-wash.arm.master.drawer.button.cancel": "Cancel",
+  "dry-wash.arm.master.sideBar.orders": "Orders",
+  "dry-wash.arm.master.sideBar.master": "Masters",
+  "dry-wash.arm.master.sideBar.title": "Dry Master",
+  "dry-wash.notFound.title": "Page Not Found",
+  "dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.",
+  "dry-wash.notFound.button.back": "Back to Home",
+  "dry-wash.errorBoundary.title": "Something went wrong",
+  "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
+  "dry-wash.errorBoundary.button.reload": "Reload Page"
+}

locales/ru.json

@@ -0,0 +1,54 @@
+{
+  "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.orders": "Заказы",
+  "dry-wash.arm.master.sideBar.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title": "Сухой мастер",
+  "dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
+  "dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
+  "dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
+  "dry-wash.landing.benefits-section.list.1": "Быстрое и эффективное обслуживание",
+  "dry-wash.landing.benefits-section.list.2": "Удобный мобильный доступ",
+  "dry-wash.landing.benefits-section.list.3": "Надежный и заслуживающий доверия",
+  "dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. Все права защищены",
+  "dry-wash.landing.footer.links.faq": "FAQ",
+  "dry-wash.landing.footer.links.privacy-policy": "Политика конфиденциальности",
+  "dry-wash.landing.footer.links.service-terms": "Условия обслуживания",
+  "dry-wash.landing.hero-section.description": "Ощутите максимальное удобство сухой мойки автомобилей, созданной для того, чтобы планета стала чище",
+  "dry-wash.landing.hero-section.headline": "Оживите свою поездку с помощью экологически чистого ухода!",
+  "dry-wash.landing.make-order-button": "Сделать заказ",
+  "dry-wash.landing.site-logo": "Логотип компании \u00ABDry Master\u00BB",
+  "dry-wash.landing.social-proof-section.heading": "Нас выбирают",
+  "dry-wash.notFound.title": "Страница не найдена",
+  "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
+  "dry-wash.notFound.button.back": "Вернуться на главную",
+  "dry-wash.errorBoundary.title":"Что-то пошло не так",
+  "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+}

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "dry-wash-pl",
+    "name": "dry-wash",
-    "version": "0.0.0",
+    "version": "0.1.1",
     "description": "<a id=\"readme-top\"></a>",
     "main": "./src/index.tsx",
     "scripts": {
@@ -8,16 +8,42 @@
         "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.3",
+        "@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",
+        "@lottiefiles/react-lottie-player": "^3.5.4",
+        "@types/react": "^18.3.12",
+        "dayjs": "^1.11.13",
         "express": "^4.21.1",
+        "framer-motion": "^6.2.8",
+        "i18next": "^23.16.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-i18next": "^15.1.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-import": "^2.31.0",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.11.0",
+        "prettier": "3.3.3",
+        "typescript-eslint": "^8.12.2"
     }
 }

src/__data__/urls.ts

@@ -0,0 +1,40 @@
+import { generatePath } from 'react-router-dom';
+import { getNavigationValue } from '@brojs/cli';
+
+import { Order } from '../models';
+
+const getFullUrls = (url: string) =>
+  `${getNavigationValue('dry-wash.main')}${url}`;
+
+export const URLs = {
+  landing: {
+    url: getNavigationValue('dry-wash.main'),
+    getUrl() {
+      return this.url;
+    },
+  },
+  orderForm: {
+    url: getNavigationValue('dry-wash.create'),
+    getUrl() {
+      return this.url;
+    },
+  },
+  orderView: {
+    url: getNavigationValue('dry-wash.view.order'),
+    getUrl(orderId: Order.Id) {
+      return generatePath(this.url, { orderId });
+    },
+  },
+  armMaster: {
+    url: getNavigationValue('dry-wash.arm.master'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
+  },
+  armOrder: {
+    url: getNavigationValue('dry-wash.arm.order'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
+  },
+  armBase: {
+    url: getFullUrls(getNavigationValue('dry-wash.arm')),
+    isOn: Boolean(getNavigationValue('dry-wash.arm')),
+  },
+};

src/app.tsx

@@ -1,12 +1,19 @@
-import React from "react";
+import React from 'react';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
-import Routers from "./routes";
+import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
+
+import Routers from './routes';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const App = () => {
   return (
-    <BrowserRouter>
+    <ChakraProvider theme={chakraTheme}>
-      <Routers></Routers>
+      <ErrorBoundary>
-    </BrowserRouter>
+        <BrowserRouter>
+          <Routers />
+        </BrowserRouter>
+      </ErrorBoundary>
+    </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/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,65 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    const { hasError } = this.state;
+    //TODO: добавить анимацию после залива 404 страницы
+    //TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
+    if (hasError) {
+      return (
+        <Center minH='100vh'>
+          <VStack spacing={4} textAlign='center'>
+            <Heading as='h1' size='2xl'>
+              {i18next.t('~:dry-wash.errorBoundary.title')}
+            </Heading>
+            <Text fontSize='lg'>
+              {i18next.t('~:dry-wash.errorBoundary.description')}
+            </Text>
+            <Button
+              colorScheme='teal'
+              size='lg'
+              variant='outline'
+              onClick={() => window.location.reload()}
+            >
+              {i18next.t('~:dry-wash.errorBoundary.button.reload')}
+            </Button>
+          </VStack>
+        </Center>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.ts

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

src/components/LayoutArm/LayoutArm.tsx

@@ -0,0 +1,37 @@
+import { Box, Flex } from '@chakra-ui/react';
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import Sidebar from '../Sidebar';
+import Orders from '../Orders';
+import Masters from '../Masters';
+import { URLs } from '../../__data__/urls';
+
+const LayoutArm = () => {
+  let defaultRedirect = null;
+
+  if (URLs.armOrder.isOn) {
+    defaultRedirect = URLs.armOrder.url;
+  } else if (URLs.armMaster.isOn) {
+    defaultRedirect = URLs.armMaster.url;
+  }
+
+  return (
+    <Flex h='100vh'>
+      <Sidebar />
+      <Box flex='1' bg='gray.50'>
+        <Routes>
+          <Route index element={<Navigate to={defaultRedirect} replace />} />
+          {URLs.armOrder.isOn && (
+            <Route path={URLs.armOrder.url} element={<Orders />} />
+          )}
+          {URLs.armMaster.isOn && (
+            <Route path={URLs.armMaster.url} element={<Masters />} />
+          )}
+        </Routes>
+      </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,27 @@
+import React from 'react';
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from '@chakra-ui/react';
+import { EditIcon } from '@chakra-ui/icons';
+import { useTranslation } from 'react-i18next';
+
+const MasterActionsMenu = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
+  });
+
+  return (
+    <Menu>
+      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
+      <MenuList>
+        <MenuItem>{t('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,70 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+const MasterDrawer = ({ isOpen, onClose }) => {
+  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
+
+  const handleSave = () => {
+    console.log(`Сохранение мастера: ${newMaster}`);
+    onClose();
+  };
+
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.drawer',
+  });
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>{t('title')}</DrawerHeader>
+        <DrawerBody>
+          <FormControl mb='4'>
+            <FormLabel>{t('inputName.label')}</FormLabel>
+            <Input
+              value={newMaster.name}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, name: e.target.value })
+              }
+              placeholder={t('inputName.placeholder')}
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel> {t('inputPhone.label')}</FormLabel>
+            <Input
+              value={newMaster.phone}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, phone: e.target.value })
+              }
+              placeholder={t('inputPhone.placeholder')}
+            />
+          </FormControl>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button colorScheme='teal' mr={3} onClick={handleSave}>
+            {t('button.save')}
+          </Button>
+          <Button variant='ghost' onClick={onClose}>
+            {t('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,30 @@
+import React from 'react';
+import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+
+import MasterActionsMenu from '../MasterActionsMenu';
+import { getTimeSlot } from '../../lib/date-helpers';
+
+const MasterItem = ({ name, schedule, phone }) => {
+  return (
+    <Tr>
+      <Td>{name}</Td>
+      <Td>
+        <Stack direction='row'>
+          {schedule.map(({ startWashTime, endWashTime }, index) => (
+            <Badge colorScheme={'green'} key={index}>
+              {getTimeSlot(startWashTime, endWashTime)}
+            </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,61 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Button,
+  useDisclosure,
+  Flex,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+import MasterItem from '../MasterItem';
+import MasterDrawer from '../MasterDrawer';
+import data from '../../../stubs/json/arm-masters/success.json';
+
+const TABLE_HEADERS = [
+  'name' as const,
+  'currentJob' as const,
+  'phone' as const,
+  'actions' as const,
+];
+
+const Masters = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master',
+  });
+
+  return (
+    <Box p='8'>
+      <Flex justifyContent='space-between' alignItems='center' mb='5'>
+        <Heading size='lg'> {t('title')}</Heading>
+        <Button colorScheme='green' onClick={onOpen}>
+          + {t('add')}
+        </Button>
+      </Flex>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name) => (
+              <Th key={name}>{t(`table.header.${name}`)}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.body.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,70 @@
+import React, { useState } from 'react';
+import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+
+import { getTimeSlot } from '../../lib/date-helpers';
+
+const statuses = [
+  'pending' as const,
+  'progress' as const,
+  'working' as const,
+  'canceled' as const,
+  'complete' as const,
+];
+
+type GetArrItemType<ArrType> =
+  ArrType extends Array<infer ItemType> ? ItemType : never;
+
+export type OrderProps = {
+  carNumber?: string;
+  startWashTime?: string;
+  endWashTime?: string;
+  orderDate?: string;
+  status?: GetArrItemType<typeof statuses>;
+  phone?: string;
+  location?: string;
+};
+
+const OrderItem = ({
+  carNumber,
+  startWashTime,
+  endWashTime,
+  orderDate,
+  status,
+  phone,
+  location,
+}: OrderProps) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order',
+  });
+
+  const [statusSelect, setStatus] = useState(status);
+
+  return (
+    <Tr>
+      <Td>{carNumber}</Td>
+      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
+      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
+      <Td>
+        <Select
+          value={statusSelect}
+          onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
+          placeholder={t(`status.placeholder`)}
+        >
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {t(`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,50 @@
+import React from 'react';
+import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+import OrderItem from '../OrderItem';
+import { OrderProps } from '../OrderItem/OrderItem';
+import data from '../../../stubs/json/arm-orders/success.json';
+
+const Orders = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order',
+  });
+
+  const TABLE_HEADERS = [
+    'carNumber' as const,
+    'washingTime' as const,
+    'orderDate' as const,
+    'status' as const,
+    'telephone' as const,
+    'location' as const,
+  ];
+
+  return (
+    <Box p='8'>
+      <Heading size='lg' mb='5'>
+        {t('title')}
+      </Heading>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name, key) => (
+              <Th key={key}>{t(`table.header.${name}`)}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.body.map((order, index) => (
+            <OrderItem
+              key={index}
+              {...order}
+              status={order.status as OrderProps['status']}
+            />
+          ))}
+        </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,60 @@
+import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
+import React from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import { URLs } from '../../__data__/urls';
+
+const Sidebar = () => {
+  const location = useLocation();
+  const isActive = (keyword: string) => location.pathname.includes(keyword);
+
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.sideBar',
+  });
+
+  return (
+    <Box
+      borderRight='1px solid black'
+      bg='gray.50'
+      color='white'
+      w='250px'
+      p='5'
+      pt='8'
+    >
+      <Heading color='green' size='lg' mb='5'>
+        {t('title')}
+      </Heading>
+
+      <VStack align='start' spacing='4'>
+        <Divider />
+        {URLs.armOrder.isOn && (
+          <Button
+            as={Link}
+            to={URLs.armOrder.url}
+            w='100%'
+            colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
+            variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
+          >
+            {t('orders')}
+          </Button>
+        )}
+        <Divider />
+        {URLs.armMaster.isOn && (
+          <Button
+            as={Link}
+            to={URLs.armMaster.url}
+            w='100%'
+            colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
+            variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
+          >
+            {t('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,34 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
+
+import { CtaButton, PageSection } from '../';
+
+import { ListItem } from './ListItem';
+import { BenefitsSectionProps } from './types';
+import { iconsMap } from './helper';
+
+export const BenefitsSection: FC<BenefitsSectionProps> = ({
+  data: { heading, description, list } = {},
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
+
+  return (
+    <PageSection>
+      <VStack w='full' spacing={2}>
+        <Heading as='h2'>{t(heading)}</Heading>
+        <Text>{t(description)}</Text>
+      </VStack>
+      <List display='flex' flexDirection='column' spacing={3}>
+        {list.map((itemKey, i) => (
+          <ListItem key={i} Icon={iconsMap[itemKey]}>
+            {t(itemKey)}
+          </ListItem>
+        ))}
+      </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';
+
+export 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 { type ListItemProps, ListItem } from './ListItem';

src/components/landing/BenefitsSection/helper.ts

@@ -0,0 +1,13 @@
+import { IconType } from "react-icons";
+import { MdEco, MdMiscellaneousServices, MdPlace, MdHandshake } from "react-icons/md";
+
+import { ArrElement } from "../../../lib";
+
+import { BenefitsList } from "./types";
+
+export const iconsMap: Record<ArrElement<BenefitsList>, IconType> = {
+  "benefits-section.list.0": MdEco,
+  "benefits-section.list.1": MdMiscellaneousServices,
+  "benefits-section.list.2": MdPlace,
+  "benefits-section.list.3": MdHandshake,
+};

src/components/landing/BenefitsSection/index.ts

@@ -0,0 +1,2 @@
+export type { BenefitsSectionProps } from './types';
+export { BenefitsSection } from './BenefitsSection';

src/components/landing/BenefitsSection/types.ts

@@ -0,0 +1,14 @@
+export type BenefitsList = [
+  'benefits-section.list.0',
+  'benefits-section.list.1',
+  'benefits-section.list.2',
+  'benefits-section.list.3',
+];
+
+export type BenefitsSectionProps = {
+  data: {
+    heading: 'benefits-section.heading';
+    description: 'benefits-section.description';
+    list: BenefitsList;
+  };
+};

src/components/landing/CtaButton/CtaButton.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link as RouterLink } from 'react-router-dom';
+import { ButtonProps, Button } from '@chakra-ui/react';
+
+import { URLs } from '../../../__data__/urls';
+
+export const CtaButton: FC<ButtonProps> = (props) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
+
+  return (
+    <Button
+      as={RouterLink}
+      to={URLs.orderForm.getUrl()}
+      colorScheme='primary'
+      {...props}
+    >
+      {t('make-order-button')}
+    </Button>
+  );
+};

src/components/landing/CtaButton/index.ts

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

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

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from '@chakra-ui/react';
+
+const currentYear = new Date().getFullYear();
+
+export const Copyright: FC = () => {
+  const { t } = useTranslation();
+
+  return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
+};

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

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

src/components/landing/Footer/Footer.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+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 = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.footer.links',
+  });
+
+  const listData = [
+    { to: '#', label: t('privacy-policy') },
+    { to: '#', label: t('service-terms') },
+    { to: '#', label: t('faq')  },
+  ];
+
+  return (
+    <PageSection as='footer' py={5} bg='gray.700' color='white'>
+      <SiteLogo />
+      <Copyright />
+      <List spacing={2}>
+        {listData.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,65 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Heading, Text, Center, VStack } from '@chakra-ui/react';
+
+import { DemoVideoPosterImg } from '../../../assets/images';
+import { CtaButton, SiteLogo, PageSection } from '../';
+
+import { HeroSectionProps } from './types';
+
+export const HeroSection: FC<HeroSectionProps> = ({
+  data: { headline, description, video } = {},
+  flexShrink,
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
+
+  return (
+    <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
+      <Box
+        as='video'
+        src={`${__webpack_public_path__}/remote-assets/${video}`}
+        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' }}
+          >
+            {t(headline)}
+          </Heading>
+          <Text
+            textAlign='center'
+            __css={{ textWrap: 'balance' }}
+            color='white'
+          >
+            {t(description)}
+          </Text>
+        </VStack>
+        <CtaButton size='lg' />
+      </PageSection>
+    </Box>
+  );
+};

src/components/landing/HeroSection/index.ts

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

src/components/landing/HeroSection/types.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from "@chakra-ui/react";
+
+export type HeroSectionProps = {
+  data: {
+    headline: 'hero-section.headline';
+    description: 'hero-section.description';
+    video: string;
+  };
+} & Pick<BoxProps, 'flexShrink'>;

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,13 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image } from '@chakra-ui/react';
+
+import { LogoSvg } from '../../../assets/icons';
+
+export const SiteLogo: FC = () => {
+  const { t } = useTranslation();
+
+  return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
+};
+
+// 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,80 @@
+import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from '@chakra-ui/react';
+
+import { mockReview } from '../../../../mocks/landing';
+import { Review } from '../../../../models';
+
+import { ReviewCard } from './ReviewCard';
+
+const SLIDE_CHANGE_INTERVAL = 5000;
+
+export const ReviewsSlider: FC = () => {
+  const { i18n } = useTranslation();
+  const mockReviews: Review.View[] = mockReview.getReviewsByLocale(i18n.language);
+  const reviewsCount = mockReviews.length;
+
+  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,24 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Heading, HStack } from '@chakra-ui/react';
+
+import { CtaButton, PageSection } from '../';
+
+import { ReviewsSlider } from './ReviewsSlider';
+import { SocialProofSectionProps } from './types';
+
+export const SocialProofSection: FC<SocialProofSectionProps> = ({
+  data: { heading } = {},
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
+
+  return (
+    <PageSection>
+      <Heading as='h2'>{t(heading)}</Heading>
+      <ReviewsSlider />
+      <HStack w='full' justify='flex-end'>
+        <CtaButton />
+      </HStack>
+    </PageSection>
+  );
+};

src/components/landing/SocialProofSection/index.ts

@@ -0,0 +1,2 @@
+export type { SocialProofSectionProps } from './types';
+export { SocialProofSection } from './SocialProofSection';

src/components/landing/SocialProofSection/types.ts

@@ -0,0 +1,5 @@
+export type SocialProofSectionProps = {
+  data: {
+    heading: 'social-proof-section.heading';
+  };
+};

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,14 @@
+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,29 @@
-/* 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';
+import i18next from 'i18next';
-  
-export default () => <App/>;
-  
-let rootElement: ReactDOM.Root
-  
-export const mount = (Сomponent, element = document.getElementById('app')) => {
-  const rootElement = ReactDOM.createRoot(element);
-  rootElement.render(<Сomponent/>);
 
-  if(module.hot) {
+import App from './app';
-      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/lib/date-helpers.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import i18next from 'i18next';
+
+export const getTimeSlot = (start: string, end: string) => {
+  const startDay = dayjs(start).format('HH:mm');
+  const endDay = dayjs(end).format('HH:mm');
+
+  return i18next.t('~:dry-wash.washTime.timeSlot', {
+    start: startDay,
+    end: endDay,
+  });
+};

src/lib/index.ts

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

src/lib/types.ts

@@ -0,0 +1,41 @@
+/**
+ * @example type Output = ArrElement<['a', 'b', 'c']>;
+ * // "a" | "b" | "c"
+ */
+export type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
+  ? ElementType
+  : never;
+
+/** 
+ * @example type Output = Split<'a.b1' | 'a.b2', '.'>;
+ * // ["a", "b1"] | ["a", "b2"]
+*/
+type Split<S extends string, D extends string> =
+  S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
+
+/** 
+ * @example type Output = NestedObject<["a", "b1"] | ["a", "b2"]>;
+ * // { a: { b1: string; }; } | { a: { b2: string; }; }
+*/
+type NestedObject<T extends string[]> =
+  T extends [infer Head, ...infer Tail] ?
+    Head extends string ?
+      { [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
+    string;
+
+/** 
+ * @example type Output = UnionToIntersection<{ a: { b1: string; }; } | { a: { b2: string; }; }>;
+ * // { a: { b1: string; }; } & { a: { b2: string; }; }
+*/
+type UnionToIntersection<U> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+
+/** 
+ * @example type Output = CreateTree<'a.b1' | 'a.b2', '.'>;
+ * // { a: { b1: string; }; } & { a: { b2: string; }; }
+*/
+export type CreateTree<T> =
+  UnionToIntersection<T extends infer U ?
+    U extends string ?
+      NestedObject<Split<U, '.'>> : never : never>;

src/mocks/landing/index.ts

@@ -0,0 +1,2 @@
+export * as mockOrder from './order';
+export * as mockReview from './review';

src/mocks/landing/order.ts

@@ -0,0 +1,7 @@
+import { Order } from "../../models";
+
+export const orders: Order.View[] = [
+  { id: 'id1' },
+  { id: 'id2' },
+  { id: 'id3' },
+];

src/mocks/landing/review.ts

@@ -0,0 +1,64 @@
+import { LANGUAGES, Review } from "../../models";
+
+const addId = (items) => items.map((data, i) => ({ id: `review${i}`, ...data }));
+
+const enReviews: Review.View[] = addId([
+  {
+    firstname: 'Anna',
+    lastname: 'Smirnova',
+    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: "I recently used the services of a dry car wash and was extremely satisfied. The process was carried out professionally: the staff used high-quality products that did not damage the paintwork. I was especially impressed by the ability to wash the car without water, which not only saves resources, but also protects the environment. I recommend it to everyone who cares about their car and the environment!"
+  },
+  {
+    firstname: 'Dmitry',
+    lastname: 'Petrov',
+    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: "I'm so glad I found this dry sink! My car is shining like new! 🌟 At first I was skeptical, I thought, how can you wash all this without water? But the result exceeded all expectations! Moika's veterinarian took a professional approach to the case, and she now looks amazing. If you want your car to always look 100%, be sure to try it!"
+  },
+  {
+    firstname: 'Alexey',
+    lastname: 'Sidorov',
+    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: "Dry car washing is an interesting solution that I tried out recently. Overall, I was satisfied with the quality of the work. However, not all the impurities were removed the first time, but the employee offered additional services, which suited me. Plus, a lot of attention was paid to surface protection, which is also important. I think I'll use this service again next time."
+  },
+  {
+    firstname: 'Ekaterina',
+    lastname: 'Ivanova',
+    picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
+    text: "Unfortunately, my experience with dry car washing turned out to be unsuccessful. I expected to see a clean car after the procedure, but many areas remained undone. Besides, the procedure took longer than I was promised. Perhaps something went wrong in this particular center, but I would not apply for this service again."
+  },
+]);
+
+const ruReviews: Review.View[] = addId([
+  {
+    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: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
+  },
+]);
+
+const reviewsMapByLocale: Record<LANGUAGES, Review.View[]> = {
+  [LANGUAGES.en]: enReviews,
+  [LANGUAGES.ru]: ruReviews
+};
+
+export const getReviewsByLocale = (locale: string) => reviewsMapByLocale[locale];

src/models/i18n.ts

@@ -0,0 +1,4 @@
+export const enum LANGUAGES {
+  en = 'en',
+  ru = 'ru'
+}

src/models/i18next.d.ts

@@ -0,0 +1,12 @@
+import defaultLocale from '../../locales/ru.json';
+import { CreateTree } from '../lib';
+
+type LanguageResource = CreateTree<keyof typeof defaultLocale>;
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: {
+      '~': LanguageResource
+    }
+  }
+}

src/models/index.ts

@@ -0,0 +1,3 @@
+export * from './i18n';
+export * as Order from './order';
+export * as Review from './review';

src/models/landing/index.ts

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

src/models/landing/stubs/index.ts

@@ -0,0 +1 @@
+export { default as LandingSuccessStub } from './success';

src/models/landing/stubs/success.ts

@@ -0,0 +1,27 @@
+// Generated by json-literal-typer
+// <-- BEGIN
+interface HeroXsection {
+  description: "hero-section.description";
+  headline: "hero-section.headline";
+  video: "demo.mp4";
+}
+
+interface Sections {
+  description?: "benefits-section.description";
+  heading: "benefits-section.heading" | "social-proof-section.heading";
+  list?: ("benefits-section.list.0" | "benefits-section.list.1" | "benefits-section.list.2" | "benefits-section.list.3")[];
+  type: "benefits-section" | "social-proof-section";
+}
+
+interface Body {
+  "hero-section": HeroXsection;
+  sections: Sections[];
+}
+
+interface Root {
+  body: Body;
+  success: true;
+}
+// END -->
+
+export default Root;

src/models/order.ts

@@ -0,0 +1,5 @@
+export type Id = string;
+
+export type View = {
+  id: Id;
+};

src/models/review.ts

@@ -0,0 +1,9 @@
+export type Id = string;
+
+export type View = {
+  id: Id;
+  firstname: string;
+  lastname: string;
+  picture: URL['href'];
+  text: string;
+};

src/pages/arm/index.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import React from 'react';
+
+import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {
-  return <h1>Arm </h1>;
+  return <LayoutArm />;
 };
 
 export default Page;

src/pages/landing/index.tsx

@@ -1,7 +1,51 @@
-import React from "react";
+import React, { FC } from 'react';
+import { Container, VStack } from '@chakra-ui/react';
 
-const Page = () => {
+import {
-  return <h1>Landing</h1>;
+  BenefitsSection,
+  Footer,
+  HeroSection,
+  SocialProofSection,
+} from '../../components/landing';
+import { LandingThemeProvider } from '../../containers';
+import { LandingSuccessStub } from '../../models/landing';
+import landingSuccessStubJson from '../../../stubs/json/landing/success.json';
+
+import { isBenefitsSectionData, isSocialProofSectionData } from './types';
+
+const landingSuccessStub = landingSuccessStubJson as LandingSuccessStub;
+
+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' flexGrow={1}>
+          <HeroSection
+            data={landingSuccessStub['body']['hero-section']}
+            flexShrink={0}
+          />
+          <VStack as='main' flexGrow={1}>
+            {landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
+              if (isBenefitsSectionData(type, data)) {
+                return <BenefitsSection key={i} data={data} />;
+              }
+              if (isSocialProofSectionData(type, data)) {
+                return <SocialProofSection key={i} data={data} />;
+              }
+            })}
+          </VStack>
+          <Footer />
+        </VStack>
+      </Container>
+    </LandingThemeProvider>
+  );
 };
 
 export default Page;

src/pages/landing/types.ts

@@ -0,0 +1,15 @@
+import LandingSuccess from "../../../stubs/json/landing/success.json";
+import { BenefitsSectionProps, SocialProofSectionProps } from "../../components/landing";
+import { ArrElement } from "../../lib";
+
+type SectionsItemData = ArrElement<typeof LandingSuccess['body']['sections']>;
+type SectionType = SectionsItemData['type'];
+type SectionData = Omit<SectionsItemData, 'type'>;
+
+export const isBenefitsSectionData = (type: SectionType, data: SectionData): data is BenefitsSectionProps['data'] => {
+  return type === 'benefits-section';
+};
+
+export const isSocialProofSectionData = (type: SectionType, data: SectionData): data is SocialProofSectionProps['data'] => {
+  return type === 'social-proof-section';
+};

src/pages/notFound/notFound.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import { Player } from '@lottiefiles/react-lottie-player';
+import i18next from 'i18next';
+
+import animate from '../../assets/animation/notFound.json';
+
+const NotFound = () => {
+  return (
+    <Center minH='100vh'>
+      <VStack spacing={4} textAlign='center'>
+        <Player
+          autoplay
+          loop
+          src={animate}
+          style={{
+            height: '100%',
+            width: '100%',
+            maxHeight: '450px',
+            maxWidth: '450px',
+          }}
+        />
+        <Heading fontSize='xl'>
+          {i18next.t(`dry-wash.arm.notFound.title`)}
+        </Heading>
+        <Text fontSize='lg'>
+          {i18next.t(`dry-wash.arm.notFound.description`)}
+        </Text>
+        <Button
+          as={Link}
+          to='/dry-wash'
+          colorScheme='teal'
+          size='lg'
+          variant='outline'
+        >
+          {i18next.t(`dry-wash.arm.notFound.button.back`)}
+        </Button>
+      </VStack>
+    </Center>
+  );
+};
+
+export default NotFound;

src/pages/order-form/index.tsx

@@ -1,7 +1,21 @@
-import React from "react";
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+
+import { URLs } from '../../__data__/urls';
+import { mockOrder } from '../../mocks/landing';
 
 const Page = () => {
-  return <h1>Order form </h1>;
+  return (
+    <>
+      <h1>Order form</h1>
+      {mockOrder.orders.map(({ id }) => (
+        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
+          Посмотреть заказ {id}
+        </Button>
+      ))}
+    </>
+  );
 };
 
 export default Page;

src/routes.tsx

@@ -1,16 +1,28 @@
-import React from "react";
+import React, { lazy, Suspense } from 'react';
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from 'react-router-dom';
-import Arm from "./pages/arm";
+
-import Order from "./pages/order-view";
+import { PageSpinner } from './components';
-import Landing from "./pages/landing";
+import Arm from './pages/arm';
+import { URLs } from './__data__/urls';
+import NotFound from './pages/notFound/notFound';
+
+const Landing = lazy(() => import('./pages/landing'));
+const OrderForm = lazy(() => import('./pages/order-form'));
+const OrderView = lazy(() => import('./pages/order-view'));
 
 const Routers = () => {
   return (
-    <Routes>
+    <Suspense fallback={<PageSpinner />}>
-      <Route path="/dry-wash-pl" element={<Landing />}></Route>
+      <Routes>
-      <Route path="/dry-wash-pl/order" element={<Order />}></Route>
+        <Route path={URLs.landing.url} element={<Landing />} />
-      <Route path="/dry-wash-pl/arm" element={<Arm />}></Route>
+        <Route path={URLs.orderForm.url} element={<OrderForm />} />
-    </Routes>
+        <Route path={URLs.orderView.url} element={<OrderView />} />
+        {URLs.armBase.isOn && (
+          <Route path={URLs.armBase.url} element={<Arm />}></Route>
+        )}
+        <Route path='*' element={<NotFound />} />
+      </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;

stubs/json/arm-masters/success.json

@@ -0,0 +1,35 @@
+{
+  "success": true,
+  "body": [
+    {
+      "id": "masters1",
+      "name": "Иван Иванов",
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
+      "phone": "+7 900 123 45 67"
+    },
+    {
+      "id": "masters12",
+      "name": "Иван Иванов",
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
+      "phone": "+7 900 123 45 67"
+    }
+  ]
+}

stubs/json/arm-orders/success.json

@@ -0,0 +1,25 @@
+{
+  "success": true,
+  "body": [
+    {
+      "id": "order1",
+      "carNumber": "A123BC",
+      "startWashTime": "2024-11-24T10:30:00.000Z",
+      "endWashTime": "2024-11-24T16:30:00.000Z",
+      "orderDate": "2024-11-24T08:41:46.366Z",
+      "status": "progress",
+      "phone": "79001234563",
+      "location": "Казань, ул. Баумана, 1"
+    },
+    {
+      "id": "order2",
+      "carNumber": "A245BC",
+      "startWashTime": "2024-11-24T11:30:00.000Z",
+      "endWashTime": "2024-11-24T17:30:00.000Z",
+      "orderDate": "2024-11-24T07:40:46.366Z",
+      "status": "progress",
+      "phone": "79001234567",
+      "location": "Казань, ул. Баумана, 43"
+    }
+  ]
+}

stubs/json/landing/success.json

@@ -0,0 +1,27 @@
+{
+  "success": true,
+  "body": {
+    "hero-section": {
+      "headline": "hero-section.headline",
+      "description": "hero-section.description",
+      "video": "demo.mp4"
+    },
+    "sections": [
+      {
+        "type": "benefits-section",
+        "heading": "benefits-section.heading",
+        "description": "benefits-section.description",
+        "list": [
+          "benefits-section.list.0",
+          "benefits-section.list.1",
+          "benefits-section.list.2",
+          "benefits-section.list.3"
+        ]
+      },
+      {
+        "type": "social-proof-section",
+        "heading": "social-proof-section.heading"
+      }
+    ]
+  }
+}

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;