2025-06-06 12:15:01 +00:00
41 changed files with 1593 additions and 546 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "next": "15.3.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
+        "react-hot-toast": "^2.5.2",
        "swiper": "^11.2.8"
      },
      "devDependencies": {
@@ -2101,7 +2102,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/damerau-levenshtein": {
@@ -3227,6 +3227,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
    "node_modules/gopd": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4759,6 +4768,23 @@
        "react": "^19.1.0"
      }
    },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "next": "15.3.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.5.2",
    "swiper": "^11.2.8"
  },
  "devDependencies": {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Open_Sans } from 'next/font/google';
 import '@core/styles/reset.scss';
 import '@core/styles/globals.scss';
+import { Toaster } from 'react-hot-toast';

 const openSans = Open_Sans({
  subsets: ['cyrillic'],
@@ -32,7 +33,10 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang='en'>
-      <body className={`${openSans.variable}`}>{children}</body>
+      <body className={`${openSans.variable}`}>
+        {children}
+        <Toaster />
+      </body>
    </html>
  );
 }
--- a/src/entities/home/ConsultationOrder/index.ts
+++ b/src/entities/home/ConsultationOrder/index.ts
@@ -0,0 +1 @@
+export { default as ConsultationOrder } from './ui';
--- a/src/entities/home/ConsultationOrder/ui.tsx
+++ b/src/entities/home/ConsultationOrder/ui.tsx
@@ -0,0 +1,13 @@
+'use client';
+import { Button } from '@shared/ui';
+import toast from 'react-hot-toast';
+
+export default function ConsultationOrder() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <Button variant='orange' onClick={notify}>
+      Получить консультацию
+    </Button>
+  );
+}
--- a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
+++ b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
@@ -6,13 +6,36 @@
  width: 100%;
  position: relative;
  z-index: 2;
-  padding-left: 2vw;
+
+  @include iftablet{
+  }
+  @include iflaptop{
+    padding-left: rem(16px);
+  }
+  @include ifdesktop{
+    padding-left: rem(32px);
+  }
 }

 .Button {
  position: absolute;
-  right: rem(2px);
-  top: calc(50% - 1.6rem);
  z-index: 3;
+  right: rem(2px);
+  top: calc(50% - 1.2rem);
  min-height: calc(100% - .25rem);
+
+  @include iftablet{
+    top: calc(50% - 1.2rem);
+    right: rem(3px);
+  }
+
+  @include iflaptop{
+    top: calc(50% - 1.4rem);
+    right: rem(4px);
+  }
+
+  @include ifdesktop{
+    top: calc(50% - 1.6rem);
+    right: rem(2px);
+  }
 }
--- a/src/shared/ui/button/button.module.scss
+++ b/src/shared/ui/button/button.module.scss
@@ -2,19 +2,26 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: rem(10px) rem(32px);
-  border-radius: rem(28px);
-  min-height: rem(54px);
+  padding: rem(8px) rem(28px);
+  border-radius: rem(20px);
+  min-height: rem(40px);

  font-family: $font-open-sans;
  font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(16px);
  line-height: 100%;

  transition: all 0.15s linear;
  white-space: nowrap;
  width: max-content;

+  @include ifdesktop{
+    font-size: rem(24px);
+    padding: rem(10px) rem(32px);
+    border-radius: rem(28px);
+    min-height: rem(54px);
+  }
+
  &_fullWidth {
    width: 100%;
  }
--- a/src/shared/ui/input/input.module.scss
+++ b/src/shared/ui/input/input.module.scss
@@ -3,16 +3,29 @@
  background: $color-white;
  border: 1px solid $color-darkgray;
  border-radius: rem(28px);
-  padding: rem(10px) rem(24px);
+  padding: rem(8px) rem(20px);
  transition: border ease .5s;

  font-family: $font-open-sans;
  font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(18px);
  line-height: 100%;
  color: $color-text;
  width: max-content;

+  @include iftablet{
+    font-size: rem(18px);
+  }
+
+  @include iflaptop{
+    font-size: rem(20px);
+    padding: rem(10px) rem(20px);
+  }
+
+  @include ifdesktop{
+    font-size: rem(24px);
+  }
+
  &:focus {
    border-color: $color-orange;
    transition: border-color ease .5s;
--- a/src/shared/ui/text-area/text-area.module.scss
+++ b/src/shared/ui/text-area/text-area.module.scss
@@ -20,7 +20,7 @@

  font-family: $font-open-sans;
  font-weight: $font-regular;
-  font-size: rem(24px);
+  font-size: rem(18px);
  line-height: 100%;
  color: $color-text;

@@ -29,6 +29,19 @@
  width: 100%;
  flex-grow: 1;

+  @include iftablet{
+    font-size: rem(18px);
+  }
+
+  @include iflaptop{
+    font-size: rem(20px);
+    padding: rem(10px) rem(20px);
+  }
+
+  @include ifdesktop{
+    font-size: rem(24px);
+  }
+
  /* scrollbar */
  & {
    /* Arrow mouse cursor over the scrollbar */
--- a/src/views/home/ui/contacts/contacts.module.scss
+++ b/src/views/home/ui/contacts/contacts.module.scss
@@ -1,21 +1,62 @@
-.Contacts {
+.Container {
+  position: relative;
+  z-index: 2;
  background: $color-lightgray;
  border-radius: rem(28px);
-  padding: rem(160px) 0;
+  padding: rem(32px) 0 0;
+
+  @include iftablet {
+    padding: rem(60px) 0 rem(40px);
+  }
+
+  @include iflaptop {
+    padding: rem(60px) 0 rem(60px);
+  }
+
+  @include ifdesktop {
+    padding: rem(160px) 0;
+  }
 }

-.InnerContainer {
+.Contacts {
  margin: 0 auto;
-  width: rem(1340px);
+
+  @include iftablet {
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
 }

 .Header {
  font-family: $font-open-sans;
  font-weight: $font-semi-bold;
-  font-size: rem(60px);
+  font-size: rem(26px);
  line-height: 100%;
  color: $color-text;
-  margin-bottom: rem(80px);
+  margin-bottom: rem(40px);
+  padding: 0 rem(20px);
+
+  @include iftablet {
+    font-size: rem(28px);
+    padding: unset;
+  }
+
+  @include iflaptop {
+    font-size: rem(36px);
+    margin-bottom: rem(60px);
+  }
+
+  @include ifdesktop {
+    font-size: rem(60px);
+    margin-bottom: rem(80px);
+  }
 }

 .Clients {
@@ -26,8 +67,25 @@
  justify-content: space-around;
  align-items: center;
  gap: rem(40px);
-  max-width: rem(1200px);
-  margin-bottom: rem(160px);
+  padding: 0 0 rem(32px);
+
+  @include iftablet {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }
+
+  @include iflaptop {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }
+
+  @include ifdesktop {
+    gap: rem(40px);
+    max-width: rem(1200px);
+    margin-bottom: rem(160px);
+  }

  .Client {

@@ -38,112 +96,114 @@
  }
 }

-.Form {
-  position: relative;
-  background: #292E3D;
-  display: flex;
-  flex-direction: row;
-  padding: rem(60px) rem(50px);
-  border-radius: rem(28px);
-  overflow: hidden;
-
-  margin-bottom: rem(80px);
-
-  &:after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    background-color: rgba(#163055, .6);
-    transition: 250ms background-color;
-  }
-
-  .Background {
-    position: absolute;
-    object-fit: cover;
-    z-index: 1;
-  }
-
-  .Offer {
-    flex: 2;
-    display: flex;
-    flex-direction: column;
-
-    .Title {
-      position: relative;
-      z-index: 2;
-      font-family: $font-open-sans;
-      font-weight: $font-semi-bold;
-      font-size: rem(48px);
-      line-height: 100%;
-      color: $color-white;
-      margin-bottom: rem(80px);
-    }
-
-    .SubTitle {
-      position: relative;
-      z-index: 2;
-      font-family: $font-open-sans;
-      font-weight: $font-light;
-      font-size: rem(32px);
-      line-height: 100%;
-      color: $color-white;
-      max-width: rem(720px);
-    }
-  }
-
-  .Inputs {
-    position: relative;
-    z-index: 2;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: rem(20px);
-  }
-}
-
 .Map {
  position: relative;

  iframe {
    border-radius: rem(28px);
+    width: 100%;
+    height: rem(820px);
+
+    @include iftablet {
+      height: rem(300px);
+    }
+
+    @include iflaptop {
+      height: rem(400px);
+    }
+
+    @include ifdesktop {
+      height: rem(620px);
+    }
  }

  .Contacts {
    position: absolute;
    z-index: 2;
-    top: rem(-40px);
-    right: rem(180px);
-    border-radius: rem(28px);
-    background: $color-white;
-    width: rem(440px);
-    padding: rem(40px) rem(35px) rem(20px);
-
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
+    background: $color-white;
+
+    bottom: 0;
+    border-radius: rem(28px);
+    width: 100%;
+    height: fit-content;
+    padding: rem(40px) rem(35px) rem(20px);
+
+    @include iftablet {
+      top: rem(-60px);
+      right: rem(60px);
+      border-radius: rem(28px);
+      width: rem(240px);
+      padding: rem(20px) rem(20px) rem(10px);
+    }
+
+    @include iflaptop {
+      top: rem(-30px);
+      right: rem(100px);
+      border-radius: rem(28px);
+      width: rem(260px);
+      padding: rem(40px) rem(20px) rem(20px);
+    }
+
+    @include ifdesktop {
+      top: rem(-40px);
+      right: rem(180px);
+      border-radius: rem(28px);
+      width: rem(440px);
+      padding: rem(40px) rem(35px) rem(40px);
+    }

    .Title {
      position: relative;
      font-family: $font-open-sans;
      font-weight: $font-semi-bold;
-      font-size: rem(48px);
+      font-size: rem(28px);
      line-height: 100%;
      color: $color-text;
      text-align: right;
-      margin-bottom: rem(32px);
+      margin-bottom: rem(20px);
      align-self: center;

+      @include iftablet {
+        font-size: rem(28px);
+        align-self: center;
+        margin-bottom: rem(40px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin-bottom: rem(32px);
+      }
+
      .LedOn {
        position: absolute;
-        bottom: rem(6px);
-        left: rem(6px);
+        bottom: -2px;
+        left: 0;
+        width: rem(20px);
+
+        @include iftablet {
+          bottom: -1px;
+          width: rem(20px);
+        }
+
+        @include iflaptop {
+          bottom: 1px;
+          left: 1px;
+          width: rem(24px);
+        }
+
+        @include ifdesktop {
+          bottom: rem(6px);
+          left: rem(6px);
+          width: unset;
+        }
      }
    }

@@ -151,19 +211,51 @@
      position: relative;
      font-family: $font-open-sans;
      font-weight: $font-regular;
-      font-size: rem(32px);
+      font-size: rem(16px);
      line-height: 130%;
      color: $color-text;
-      margin-bottom: rem(20px);
-      margin-left: rem(32px);
+      padding-bottom: rem(20px);
+      margin: 0 auto;
+      width: rem(180px);
+
+      @include iftablet {
+        width: unset;
+        margin: unset;
+        margin-left: rem(32px);
+        margin-bottom: rem(20px);
+        padding-bottom: unset;
+      }
+
+      @include iflaptop {
+
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        margin-bottom: rem(20px);
+        margin-left: rem(42px);
+      }

      .Icon {
        position: absolute;
-        left: rem(-48px);
-        top: rem(8px);
-        width: rem(32px);
-        height: rem(32px);
+        top: 0;
+        left: rem(-32px);
+        width: rem(20px);
+        height: rem(20px);
        stroke: #E96526;
+
+        @include iftablet {
+          left: rem(-36px);
+          width: rem(20px);
+          height: rem(20px);
+        }
+
+        @include ifdesktop {
+          top: rem(6px);
+          left: rem(-48px);
+          width: rem(32px);
+          height: rem(32px);
+        }
      }
    }
  }
--- a/src/views/home/ui/contacts/contacts.tsx
+++ b/src/views/home/ui/contacts/contacts.tsx
@@ -1,5 +1,6 @@
 import s from './contacts.module.scss';
-import { Button, Input, Mark } from '@shared/ui';
+import { Mark } from '@shared/ui';
+import { ContactsForm } from '@/widgets';
 import Image from 'next/image';

 import bogatyrLogo from '@public/images/logo-bogatyr.png';
@@ -7,7 +8,6 @@ import sochiparkLogo from '@public/images/logo-sochipark.png';
 import chateauLogo from '@public/images/logo-chateau-de-talu.png';
 import gazpromLogo from '@public/images/logo-gazprom.png';
 import kraspolLogo from '@public/images/logo-kraspol.png';
-import bgForm from '@public/images/bg-form.jpg';
 import ledOn from '@public/svg/led-on.svg';
 import phoneCall from '@public/svg/phone-call.svg';
 import map from '@public/svg/map.svg';
@@ -15,8 +15,8 @@ import email from '@public/svg/email.svg';

 export default function Contacts() {
  return (
-    <section className={s.Contacts}>
-      <div className={s.InnerContainer}>
+    <section className={s.Container}>
+      <div className={s.Contacts}>
        <h2 className={s.Header}>
          Клиенты, которые <Mark>нам доверяют</Mark>
        </h2>
@@ -28,37 +28,13 @@ export default function Contacts() {
          ))}
        </div>

-        <div className={s.Form}>
-          <Image
-            className={s.Background}
-            src={bgForm}
-            placeholder='blur'
-            alt={''}
-            quality={75}
-            fill
-            priority
-          />
-          <div className={s.Offer}>
-            <h3 className={s.Title}>Остались вопросы?</h3>
-            <p className={s.SubTitle}>
-              Наш эксперт свяжется с вами для уточнения подробностей и
-              определения точной стоимости работ
-            </p>
-          </div>
-          <div className={s.Inputs}>
-            <Input placeholder='Ваше имя' fullWidth />
-            <Input type='text' placeholder='+79991234567' fullWidth />
-            <Button variant='orange' fullWidth>
-              Получить консультацию
-            </Button>
-          </div>
-        </div>
+        <ContactsForm />

        <div className={s.Map}>
          <iframe
            src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
-            width='100%'
-            height='620'
+            // width='100%'
+            // height='620'
            frameBorder='0'
          ></iframe>

--- a/src/views/home/ui/footer/footer.module.scss
+++ b/src/views/home/ui/footer/footer.module.scss
@@ -1,50 +1,62 @@
-.Footer {
+.Container {
  position: relative;
  background-color: #1B1B25;
  padding: rem(120px) 0 rem(40px);
  margin-top: rem(-24px);
-  z-index: -1;
+
+  @include iftablet {
+    padding: rem(120px) 0 rem(40px);
+  }
+
+  @include iflaptop {
+    padding: rem(120px) 0 rem(40px);
+  }
+
+  @include ifdesktop {
+    padding: rem(120px) 0 rem(40px);
+  }
 }

-.InnerContainer {
+.Footer {
+  position: relative;
  margin: 0 auto;
-  width: rem(1340px);
+  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: rem(20px);
-}

-.Block {
-  display: flex;
-  flex-direction: column;
-  gap: rem(20px);
-  max-width: 40vw;
-}
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }

-.SendBtn {
-  align-self: flex-end;
-  max-width: 33%;
-}
+  @include iflaptop {
+    width: rem(930px);
+  }

-.Header {
-  font-family: $font-open-sans;
-  font-weight: $font-semi-bold;
-  font-size: rem(60px);
-  line-height: 100%;
-  color: $color-white;
-  margin-bottom: rem(40px);
+  @include ifdesktop {
+    width: rem(1340px);
+  }
 }

 .Bottom {
  width: 100%;
-  height: rem(80px);
  border-top: 1px solid $color-white;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: rem(20px);
+  flex-wrap: wrap;
+  padding-top: rem(20px);
+
+  @include iftablet {
+    height: rem(80px);
+    gap: rem(20px);
+    flex-wrap: nowrap;
+    padding-top: unset;
+  }

  .Policy {
    font-family: $font-open-sans;
@@ -52,6 +64,9 @@
    font-size: rem(16px);
    line-height: 100%;
    color: $color-white;
-    margin-left: auto;
+
+    @include iftablet {
+      margin-left: auto;
+    }
  }
 }
--- a/src/views/home/ui/footer/footer.tsx
+++ b/src/views/home/ui/footer/footer.tsx
@@ -1,29 +1,14 @@
 import s from './footer.module.scss';
-import { Button, Input, Mark, TextArea } from '@shared/ui';
+import { Button } from '@shared/ui';
+import { FooterForm } from '@/widgets';
 import Link from 'next/link';

 export default function Footer() {
  return (
-    <section className={s.Footer}>
-      <div className={s.InnerContainer}>
-        <div className={s.Block}>
-          <h2 className={s.Header}>
-            Давайте <Mark>обсудим</Mark> ваши задачи
-          </h2>
-          <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
-          <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
-          <TextArea
-            variant='ghost'
-            placeholder={'Кратко опишите вашу задачу'}
-            fullWidth
-            id='story'
-            name='story'
-            rows={6}
-          />
-          <Button className={s.SendBtn} variant={'orange'} fullWidth>
-            Отправить
-          </Button>
-        </div>
+    <section className={s.Container}>
+      <div className={s.Footer}>
+        <FooterForm />
+
        <div className={s.Bottom}>
          <Button variant='ghost'>Telegram</Button>
          <Button variant='ghost'>WhatsApp</Button>
--- a/src/views/home/ui/license/license.module.scss
+++ b/src/views/home/ui/license/license.module.scss
@@ -1,87 +1,44 @@
 .License {
  margin: 0 auto;
-  width: rem(1340px);
-  padding: rem(120px) 0 rem(160px);
+  padding: rem(32px) 0 rem(32px);
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+    padding: 0 0 rem(40px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+    padding: 0 0 rem(60px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+    padding: 0 0 rem(160px);
+  }

  .Header {
    font-family: $font-open-sans;
    font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(28px);
    line-height: 100%;
    color: $color-text;
-    margin-bottom: rem(80px);
+    padding: 0 rem(20px) 0;
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      padding: unset;
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(80px);
+    }
  }

-  .Slider {
-    margin-bottom: rem(80px);
-  }
-
-  .Form {
-    position: relative;
-    background: #292E3D;
-    padding: rem(40px) rem(60px);
-    border-radius: rem(28px);
-    overflow: hidden;
-
-    display: flex;
-    flex-direction: row;
-    gap: rem(40px);
-
-    &:after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 1;
-      left: 0;
-      top: 0;
-      background-color: rgba(#163055, .6);
-      transition: 250ms background-color;
-    }
-
-    .Background {
-      position: absolute;
-      object-fit: cover;
-      z-index: 1;
-    }
-
-    .Offer {
-      flex: 2;
-
-      .Title {
-        position: relative;
-        z-index: 2;
-        font-family: $font-open-sans;
-        font-weight: $font-regular;
-        font-size: rem(48px);
-        line-height: 110%;
-        color: $color-white;
-        margin: 0 0 rem(50px);
-      }
-
-      .SubTitle {
-        position: relative;
-        z-index: 2;
-        font-family: $font-open-sans;
-        font-weight: $font-light;
-        font-size: rem(30px);
-        line-height: 100%;
-        color: $color-white;
-        margin-bottom: rem(16px);
-        max-width: rem(820px);
-      }
-    }
-
-    .Inputs {
-      position: relative;
-      z-index: 2;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: rem(20px);
-    }
-
-  }
 }
--- a/src/views/home/ui/license/license.tsx
+++ b/src/views/home/ui/license/license.tsx
@@ -1,10 +1,7 @@
 import s from './license.module.scss';
+import { Mark } from '@shared/ui';
+import { LicenseForm, LicenseSlider } from '@/widgets';

-import { Button, Input, Mark } from '@shared/ui';
-import { LicenseSlider } from '@/widgets';
-import Image from 'next/image';
-
-import bgForm from '@public/images/bg-form.jpg';
 import emptyPaper from '@public/svg/empty-paper.svg';

 export default function License() {
@@ -13,39 +10,8 @@ export default function License() {
      <h2 className={s.Header}>
        Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
      </h2>
-
-      <div className={s.Slider}>
-        <LicenseSlider images={slides} />
-      </div>
-
-      <div className={s.Form}>
-        <div className={s.Offer}>
-          <Image
-            className={s.Background}
-            src={bgForm}
-            placeholder='blur'
-            alt={''}
-            quality={75}
-            fill
-            priority
-          />
-          <h3 className={s.Title}>
-            Заключите договор до 1 июля и получите скидку на проведение пожарной
-            экспертизы 15 %
-          </h3>
-          <p className={s.SubTitle}>
-            Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
-            вами
-          </p>
-        </div>
-        <div className={s.Inputs}>
-          <Input placeholder={'Ваше имя'} fullWidth />
-          <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
-          <Button variant='orange' fullWidth>
-            Получить консультацию
-          </Button>
-        </div>
-      </div>
+      <LicenseSlider images={slides} />
+      <LicenseForm />
    </section>
  );
 }
--- a/src/views/home/ui/main/main.module.scss
+++ b/src/views/home/ui/main/main.module.scss
@@ -1,7 +1,20 @@
 .Main {
  margin: 0 auto;
-  width: rem(1340px);
-  //padding: 0 rem(160px) 0;
+  width: 90vw;
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
+

  &_BgWrapper {
    position: absolute;
@@ -38,17 +51,46 @@
    gap: rem(30px);

    .Icon {
-      width: rem(60px);
-      height: rem(60px);
+      display: none;
      cursor: pointer;
+
+      @include iftablet {
+        display: block;
+        width: rem(40px);
+        height: rem(40px);
+      }
+
+      @include ifdesktop {
+        width: rem(60px);
+        height: rem(60px);
+      }
    }

    .Button {
-      display: flex;
-      flex-direction: row;
-      gap: rem(16px);
-      height: rem(48px);
-      padding: rem(24px);
+      display: none;
+
+      @include iflaptop {
+        display: flex;
+        flex-direction: row;
+        gap: rem(16px);
+        height: rem(40px);
+        padding: rem(20px);
+      }
+
+      @include ifdesktop {
+        gap: rem(16px);
+        height: rem(48px);
+        padding: rem(24px);
+      }
+
+      img {
+        width: rem(30px);
+        height: rem(30px);
+        @include ifdesktop {
+          width: rem(40px);
+          height: rem(40px);
+        }
+      }
    }
  }
 }
@@ -56,50 +98,134 @@
 .Info {
  margin: 0 auto;
  display: flex;
-  flex-direction: row;
-  padding: rem(160px) 0 rem(200px);
+  flex-direction: column;
+  padding: rem(64px) 0 rem(160px);
+  gap: rem(100px);
+
+    @include iftablet {
+    flex-direction: row;
+    gap: unset;
+    padding: rem(130px) 0 rem(160px);
+  }
+
+  @include iflaptop {
+    padding: rem(130px) 0 rem(160px);
+  }
+
+  @include ifdesktop {
+    padding: rem(160px) 0 rem(120px);
+  }

  .Content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
-    gap: rem(60px);
+    gap: rem(50px);
+
+    @include iftablet {
+      gap: rem(40px);
+    }
+
+    @include iflaptop {
+      gap: rem(50px);
+    }
+
+    @include ifdesktop {
+      gap: rem(60px);
+    }

    .Title {
      font-family: $font-open-sans;
      font-weight: $font-regular;
-      font-size: rem(60px);
-      line-height: 1;
+      font-size: rem(24px);
+      line-height: 120%;
      color: $color-white;
-      max-width: rem(960px);
+      //max-width: rem(960px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        max-width: rem(360px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+        max-width: rem(508px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(60px);
+        max-width: rem(960px);
+      }
    }

    .List {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
-      gap: rem(16px);
+      gap: rem(18px);
+
+      @include iftablet {
+        gap: rem(20px);
+      }
+
+      @include ifdesktop {
+        gap: rem(16px);
+      }
    }

    .ListItem {
      position: relative;
      font-family: $font-open-sans;
      font-weight: $font-semi-bold;
-      font-size: rem(26px);
+      font-size: rem(16px);
      line-height: 1;
      color: $color-white;
-      margin-left: rem(36px);
+      margin-left: rem(24px);
+
+      @include iftablet {
+        font-size: rem(18px);
+        margin-left: rem(36px);
+        max-width: rem(360px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+        margin-left: rem(36px);
+        max-width: rem(400px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(26px);
+        margin-left: rem(36px);
+        max-width: rem(730px);
+      }

      &:after {
        position: absolute;
-        top: rem(2px);
+        top: 0;
        left: 0;
        content: '';
-        width: rem(24px);
-        height: rem(24px);
+        width: rem(16px);
+        height: rem(16px);
        background: url("/svg/check.svg") no-repeat;
-        background-size: rem(24px) rem(24px);
-        margin-left: rem(-36px);
+        background-size: rem(16px) rem(16px);
+        margin-left: rem(-24px);
+
+        @include iftablet {
+          top: rem(2px);
+          width: rem(20px);
+          height: rem(20px);
+          background-size: rem(20px) rem(20px);
+          margin-left: rem(-36px);
+        }
+
+        @include ifdesktop {
+          top: rem(2px);
+          width: rem(24px);
+          height: rem(24px);
+          background-size: rem(24px) rem(24px);
+          margin-left: rem(-36px);
+        }
      }
    }
  }
@@ -111,13 +237,38 @@
    align-items: center;
    flex-basis: 40%;
    gap: rem(40px);
+    text-wrap: nowrap;
+
+    @include iftablet {
+      gap: rem(40px);
+    }
+
+    @include iflaptop {
+      gap: rem(40px);
+    }
+
+    @include ifdesktop {
+      gap: rem(40px);
+    }

    .Title {
      font-family: $font-open-sans;
      font-weight: $font-semi-bold;
-      font-size: rem(60px);
-      line-height: 1;
+      font-size: rem(36px);
+      line-height: 100%;
      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(40px);
+      }
+
+      @include iflaptop {
+        font-size: rem(40px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(60px);
+      }
    }
  }
 }
--- a/src/views/home/ui/main/main.tsx
+++ b/src/views/home/ui/main/main.tsx
@@ -1,6 +1,7 @@
 import s from './main.module.scss';

 import { Button } from '@shared/ui';
+import { ConsultationOrder } from '@/entities/home/ConsultationOrder';
 import Image from 'next/image';

 import bgStart from '@public/images/bg-start-desktop.jpg';
@@ -51,7 +52,7 @@ export default function Main() {
        </div>
        <div className={s.Phone}>
          <p className={s.Title}>+7 988 400 93 93</p>
-          <Button variant='orange'>Получить консультацию</Button>
+          <ConsultationOrder />
        </div>
      </div>
    </section>
--- a/src/views/home/ui/offer/offer.module.scss
+++ b/src/views/home/ui/offer/offer.module.scss
@@ -1,91 +1,208 @@
-.Offer {
+.Container {
  background: $color-lightgray;
  border-radius: rem(28px);
-  padding: rem(160px) 0;
-}
+  padding: rem(32px) 0 0;

-.InnerContainer {
-  margin: 0 auto;
-  width: rem(1340px);
-}
+  @include iftablet {
+    padding: rem(60px) 0 rem(40px);
+  }

-.Title {
-  font-family: $font-open-sans;
-  font-weight: $font-semi-bold;
-  font-size: rem(60px);
-  line-height: 100%;
-  color: $color-text;
-  max-width: rem(1330px);
-  margin-bottom: rem(80px);
-}
+  @include iflaptop {
+    padding: rem(60px) 0 rem(60px);
+  }

-.Text {
-  font-family: $font-open-sans;
-  font-weight: $font-regular;
-  font-size: rem(32px);
-  line-height: 100%;
-  color: $color-text;
-  margin-bottom: rem(20px);
-}
-
-.List {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  max-width: rem(1330px);
-  margin-bottom: rem(60px);
-
-  .ListItem {
-    font-family: $font-open-sans;
-    font-weight: $font-regular;
-    font-size: rem(32px);
-    line-height: 160%;
-    color: $color-text;
-    list-style-type: decimal;
-    margin-left: rem(40px);
+  @include ifdesktop {
+    padding: rem(160px) 0;
  }
 }

-.RowForm {
-  display: flex;
-  flex-direction: row;
-  gap: rem(40px);
-  justify-content: center;
-  margin-bottom: rem(80px);
+.Offer {
+  margin: 0 auto;
+
+  @include iftablet {
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+  }
+}
+
+.Top {
+  padding: 0 rem(20px) rem(30px);
+
+  @include iftablet {
+    padding: 0;
+  }
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: rem(26px);
+    line-height: 120%;
+    color: $color-text;
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(80px);
+    }
+  }
+
+  .Text {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(18px);
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: rem(20px);
+
+    @include iflaptop {
+      font-size: rem(20px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(32px);
+    }
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: rem(30px);
+
+    @include iftablet {
+      margin-bottom: rem(40px);
+    }
+
+    @include ifdesktop {
+      margin-bottom: rem(60px);
+    }
+
+    .ListItem {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: rem(18px);
+      line-height: 160%;
+      color: $color-text;
+      list-style-type: decimal;
+      margin-left: rem(40px);
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        margin-left: rem(40px);
+      }
+    }
+  }
 }

 .Inner {
  display: flex;
  flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
  background-color: $color-white;
  border-radius: rem(28px);
-  padding: rem(80px) rem(40px);
-  margin-bottom: rem(130px);
+  padding: rem(30px) rem(20px);
+  margin-bottom: rem(40px);
+
+  @include iftablet {
+    align-items: flex-start;
+    padding: rem(28px) rem(20px);
+  }
+
+  @include iflaptop {
+    padding: rem(40px);
+    margin-bottom: rem(80px);
+  }
+
+  @include ifdesktop {
+    border-radius: rem(28px);
+    padding: rem(80px) rem(40px);
+    margin-bottom: rem(130px);
+  }

  .Title {
    font-family: $font-open-sans;
    font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(26px);
    line-height: 100%;
    color: $color-text;
+    max-width: rem(320px);
+
+    @include iftablet {
+      font-size: rem(28px);
+      max-width: unset;
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(40px);
+    }
  }

  .Grid {
    display: grid;
-    grid-template-rows: repeat(2, 1fr);
-    grid-template-columns: repeat(3, 1fr);
-    gap: rem(40px);
-    padding: rem(40px) 0;
+    grid-template-columns: rem(320px);
+    gap: rem(20px);
+    padding: rem(20px) 0;
+
+    @include iftablet {
+      grid-template-rows: repeat(3, 1fr);
+      grid-template-columns: repeat(2, 1fr);
+      gap: rem(25px);
+      padding: rem(20px) 0;
+    }
+
+    @include iflaptop {
+      gap: rem(30px);
+      padding: rem(40px) 0;
+    }
+
+    @include ifdesktop {
+      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: repeat(3, 1fr);
+      gap: rem(40px);
+      padding: rem(40px) 0;
+    }
  }

  .Tile {
    position: relative;
-    padding: rem(25px);
-    height: rem(352px);
+    height: rem(220px);
+    padding: rem(20px);
    border-radius: rem(28px);
    overflow: hidden;

+    @include iflaptop {
+      height: rem(260px);
+    }
+
+    @include ifdesktop {
+      height: rem(352px);
+      padding: rem(25px);
+    }
+
    &:after {
      content: '';
      display: block;
@@ -127,9 +244,21 @@
      z-index: 2;
      font-family: $font-open-sans;
      font-weight: $font-regular;
-      font-size: rem(42px);
+      font-size: rem(24px);
      line-height: 100%;
      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(28px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(42px);
+      }
    }

    .Description {
@@ -138,82 +267,48 @@
      display: none;
      font-family: $font-open-sans;
      font-weight: $font-regular;
-      font-size: rem(24px);
+      font-size: rem(18px);
      line-height: 130%;
      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(18px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(24px);
+      }
    }

    .Arrow {
      position: absolute;
      z-index: 2;
-      right: rem(25px);
-      bottom: rem(25px);
-      width: rem(64px);
-      height: rem(64px);
+      right: rem(10px);
+      bottom: rem(10px);
+      width: rem(40px);
+      height: rem(40px);
      transform: rotate(-135deg);
      transition: transform 250ms ease-in-out;
+
+      @include iflaptop {
+        right: rem(16px);
+        bottom: rem(16px);
+        width: rem(48px);
+        height: rem(48px);
+      }
+
+      @include ifdesktop {
+        right: rem(25px);
+        bottom: rem(25px);
+        width: rem(64px);
+        height: rem(64px);
+      }
    }
  }
 }

-.Form {
-  position: relative;
-  padding: rem(40px) rem(60px);
-  background: #292E3D;
-  border-radius: rem(28px);
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr 1fr;

-  &:after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    background-color: rgba(#163055, .6);
-    transition: 250ms background-color;
-  }
-
-  .Background {
-    position: absolute;
-    object-fit: cover;
-    z-index: 1;
-  }
-
-  .PanelLeft {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .PanelRight {
-    width: 100%;
-    place-self: end end;
-  }
-
-  .SubTitle {
-    position: relative;
-    z-index: 2;
-    font-family: $font-open-sans;
-    font-weight: $font-light;
-    font-size: rem(30px);
-    line-height: 100%;
-    color: $color-white;
-    margin-bottom: rem(16px);
-  }
-
-  .Title {
-    position: relative;
-    z-index: 2;
-    font-family: $font-open-sans;
-    font-weight: $font-regular;
-    font-size: rem(48px);
-    line-height: 130%;
-    color: $color-white;
-    max-width: rem(660px);
-    margin: 0;
-  }
-}
--- a/src/views/home/ui/offer/offer.tsx
+++ b/src/views/home/ui/offer/offer.tsx
@@ -1,7 +1,6 @@
-'use client';
 import s from './offer.module.scss';
-
-import { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
+import { Mark } from '@shared/ui';
+import { OfferForm, OfferRequestForm } from '@/widgets';
 import Image from 'next/image';

 import arrow from '@public/svg/arrow-tile.svg';
@@ -11,47 +10,38 @@ import gridThree from '@public/images/grid-3.png';
 import gridFour from '@public/images/grid-4.png';
 import gridFive from '@public/images/grid-5.png';
 import gridSix from '@public/images/grid-6.png';
-import bgForm from '@public/images/bg-form.jpg';
-import { useState } from 'react';

 export default function Offer() {
-  const [name, setName] = useState('');
-
  return (
-    <section className={s.Offer}>
-      <div className={s.InnerContainer}>
-        <h2 className={s.Title}>
-          Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
-          систему Охранно-Пожарной <br />
-          сигнализации <Mark> в соответствие </Mark> со всеми нормативами
-        </h2>
-        <p className={s.Text}>Методика работы:</p>
-        <ul className={s.List}>
-          <li className={s.ListItem}>
-            Экспертиза (аудит) выявляет нарушения ОПС
-          </li>
-          <li className={s.ListItem}>
-            На основании экспертизы оформляется заключение
-          </li>
-          <li className={s.ListItem}>
-            На основании выявленных нарушений производится устранение
-            недостатков
-          </li>
-          <li className={s.ListItem}>
-            Производится проверка проекта по замене старых пожарных систем на
-            новые, что позволяет сократить стоимость сметы на модернизацию.
-          </li>
-        </ul>
-        <form className={s.RowForm}>
-          <Input type='text' placeholder='+7 (999) 123 45 67' />
-          <Input
-            type='text'
-            placeholder='Ваше имя'
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <Button variant='orange'>Узнать подробности</Button>
-        </form>
+    <section className={s.Container}>
+      <div className={s.Offer}>
+        <div className={s.Top}>
+          <h2 className={s.Header}>
+            Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
+            систему Охранно-Пожарной <br />
+            сигнализации <Mark> в соответствие </Mark> со всеми нормативами
+          </h2>
+          <p className={s.Text}>Методика работы:</p>
+          <ul className={s.List}>
+            <li className={s.ListItem}>
+              Экспертиза (аудит) выявляет нарушения ОПС
+            </li>
+            <li className={s.ListItem}>
+              На основании экспертизы оформляется заключение
+            </li>
+            <li className={s.ListItem}>
+              На основании выявленных нарушений производится устранение
+              недостатков
+            </li>
+            <li className={s.ListItem}>
+              Производится проверка проекта по замене старых пожарных систем на
+              новые, что позволяет сократить стоимость сметы на модернизацию.
+            </li>
+          </ul>
+        </div>
+
+        <OfferForm />
+
        <div className={s.Inner}>
          <h2 className={s.Title}>
            Возьмем <Mark>на себя</Mark> все заботы
@@ -75,29 +65,8 @@ export default function Offer() {
            ))}
          </div>
        </div>
-        <div className={s.Form}>
-          <Image
-            className={s.Background}
-            src={bgForm}
-            placeholder='blur'
-            alt={''}
-            quality={75}
-            fill
-            priority
-          />
-          <div className={s.PanelLeft}>
-            <p className={s.SubTitle}>Нужна помощь?</p>
-            <h3 className={s.Title}>
-              Оставьте заявку на бесплатную консультацию
-            </h3>
-          </div>
-          <div className={s.PanelRight}>
-            <AdvancedPhoneInput
-              text='Получить консультацию'
-              placeholder={'+7 (999) 123 45 67'}
-            />
-          </div>
-        </div>
+
+        <OfferRequestForm />
      </div>
    </section>
  );
--- a/src/views/home/ui/result/result.module.scss
+++ b/src/views/home/ui/result/result.module.scss
@@ -1,58 +1,135 @@
 .Result {
  margin: 0 auto;
-  width: rem(1340px);
-  padding: rem(160px) 0 rem(80px);
+  width: rem(320px);
+  padding: rem(60px) 0;
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+    padding: rem(80px) 0;
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+    padding: rem(160px) 0 rem(80px);
+  }

  .Header {
    font-family: $font-open-sans;
    font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(28px);
    line-height: 100%;
    color: $color-text;
-    margin-bottom: rem(96px);
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      font-size: rem(36px);
+      margin-bottom: rem(60px);
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+      margin-bottom: rem(80px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(96px);
+    }
  }

  .Row {
    width: 100%;
    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: rem(48px);
-    margin-bottom: rem(80px);
+    flex-direction: column-reverse;
+    gap: rem(20px);
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      flex-direction: row;
+      justify-content: space-between;
+      gap: rem(80px);
+      margin-bottom: rem(80px);
+    }
+
+    @include ifdesktop {
+      gap: rem(60px);
+      margin-bottom: rem(160px);
+    }

    &:nth-child(odd) {
-      flex-direction: row-reverse;
+      flex-direction: column-reverse;
+
+      @include iftablet {
+        flex-direction: row-reverse;
+      }
    }

    .Review {
-      flex: 1;
+      flex: 1 0;

      .Title {
        font-family: $font-open-sans;
        font-weight: $font-regular;
-        font-size: rem(48px);
+        font-size: rem(28px);
        line-height: 100%;
        color: $color-text;
-        margin-bottom: rem(40px);
+        margin-bottom: rem(20px);
+
+        @include iftablet {
+          margin-bottom: rem(36px);
+        }
+
+        @include iflaptop {
+          font-size: rem(32px);
+          margin-bottom: rem(40px);
+        }
+
+        @include ifdesktop {
+          font-size: rem(48px);
+        }
      }

      .Description {
        font-family: $font-open-sans;
        font-weight: $font-regular;
-        font-size: 24px;
+        font-size: rem(18px);
        line-height: 100%;
        color: $color-text;
+
+        @include iflaptop {
+          font-size: rem(20px);
+        }
+
+        @include ifdesktop {
+          font-size: rem(24px);
+        }
      }
    }

    .Picture {
-      flex: 1;
+      flex: 1 rem(220px);
      position: relative;
-      overflow: hidden;
      border-radius: rem(28px);
      object-fit: contain;
-      max-width: rem(720px);
-      height: rem(540px);
+      max-width: rem(320px);
+      height: rem(220px);
+      overflow: hidden;
+
+      @include iflaptop {
+        flex: 1 0;
+        max-width: rem(440px);
+        height: rem(260px);
+      }
+      @include ifdesktop {
+        max-width: rem(720px);
+        height: rem(540px);
+      }
+
      &:after {
        content: '';
        display: block;
--- a/src/views/home/ui/result/result.tsx
+++ b/src/views/home/ui/result/result.tsx
@@ -1,6 +1,5 @@
 import s from './result.module.scss';
 import { Mark } from '@shared/ui';
-
 import Image from 'next/image';

 import bogatyrImg from '@public/images/bogatyr.png';
--- a/src/widgets/contacts-form/index.ts
+++ b/src/widgets/contacts-form/index.ts
@@ -0,0 +1 @@
+export { default as ContactsForm } from './ui';
--- a/src/widgets/contacts-form/styles.module.scss
+++ b/src/widgets/contacts-form/styles.module.scss
@@ -0,0 +1,120 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  display: flex;
+  flex-direction: column;
+  gap: rem(40px);
+  overflow: hidden;
+  padding: rem(60px) rem(50px);
+  border-radius: rem(28px);
+  margin-bottom: rem(80px);
+
+  @include iftablet {
+    flex-direction: row;
+    gap: unset;
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(120px);
+  }
+
+  @include iflaptop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(100px);
+  }
+
+  @include ifdesktop {
+    padding: rem(60px) rem(50px);
+    border-radius: rem(28px);
+    margin-bottom: rem(160px);
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .Offer {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+
+    .Title {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: rem(26px);
+      line-height: 100%;
+      color: $color-white;
+      margin-bottom: rem(16px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        margin-bottom: rem(60px);
+      }
+
+      @include iflaptop {
+        font-size: rem(36px);
+        margin-bottom: rem(80px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin-bottom: rem(80px);
+      }
+    }
+
+    .SubTitle {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-light;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(18px);
+      }
+
+      @include iflaptop {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(32px);
+        max-width: rem(720px);
+      }
+    }
+  }
+
+  .Inputs {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    gap: rem(20px);
+
+    @include iftablet {
+      align-self: unset;
+    }
+  }
+}
--- a/src/widgets/contacts-form/ui.tsx
+++ b/src/widgets/contacts-form/ui.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input } from '@shared/ui';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
+
+import bgForm from '@public/images/bg-form.jpg';
+
+export default function ContactsForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <Image
+        className={s.Background}
+        src={bgForm}
+        placeholder='blur'
+        alt={''}
+        quality={75}
+        fill
+        priority
+      />
+      <div className={s.Offer}>
+        <h3 className={s.Title}>Остались вопросы?</h3>
+        <p className={s.SubTitle}>
+          Наш эксперт свяжется с вами для уточнения подробностей и определения
+          точной стоимости работ
+        </p>
+      </div>
+      <form className={s.Inputs}>
+        <Input placeholder='Ваше имя' fullWidth />
+        <Input type='text' placeholder='+7 (999) 123 45 67' fullWidth />
+        <Button variant='orange' fullWidth onClick={notify}>
+          Получить консультацию
+        </Button>
+      </form>
+    </div>
+  );
+}
--- a/src/widgets/footer-form/index.ts
+++ b/src/widgets/footer-form/index.ts
@@ -0,0 +1 @@
+export { default as FooterForm } from './ui';
--- a/src/widgets/footer-form/styles.module.scss
+++ b/src/widgets/footer-form/styles.module.scss
@@ -0,0 +1,45 @@
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: rem(20px);
+  width: 100%;
+
+  @include iftablet {
+    width: unset;
+    max-width: 100%;
+  }
+
+  @include iflaptop {
+    max-width: 60%;
+  }
+
+  @include ifdesktop {
+    max-width: 60%;
+  }
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: rem(28px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(30px);
+
+    @include iflaptop {
+      font-size: rem(42px);
+      margin-bottom: rem(30px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(40px);
+    }
+  }
+
+  .SendBtn {
+    align-self: flex-end;
+    max-width: 33%;
+  }
+}
+
+
--- a/src/widgets/footer-form/ui.tsx
+++ b/src/widgets/footer-form/ui.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input, Mark, TextArea } from '@shared/ui';
+import toast from 'react-hot-toast';
+
+export default function FooterForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <form className={s.Form}>
+      <h2 className={s.Header}>
+        Давайте <Mark>обсудим</Mark> ваши задачи
+      </h2>
+      <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
+      <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
+      <TextArea
+        variant='ghost'
+        placeholder={'Кратко опишите вашу задачу'}
+        fullWidth
+        id='story'
+        name='story'
+        rows={6}
+      />
+      <Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
+        Отправить
+      </Button>
+    </form>
+  );
+}
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -1 +1,6 @@
+export { ContactsForm } from './contacts-form';
+export { FooterForm } from './footer-form';
+export { LicenseForm } from './license-form';
 export { LicenseSlider } from './license-slider';
+export { OfferForm } from './offer-form';
+export { OfferRequestForm } from './offer-request';
--- a/src/widgets/license-form/index.ts
+++ b/src/widgets/license-form/index.ts
@@ -0,0 +1 @@
+export { default as LicenseForm } from './ui';
--- a/src/widgets/license-form/styles.module.scss
+++ b/src/widgets/license-form/styles.module.scss
@@ -0,0 +1,113 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  padding: rem(20px) rem(20px);
+  border-radius: rem(28px);
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  gap: rem(40px);
+
+  @include iftablet {
+    flex-direction: row;
+    padding: rem(40px) rem(40px);
+    gap: rem(20px);
+  }
+
+  @include iflaptop {
+    padding: rem(40px) rem(60px);
+    gap: rem(40px);
+  }
+
+  @include ifdesktop {
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .Offer {
+    flex: 2;
+
+    .Title {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: rem(26px);
+      line-height: 110%;
+      color: $color-white;
+      margin: 0 0 rem(20px);
+
+      @include iftablet {
+        font-size: rem(28px);
+        margin: 0 0 rem(36px);
+      }
+
+      @include iflaptop {
+        font-size: rem(32px);
+        margin: 0 0 rem(40px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(48px);
+        margin: 0 0 rem(50px);
+      }
+    }
+
+    .SubTitle {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-light;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+
+      @include iftablet {
+        font-size: rem(20px);
+      }
+
+      @include ifdesktop {
+        font-size: rem(30px);
+        margin-bottom: rem(16px);
+        max-width: rem(820px);
+      }
+    }
+  }
+
+  .Inputs {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    gap: rem(16px);
+
+    @include iftablet {
+    }
+
+    @include ifdesktop {
+      gap: rem(20px);
+    }
+  }
+
+}
--- a/src/widgets/license-form/ui.tsx
+++ b/src/widgets/license-form/ui.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input } from '@shared/ui';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
+
+import bgForm from '@public/images/bg-form.jpg';
+
+export default function LicenseForm() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <div className={s.Offer}>
+        <Image
+          className={s.Background}
+          src={bgForm}
+          placeholder='blur'
+          alt={''}
+          quality={75}
+          fill
+          priority
+        />
+        <h3 className={s.Title}>
+          Заключите договор до 1 июля и получите скидку на проведение пожарной
+          экспертизы 15 %
+        </h3>
+        <p className={s.SubTitle}>
+          Оставьте свои контактные данные и мы закрепим скидку до 1 июля за вами
+        </p>
+      </div>
+      <form className={s.Inputs}>
+        <Input placeholder={'Ваше имя'} fullWidth />
+        <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
+        <Button variant='orange' fullWidth onClick={notify}>
+          Получить консультацию
+        </Button>
+      </form>
+    </div>
+  );
+}
--- a/src/widgets/license-slider/index.ts
+++ b/src/widgets/license-slider/index.ts
@@ -1 +1 @@
-export { default as LicenseSlider } from './license-slider';
+export { default as LicenseSlider } from './ui';
--- a/src/widgets/license-slider/license-slider.module.scss
+++ b/src/widgets/license-slider/license-slider.module.scss
@@ -1,9 +0,0 @@
-.Slider {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.Slide {
-  cursor: pointer;
-}
--- a/src/widgets/license-slider/styles.module.scss
+++ b/src/widgets/license-slider/styles.module.scss
@@ -0,0 +1,20 @@
+.Slider {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: rem(40px);
+  padding: 0 rem(20px) 0;
+
+  @include iftablet {
+    padding: unset;
+  }
+
+  @include ifdesktop {
+    margin-bottom: rem(80px);
+  }
+}
+
+.Slide {
+  cursor: pointer;
+  width: 100%;
+}
--- a/src/widgets/license-slider/license-slider.tsx
+++ b/src/widgets/license-slider/license-slider.tsx
@@ -1,13 +1,15 @@
 'use client';

-import s from './license-slider.module.scss';
+import s from './styles.module.scss';

 import Image from 'next/image';
 import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { clsx } from 'clsx';
-
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Grid } from 'swiper/modules';
 import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/grid';

 type LicenseSliderProps = {
  className?: string;
@@ -20,16 +22,33 @@ type LicenseSliderProps = {

 const mockFullSizeImage = 'images/empty-image.jpg';

-export default function LicenseSlider({
-  className,
-  images,
-}: LicenseSliderProps) {
+const swiperBreakpoints = {
+  360: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  768: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+  1440: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+};
+
+export default function Ui({ className, images }: LicenseSliderProps) {
  return (
    <Swiper
      className={clsx(s.Slider, className)}
-      slidesPerView={3}
-      onSlideChange={() => console.log('slide change')}
-      onSwiper={(swiper) => console.log(swiper)}
+      modules={[Grid]}
+      breakpoints={swiperBreakpoints}
+      // onSlideChange={() => console.log('slide change')}
+      // onSwiper={(swiper) => console.log(swiper)}
    >
      {images.map(({ id, name, image }) => (
        <SwiperSlide key={id}>
--- a/src/widgets/offer-form/index.ts
+++ b/src/widgets/offer-form/index.ts
@@ -0,0 +1 @@
+export { default as OfferForm } from './ui';
--- a/src/widgets/offer-form/styles.module.scss
+++ b/src/widgets/offer-form/styles.module.scss
@@ -0,0 +1,31 @@
+.RowForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  gap: rem(10px);
+  margin-bottom: rem(80px);
+
+  @include iftablet {
+    flex-direction: row;
+    justify-content: center;
+    gap: rem(10px);
+  }
+
+  @include iflaptop {
+    justify-content: center;
+    gap: rem(20px);
+  }
+
+  @include ifdesktop {
+    justify-content: center;
+    gap: rem(40px);
+  }
+
+  .Unit {
+    width: 300px;
+    @include iftablet {
+      width: unset;
+    }
+  }
+}
--- a/src/widgets/offer-form/ui.tsx
+++ b/src/widgets/offer-form/ui.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button, Input } from '@shared/ui';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function OfferForm() {
+  const [name, setName] = useState('');
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <form className={s.RowForm}>
+      <Input className={s.Unit} type='text' placeholder='+7 (999) 123 45 67' />
+      <Input
+        className={s.Unit}
+        type='text'
+        placeholder='Ваше имя'
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <Button className={s.Unit} variant='orange' onClick={notify}>
+        Получить консультацию
+      </Button>
+    </form>
+  );
+}
--- a/src/widgets/offer-request/index.ts
+++ b/src/widgets/offer-request/index.ts
@@ -0,0 +1 @@
+export { default as OfferRequestForm } from './ui';
--- a/src/widgets/offer-request/styles.module.scss
+++ b/src/widgets/offer-request/styles.module.scss
@@ -0,0 +1,129 @@
+.Form {
+  position: relative;
+  background: #292E3D;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: rem(20px);
+  padding: rem(25px) rem(20px);
+  border-radius: rem(28px);
+
+  @include iftablet {
+    padding: rem(30px);
+  }
+
+  @include iflaptop {
+    grid-template-rows: 1fr;
+    grid-template-columns: auto rem(400px);
+    padding: rem(40px);
+  }
+  @include ifdesktop {
+    grid-template-columns: auto rem(550px);
+    padding: rem(40px) rem(60px);
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .PanelLeft {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .PanelRight {
+    place-self: center center;
+
+    @include iftablet{
+      width: rem(400px);
+      place-self: end end;
+    }
+    @include iflaptop{
+      width: 100%;
+    }
+
+    .AdvPhoneInput{
+      display: none;
+      @include iftablet{
+        display: block;
+      }
+    }
+    .MobileBtns {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: rem(12px);
+      z-index: 2;
+      max-width: rem(400px);
+      @include iftablet{
+        display: none;
+      }
+    }
+  }
+
+
+  .SubTitle {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-light;
+    font-size: rem(22px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(16px);
+
+    @include iftablet {
+      margin-bottom: rem(20px);
+    }
+
+    @include iflaptop {
+      font-size: rem(24px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(30px);
+      margin-bottom: rem(16px);
+    }
+  }
+
+  .Title {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(26px);
+    line-height: 130%;
+    color: $color-white;
+    max-width: rem(660px);
+    margin: 0;
+
+    @include iftablet {
+      font-size: rem(28px);
+    }
+
+    @include iflaptop {
+      font-size: rem(32px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(48px);
+    }
+  }
+}
--- a/src/widgets/offer-request/ui.tsx
+++ b/src/widgets/offer-request/ui.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import s from './styles.module.scss';
+import { AdvancedPhoneInput, Button, Input } from '@shared/ui';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
+
+import bgForm from '@public/images/bg-form.jpg';
+
+export default function OfferRequest() {
+  const notify = () => toast.success('Заявка на консультацию принята');
+
+  return (
+    <div className={s.Form}>
+      <Image
+        className={s.Background}
+        src={bgForm}
+        placeholder='blur'
+        alt={''}
+        quality={75}
+        fill
+        priority
+      />
+      <div className={s.PanelLeft}>
+        <p className={s.SubTitle}>Нужна помощь?</p>
+        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
+      </div>
+      <div className={s.PanelRight}>
+        <AdvancedPhoneInput
+          containerClassName={s.AdvPhoneInput}
+          text='Отправить заявку'
+          placeholder={'+7 (999) 123 45 67'}
+          onClick={notify}
+        />
+
+        <div className={s.MobileBtns}>
+          <Input placeholder='Ваше имя' fullWidth />
+          <Input placeholder='+7 999 123 45 67' fullWidth />
+          <Button variant='orange' fullWidth onClick={notify}>
+            Отправить заявку
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
				`@@ -0,0 +1 @@`
				`export { default as ConsultationOrder } from './ui';`
				`@@ -0,0 +1 @@`
				`export { default as ContactsForm } from './ui';`
				`@@ -0,0 +1 @@`
				`export { default as FooterForm } from './ui';`
				`@@ -0,0 +1 @@`
				`export { default as LicenseForm } from './ui';`
				`@@ -0,0 +1 @@`
				`export { default as OfferForm } from './ui';`
				`@@ -0,0 +1 @@`
				`export { default as OfferRequestForm } from './ui';`