first commit

2024-04-30 19:47:04 +03:00
parent 2093daa223
commit d7c9efa910
100 changed files with 9008 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/discord.xml
+++ b/.idea/discord.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="ASK" />
+    <option name="description" value="" />
+  </component>
+</project>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sipro-landing-2-new11.iml" filepath="$PROJECT_DIR$/.idea/sipro-landing-2-new11.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/sipro-landing-2-new11.iml
+++ b/.idea/sipro-landing-2-new11.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    //output: 'export',
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "next": "14.2.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-slick": "^0.23.13",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.2",
+    "typescript": "^5"
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,47 @@
+import localFont from "next/font/local";
+import classNames from "classnames";
+
+const helveticaNeueCyrFont = localFont({
+    src: '../shared/assets/fonts/HelveticaNeueCyr-Bold.ttf',
+    variable: '--HelveticaNeueCyr',
+})
+
+const sFProTextFont = localFont({
+    src: [
+        {
+            path: '../shared/assets/fonts/SFProText-Bold.ttf',
+            weight: '700',
+            style: 'normal',
+        },
+        {
+            path: '../shared/assets/fonts/SFProText-Semibold.ttf',
+            weight: '600',
+            style: 'normal',
+        },
+        {
+            path: '../shared/assets/fonts/SFProText-Regular.ttf',
+            weight: '400',
+            style: 'normal',
+        },
+    ],
+    variable: '--SFProText',
+})
+
+const proximaNovaFont = localFont({
+    src: '../shared/assets/fonts/proximanova_extrabold.otf',
+    variable: '--ProximaNova',
+})
+
+
+export default function RootLayout({
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en"
+              className={classNames(helveticaNeueCyrFont.variable, sFProTextFont.variable, proximaNovaFont.variable)}>
+        <body>{children}</body>
+        </html>
+    );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,33 @@
+import {HeaderSection} from "@/sections/HeaderSection/HeaderSection";
+import {HeroSection} from "@/sections/HeroSection/HeroSection";
+import {WhyDencoSection} from "@/sections/WhyDencoSection/WhyDencoSection";
+import {WideChoiceSection} from "@/sections/WideChoiceSection/WideChoiceSection";
+import {FboFbsSection} from "@/sections/FboFbsSection/FboFbsSection";
+import {CooperationPlanSection} from "@/sections/CooperationPlanSection/CooperationPlanSection";
+import {DencoHelpsSection} from "@/sections/DencoHelpsSection/DencoHelpsSection";
+import {PlanDescriptionSection} from "@/sections/PlanDescriptionSection/PlanDescriptionSection";
+import {AccountSection} from "@/sections/AccountSection/AccountSection";
+import {TestimonialsSection} from "@/sections/TestimonialsSection/TestimonialsSection";
+import '@/shared/variables.css';
+import '@/shared/styles.css';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import {FooterSection} from "@/sections/FooterSection/FooterSection";
+
+export default function Home() {
+    return (
+        <main>
+            <HeaderSection/>
+            <HeroSection/>
+            <WhyDencoSection/>
+            <WideChoiceSection/>
+            <FboFbsSection/>
+            <CooperationPlanSection/>
+            <DencoHelpsSection/>
+            <PlanDescriptionSection/>
+            <AccountSection/>
+            <TestimonialsSection/>
+            <FooterSection/>
+        </main>
+    );
+}
--- a/src/sections/AccountSection/AccountSection.module.css
+++ b/src/sections/AccountSection/AccountSection.module.css
@@ -0,0 +1,44 @@
+.root {
+    margin-bottom: 4rem;
+}
+
+.accountSection {
+    margin-bottom: 2rem;
+}
+
+.accountTitle {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.figcaption {
+    font-size: 1.5rem;
+    text-align: center;
+    margin-top: 0.5rem;
+}
+
+.image {
+    cursor: pointer;
+}
+
+.imageOpen {
+    border-radius: 1rem;
+}
+
+@media screen and (min-width: 641px) {
+    .accountTitle {
+        font-size: 2.8rem;
+    }
+
+    .figcaption {
+        font-size: 2.1rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .accountTitle {
+        font-size: 2.1rem;
+    }
+}
--- a/src/sections/AccountSection/AccountSection.tsx
+++ b/src/sections/AccountSection/AccountSection.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import {useState} from "react";
+import {ACCOUNT_SLIDER_ELEMENTS} from "./accountCarouselConfig";
+import Image from "next/image";
+import {Container} from "@/shared/components/Container/Container";
+import styles from './AccountSection.module.css';
+import {Modal} from "@/shared/components/Modal/Modal";
+import {Carousel} from "@/shared/components/Carousel/Carousel";
+
+export function AccountSection() {
+    const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
+
+    const handleImageClick = (imageIndex: number) => {
+        setSelectedImageIndex(imageIndex);
+    }
+
+    return (
+        <section className={styles.root}>
+            <h3 className={styles.accountTitle}>Личный кабинет для управления заказами</h3>
+            <Container>
+                <div className={styles.accountSection}>
+                    <div className={styles.carousel}>
+                        <Carousel>
+                            {ACCOUNT_SLIDER_ELEMENTS.map((element, index) => (
+                                <figure key={index}>
+                                    <Image
+                                        className={styles.image}
+                                        src={element.src}
+                                        alt={element.alt}
+                                        onClick={() => handleImageClick(index)}
+                                        sizes={'100vw'}
+                                    />
+                                    <figcaption className={styles.figcaption}>{element.label}</figcaption>
+                                </figure>
+                            ))}
+                        </Carousel>
+                        {selectedImageIndex !== null && (
+                            <Modal onClose={() => setSelectedImageIndex(null)}>
+                                <Image
+                                    className={styles.imageOpen}
+                                    src={ACCOUNT_SLIDER_ELEMENTS[selectedImageIndex].src}
+                                    alt={ACCOUNT_SLIDER_ELEMENTS[selectedImageIndex].alt}
+                                    sizes={'100vw'}
+                                />
+                            </Modal>
+                        )}
+                    </div>
+                </div>
+            </Container>
+        </section>
+    );
+}
--- a/src/sections/AccountSection/accountCarouselConfig.ts
+++ b/src/sections/AccountSection/accountCarouselConfig.ts
@@ -0,0 +1,52 @@
+import mainPage from '@/shared/assets/images/accountItems/mainPage.png';
+import ordersPage from '@/shared/assets/images/accountItems/ordersPage.png';
+import itemsPage from '@/shared/assets/images/accountItems/itemsPage.png';
+import tablePage from '@/shared/assets/images/accountItems/tablePage.png';
+import statisticsPage from '@/shared/assets/images/accountItems/statisticsPage.png';
+import pricesPage from '@/shared/assets/images/accountItems/pricesPage.png';
+import accountBalancePage from '@/shared/assets/images/accountItems/accountBalancePage.png';
+import {StaticImageData} from "next/image";
+
+type AccountSliderElementProps = {
+    src: StaticImageData,
+    alt: string,
+    label: string,
+}
+
+export const ACCOUNT_SLIDER_ELEMENTS: AccountSliderElementProps[] = [
+    {
+        src: mainPage,
+        alt: 'Главная страница админ панели',
+        label: 'Главная'
+    },
+    {
+        src: ordersPage,
+        alt: 'Страница заказов',
+        label: 'Заказы'
+    },
+    {
+        src: itemsPage,
+        alt: 'Страница товаров пользователя',
+        label: 'Товары'
+    },
+    {
+        src: tablePage,
+        alt: 'Страница всех товаров',
+        label: 'Таблица'
+    },
+    {
+        src: statisticsPage,
+        alt: 'Страница статистики продаж',
+        label: 'Статистика'
+    },
+    {
+        src: pricesPage,
+        alt: 'Страница применения цен',
+        label: 'Цены'
+    },
+    {
+        src: accountBalancePage,
+        alt: 'Страница баланса аккаунта',
+        label: 'Баланс'
+    }
+]
--- a/src/sections/CooperationPlanSection/CooperationPlanSection.module.css
+++ b/src/sections/CooperationPlanSection/CooperationPlanSection.module.css
@@ -0,0 +1,147 @@
+.root {
+    margin-bottom: 4rem;
+}
+
+.heading {
+    text-align: center;
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
+.innerContainer {
+    position: relative;
+    overflow: hidden;
+    margin: 0 -3rem;
+}
+
+.mask {
+    z-index: 10;
+    position: absolute;
+    inset: 0;
+    background: var(--black);
+    opacity: 0.4;
+}
+
+.block1, .block2 {
+    display: flex;
+    height: 12rem;
+}
+
+.block1 {
+    margin-bottom: -4.8rem;
+}
+
+.textBlock {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--white);
+    z-index: 11;
+    width: 70%;
+    position: absolute;
+    top: 0;
+    height: 80%;
+    justify-content: center;
+}
+
+.textBlockBottom {
+    top: unset;
+    bottom: 0;
+}
+
+.number {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 6.4rem;
+    position: relative;
+}
+
+.image {
+    object-fit: cover;
+    position: absolute;
+    height: 100%;
+    width: auto;
+    inset: 0;
+}
+
+.image1Block, .image2Block, .image3Block, .image4Block, .image5Block, .image6Block {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+.image1Block {
+    clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 80%, 30% 100%, 20% 80%, 0 80%);
+    flex: 1 1 30%;
+    z-index: 6;
+}
+
+.image2Block {
+    clip-path: polygon(0 0, 90% 0, 90% 40%, 100% 50%, 90% 60%, 90% 80%, 0 80%);
+    z-index: 3;
+    flex: 1 1 36%;
+    margin-right: -4%;
+}
+
+.image3Block {
+    clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0 80%);
+    flex: 1 1 34%;
+    z-index: 2;
+}
+
+.image4Block {
+    clip-path: polygon(0 20%, 90% 20%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 0 100%);
+    flex: 1 1 35%;
+    margin-right: -4%;
+    z-index: 5;
+}
+
+.image5Block {
+    clip-path: polygon(0 20%, 40% 20%, 50% 0, 60% 20%, 100% 20%, 100% 20%, 100% 100%, 0 100%);
+    flex: 1 1 32%;
+    z-index: 4;
+}
+
+.image6Block {
+    clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
+    flex: 1 1 33%;
+}
+
+@media screen and (min-width: 480px) {
+    .block1, .block2 {
+        height: 14rem;
+    }
+
+    .block1 {
+        margin-bottom: -5.6rem;
+    }
+}
+
+@media screen and (min-width: 641px) {
+    .innerContainer {
+        margin: 0 -6rem;
+    }
+
+    .number {
+        font-size: 8.4rem;
+    }
+
+    .block1, .block2 {
+        height: 18rem;
+    }
+
+    .block1 {
+        margin-bottom: -7.2rem;
+    }
+
+    .textBlock {
+        width: 85%;
+        gap: 1rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .innerContainer {
+        margin: 0;
+    }
+}
--- a/src/sections/CooperationPlanSection/CooperationPlanSection.tsx
+++ b/src/sections/CooperationPlanSection/CooperationPlanSection.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image";
+import {Container} from "@/shared/components/Container/Container";
+import cooperation1 from "@/shared/assets/images/cooperation1.png";
+import cooperation2 from "@/shared/assets/images/cooperation2.png";
+import cooperation3 from "@/shared/assets/images/cooperation3.png";
+import cooperation4 from "@/shared/assets/images/cooperation4.png";
+import cooperation5 from "@/shared/assets/images/cooperation5.png";
+import cooperation6 from "@/shared/assets/images/cooperation6.png";
+import styles from './CooperationPlanSection.module.css';
+import classNames from "classnames";
+
+export function CooperationPlanSection() {
+    return (
+        <section className={styles.root}>
+            <Container>
+                <h3 className={styles.heading}>Схема нашего сотрудничества</h3>
+                <div className={styles.innerContainer}>
+                    <div className={styles.block1}>
+                        <div className={styles.image1Block}>
+                            <div className={styles.mask}></div>
+                            <div className={styles.textBlock}>
+                                <p className={styles.number}>1</p>
+                                <p>Выбираете любые товары с нашего склада</p>
+                            </div>
+                            <Image className={classNames(styles.image)} placeholder={'blur'} fill src={cooperation1} sizes={'33vw'} alt={''}/>
+                        </div>
+                        <div className={styles.image2Block}>
+                            <div className={styles.mask}></div>
+                            <div className={styles.textBlock}>
+                                <p className={styles.number}>4</p>
+                                <p>Мы собираем и упаковываем ваши заказы</p>
+                            </div>
+                            <Image className={styles.image} placeholder={'blur'} src={cooperation4} fill sizes={'33vw'} alt={''}/>
+                        </div>
+                        <div className={styles.image3Block}>
+                            <div className={styles.mask}></div>
+                            <div className={styles.textBlock}>
+                                <p className={styles.number}>5</p>
+                                <p>Доставляем заказы на сортировочные центры МП</p>
+                            </div>
+                            <Image className={styles.image} placeholder={'blur'} src={cooperation5} fill sizes={'33vw'} alt={''}/>
+                        </div>
+                    </div>
+                    <div className={styles.block2}>
+                        <div className={styles.image4Block}>
+                            <div className={styles.mask}></div>
+                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
+                                <p className={styles.number}>2</p>
+                                <p>Добавляете товары на МП по системе FBS</p>
+                            </div>
+                            <Image className={styles.image} placeholder={'blur'} src={cooperation2} fill sizes={'33vw'} alt={''}/>
+                        </div>
+                        <div className={styles.image5Block}>
+                            <div className={styles.mask}></div>
+                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
+                                <p className={styles.number}>3</p>
+                                <p>Получайте заказы в личном кабинете</p>
+                            </div>
+                            <Image className={styles.image} placeholder={'blur'} src={cooperation3} fill sizes={'33vw'} alt={''}/>
+                        </div>
+                        <div className={styles.image6Block}>
+                            <div className={styles.mask}></div>
+                            <div className={classNames(styles.textBlock, styles.textBlockBottom)}>
+                                <p className={styles.number}>6</p>
+                                <p>Маркетплейс переводит вам деньги</p>
+                            </div>
+                            <Image className={styles.image} placeholder={'blur'} src={cooperation6} fill sizes={'33vw'} alt={''}/>
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </section>
+    );
+};
--- a/src/sections/DencoHelpsSection/DencoHelpsSection.module.css
+++ b/src/sections/DencoHelpsSection/DencoHelpsSection.module.css
@@ -0,0 +1,151 @@
+.root {
+    background-color: var(--grey);
+    padding: 3rem 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.container {
+    position: relative;
+    z-index: 1;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 4.5rem;
+}
+
+.dencoHelpsText {
+    background: linear-gradient(180deg, #3baafc 0%, #2478f8 100%);
+    width: 100%;
+    max-width: 36.6rem;
+    padding: 1.5rem 2rem;
+    border-radius: 4.5rem;
+    position: relative;
+    margin-left: auto;
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    color: var(--white);
+}
+
+.firstParagraph {
+    margin-bottom: 2rem;
+}
+
+.blackText {
+    color: var(--black);
+}
+
+.tail {
+    background: linear-gradient(180deg, #2B87F9 0%, #2478f8 100%);
+    width: 6rem;
+    height: 5rem;
+    clip-path: polygon(17% 0, 25% 0, 25% 5%, 100% 80%, 100% 80%, 45% 80%, 0 100%, 17% 55%);
+    position: absolute;
+    right: -1rem;
+    bottom: -1rem;
+    transform: scale(-1, 1);
+}
+
+.bgImageContainer {
+    position: absolute;
+    height: 100%;
+    width: 480px;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.phoneContainer {
+    position: absolute;
+    width: 13rem;
+    height: auto;
+    top: 32rem;
+    right: 30rem;
+    transform: rotate(-11deg);
+}
+
+.phoneLightContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 49rem;
+    width: 100%;
+}
+
+.phoneLight {
+    position: relative;
+    left: -25rem;
+    max-width: unset;
+}
+
+.phoneShadow {
+    position: relative;
+    top: 50rem;
+    left: 3rem;
+}
+
+
+@media screen and (min-width: 641px) {
+    .phoneContainer {
+        width: 15rem;
+    }
+
+    .phoneShadow {
+        top: 55rem;
+        left: -5rem;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .list {
+        margin-bottom: 2rem;
+    }
+
+    .dencoHelpsText {
+        max-width: 46.7rem;
+        padding: 2.2rem 4rem;
+        font-size: 2.8rem;
+    }
+
+    .phoneLightContainer {
+        height: 52rem;
+    }
+
+    .phoneContainer {
+        top: 32.5rem;
+        right: 32.5rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .list {
+        margin-bottom: 1rem;
+    }
+
+    .dencoHelpsText {
+        font-size: 2.1rem;
+    }
+
+    .phoneLightContainer {
+        height: 54rem;
+    }
+
+    .phoneLight {
+        left: -20rem;
+    }
+
+    .phoneContainer {
+        top: 34rem;
+        right: 32.5rem;
+    }
+
+    .phoneShadow {
+        top: 57rem;
+        left: -17rem;
+    }
+}
--- a/src/sections/DencoHelpsSection/DencoHelpsSection.tsx
+++ b/src/sections/DencoHelpsSection/DencoHelpsSection.tsx
@@ -0,0 +1,67 @@
+import styles from './DencoHelpsSection.module.css'
+import {MessageBlock, MessageBlockProps} from "@/sections/DencoHelpsSection/components/MessageBlock/MessageBlock";
+import {Container} from "@/shared/components/Container/Container";
+import Image from "next/image";
+import phone from '@/shared/assets/images/phone/телефон 1.png';
+import phoneLight from '@/shared/assets/images/phone/phoneLight.svg'
+import phoneShadow from '@/shared/assets/images/phone/phoneShadow.svg'
+
+const messageItems: MessageBlockProps[] = [
+    {
+        boldText: 'Процесс закупки и недоступность хранения',
+        regularText: 'партии товара.'
+    },
+    {
+        boldText: 'Пугает риск потерять всё',
+        regularText: 'из-за недостатка опыта.'
+    },
+    {
+        boldText: 'Трудно найти поставщиков.',
+    },
+    {
+        boldText: 'Отсутствие капитала',
+        regularText: 'для старта.'
+    },
+    {
+        boldText: 'Сложная организация процесса',
+        regularText: 'от упаковки до доставки на МП.'
+    },
+    {
+        boldText: 'Отсутствие',
+        regularText: 'большого количества времени.'
+    }
+]
+
+export function DencoHelpsSection() {
+    return (
+        <section className={styles.root}>
+            <Container className={styles.container}>
+                <ul className={styles.list}>
+                    {messageItems.map((item, index) => <MessageBlock key={index} boldText={item.boldText} regularText={item.regularText}/>)}
+                </ul>
+                <div className={styles.dencoHelpsText}>
+                    <p className={styles.firstParagraph}>DENCO помогает <span className={styles.blackText}>начинающим и опытным селлерам.</span></p>
+                    <p>Мы сделаем за вас <span className={styles.blackText}>всю</span> рутинную работу <span
+                        className={styles.blackText}>и</span> решим ряд ваших проблем!</p>
+                    <div className={styles.tail}/>
+                </div>
+            </Container>
+            <div className={styles.bgImageContainer}>
+                <div className={styles.phoneContainer}>
+                    <Image
+                        src={phone}
+                        alt={''}
+                        sizes={'100vw'}
+                        style={{
+                            // objectFit: 'cover'
+                        }}
+                    />
+                </div>
+                <div className={styles.phoneLightContainer}>
+                    <Image className={styles.phoneLight} src={phoneLight} alt={''}/>
+                </div>
+                <Image className={styles.phoneShadow} src={phoneShadow} alt={''}/>
+            </div>
+        </section>
+    );
+};
--- a/src/sections/DencoHelpsSection/components/MessageBlock/MessageBlock.module.css
+++ b/src/sections/DencoHelpsSection/components/MessageBlock/MessageBlock.module.css
@@ -0,0 +1,35 @@
+.root {
+    list-style-type: none;
+    border-radius: 4rem;
+    background-color: var(--grey);
+    width: 25rem;
+    min-height: 7rem;
+    padding: 1rem 1rem 1rem 3rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.tail {
+    background-color: var(--grey);
+    width: 6rem;
+    height: 4.5rem;
+    clip-path: polygon(17% 0, 25% 0, 25% 5%, 100% 80%, 100% 80%, 45% 80%, 0 100%, 17% 55%);
+    position: absolute;
+    left: -1rem;
+    bottom: -1rem;
+}
+
+@media screen and (min-width: 641px) {
+    .root {
+        width: 37rem;
+        font-size: 1.4rem;
+    }
+}
+
+
+@media screen and (min-width: 992px) {
+    .boldText {
+        font-weight: 600;
+    }
+}
--- a/src/sections/DencoHelpsSection/components/MessageBlock/MessageBlock.tsx
+++ b/src/sections/DencoHelpsSection/components/MessageBlock/MessageBlock.tsx
@@ -0,0 +1,17 @@
+import styles from './MessageBlock.module.css';
+
+export type MessageBlockProps = {
+    boldText: string,
+    regularText?: string,
+};
+
+export function MessageBlock({boldText, regularText}: MessageBlockProps) {
+    return (
+        <li className={styles.root}>
+            <div>
+                <span className={styles.boldText}>{boldText}</span> {regularText && <span>{regularText}</span>}
+            </div>
+            <div className={styles.tail}/>
+        </li>
+    );
+};
--- a/src/sections/FboFbsSection/FboFbsSection.module.css
+++ b/src/sections/FboFbsSection/FboFbsSection.module.css
@@ -0,0 +1,23 @@
+.root {
+    padding: 4rem 0;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+@media screen and (min-width: 641px) {
+    .container {
+        grid-auto-rows: 1fr;
+    }
+}
+
+@media screen and (min-width: 1270px) {
+    .container {
+        grid-template-columns: 1fr 1fr;
+        gap: 4rem;
+        justify-content: space-between;
+    }
+}
--- a/src/sections/FboFbsSection/FboFbsSection.tsx
+++ b/src/sections/FboFbsSection/FboFbsSection.tsx
@@ -0,0 +1,43 @@
+import {Container} from "@/shared/components/Container/Container";
+import {FboFbsItem, FboFbsItemProps} from "@/sections/FboFbsSection/components/FboFbsItem/FboFbsItem";
+import fbo from '@/shared/assets/images/FBO.png';
+import fbs from '@/shared/assets/images/FBS.png';
+import styles from './FboFbsSection.module.css';
+
+const items: FboFbsItemProps[] = [
+    {
+        imgSrc: fbo,
+        headingBulletPoint: "хранение на складе маркетплейса",
+        bulletPoints: [
+            "бесплатная упаковка и переработка товаров под требования нужного маркетплейса",
+            "меньшие сроки доставки",
+            "возвраты обрабатывает платформа, а не продавец",
+        ]
+    },
+    {
+        imgSrc: fbs,
+        headingBulletPoint: "отгрузка со своего склада с доставкой маркетплейса",
+        bulletPoints: [
+            "мультиканальность продаж",
+            "возвраты приходят на склад",
+        ]
+    },
+]
+
+
+export function FboFbsSection() {
+    return (
+        <section className={styles.root}>
+            <Container className={styles.container}>
+                {items.map((item, i) => (
+                    <FboFbsItem
+                        key={i}
+                        imgSrc={item.imgSrc}
+                        headingBulletPoint={item.headingBulletPoint}
+                        bulletPoints={item.bulletPoints}
+                    />
+                ))}
+            </Container>
+        </section>
+    );
+};
--- a/src/sections/FboFbsSection/components/FboFbsItem/FboFbsItem.module.css
+++ b/src/sections/FboFbsSection/components/FboFbsItem/FboFbsItem.module.css
@@ -0,0 +1,68 @@
+.root {
+    background-color: var(--grey);
+    border-radius: 5px;
+    padding: 2rem;
+    display: flex;
+    justify-content: end;
+    overflow: hidden;
+    position: relative;
+}
+
+.image {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40%;
+    object-fit: cover;
+}
+
+.list {
+    width: 60%;
+    padding: 1rem 1rem 1rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    background-color: var(--white);
+    border-radius: 5px;
+    text-align: justify;
+    justify-content: center;
+}
+
+@media screen and (min-width: 641px) {
+    .list {
+        padding: 1.75rem 1.75rem 1.75rem 3rem;
+    }
+}
+
+@media screen and (min-width: 1270px) {
+    .root {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        padding: 0;
+    }
+
+    .list {
+        width: unset;
+        justify-content: start;
+        background-color: transparent;
+        padding: 0 2rem 4rem 3rem;
+    }
+
+    .imageContainer {
+        position: relative;
+        width: 100%;
+    }
+
+    .image {
+        position: absolute;
+        width: 80%;
+        top: -4rem;
+        transform: unset;
+        height: auto;
+    }
+
+    .headingItem {
+        font-weight: 700;
+    }
+}
--- a/src/sections/FboFbsSection/components/FboFbsItem/FboFbsItem.tsx
+++ b/src/sections/FboFbsSection/components/FboFbsItem/FboFbsItem.tsx
@@ -0,0 +1,23 @@
+import Image, {StaticImageData} from "next/image";
+import styles from './FboFbsItem.module.css';
+
+export type FboFbsItemProps = {
+    imgSrc: StaticImageData,
+    headingBulletPoint: string,
+    bulletPoints: string[]
+};
+
+export function FboFbsItem(props: FboFbsItemProps) {
+    const {imgSrc, headingBulletPoint, bulletPoints} = props;
+
+    return (
+        <div className={styles.root}>
+            <Image className={styles.image} src={imgSrc} alt={''} placeholder={'blur'} sizes={'100vw'}/>
+            <div></div>
+            <ul className={styles.list}>
+                <li className={styles.headingItem}>{headingBulletPoint}</li>
+                {bulletPoints.map((bulletPoint, i) => <li key={i}>{bulletPoint}</li>)}
+            </ul>
+        </div>
+    );
+};
--- a/src/sections/FooterSection/FooterSection.module.css
+++ b/src/sections/FooterSection/FooterSection.module.css
@@ -0,0 +1,93 @@
+.container {
+    border-radius: 5px;
+    background-color: var(--grey2);
+    padding: 2rem 2.5rem;
+    color: var(--white);
+    margin-bottom: 5rem;
+}
+
+.heading {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 3.2rem;
+    margin-bottom: 1rem;
+}
+
+.joinButton {
+    font-size: 2rem;
+    color: var(--white);
+    background-color: var(--blue);
+    border-radius: 10px;
+    padding: 1.5rem 2rem;
+    margin-bottom: 3.5rem;
+}
+
+.bottom {
+    display: flex;
+    gap: 2rem;
+}
+
+.bottomLeft {
+    flex: 1 1 60%;
+}
+
+.bottomRight {
+    flex: 1 1 40%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.instruction {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
+.logo {
+    width: 6rem;
+    margin-bottom: 1rem;
+}
+
+.contactUs {
+    font-size: 1.6rem;
+}
+
+.socialButtons {
+    display: flex;
+    gap: 1rem;
+}
+
+.whatsAppLogo, .telegramLogo {
+    width: 18px;
+}
+
+.contactDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+@media screen and (min-width: 641px) {
+    .container {
+        padding: 3.7rem 6.2rem 6.2rem;
+        border-radius: 10px;
+    }
+
+    .contactUs {
+        font-weight: 700;
+    }
+
+    .whatsAppLogo, .telegramLogo {
+        width: 25px;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .container {
+        border-radius: 15px;
+    }
+
+    .whatsAppLogo, .telegramLogo {
+        width: 40px;
+    }
+}
--- a/src/sections/FooterSection/FooterSection.tsx
+++ b/src/sections/FooterSection/FooterSection.tsx
@@ -0,0 +1,40 @@
+import styles from './FooterSection.module.css';
+import {Container} from "@/shared/components/Container/Container";
+import Link from "next/link";
+import Image from "next/image";
+import dencoLogo from "@/shared/assets/icons/DENCO 2024.svg";
+import whatsAppLogo from '@/shared/assets/icons/ватсап.svg';
+import telegramLogo from '@/shared/assets/icons/телеграм.svg';
+
+export function FooterSection() {
+    return (
+        <footer>
+            <Container className={styles.container}>
+                <h3 className={styles.heading}>Зарабатывайте вместе с нами!</h3>
+                <Link href={''} className={styles.joinButton}>Стать партнёром</Link>
+                <div className={styles.bottom}>
+                    <div className={styles.bottomLeft}>
+                        <p className={styles.instruction}>Инструкция к подключению</p>
+                        <Image className={styles.logo} src={dencoLogo} alt={'Логотип'}/>
+                        <p>Все права защищены</p>
+                    </div>
+                    <div className={styles.bottomRight}>
+                        <p className={styles.contactUs}>Свяжитесь с нами!</p>
+                        <div className={styles.socialButtons}>
+                            <Link href={''}>
+                                <Image className={styles.whatsAppLogo} src={whatsAppLogo} alt={''}/>
+                            </Link>
+                            <Link href={''}>
+                                <Image className={styles.telegramLogo} src={telegramLogo} alt={''}/>
+                            </Link>
+                        </div>
+                        <div className={styles.contactDetails}>
+                            <Link href={'tel:+79000000000'}>+7(900)000-00-00</Link>
+                            <Link href={'mailto:emailemail110@gmail.com'}>emailemail110@gmail.com</Link>
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </footer>
+    );
+};
--- a/src/sections/HeaderSection/Header.module.css
+++ b/src/sections/HeaderSection/Header.module.css
@@ -0,0 +1,53 @@
+.innerContainer {
+    padding: 1rem 0 2rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dencoLogo {
+    max-width: 6rem;
+}
+
+.joinGroup {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.joinText {
+    font-size: 1.4rem;
+    color: var(--blue);
+}
+
+.link {
+    display: flex;
+}
+
+.joinLogo {
+    width: 2rem;
+    height: auto;
+}
+
+@media screen and (min-width: 641px) {
+    .dencoLogo {
+        max-width: 8.75rem;
+    }
+
+    .joinLogo {
+        width: 50px;
+    }
+
+    .joinGroup {
+        gap: 1.75rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .innerContainer {
+        padding: 1.2rem 0 3.5rem;
+    }
+
+    .dencoLogo {
+        max-width: unset;
+    }
+}
--- a/src/sections/HeaderSection/HeaderSection.tsx
+++ b/src/sections/HeaderSection/HeaderSection.tsx
@@ -0,0 +1,26 @@
+import dencoLogo from '../../shared/assets/icons/DENCO лого.svg';
+import telegramLogo from '../../shared/assets/icons/лого телега.svg';
+import Image from "next/image";
+import Link from "next/link";
+import {Container} from "@/shared/components/Container/Container";
+import styles from "./Header.module.css";
+
+export function HeaderSection() {
+    return (
+        <header>
+            <Container>
+                <div className={styles.innerContainer}>
+                    <Link href={''}>
+                        <Image className={styles.dencoLogo} src={dencoLogo} alt={'Логотип'}/>
+                    </Link>
+                    <div className={styles.joinGroup}>
+                        <p className={styles.joinText}>Подключиться к сервису</p>
+                        <Link className={styles.link} href={''}>
+                            <Image src={telegramLogo} alt={'Логотип Телеграм'} className={styles.joinLogo}/>
+                        </Link>
+                    </div>
+                </div>
+            </Container>
+        </header>
+    );
+};
--- a/src/sections/HeroSection/HeroSection.module.css
+++ b/src/sections/HeroSection/HeroSection.module.css
@@ -0,0 +1,90 @@
+.root {
+    background-color: var(--grey);
+    position: relative;
+    overflow: hidden;
+}
+
+.bgWrap {
+    position: absolute;
+    right: -2rem;
+    bottom: -2rem;
+    width: 50%;
+    max-height: 80%;
+    z-index: 1;
+}
+
+.containerInner {
+    padding: 4rem 0 0;
+}
+
+.infoBlock {
+    max-width: 60rem;
+    position: relative;
+    z-index: 2;
+}
+
+.infoHeading {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 3.2rem;
+    text-transform: uppercase;
+    margin-bottom: 1.5rem;
+}
+
+.infoAdditional {
+    max-width: 60%;
+    margin-bottom: 3rem;
+}
+
+.joinButton {
+    font-size: 1.6rem;
+    color: var(--white);
+    background-color: var(--blue);
+    border-radius: 5px;
+    padding: 1rem;
+    margin-bottom: 6.7rem;
+}
+
+.marketPlaces {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5rem;
+    padding: 1.8rem 10rem;
+    height: 4.7rem;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 100%);
+    position: relative;
+    z-index: 2;
+}
+
+@media screen and (min-width: 641px) {
+    .infoHeading {
+        font-size: 3.5rem;
+    }
+
+    .marketPlaces {
+        height: 5.5rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .bgWrap {
+        bottom: -5px;
+        width: 60%;
+        max-height: unset;
+        right: -10rem;
+    }
+
+    .infoHeading {
+        max-width: 55%;
+    }
+
+    .joinButton {
+        margin-bottom: 9.2rem;
+        padding: 1.2rem 2.8rem;
+        border-radius: 8px;
+    }
+
+    .infoAdditional {
+        max-width: 40%;
+    }
+}
--- a/src/sections/HeroSection/HeroSection.tsx
+++ b/src/sections/HeroSection/HeroSection.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import Image from "next/image";
+import ozonLogo from "@/shared/assets/images/озон.svg";
+import wildBerriesLogo from "@/shared/assets/images/вб.svg";
+import yandexMarketLogo from "@/shared/assets/images/ям.svg";
+import person from "@/shared/assets/images/парень-и-лого-мп.png";
+import {Container} from "@/shared/components/Container/Container";
+import styles from './HeroSection.module.css';
+
+
+export function HeroSection() {
+    return (
+        <section className={styles.root}>
+            <Container>
+                <div className={styles.containerInner}>
+                    <div className={styles.infoBlock}>
+                        <h2 className={styles.infoHeading}>Бизнес на маркетплейсе из любой точки мира</h2>
+                        <p className={styles.infoAdditional}>Дропшиппинг, фулфилмент и внутренняя аналитика в одном
+                            сервисе</p>
+                        <Link href={''} className={styles.joinButton}>Стать партнёром</Link>
+                    </div>
+                </div>
+                <div className={styles.bgWrap}>
+                    <Image
+                        src={person}
+                        placeholder={"blur"}
+                        alt={""}
+                        sizes="100vw"
+                    />
+                </div>
+            </Container>
+            <div className={styles.marketPlaces}>
+                <Image src={ozonLogo} alt={'Логотип озона'}/>
+                <Image src={wildBerriesLogo} alt={'Логотип вайлдберис'}/>
+                <Image src={yandexMarketLogo} alt={'Логотип яндекс маркета'}/>
+            </div>
+        </section>
+    );
+};
--- a/src/sections/PlanDescriptionSection/PlanDescriptionSection.module.css
+++ b/src/sections/PlanDescriptionSection/PlanDescriptionSection.module.css
@@ -0,0 +1,113 @@
+.root {
+    padding: 4rem 0 2rem;
+    overflow: hidden;
+}
+
+.descriptionContainer {
+    display: grid;
+    grid-template-areas: 'desc desc'
+                        'img img';
+    grid-template-columns: auto auto;
+    grid-template-rows: auto;
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.descriptionTextContainer {
+    max-width: 31rem;
+    margin: 0 auto;
+    grid-area: desc;
+    position: relative;
+}
+
+.description {
+    padding: 1rem;
+    border-radius: 10px;
+    color: var(--black);
+    font-size: 1.5rem;
+    text-align: justify;
+    background-color: var(--grey)
+}
+
+.descriptionAccent {
+    color: var(--blue);
+    font-weight: 700;
+}
+
+.cooperationImageContainer {
+    margin-left: auto;
+    margin-right: -8rem;
+    grid-area: img;
+    margin-top: -3rem;
+    z-index: -1;
+}
+
+.cooperationGuyImg {
+    max-width: 25rem;
+    background-color: transparent;
+    object-fit: cover;
+}
+
+.orangeCircle, .blueCircle {
+    position: absolute;
+    z-index: -1;
+}
+
+.orangeCircle {
+    width: 6rem;
+    top: -3rem;
+    right: 1rem;
+}
+
+.blueCircle {
+    width: 4rem;
+    bottom: -6rem;
+    left: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+    .root {
+        padding-bottom: 6rem;
+    }
+
+    .title {
+        margin-bottom: 4.6rem;
+    }
+
+    .list {
+        margin-bottom: 5.2rem;
+    }
+
+    .descriptionContainer {
+        align-items: center;
+        grid-template-areas: 'img desc'
+                        'img desc';
+        grid-template-columns: 40% 60%;
+    }
+
+    .descriptionTextContainer {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        max-width: 35rem;
+        margin: 0 auto;
+    }
+
+    .description {
+        padding: 1.4rem;
+    }
+
+    .cooperationImageContainer {
+        margin-left: 0;
+        margin-right: -5rem;
+    }
+
+    .cooperationGuyImg {
+        margin-top: 0;
+        max-width: 100%;
+    }
+
+    .blueCircle {
+        bottom: -3rem;
+    }
+}
--- a/src/sections/PlanDescriptionSection/PlanDescriptionSection.tsx
+++ b/src/sections/PlanDescriptionSection/PlanDescriptionSection.tsx
@@ -0,0 +1,37 @@
+import styles from './PlanDescriptionSection.module.css';
+import Image from "next/image";
+import {Container} from "@/shared/components/Container/Container";
+import cooperationGuyImg from '@/shared/assets/images/cooperation guy.png'
+import orangeCircle from '@/shared/assets/images/круг желтый.svg'
+import blueCircle from '@/shared/assets/images/круг синий.svg'
+
+export function PlanDescriptionSection() {
+    return (
+        <section className={styles.root}>
+            <Container>
+                <div className={styles.descriptionContainer}>
+                    <div className={styles.descriptionTextContainer}>
+                        <p className={styles.description}>
+                            Вы покупаете у нас только тот товар, который заказали на ваших маркетплейсах, тоесть <span
+                            className={styles.descriptionAccent}>Вы
+                        исключаете
+                        расходы на закупку большой партии товара.</span> Денежные средства вы получаете напрямую от
+                            маркетплейса. В
+                            наш сервис заложены услуги <span className={styles.descriptionAccent}>фулфилмента, хранения товара, упаковки товара и ежедневная доставка
+                        до
+                        сортировочных центров МП</span> -всю <span className={styles.descriptionAccent}>рутинную работу</span> мы берем на себя. Вы
+                            занимаетесь только
+                            продвижением
+                            карточек товара.
+                        </p>
+                        <Image className={styles.orangeCircle} src={orangeCircle} alt={''}/>
+                        <Image className={styles.blueCircle} src={blueCircle} alt={''}/>
+                    </div>
+                    <div className={styles.cooperationImageContainer}>
+                        <Image className={styles.cooperationGuyImg} src={cooperationGuyImg} alt={''} sizes={'100vw'}/>
+                    </div>
+                </div>
+            </Container>
+        </section>
+    );
+};
--- a/src/sections/TestimonialsSection/TestimonialsSection.module.css
+++ b/src/sections/TestimonialsSection/TestimonialsSection.module.css
@@ -0,0 +1,22 @@
+.root {
+    margin-bottom: 4rem;
+}
+
+.title {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+}
+
+@media screen and (min-width: 641px) {
+    .title {
+        font-size: 2.8rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .title {
+        font-size: 2.1rem;
+    }
+}
--- a/src/sections/TestimonialsSection/TestimonialsSection.tsx
+++ b/src/sections/TestimonialsSection/TestimonialsSection.tsx
@@ -0,0 +1,20 @@
+import {Container} from "@/shared/components/Container/Container";
+import chpok from '@/shared/assets/images/chpok.png';
+import styles from './TestimonialsSection.module.css';
+import Image from "next/image";
+import {Carousel} from "@/shared/components/Carousel/Carousel";
+
+export function TestimonialsSection() {
+    return (
+        <section className={styles.root}>
+            <Container>
+                <h3 className={styles.title}>Посмотрите отзывы от наших клиентов</h3>
+                <Carousel>
+                    <Image src={chpok} alt={''}/>
+                    <Image src={chpok} alt={''}/>
+                    <Image src={chpok} alt={''}/>
+                </Carousel>
+            </Container>
+        </section>
+    );
+};
--- a/src/sections/WhyDencoSection/WhyDencoSection.module.css
+++ b/src/sections/WhyDencoSection/WhyDencoSection.module.css
@@ -0,0 +1,71 @@
+.root {
+    padding: 4rem 0 0;
+    margin-bottom: 4rem;
+}
+
+.heading {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.itemList {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    margin-bottom: 4rem;
+}
+
+.certificates {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4rem;
+    padding: 0;
+    gap: 2rem;
+}
+
+.certificate {
+    flex: 1 1 auto;
+}
+
+.forgetEverything {
+    background-color: var(--grey);
+    padding: 1.5rem 0;
+    display: flex;
+    justify-content: center;
+}
+
+.forgetEverythingText {
+    font-family: var(--HelveticaNeueCyr);
+    font-weight: 700;
+    font-size: 2rem;
+    text-align: center;
+    margin: 0 -1.5rem;
+}
+
+@media screen and (min-width: 480px) {
+    .itemList {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media screen and (min-width: 641px) {
+    .heading {
+        font-size: 2.8rem;
+    }
+
+    .forgetEverythingText {
+        margin: unset;
+        font-size: 2.8rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .heading {
+        font-size: 2.1rem;
+    }
+
+    .forgetEverythingText {
+        font-size: 2.1rem;
+    }
+}
--- a/src/sections/WhyDencoSection/WhyDencoSection.tsx
+++ b/src/sections/WhyDencoSection/WhyDencoSection.tsx
@@ -0,0 +1,59 @@
+import {Container} from "@/shared/components/Container/Container";
+import styles from './WhyDencoSection.module.css';
+import {WhyDencoItem, WhyDencoItemProps} from "@/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem";
+import certificate from "@/shared/assets/images/DENCO 30.06.png";
+import Image from "next/image";
+
+const items: WhyDencoItemProps[] = [
+    {
+        position: 1,
+        body: 'Продавайте более полумиллиона товаров без склада и офиса'
+    },
+    {
+        position: 2,
+        body: 'Низкий ФОТ'
+    },
+    {
+        position: 3,
+        body: 'Без больших стартовых затрат'
+    },
+    {
+        position: 4,
+        body: 'Работа из любой точки мира'
+    },
+    {
+        position: 5,
+        body: 'Автоматическое ценообразование. Средняя чистая прибыль товара от 25%'
+    },
+    {
+        position: 6,
+        body: 'Всё автоматизировано - от получения заказа до доставки.'
+    },
+]
+
+export function WhyDencoSection() {
+    return (
+        <section className={styles.root}>
+            <Container>
+                <h3 className={styles.heading}>Почему Denco?</h3>
+                <div className={styles.itemList}>
+                    {items.map((item, i) => <WhyDencoItem key={i} position={item.position} body={item.body}/>)}
+                </div>
+                <div className={styles.certificates}>
+                    <div className={styles.certificate}>
+                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
+                    </div>
+                    <div className={styles.certificate}>
+                        <Image src={certificate} placeholder={'blur'} alt={"Изображение сертификата Denco"} sizes='100vw'/>
+                    </div>
+                </div>
+            </Container>
+            <div className={styles.forgetEverything}>
+                <Container>
+                    <p className={styles.forgetEverythingText}>Забудьте об аренде склада, найме сотрудников, упаковке и
+                        доставке до МП - всё мы сделаем за вас!</p>
+                </Container>
+            </div>
+        </section>
+    );
+};
--- a/src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.module.css
+++ b/src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.module.css
@@ -0,0 +1,50 @@
+.root {
+    background-color: var(--grey);
+    padding: 1.5rem 0.5rem 1.5rem 0.5rem;
+    border-radius: 0.5rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 10rem;
+}
+
+.digit {
+    font-family: var(--ProximaNova);
+    position: absolute;
+    left: 1rem;
+    z-index: 1;
+    color: rgba(183, 183, 183, 0.5);
+    text-transform: uppercase;
+    font-size: 6.4rem;
+}
+
+.body {
+    position: relative;
+    z-index: 2;
+}
+
+@media screen and (min-width: 641px) {
+    .digit {
+        font-size: 10rem;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .digit {
+        font-size: 11.2rem;
+    }
+
+    .body {
+        font-size: 1.75rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .digit {
+        top: -2.4rem;
+    }
+
+    .body {
+        font-size: 1.4rem;
+    }
+}
--- a/src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.tsx
+++ b/src/sections/WhyDencoSection/components/WhyDencoItem/WhyDencoItem.tsx
@@ -0,0 +1,15 @@
+import styles from './WhyDencoItem.module.css';
+
+export type WhyDencoItemProps = {
+    position: number,
+    body: string,
+};
+
+export function WhyDencoItem({position, body}: WhyDencoItemProps) {
+    return (
+        <div className={styles.root}>
+            <p className={styles.digit}>0{position}</p>
+            <p className={styles.body}>{body}</p>
+        </div>
+    );
+};
--- a/src/sections/WideChoiceSection/WideChoiceSection.module.css
+++ b/src/sections/WideChoiceSection/WideChoiceSection.module.css
@@ -0,0 +1,36 @@
+.innerContainer {
+    background-color: var(--grey);
+    padding: 1rem 3rem 4rem;
+    margin: 0 -3rem;
+}
+
+.heading {
+    font-family: var(--HelveticaNeueCyr);
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.subHeading {
+    margin-bottom: 1.5rem;
+}
+
+@media screen and (min-width: 641px) {
+    .innerContainer {
+        margin: 0 -6rem;
+    }
+
+    .heading {
+        font-size: 2.8rem;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .innerContainer {
+        margin: 0;
+    }
+
+    .heading {
+        width: 50%;
+        font-size: 2.1rem;
+    }
+}
--- a/src/sections/WideChoiceSection/WideChoiceSection.tsx
+++ b/src/sections/WideChoiceSection/WideChoiceSection.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import Image from "next/image";
+import {Container} from "@/shared/components/Container/Container";
+import styles from './WideChoiceSection.module.css';
+import {WideChoiceItem} from "@/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem";
+import bear from '@/shared/assets/images/bear.png'
+import tools from '@/shared/assets/images/tools.png'
+import ball from '@/shared/assets/images/ball.png'
+import stationery from '@/shared/assets/images/stationery.png'
+import huntingAndFishing from '@/shared/assets/images/hunting and fishing.png'
+import feast from '@/shared/assets/images/feast.png'
+import healthAndBeauty from '@/shared/assets/images/health and beauty.png'
+import electronics from '@/shared/assets/images/electronics.png'
+import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
+import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
+import Slider, {Settings} from "react-slick";
+
+export function WideChoiceSection() {
+    const settings: Settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        lazyLoad: 'progressive',
+        prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
+        nextArrow: <Image src={sliderArrowRight} alt={''}/>,
+        responsive: [
+            {
+                breakpoint: 480,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3,
+                }
+            }
+        ]
+    };
+
+    return (
+        <section>
+            <Container>
+                <div className={styles.innerContainer}>
+                    <h3 className={styles.heading}>Обширный выбор товаров из различных категорий.</h3>
+                    <p className={styles.subHeading}>Более миллиона товаров - ассортимент обновляется ежедневно</p>
+                    <Slider {...settings}>
+                        <WideChoiceItem imgSrc={bear} name={'Детские игрушки'} alt={'Детские игрушки'}/>
+                        <WideChoiceItem imgSrc={tools} name={'Инструменты'} alt={'Инструменты'}/>
+                        <WideChoiceItem imgSrc={ball} name={'Спортивные товары'} alt={'Спортивные товары'}/>
+                        <WideChoiceItem imgSrc={stationery} name={'Канцтовары'} alt={'Канцтовары'}/>
+                        <WideChoiceItem imgSrc={huntingAndFishing} name={'Охота и рыбалка'} alt={'Охота и рыбалка'}/>
+                        <WideChoiceItem imgSrc={feast} name={'Праздник'} alt={'Праздник'}/>
+                        <WideChoiceItem imgSrc={healthAndBeauty} name={'Красота и здоровье'} alt={'Красота и здоровье'}/>
+                        <WideChoiceItem imgSrc={electronics} name={'Электроника'} alt={'Электроника'}/>
+                    </Slider>
+                </div>
+            </Container>
+        </section>
+    );
+};
--- a/src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css
+++ b/src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css
@@ -0,0 +1,29 @@
+.root {
+    width: 100%;
+}
+
+.container {
+    width: 10rem;
+    height: 14rem;
+    border: 1px solid var(--grey2);
+    margin: 0 auto;
+}
+
+.imageContainer {
+    height: 75%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid var(--grey2);
+}
+
+.name {
+    position: relative;
+    padding: 0.3rem 0;
+    width: 100%;
+    text-align: center;
+    height: 25%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
--- a/src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.tsx
+++ b/src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.tsx
@@ -0,0 +1,23 @@
+import Image, {StaticImageData} from "next/image";
+import styles from './WideChoiceItem.module.css';
+
+export type WideChoiceItemProps = {
+    imgSrc: StaticImageData,
+    name: string,
+    alt: string,
+};
+
+export function WideChoiceItem({imgSrc, name, alt, ...otherProps}: WideChoiceItemProps) {
+    return (
+        <div className={styles.root} {...otherProps}>
+            <div className={styles.container}>
+                <div className={styles.imageContainer}>
+                    <Image src={imgSrc} alt={alt} sizes='100vw' placeholder={'blur'}/>
+                </div>
+                <div className={styles.name}>
+                    <p>{name}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
--- a/src/shared/assets/fonts/HelveticaNeueCyr-Bold.ttf
+++ b/src/shared/assets/fonts/HelveticaNeueCyr-Bold.ttf
--- a/src/shared/assets/fonts/SFProText-Bold.ttf
+++ b/src/shared/assets/fonts/SFProText-Bold.ttf
--- a/src/shared/assets/fonts/SFProText-Regular.ttf
+++ b/src/shared/assets/fonts/SFProText-Regular.ttf
--- a/src/shared/assets/fonts/SFProText-Semibold.ttf
+++ b/src/shared/assets/fonts/SFProText-Semibold.ttf
--- a/src/shared/assets/fonts/proximanova_extrabold.otf
+++ b/src/shared/assets/fonts/proximanova_extrabold.otf
--- a/src/shared/assets/icons/DENCO
+++ b/src/shared/assets/icons/DENCO
@@ -0,0 +1,16 @@
+<svg width="60" height="13" viewBox="0 0 60 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1203_280)">
+<path d="M11.6532 3.83609C11.1522 2.98298 10.4289 2.29867 9.5689 1.8643C8.67491 1.39585 7.64566 1.16162 6.48114 1.16162H1.60718V4.04561H4.09043V3.30231H6.35827C7.43076 3.30231 8.28632 3.6162 8.92495 4.24399C9.56359 4.87177 9.88291 5.72157 9.88291 6.79337C9.88291 7.86624 9.56359 8.71604 8.92495 9.34276C8.28632 9.96948 7.43076 10.285 6.35827 10.2892H4.09043V9.34356H1.60718V12.4299H6.48114C7.64414 12.4299 8.67339 12.1965 9.5689 11.7296C10.4289 11.2952 11.1522 10.6109 11.6532 9.75783C12.1487 8.90804 12.3965 7.92068 12.3965 6.79576C12.3965 5.67085 12.1487 4.68429 11.6532 3.83609Z" fill="white"/>
+<path d="M16.7334 10.337V7.72948H21.7143V5.70112H16.7334V3.25451H22.375V1.16162H14.2661V12.4299H22.5722V10.337H16.7334Z" fill="white"/>
+<path d="M31.9364 1.16162V8.00274L26.6028 1.16162H24.5496V12.4299H27.0017V5.58879L32.3497 12.4307H34.3885V1.16162H31.9364Z" fill="white"/>
+<path d="M42.2046 10.4019C41.5841 10.4134 40.9715 10.2552 40.4267 9.94304C39.9138 9.646 39.4914 9.20238 39.2086 8.66357C38.9114 8.09138 38.7609 7.44787 38.7717 6.79615C38.7609 6.14442 38.9114 5.50092 39.2086 4.92872C39.4914 4.38991 39.9138 3.94629 40.4267 3.64925C40.9715 3.33705 41.5841 3.17892 42.2046 3.19036C43.2771 3.19036 44.1761 3.63039 44.9018 4.51046L46.4946 2.9649C45.983 2.32059 45.3331 1.813 44.5984 1.48386C43.8024 1.13129 42.9455 0.955787 42.0817 0.968409C40.9784 0.968409 39.9848 1.21804 39.1009 1.71729C38.2367 2.19505 37.5145 2.91366 37.0136 3.79424C36.508 4.67962 36.2551 5.68026 36.2551 6.79615C36.2551 7.91203 36.508 8.91267 37.0136 9.79805C37.5139 10.678 38.235 11.3965 39.0979 11.875C39.9813 12.3737 40.9698 12.6231 42.0635 12.6231C42.9332 12.6369 43.7962 12.4616 44.5984 12.1084C45.3366 11.7767 45.9872 11.262 46.4946 10.6083L44.9018 9.06271C44.1761 9.95553 43.2771 10.4019 42.2046 10.4019Z" fill="white"/>
+<path d="M55.5774 9.34355C55.364 9.58032 55.1181 9.78226 54.8478 9.94265C54.3211 10.2438 53.731 10.4016 53.1314 10.4016C52.5317 10.4016 51.9416 10.2438 51.4149 9.94265C50.9083 9.64191 50.4915 9.19885 50.2112 8.66318C49.914 8.09098 49.7635 7.44748 49.7743 6.79575C49.7635 6.14403 49.914 5.50052 50.2112 4.92833C50.4913 4.39276 50.9078 3.94972 51.4142 3.64886C51.9408 3.3477 52.5309 3.18992 53.1306 3.18992C53.7303 3.18992 54.3204 3.3477 54.847 3.64886C55.0369 3.76166 55.2148 3.89518 55.378 4.0472H58.3626C58.3224 3.96753 58.2799 3.88786 58.2351 3.80819C57.7276 2.92682 57.0017 2.20676 56.1349 1.72487C55.247 1.2203 54.2458 0.968018 53.1314 0.968018C52.0169 0.968018 51.0132 1.2203 50.1202 1.72487C49.2512 2.20385 48.5247 2.92526 48.0207 3.80979C47.5105 4.71255 47.248 5.74599 47.2623 6.79575C47.248 7.84552 47.5105 8.87896 48.0207 9.78172C48.525 10.6661 49.2513 11.3874 50.1202 11.8666C51.0137 12.3707 52.0174 12.6227 53.1314 12.6227C54.2453 12.6227 55.2465 12.3707 56.1349 11.8666C57.0017 11.3841 57.7276 10.6635 58.2351 9.78172C58.3178 9.63832 58.3929 9.49253 58.4627 9.34355H55.5774Z" fill="white"/>
+<path d="M60 4.60327H54.2363V8.78586H60V4.60327Z" fill="white"/>
+<path d="M5.7629 4.60327H0V8.78586H5.7629V4.60327Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1203_280">
+<rect width="60" height="12.0863" fill="white" transform="translate(0 0.543213)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/assets/icons/DENCO
+++ b/src/shared/assets/icons/DENCO
@@ -0,0 +1,16 @@
+<svg width="200" height="37" viewBox="0 0 200 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1254_778)">
+<path d="M38.8441 9.48733C37.1742 6.78003 34.7631 4.60838 31.8964 3.2299C28.9165 1.74329 25.4856 0.999985 21.6039 0.999985H5.35736V10.1523H13.6349V7.7934H21.1943C24.7693 7.7934 27.6212 8.78953 29.7499 10.7818C31.8787 12.7741 32.9431 15.4709 32.9431 18.8722C32.9431 22.2769 31.8787 24.9737 29.7499 26.9626C27.6212 28.9515 24.7693 29.9527 21.1943 29.9662H13.6349V26.9651H5.35736V36.7596H21.6039C25.4806 36.7596 28.9114 36.0188 31.8964 34.5373C34.7631 33.1588 37.1742 30.9871 38.8441 28.2798C40.4959 25.583 41.3218 22.4497 41.3218 18.8798C41.3218 15.3099 40.4959 12.1791 38.8441 9.48733Z" fill="#333333"/>
+<path d="M55.7783 30.1179V21.8429H72.3813V15.406H55.7783V7.64171H74.5835V0.999985H47.5539V36.7596H75.2408V30.1179H55.7783Z" fill="#333333"/>
+<path d="M106.455 0.999985V22.7101L88.6759 0.999985H81.832V36.7596H90.0058V15.0495L107.833 36.7621H114.628V0.999985H106.455Z" fill="#333333"/>
+<path d="M140.682 29.9391C138.614 29.9754 136.572 29.4735 134.756 28.4828C133.046 27.5401 131.638 26.1323 130.696 24.4224C129.705 22.6066 129.203 20.5644 129.239 18.4962C129.203 16.428 129.705 14.3858 130.696 12.57C131.638 10.8601 133.046 9.45224 134.756 8.50959C136.572 7.51884 138.614 7.01702 140.682 7.05332C144.257 7.05332 147.254 8.44975 149.673 11.2426L154.982 6.33782C153.277 4.29312 151.11 2.68231 148.661 1.6378C146.008 0.518928 143.152 -0.0380396 140.273 0.00201699C136.595 0.00201699 133.283 0.794203 130.337 2.37857C127.456 3.89473 125.048 6.17522 123.379 8.96973C121.693 11.7795 120.851 14.955 120.851 18.4962C120.851 22.0374 121.693 25.2129 123.379 28.0226C125.046 30.8152 127.45 33.0954 130.326 34.6138C133.271 36.1965 136.566 36.9878 140.212 36.9878C143.111 37.0315 145.987 36.4755 148.661 35.3546C151.122 34.3018 153.291 32.6683 154.982 30.5939L149.673 25.6891C147.254 28.5224 144.257 29.9391 140.682 29.9391Z" fill="#333333"/>
+<path d="M185.258 26.5795C184.546 27.3309 183.727 27.9718 182.826 28.4808C181.07 29.4365 179.103 29.9372 177.104 29.9372C175.105 29.9372 173.138 29.4365 171.383 28.4808C169.694 27.5264 168.305 26.1203 167.37 24.4204C166.38 22.6046 165.878 20.5624 165.914 18.4942C165.878 16.4259 166.38 14.3838 167.37 12.5679C168.304 10.8683 169.692 9.46234 171.38 8.50757C173.136 7.55186 175.103 7.05114 177.102 7.05114C179.1 7.05114 181.068 7.55186 182.823 8.50757C183.456 8.86555 184.049 9.28927 184.593 9.7717H194.542C194.408 9.51887 194.266 9.26605 194.117 9.01322C192.425 6.21621 190.005 3.93111 187.116 2.40184C184.156 0.800613 180.819 0 177.104 0C173.389 0 170.044 0.800613 167.067 2.40184C164.17 3.92189 161.749 6.21127 160.069 9.01828C158.368 11.8832 157.493 15.1628 157.541 18.4942C157.493 21.8256 158.368 25.1052 160.069 27.9701C161.749 30.7765 164.171 33.0657 167.067 34.5865C170.045 36.186 173.391 36.9858 177.104 36.9858C180.817 36.9858 184.155 36.186 187.116 34.5865C190.005 33.0551 192.425 30.7684 194.117 27.9701C194.392 27.515 194.643 27.0523 194.875 26.5795H185.258Z" fill="#333333"/>
+<path d="M200 12H180.788V25.2733H200V12Z" fill="#29ABE2"/>
+<path d="M19.2097 12H0V25.2733H19.2097V12Z" fill="#29ABE2"/>
+</g>
+<defs>
+<clipPath id="clip0_1254_778">
+<rect width="200" height="36.9858" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/assets/icons/sliderArrowLeft.svg
+++ b/src/shared/assets/icons/sliderArrowLeft.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M7.5 1.16812L6.23828 0.00012207L0 5.76801L6.23828 11.5359L7.5 10.3679L2.52734 5.76801L7.5 1.16812Z" fill="#2B2D3A"/>
+</svg>
--- a/src/shared/assets/icons/sliderArrowRight.svg
+++ b/src/shared/assets/icons/sliderArrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M0.5 10.832L1.76172 12L8 6.23212L1.76172 0.464231L0.5 1.63223L5.47266 6.23212L0.5 10.832Z" fill="#2B2D3A"/>
+</svg>
--- a/src/shared/assets/icons/ватсап.svg
+++ b/src/shared/assets/icons/ватсап.svg
@@ -0,0 +1,11 @@
+<svg width="44" height="43" viewBox="0 0 44 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1254_764)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.3363 6.73214C32.3983 2.87178 27.1615 0.744914 21.5818 0.742676C10.0854 0.742676 0.72848 9.90392 0.723993 21.1643C0.722384 24.764 1.68284 28.2774 3.50817 31.3745L0.549072 41.9576L11.6061 39.1176C14.6526 40.7447 18.0827 41.6023 21.5735 41.6035H21.582C21.5813 41.6035 21.5827 41.6035 21.582 41.6035C33.0773 41.6035 42.435 32.4413 42.4398 21.1807C42.4418 15.7235 40.2743 10.5923 36.3363 6.73214ZM21.5819 38.1543H21.5749C18.4643 38.1532 15.4131 37.3347 12.7514 35.7882L12.1184 35.4204L5.55701 37.1056L7.30842 30.8416L6.89618 30.1993C5.16086 27.4967 4.24434 24.3729 4.2457 21.1655C4.24942 11.8063 12.0266 4.19201 21.589 4.19201C26.2194 4.19342 30.5722 5.96148 33.8453 9.17006C37.1183 12.3786 38.9199 16.6436 38.918 21.1793C38.9141 30.5392 31.1372 38.1543 21.5819 38.1543Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0912 25.4409C30.5701 25.1854 28.0077 23.9511 27.53 23.7807C27.0523 23.6104 26.7049 23.5252 26.3575 24.0361C26.0101 24.5468 25.0113 25.6964 24.7072 26.037C24.4033 26.3774 24.0992 26.4203 23.5781 26.1646C23.057 25.9092 21.3777 25.3704 19.3871 23.6318C17.8377 22.2786 16.7919 20.6076 16.4877 20.0966C16.1838 19.5859 16.4554 19.3097 16.7163 19.0552C16.9508 18.8265 17.2375 18.4592 17.4981 18.1612C17.7587 17.8633 17.8455 17.6503 18.0193 17.3099C18.193 16.9693 18.1062 16.6713 17.9758 16.4159C17.8455 16.1605 16.8033 13.6487 16.369 12.6268C15.9459 11.6319 15.5163 11.7667 15.1963 11.7508C14.8928 11.736 14.5449 11.7329 14.1975 11.7329C13.8501 11.7329 13.2854 11.8607 12.8078 12.3714C12.3301 12.8824 10.9836 14.117 10.9836 16.6286C10.9836 19.1404 12.8511 21.567 13.1117 21.9075C13.3723 22.2482 16.7867 27.4024 22.0147 29.6129C23.2581 30.1387 24.2289 30.4527 24.9857 30.6878C26.2342 31.0763 27.3703 31.0214 28.2683 30.89C29.2697 30.7435 31.3518 29.6556 31.786 28.4637C32.2204 27.2715 32.2204 26.2497 32.09 26.0369C31.9598 25.8241 31.6123 25.6964 31.0912 25.4409Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1254_764">
+<rect width="43" height="42" fill="white" transform="translate(0.0678711 0.104004)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/assets/icons/лого
+++ b/src/shared/assets/icons/лого
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="25" cy="25" r="24.5" stroke="#2478F8"/>
+    <path d="M39.9003 12.7311L34.6186 38.1891C34.2201 39.9858 33.1809 40.433 31.7042 39.5865L23.6566 33.5255L19.7735 37.3426C19.3438 37.7818 18.9843 38.1491 18.1561 38.1491L18.7343 29.7723L33.6497 15.9972C34.2982 15.4063 33.5091 15.0789 32.6418 15.6698L14.2027 27.5363L6.26446 24.9969C4.53775 24.4459 4.50649 23.2321 6.62387 22.3856L37.6735 10.1598C39.1111 9.60876 40.3691 10.4872 39.9003 12.7311Z"
+          fill="#2478F8"/>
+</svg>
--- a/src/shared/assets/icons/телеграм.svg
+++ b/src/shared/assets/icons/телеграм.svg
@@ -0,0 +1,10 @@
+<svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1254_768)">
+<path d="M38.9547 3.43833L33.0699 29.5899C32.6259 31.4356 31.4681 31.895 29.8228 31.0254L20.8563 24.7993L16.5297 28.7204C16.051 29.1715 15.6505 29.5489 14.7277 29.5489L15.3719 20.9438L31.9905 6.79341C32.713 6.18638 31.8338 5.85005 30.8675 6.45708L10.3228 18.6469L1.47818 16.0383C-0.445702 15.4723 -0.480523 14.2254 1.87863 13.3559L36.4737 0.796924C38.0755 0.230908 39.4771 1.13325 38.9547 3.43833Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1254_768">
+<rect width="39" height="31" fill="white" transform="translate(0.0678711 0.604004)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/assets/images/DENCO
+++ b/src/shared/assets/images/DENCO
--- a/src/shared/assets/images/FBO.png
+++ b/src/shared/assets/images/FBO.png
--- a/src/shared/assets/images/FBS.png
+++ b/src/shared/assets/images/FBS.png
--- a/src/shared/assets/images/accountItems/accountBalancePage.png
+++ b/src/shared/assets/images/accountItems/accountBalancePage.png
--- a/src/shared/assets/images/accountItems/itemsPage.png
+++ b/src/shared/assets/images/accountItems/itemsPage.png
--- a/src/shared/assets/images/accountItems/mainPage.png
+++ b/src/shared/assets/images/accountItems/mainPage.png
--- a/src/shared/assets/images/accountItems/ordersPage.png
+++ b/src/shared/assets/images/accountItems/ordersPage.png
--- a/src/shared/assets/images/accountItems/pricesPage.png
+++ b/src/shared/assets/images/accountItems/pricesPage.png
--- a/src/shared/assets/images/accountItems/statisticsPage.png
+++ b/src/shared/assets/images/accountItems/statisticsPage.png
--- a/src/shared/assets/images/accountItems/tablePage.png
+++ b/src/shared/assets/images/accountItems/tablePage.png
--- a/src/shared/assets/images/ball.png
+++ b/src/shared/assets/images/ball.png
--- a/src/shared/assets/images/bear.png
+++ b/src/shared/assets/images/bear.png
--- a/src/shared/assets/images/chpok.png
+++ b/src/shared/assets/images/chpok.png
--- a/src/shared/assets/images/cooperation
+++ b/src/shared/assets/images/cooperation
--- a/src/shared/assets/images/cooperation1.png
+++ b/src/shared/assets/images/cooperation1.png
--- a/src/shared/assets/images/cooperation2.png
+++ b/src/shared/assets/images/cooperation2.png
--- a/src/shared/assets/images/cooperation3.png
+++ b/src/shared/assets/images/cooperation3.png
--- a/src/shared/assets/images/cooperation4.png
+++ b/src/shared/assets/images/cooperation4.png
--- a/src/shared/assets/images/cooperation5.png
+++ b/src/shared/assets/images/cooperation5.png
--- a/src/shared/assets/images/cooperation6.png
+++ b/src/shared/assets/images/cooperation6.png
--- a/src/shared/assets/images/electronics.png
+++ b/src/shared/assets/images/electronics.png
--- a/src/shared/assets/images/feast.png
+++ b/src/shared/assets/images/feast.png
--- a/src/shared/assets/images/health
+++ b/src/shared/assets/images/health
--- a/src/shared/assets/images/hunting
+++ b/src/shared/assets/images/hunting
--- a/src/shared/assets/images/phone/phoneLight.svg
+++ b/src/shared/assets/images/phone/phoneLight.svg
@@ -0,0 +1,3 @@
+<svg width="1243" height="920" viewBox="0 0 1243 920" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" d="M183 0.959229L1.2331 623.263C-0.848075 630.388 -0.213801 638.032 3.0133 644.717L127.375 902.323C133.562 915.139 147.901 921.844 161.702 918.376L269 891.416L1243 0.959229H183Z" fill="white"/>
+</svg>
--- a/src/shared/assets/images/phone/phoneShadow.svg
+++ b/src/shared/assets/images/phone/phoneShadow.svg
@@ -0,0 +1,12 @@
+<svg width="290" height="81" viewBox="0 0 290 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_1254_694)">
+<ellipse cx="145" cy="40.7217" rx="120" ry="15" fill="#B7B7B7"/>
+</g>
+<defs>
+<filter id="filter0_f_1254_694" x="0" y="0.72168" width="290" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12.5" result="effect1_foregroundBlur_1254_694"/>
+</filter>
+</defs>
+</svg>
--- a/src/shared/assets/images/phone/телефон
+++ b/src/shared/assets/images/phone/телефон
--- a/src/shared/assets/images/stationery.png
+++ b/src/shared/assets/images/stationery.png
--- a/src/shared/assets/images/tools.png
+++ b/src/shared/assets/images/tools.png
--- a/src/shared/assets/images/вб.svg
+++ b/src/shared/assets/images/вб.svg
@@ -0,0 +1,20 @@
+<svg width="232" height="30" viewBox="0 0 232 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1254_566)">
+<path d="M7.37578 28.9655L0.362671 0.672424H5.00649L10.4085 22.3966L16.1896 0.672424H20.5017L26.2827 22.5L31.6847 0.672424H36.2812L29.2681 28.9655H23.9134L18.2745 7.86208L12.683 28.9655H7.37578Z" fill="#BE11A5"/>
+<path d="M39.5034 0.672424H43.9103V28.9655H39.5034V0.672424Z" fill="#BE11A5"/>
+<path d="M53.2453 24.5172H63.9072V28.9655H48.9332V0.724121H53.2453V24.5172Z" fill="#BE11A5"/>
+<path d="M77.4595 0.724136C80.8239 0.620687 84.0935 2.12069 86.4155 4.81035C91.2014 10.4483 91.2014 19.2414 86.4155 24.8793C84.0935 27.569 80.8239 29.069 77.4595 28.9655H67.1294V0.724136H77.4595ZM77.4595 24.5172C79.9236 24.5172 81.9612 23.5862 83.4775 21.7759C85.0886 19.9138 85.9416 17.3793 85.8468 14.8448C85.9416 12.2586 85.0886 9.77587 83.4775 7.9138C81.9138 6.10345 79.734 5.06897 77.4595 5.17242H71.4415V24.5172H77.4595Z" fill="#BE11A5"/>
+<path d="M113.141 20.8966C113.188 23.069 112.336 25.1897 110.867 26.6379C109.35 28.1897 107.36 29.0173 105.275 28.9655H94.0446V0.724151H104.469C106.46 0.672427 108.402 1.50002 109.919 2.94829C111.388 4.34484 112.193 6.41381 112.146 8.5345C112.241 10.8104 111.198 12.9828 109.492 14.2759C111.767 15.5173 113.188 18.1035 113.141 20.8966ZM98.3567 5.06898V12.5173H104.469C106.365 12.5173 107.881 10.8621 107.881 8.79312C107.881 6.72415 106.365 5.06898 104.469 5.06898H98.3567ZM105.275 24.569C107.265 24.4655 108.829 22.6552 108.734 20.4828C108.687 18.4138 107.123 16.7586 105.275 16.7069H98.3567V24.6207L105.275 24.569Z" fill="#BE11A5"/>
+<path d="M121.576 24.5172H133.185V28.9655H117.264V0.724121H132.996V5.1724H121.576V12.5172H132.095V16.9138H121.576V24.5172Z" fill="#BE11A5"/>
+<path d="M151.997 28.9655L146.406 18.6724H141.336V28.9655H137.024V0.672415H147.543C149.77 0.620691 151.95 1.60345 153.514 3.36207C155.125 5.01724 156.025 7.34482 155.978 9.77586C155.931 13.3965 153.893 16.6552 150.765 17.9483L156.736 28.9655H151.997ZM141.336 5.06897V14.5345H147.496C149.865 14.431 151.713 12.2069 151.618 9.56896C151.524 7.13793 149.723 5.17241 147.496 5.06897H141.336Z" fill="#BE11A5"/>
+<path d="M174.98 28.9655L169.435 18.6724H164.365V28.9655H160.053V0.672415H170.573C172.8 0.620691 174.98 1.60345 176.543 3.36207C178.154 5.01724 179.055 7.34482 179.007 9.77586C178.96 13.3965 176.922 16.6552 173.795 17.9483L179.766 28.9655H174.98ZM164.365 5.06897V14.5345H170.525C172.942 14.3793 174.743 12.1552 174.601 9.51724C174.458 7.13793 172.705 5.17241 170.525 5.06897H164.365Z" fill="#BE11A5"/>
+<path d="M182.893 0.672424H187.205V28.9655H182.893V0.672424Z" fill="#BE11A5"/>
+<path d="M196.588 24.5172H208.197V28.9655H192.276V0.724121H208.008V5.1724H196.588V12.5172H207.107V16.9138H196.588V24.5172Z" fill="#BE11A5"/>
+<path d="M211.23 22.5517L214.973 20.2241C216.016 23.431 218.196 24.9828 221.465 24.9828C224.735 24.9828 226.346 23.4828 226.346 21.2586C226.393 20.2241 225.872 19.1897 225.019 18.6724C224.166 18.0517 222.602 17.3793 220.375 16.6552C217.864 15.8276 216.632 15.3103 214.879 14.069C213.125 12.8276 212.32 10.9138 212.32 8.3793C212.225 6.10344 213.173 3.87931 214.784 2.43103C216.442 0.931029 218.575 0.155166 220.754 0.20689C224.687 0.0517175 228.289 2.53448 229.9 6.41379L226.299 8.63793C225.209 6.05172 223.361 4.7069 220.802 4.7069C218.243 4.7069 216.679 6.05172 216.679 8.22413C216.679 10.3965 217.959 11.2759 221.986 12.6207C222.982 12.9828 223.692 13.2414 224.166 13.4483C224.64 13.6552 225.303 13.9138 226.109 14.2759C226.772 14.5345 227.436 14.9483 228.004 15.4138C229.379 16.6034 230.895 18.5172 230.705 21.2069C230.8 23.5862 229.853 25.8103 228.147 27.3103C226.441 28.8103 224.214 29.5345 221.418 29.5345C216.253 29.4828 212.557 26.8448 211.23 22.5517Z" fill="#BE11A5"/>
+</g>
+<defs>
+<clipPath id="clip0_1254_566">
+<rect width="230.769" height="30" fill="white" transform="translate(0.362671)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/assets/images/круг
+++ b/src/shared/assets/images/круг
@@ -0,0 +1,3 @@
+<svg width="161" height="161" viewBox="0 0 161 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="80.8125" cy="80.959" r="80" fill="#EA9500"/>
+</svg>
--- a/src/shared/assets/images/круг
+++ b/src/shared/assets/images/круг
@@ -0,0 +1,3 @@
+<svg width="131" height="130" viewBox="0 0 131 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="65.5625" cy="65" r="63" stroke="#2478F8" stroke-width="4"/>
+</svg>
--- a/src/shared/assets/images/озон.svg
+++ b/src/shared/assets/images/озон.svg
@@ -0,0 +1,3 @@
+<svg width="138" height="30" viewBox="0 0 138 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2421 22.502C22.6098 22.075 25.3302 19.3546 25.7599 15.9843C25.9099 14.8339 25.7937 13.6645 25.4201 12.5662C25.0465 11.4679 24.4257 10.4701 23.6054 9.64985C22.7851 8.82955 21.7873 8.20867 20.689 7.83511C19.5907 7.46154 18.4213 7.34529 17.271 7.49531C13.9006 7.92499 11.1802 10.6454 10.7532 14.0131C10.6032 15.1634 10.7194 16.3328 11.093 17.4311C11.4666 18.5294 12.0874 19.5272 12.9077 20.3475C13.728 21.1678 14.7258 21.7887 15.8241 22.1622C16.9224 22.5358 18.0918 22.652 19.2421 22.502ZM19.7014 0.888915C22.9436 1.23023 25.9704 2.67425 28.2757 4.97953C30.581 7.28481 32.025 10.3116 32.3663 13.5539C33.2552 22.5235 25.7787 30 16.8064 29.1111C13.5646 28.7692 10.5384 27.3249 8.23369 25.0197C5.92895 22.7145 4.48532 19.688 4.14411 16.4462C3.2552 7.47651 10.7317 6.61612e-06 19.7014 0.888915ZM39.9771 1.45019H60.7389C61.5284 1.45019 61.9742 2.35253 61.4989 2.98094L47.134 21.9327H58.389C60.4408 21.9327 62.0548 23.7991 61.6305 25.9261C61.3189 27.4864 59.8553 28.5498 58.2655 28.5498H35.7178C34.9363 28.5498 34.4932 27.6555 34.9632 27.0352L49.3388 8.06732H40.1006C38.5108 8.06732 37.0472 7.00117 36.7356 5.44357C36.3086 3.31663 37.9253 1.45019 39.9771 1.45019ZM130.079 1.52538C132.222 1.07422 134.107 2.69627 134.107 4.75876V27.5938C134.107 28.3914 133.186 28.8345 132.563 28.3404L114.653 14.1312V25.2466C114.653 27.3091 112.768 28.9312 110.625 28.48C109.089 28.1577 108.036 26.7264 108.036 25.158V2.40355C108.036 1.60595 108.957 1.16284 109.581 1.65698L127.493 15.8661V4.84738C127.493 3.27903 128.548 1.85033 130.082 1.52538H130.079ZM83.445 0.816406C94.41 0.816406 103.299 7.16499 103.299 14.996C103.299 22.827 94.41 29.1756 83.445 29.1756C72.48 29.1756 63.5909 22.827 63.5909 14.996C63.5909 7.16499 72.48 0.816406 83.445 0.816406ZM83.445 7.43354C75.8691 7.43354 70.208 11.4269 70.208 14.996C70.208 18.565 75.8691 22.5584 83.445 22.5584C91.0209 22.5584 96.6819 18.5677 96.6819 14.996C96.6819 11.4242 91.0209 7.43354 83.445 7.43354Z" fill="#005BFF"/>
+</svg>
--- a/src/shared/assets/images/парень-и-лого-мп.png
+++ b/src/shared/assets/images/парень-и-лого-мп.png
--- a/src/shared/assets/images/ям.svg
+++ b/src/shared/assets/images/ям.svg
@@ -0,0 +1,19 @@
+<svg width="215" height="40" viewBox="0 0 215 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1254_578)">
+<path d="M100.662 33.5422H104.903L110.831 11.5181V33.5422H115.602V4.43372H109.048L103.12 25.7831L97.1921 4.43372H90.4933V33.5422H94.5897V11.5181L100.662 33.5422ZM135.554 19.1325C135.554 13.9759 132.999 12.0482 127.698 12.0482C124.373 12.0482 121.77 13.0602 120.228 13.9759V18.0723C121.529 17.0602 124.469 16 127.072 16C129.529 16 130.541 16.9156 130.541 19.0843V20.2409H129.77C122.156 20.2409 118.686 22.7952 118.686 27.0843C118.686 31.3735 121.24 33.7831 125.144 33.7831C128.084 33.7831 129.385 32.8675 130.301 31.8554H130.541C130.541 32.3855 130.782 33.1566 130.927 33.5422H135.843C135.698 31.8554 135.602 30.0723 135.602 28.3855C135.554 28.3855 135.554 19.1325 135.554 19.1325ZM130.541 28.5301C129.915 29.4458 128.758 30.2168 126.927 30.2168C124.855 30.2168 123.843 28.9156 123.843 27.1325C123.843 24.6747 125.529 23.8072 129.915 23.8072H130.686V28.5783H130.541V28.5301ZM144.18 12.4337H139.554V39.6144H144.566V31.1325C145.867 33.0602 147.65 33.9759 149.867 33.9759C154.782 33.9759 158.108 30.1205 158.108 23.0361C158.108 15.9518 154.879 12.0964 150.108 12.0964C147.794 12.0964 145.867 13.1084 144.421 15.1807C144.469 15.1325 144.18 12.4337 144.18 12.4337ZM148.469 30.0723C145.915 30.0723 144.469 27.9036 144.469 23.1325C144.469 18.2168 145.867 16.0482 148.71 16.0482C151.409 16.0482 152.807 18.2168 152.807 22.9879C152.807 27.9036 151.409 30.0723 148.469 30.0723ZM173.674 33.5422H179.361L171.361 22.2169L178.445 12.4337H173.433L166.349 22.2169V12.4337H161.337V33.5422H166.349V23.2289L173.674 33.5422ZM196.084 32.1446V28.0482C194.541 29.0602 191.987 29.9759 189.529 29.9759C185.915 29.9759 184.517 28.2891 184.228 24.6747H196.18V21.9759C196.18 14.6506 192.951 11.9518 187.939 11.9518C181.867 11.9518 178.927 16.5783 178.927 23.0361C178.927 30.3614 182.541 33.9759 188.855 33.9759C192.373 33.9277 194.686 33.1566 196.084 32.1446ZM187.987 16.0482C190.445 16.0482 191.216 18.1205 191.216 20.6747V21.0602H184.228C184.373 17.7349 185.674 16.0482 187.987 16.0482ZM214.108 16.4337V12.4337H197.385V16.4337H203.313V33.5422H208.325V16.4337H214.108Z" fill="#333333"/>
+<path d="M60.7583 38.6988C71.4571 38.6988 80.0836 30.0723 80.0836 19.3735C80.0836 8.67472 71.4571 0.0482178 60.7583 0.0482178C50.0595 0.0482178 41.433 8.67472 41.433 19.3735C41.3367 30.0723 50.1077 38.6988 60.7583 38.6988Z" fill="#FED42B"/>
+<path d="M19.4571 38.6988C30.1302 38.6988 38.7824 30.0466 38.7824 19.3735C38.7824 8.70045 30.1302 0.0482178 19.4571 0.0482178C8.78407 0.0482178 0.131836 8.70045 0.131836 19.3735C0.131836 30.0466 8.78407 38.6988 19.4571 38.6988Z" fill="#FC3F1D"/>
+<path d="M22.2524 10.8916H20.3246C16.9993 10.8916 15.3126 12.5783 15.3126 15.1325C15.3126 17.9759 16.4692 19.3735 18.927 21.0602L20.8548 22.4578L15.3126 31.0843H10.7825L16.0837 23.2289C12.9993 21.0602 11.3126 18.9879 11.3126 15.3735C11.3126 10.8434 14.3969 7.75903 20.3246 7.75903H26.2523V30.9397H22.3969V10.8434H22.2524V10.8916Z" fill="white"/>
+<mask id="mask0_1254_578" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="41" y="0" width="40" height="39">
+<path d="M60.7583 38.6988C71.4571 38.6988 80.0836 30.0723 80.0836 19.3735C80.0836 8.67472 71.4571 0.0482178 60.7583 0.0482178C50.0595 0.0482178 41.433 8.67472 41.433 19.3735C41.3367 30.0723 50.1077 38.6988 60.7583 38.6988Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1254_578)">
+<path d="M51.2644 10.6506L34.2523 32.9157L38.7824 38.0723L51.4089 21.3494L50.1077 30.506L57.1921 32.9639L65.8186 19.1807C65.433 21.735 64.8065 27.6627 70.4451 29.494C79.3126 32.1928 87.0716 16.241 90.6379 8.14459L85.4812 5.4458C81.4812 13.8313 75.3126 23.0844 72.8547 22.4579C70.3969 21.8313 72.6138 13.9759 74.0114 8.91568V8.7711L66.1559 6.07231L56.7583 21.3976L58.0595 13.0121L51.2644 10.6506Z" fill="#333333"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1254_578">
+<rect width="213.976" height="40" fill="white" transform="translate(0.131836)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/components/Carousel/Carousel.module.css
+++ b/src/shared/components/Carousel/Carousel.module.css
@@ -0,0 +1,5 @@
+.root {
+    padding: 0 1rem;
+    max-width: 900px;
+    margin: 0 auto;
+}
--- a/src/shared/components/Carousel/Carousel.tsx
+++ b/src/shared/components/Carousel/Carousel.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import styles from './Carousel.module.css';
+import {ComponentProps, ReactNode} from "react";
+import Slider from "react-slick";
+import Image from "next/image";
+import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
+import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
+
+type Props = {
+    children: ReactNode
+};
+
+const settings: ComponentProps<typeof Slider> = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    lazyLoad: 'progressive',
+    prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
+    nextArrow: <Image src={sliderArrowRight} alt={''}/>,
+};
+
+export function Carousel({children}: Props) {
+    return (
+        <div className={styles.root}>
+            <Slider {...settings}>
+                {children}
+            </Slider>
+        </div>
+    );
+};
--- a/src/shared/components/Container/Container.module.css
+++ b/src/shared/components/Container/Container.module.css
@@ -0,0 +1,18 @@
+.root {
+    max-width: var(--container-width);
+    padding: 0 3rem;
+    margin: 0 auto;
+}
+
+@media screen and (min-width: 641px) {
+    .root {
+        padding: 0 6rem;
+    }
+}
+
+
+@media screen and (min-width: 992px) {
+    .root {
+        padding: 0 3rem;
+    }
+}
--- a/src/shared/components/Container/Container.tsx
+++ b/src/shared/components/Container/Container.tsx
@@ -0,0 +1,16 @@
+import {ReactNode} from "react";
+import classNames from "classnames";
+import styles from './Container.module.css';
+
+type Props = {
+    children: ReactNode,
+    className?: string,
+};
+
+export function Container({children, className}: Props) {
+    return (
+        <div className={classNames(styles.root, className)}>
+            {children}
+        </div>
+    );
+};
--- a/src/shared/components/Modal/Modal.module.css
+++ b/src/shared/components/Modal/Modal.module.css
@@ -0,0 +1,13 @@
+.root {
+    background-color: var(--modal-background);
+    position: fixed;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+}
+
+.container {
+    padding: 0 1rem 0;
+}
--- a/src/shared/components/Modal/Modal.tsx
+++ b/src/shared/components/Modal/Modal.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import {ReactNode, useEffect} from "react";
+import styles from './Modal.module.css';
+
+type Props = {
+    children?: ReactNode,
+    onClose?: () => void;
+};
+
+export function Modal(props: Props) {
+    const {children, onClose} = props;
+
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'scroll'
+        }
+    }, []);
+
+    return (
+        <div className={styles.root} onClick={onClose}>
+            <div className={styles.container} onClick={(e) => e.stopPropagation()}>
+                {children}
+            </div>
+        </div>
+    );
+}
--- a/src/shared/styles.css
+++ b/src/shared/styles.css
@@ -0,0 +1,71 @@
+/*@font-face {*/
+/*    font-family: 'HelveticaNeueCyr';*/
+/*    font-style: normal;*/
+/*    font-weight: 700;*/
+/*    src: local('HelveticaNeueCyr'), url('assets/fonts/HelveticaNeueCyr-Bold.ttf') format('ttf');*/
+/*}*/
+
+/*@font-face {*/
+/*    font-family: 'SFProText';*/
+/*    font-style: normal;*/
+/*    font-weight: 400;*/
+/*    src: local('SFProText-Regular'), url('assets/fonts/SFProText-Regular.ttf') format('ttf');*/
+/*}*/
+
+/*@font-face {*/
+/*    font-family: 'SFProText';*/
+/*    font-style: normal;*/
+/*    font-weight: 700;*/
+/*    src: local('SFProText-Bold'), url('assets/fonts/SFProText-Bold.ttf') format('ttf');*/
+/*}*/
+
+*, *:before, *:after {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+}
+
+html {
+    font-size: 10px;
+    font-family: var(--SFProText);
+    font-weight: 400;
+    color: var(--black);
+}
+
+body {
+    font-size: 1.4rem;
+}
+
+button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    user-select: none;
+}
+
+a {
+    text-decoration: none;
+    display: inline-block;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+    display: inline-block;
+}
+
+@media screen and (min-width: 641px) {
+    html {
+        font-size: 11.43px;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    html {
+        font-size: 17.14px;
+    }
+}
--- a/src/shared/variables.css
+++ b/src/shared/variables.css
@@ -0,0 +1,10 @@
+:root {
+    --grey: #f0f0f0;
+    --black: #333;
+    --grey2: #b7b7b7;
+    --white: #fff;
+    --blue: #2478f8;
+    --modal-background: rgba(0, 0, 0, 0.5);
+
+    --container-width: 1250px;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/yarn.lock
+++ b/yarn.lock