public/svg/email.svg

@@ -0,0 +1,7 @@
+<svg width="256" height="256" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="16" height="16" rx="8" fill="none"/>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000000" x="0" y="0" width="16" height="16">
+        <path fill="#E96526" fill-rule="evenodd"
+              d="M14.95 3.684L8.637 8.912a1 1 0 0 1-1.276 0l-6.31-5.228A.999.999 0 0 0 1 4v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a.999.999 0 0 0-.05-.316M2 2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m-.21 1l5.576 4.603a1 1 0 0 0 1.27.003L14.268 3z"/>
+    </svg>
+</svg>

public/svg/led-on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <circle cx="12" cy="12" r="12" fill="#43D85A" fill-opacity="0.15"></circle> <circle cx="12" cy="12" r="7" fill="#43D85A" stroke="white" stroke-width="2"></circle> </svg> 

public/svg/map.svg

@@ -0,0 +1,7 @@
+<svg width="256" height="256" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="24" height="24" rx="8" fill="none"/>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" x="0" y="0" width="24" height="24">
+        <path fill="none" stroke="#E96526" stroke-width="2"
+              d="M15 15h4l3 7H2l3-7h4m4-7a1 1 0 1 1-2 0a1 1 0 0 1 2 0M6 8c0 5 6 10 6 10s6-5 6-10c0-3.417-2.686-6-6-6S6 4.583 6 8Z"/>
+    </svg>
+</svg>

public/svg/phone-call.svg

@@ -0,0 +1,7 @@
+<svg width="256" height="256" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="24" height="24" rx="8" fill="none"/>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" x="0" y="0" width="24" height="24">
+        <path fill="none" stroke="#E96526" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2a19.79 19.79 0 0 1-8.63-3.07a19.5 19.5 0 0 1-6-6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72a12.84 12.84 0 0 0 .7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45a12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+    </svg>
+</svg>

src/core/styles/variables.scss

@@ -23,3 +23,4 @@ $color-text: #333333;
 $color-text-light: #222222;
 $color-mark: #E96526;
 $color-error: #FF0000;
+$color-gray-border: #555555;

src/shared/ui/advanced-phone-input/advanced-phone-input.tsx

@@ -0,0 +1,34 @@
+import s from './advancedPhoneInput.module.scss';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+import { Button, Input } from '@shared/ui';
+
+type AdvancedPhoneInputProps = {
+  containerClassName?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  onClick?: () => void;
+  text: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function AdvancedPhoneInput({
+  containerClassName,
+  inputClassName,
+  buttonClassName,
+  onClick,
+  text,
+  ...props
+}: AdvancedPhoneInputProps) {
+  return (
+    <div className={clsx(containerClassName, s.Container)}>
+      <Input {...props} className={clsx(inputClassName, s.Phone)} />
+      <Button
+        className={clsx(buttonClassName, s.Button)}
+        onClick={onClick}
+        variant='orange'
+      >
+        {text}
+      </Button>
+    </div>
+  );
+}

src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss

@@ -0,0 +1,19 @@
+.Container {
+  position: relative;
+  //width: 100%;
+}
+
+.Phone {
+  width: 100%;
+  position: relative;
+  z-index: 2;
+  padding-left: 2vw;
+}
+
+.Button {
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 25px);
+  z-index: 3;
+  min-height: calc(100% - 4px);
+}

src/shared/ui/advanced-phone-input/index.ts

@@ -0,0 +1 @@
+export { default as AdvancedPhoneInput } from './advanced-phone-input';

src/shared/ui/button/button.module.scss

@@ -2,17 +2,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 13px 33px;
+  padding: 10px 32px;
   border-radius: 28px;
+  min-height: 55px;
 
   font-family: $font-open-sans;
   font-weight: $font-regular;
   font-size: 24px;
-  line-height: 1;
+  line-height: 100%;
 
   transition: all 0.15s linear;
   white-space: nowrap;
+  width: max-content;
 
+  &_fullWidth {
+    width: 100%;
+  }
 
   svg {
     width: 18px;
@@ -24,6 +29,11 @@
 
   &:hover {
     cursor: pointer;
+    box-shadow: 1px 1px 1px 0px $color-darkgray;
+  }
+
+  &:active {
+    box-shadow: inset 1px 1px 2px 0px $color-darkgray;
   }
 
   &:hover svg {
@@ -40,6 +50,12 @@
     color: $color-white;
   }
 
+  &_ghost {
+    background: transparent;
+    color: $color-white;
+    border: 1px solid $color-gray-border;
+  }
+
   &_disabled {
     cursor: not-allowed;
   }

src/shared/ui/button/button.tsx

@@ -1,5 +1,11 @@
 import s from './button.module.scss';
-import { FunctionComponent, HTMLAttributes, ReactNode, SVGProps } from 'react';
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FunctionComponent,
+  ReactNode,
+  SVGProps,
+} from 'react';
 import { clsx } from 'clsx';
 
 type ButtonProps = {
@@ -9,7 +15,11 @@ type ButtonProps = {
   Icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
   onClick?: () => void;
   variant?: 'default' | 'orange' | 'ghost';
-} & HTMLAttributes<HTMLButtonElement>;
+  fullWidth?: boolean;
+} & DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
 
 export default function Button({
   className,
@@ -18,6 +28,7 @@ export default function Button({
   Icon,
   disabled,
   variant = 'default',
+  fullWidth = false,
   ...props
 }: ButtonProps) {
   return (
@@ -26,6 +37,7 @@ export default function Button({
         s.Button,
         disabled && s.Button_disabled,
         s['Button_' + variant],
+        fullWidth && s.Button_fullWidth,
         className,
       )}
       onClick={onClick}

src/shared/ui/index.ts

@@ -1,3 +1,5 @@
 export { Button } from './button';
 export { Mark } from './mark';
 export { Input } from './input';
+export { AdvancedPhoneInput } from './advanced-phone-input';
+export { TextArea } from './text-area';

src/shared/ui/input/input.module.scss

@@ -1,113 +1,54 @@
-.input {
+.Input {
-  position: relative;
   display: flex;
-  flex-direction: column;
+  background: $color-white;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
-  height: 42px;
   border: 1px solid $color-darkgray;
   border-radius: 28px;
+  padding: 10px 24px;
+  transition: border ease .5s;
 
-  //@include iftablet {
+  font-family: $font-open-sans;
-  //  height: rem(53px);
+  font-weight: $font-regular;
-  //}
+  font-size: 24px;
-
-  &__self {
-    width: 100%;
-    height: 100%;
-    padding: 22px 16px 6px 16px;
-    font-size: 14px;
   line-height: 100%;
   color: $color-text;
-    opacity: 0.9;
+  width: max-content;
 
-    //@include iftablet {
+  &:focus {
-    //  padding: rem(26px) rem(16px) rem(6px) rem(16px);
+    border-color: $color-orange;
-    //  font-size: rem(16px);
+    transition: border-color ease .5s;
-    //  line-height: 130%;
-    //}
   }
 
-  &__placeholder {
+  &:hover {
-    position: absolute;
+    border-color: $color-text;
-    top: 12px;
+    transition: border-color ease .5s;
-    left: 16px;
-    font-size: 14px;
-    line-height: 130%;
-    color: $color-darkgray;
-    opacity: 0.4;
-    transition: all 0.15s ease-in;
-
-    //@include iftablet {
-    //  top: rem(16px);
-    //  font-size: rem(16px);
-    //}
   }
 
-  &__placeholder_active {
+  &:focus:hover {
-    top: 6px;
+    border-color: $color-orange;
-    left: 16px;
+    transition: border-color ease .5s;
-    font-size: 11px;
-    color: $color-darkgray;
-
-    //@include iftablet {
-    //  top: rem(6px);
-    //  left: rem(16px);
-    //  font-size: rem(14px);
-    //}
   }
 
-  &--error {
+  &_fullWidth{
-    border-color: $color-error !important;
+    width: 100%;
   }
 
-  &__errorMessage {
+  &_ghost {
-    margin-top: 10px;
+    background: transparent;
+    color: $color-white;
 
-    font-size: 12px;
+    &:focus {
-    line-height: 130%;
+      border-color: $color-orange;
-    color: $color-error;
+      transition: border-color ease .5s;
-
-    //@include iftablet {
-    //  margin-top: 6px;
-    //}
     }
 
-  &--disabled {
+    &:hover {
-    cursor: not-allowed;
+      border-color: $color-white;
-    color: $color-lightgray;
+      transition: border-color ease .5s;
     }
 
-  &__password-rules {
+    &:focus:hover {
-    display: flex;
+      border-color: $color-orange;
-    align-items: center;
+      transition: border-color ease .5s;
-    margin-top: 6px;
-    gap: 6px;
-
-    //@include iftablet {
-    //  gap: rem(10px);
-    //}
-    //@include ifdesktop {
-    //  margin-top: rem(9px);
-    //}
-
-    &__rule-block {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-    }
-
-    &__rule-text {
-      font-family: $font-open-sans;
-      font-size: 11px;
-      line-height: 100%;
-      color: rgba(35, 48, 56, 0.7);
-
-      //@include iftablet {
-      //  font-size: rem(14px);
-      //}
     }
   }
 }

src/shared/ui/input/input.tsx

@@ -2,67 +2,32 @@
 
 import s from './input.module.scss';
 
-import React, { InputHTMLAttributes, useState } from 'react';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
-type InputPropsType = {
+type InputProps = {
+  wrapperClassName?: string;
   className?: string;
-  placeholder: string;
+  fullWidth?: boolean;
-  errorMessage?: string | boolean;
+  variant?: 'default' | 'ghost';
-} & InputHTMLAttributes<HTMLInputElement>;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 const Input = ({
-  placeholder,
-  errorMessage,
-  disabled,
   className,
-  onChange,
+  fullWidth = false,
+  variant = 'default',
   ...props
-}: InputPropsType) => {
+}: InputProps) => {
-  const [onFocus, setOnFocus] = useState(false);
-
-  const hasValue =
-    typeof props.value === 'string'
-      ? props.value.length > 0
-      : props.value !== undefined && props.value !== null;
-
   return (
-    <div>
-      <div
-        className={clsx(s.input, className, {
-          [s['input--error']]: !!errorMessage,
-        })}
-      >
-        <label
-          className={clsx(s.input__placeholder, {
-            [s.input__placeholder_active]: hasValue || onFocus,
-          })}
-        >
-          {placeholder}
-        </label>
     <input
       {...props}
-          onChange={onChange}
+      className={clsx(
-          onFocus={(event) => {
+        s.Input,
-            if (typeof props.onFocus !== 'undefined') {
+        s['Input_' + variant],
-              props.onFocus(event);
+        fullWidth && s.Input_fullWidth,
-            }
+        className,
-            setOnFocus(true);
-          }}
-          onBlur={(event) => {
-            if (typeof props.onBlur !== 'undefined') {
-              props.onBlur(event);
-            }
-            setOnFocus(false);
-          }}
-          disabled={disabled}
-          className={clsx(s.input__self, { [s['input--disabled']]: disabled })}
-        />
-      </div>
-      {errorMessage && (
-        <span className={s.input__errorMessage}>{errorMessage}</span>
       )}
-    </div>
+    />
   );
 };
 

src/shared/ui/text-area/index.ts

@@ -0,0 +1 @@
+export { default as TextArea } from './text-area';

src/shared/ui/text-area/text-area.module.scss

@@ -0,0 +1,103 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: max-content;
+  /* Allows the `resize` property to work on the div */
+  overflow: hidden;
+
+  &_fullWidth{
+    width: 100%;
+  }
+}
+
+.Area {
+  background: $color-white;
+  border: 1px solid $color-darkgray;
+  border-radius: 20px;
+  padding: 10px 24px;
+  transition: border ease .5s;
+
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: 24px;
+  line-height: 100%;
+  color: $color-text;
+
+  resize: none;
+  display: block;
+  width: 100%;
+  flex-grow: 1;
+
+  /* scrollbar */
+  & {
+    /* Arrow mouse cursor over the scrollbar */
+    cursor: auto;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    border: 4px solid transparent;
+    border-radius: 12px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #333; // цвет дорожки
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #999; // цвет указателя
+  }
+  @media (hover: hover) {
+    :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
+      background-color: #999;
+    }
+  }
+  &:where(:autofill) {
+    /* Reliably removes native autofill colors */
+    background-clip: text;
+    -webkit-text-fill-color: #999;
+  }
+
+
+  &:focus {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
+  }
+
+  &:hover {
+    border-color: $color-text;
+    transition: border-color ease .5s;
+  }
+
+  &:focus:hover {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &_ghost {
+    background: transparent;
+    color: $color-white;
+
+    &:focus {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
+    }
+
+    &:hover {
+      border-color: $color-white;
+      transition: border-color ease .5s;
+    }
+
+    &:focus:hover {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
+    }
+  }
+}

src/shared/ui/text-area/text-area.tsx

@@ -0,0 +1,32 @@
+import s from './text-area.module.scss';
+import { DetailedHTMLProps, ReactNode, TextareaHTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+type TextAreaProps = {
+  className?: string;
+  children?: ReactNode;
+  variant?: 'default' | 'ghost';
+  fullWidth?: boolean;
+} & DetailedHTMLProps<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>;
+
+export default function TextArea({
+  className,
+  children,
+  variant = 'default',
+  fullWidth = false,
+  ...props
+}: TextAreaProps) {
+  return (
+    <div className={clsx(s.Container, fullWidth && s.Container_fullWidth)}>
+      <textarea
+        {...props}
+        className={clsx(className, s.Area, s['Area_' + variant])}
+      >
+        {children}
+      </textarea>
+    </div>
+  );
+}

src/views/home/ui/contacts/contacts.module.scss

@@ -33,43 +33,71 @@
   }
 
   .Form {
-    background: $color-white;
+    position: relative;
-    border-radius: 28px;
+    background: #292E3D;
     display: flex;
     flex-direction: row;
     padding: 60px 50px;
+    border-radius: 28px;
+    overflow: hidden;
+
     margin-bottom: 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: 48px;
         line-height: 100%;
-        color: $color-text-light;
+        color: $color-white;
         margin-bottom: 80px;
       }
 
       .SubTitle {
+        position: relative;
+        z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-light;
         font-size: 32px;
         line-height: 100%;
-        color: $color-text-light;
+        color: $color-white;
         max-width: 720px;
       }
     }
 
     .Inputs {
+      position: relative;
+      z-index: 2;
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
+      justify-content: center;
+      gap: 20px;
     }
   }
 
@@ -80,7 +108,7 @@
       border-radius: 28px;
     }
 
-    .Contacts{
+    .Contacts {
       position: absolute;
       z-index: 2;
       top: -40px;
@@ -88,15 +116,16 @@
       border-radius: 28px;
       background: $color-white;
       width: 440px;
-      height: 540px;
+      //height: 540px;
-      padding: 40px 35px;
+      padding: 40px 35px 20px;
 
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: flex-start;
 
-      .Title{
+      .Title {
+        position: relative;
         font-family: $font-open-sans;
         font-weight: $font-semi-bold;
         font-size: 48px;
@@ -105,14 +134,32 @@
         text-align: right;
         margin-bottom: 32px;
         align-self: center;
+
+        .LedOn {
+          position: absolute;
+          bottom: 6px;
+          left: 6px;
         }
+      }
+
       .Address {
+        position: relative;
         font-family: $font-open-sans;
         font-weight: $font-regular;
         font-size: 32px;
         line-height: 130%;
         color: $color-text;
-        margin-bottom: 32px;
+        margin-bottom: 20px;
+        margin-left: 32px;
+
+        .Icon {
+          position: absolute;
+          left: -48px;
+          top: 8px;
+          width: 32px;
+          height: 32px;
+          stroke: #E96526;
+        }
       }
     }
   }

src/views/home/ui/contacts/contacts.tsx

@@ -1,6 +1,5 @@
 import s from './contacts.module.scss';
-import { Button, Mark } from '@shared/ui';
+import { Button, Input, Mark } from '@shared/ui';
-
 import Image from 'next/image';
 
 import bogatyrLogo from '@public/images/logo-bogatyr.png';
@@ -8,6 +7,11 @@ 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';
+import email from '@public/svg/email.svg';
 
 export default function Contacts() {
   return (
@@ -24,6 +28,15 @@ 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}>
@@ -32,9 +45,11 @@ export default function Contacts() {
           </p>
         </div>
         <div className={s.Inputs}>
-          <input type='text' placeholder='Ваше имя' />
+          <Input placeholder='Ваше имя' fullWidth />
-          <input type='text' placeholder='+79991234567' />
+          <Input type='text' placeholder='+79991234567' fullWidth />
-          <Button variant='orange'>Получить консультацию</Button>
+          <Button variant='orange' fullWidth>
+            Получить консультацию
+          </Button>
         </div>
       </div>
 
@@ -48,17 +63,25 @@ export default function Contacts() {
 
         <div className={s.Contacts}>
           <h3 className={s.Title}>
+            <Image className={s.LedOn} src={ledOn} alt={''} />
             Мы <Mark>всегда</Mark> <br /> на связи
           </h3>
           <p className={s.Address}>
+            <Image className={s.Icon} src={map} alt='' />
             Краснодарский край <br />
             г.Сочи <br />
             ТЦ «Атриум» <br />
             ул. Навагинская д.9«Д» <br />
             этаж 3, офис 35
           </p>
-          <p className={s.Address}>+7 (988) 400 93 93</p>
+          <p className={s.Address}>
-          <p className={s.Address}>office@firecheck.ru</p>
+            <Image className={s.Icon} src={phoneCall} alt='' />
+            +7 (988) 400 93 93
+          </p>
+          <p className={s.Address}>
+            <Image className={s.Icon} src={email} alt='' />
+            office@firecheck.ru
+          </p>
         </div>
       </div>
     </section>

src/views/home/ui/footer/footer.module.scss

@@ -7,6 +7,18 @@
   align-items: flex-start;
   gap: 20px;
 
+  .Block{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 40vw;
+  }
+
+  .SendBtn {
+    align-self: flex-end;
+    max-width: 33%;
+  }
+
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
@@ -23,6 +35,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: 20px;
 
     .Policy {
       font-family: $font-open-sans;

src/views/home/ui/footer/footer.tsx

@@ -1,26 +1,35 @@
 import s from './footer.module.scss';
-import { Button, Mark } from '@shared/ui';
+import { Button, Input, Mark, TextArea } from '@shared/ui';
+import Link from 'next/link';
 
 export default function Footer() {
   return (
     <section className={s.Footer}>
+      <div className={s.Block}>
         <h2 className={s.Header}>
           Давайте <Mark>обсудим</Mark> ваши задачи
         </h2>
-
+        <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
-      <input type='text' placeholder={'Ваше имя'} />
+        <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
-      <input type='text' placeholder={'+7 999 1234567'} />
+        <TextArea
-      <textarea
+          variant='ghost'
-        name=''
-        id=''
           placeholder={'Кратко опишите вашу задачу'}
-      ></textarea>
+          fullWidth
-      <Button variant={'orange'}>Отправить</Button>
+          id='story'
+          name='story'
+          rows={6}
+        />
+        <Button className={s.SendBtn} variant={'orange'} fullWidth>
+          Отправить
+        </Button>
+      </div>
       <div className={s.Bottom}>
-        <div>TG</div>
+        <Button variant='ghost'>Telegram</Button>
-        <div>WA</div>
+        <Button variant='ghost'>WhatsApp</Button>
-        <div>+7 999 1234567</div>
+        <Button variant='ghost'>+7 (999) 123 45 67</Button>
-        <p className={s.Policy}>Политика конфиденциальности</p>
+        <p className={s.Policy}>
+          <Link href='#'>Политика конфиденциальности</Link>
+        </p>
       </div>
     </section>
   );

src/views/home/ui/license/license.module.scss

@@ -17,8 +17,8 @@
 
   .Form {
     position: relative;
-    padding: 40px 60px;
     background: #292E3D;
+    padding: 40px 60px;
     border-radius: 28px;
     overflow: hidden;
 
@@ -38,6 +38,7 @@
       background-color: rgba(#163055, .6);
       transition: 250ms background-color;
     }
+
     .Background {
       position: absolute;
       object-fit: cover;
@@ -46,6 +47,7 @@
 
     .Offer {
       flex: 2;
+
       .Title {
         position: relative;
         z-index: 2;
@@ -76,6 +78,8 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      justify-content: center;
+      gap: 20px;
     }
 
   }

src/views/home/ui/license/license.tsx

@@ -1,6 +1,6 @@
 import s from './license.module.scss';
 
-import { Button, Mark } from '@shared/ui';
+import { Button, Input, Mark } from '@shared/ui';
 
 import bgForm from '@public/images/bg-form.jpg';
 import Image from 'next/image';
@@ -35,9 +35,11 @@ export default function License() {
           </p>
         </div>
         <div className={s.Inputs}>
-          <input type='text' placeholder='Ваше имя' />
+          <Input placeholder={'Ваше имя'} fullWidth />
-          <input type='text' placeholder='+79991234567' />
+          <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
-          <Button variant='orange'>Получить консультацию</Button>
+          <Button variant='orange' fullWidth>
+            Получить консультацию
+          </Button>
         </div>
       </div>
     </section>

src/views/home/ui/offer/offer.module.scss

@@ -45,6 +45,7 @@
     flex-direction: row;
     gap: 40px;
     justify-content: center;
+    margin-bottom: 80px;
   }
 
   .Inner {
@@ -155,6 +156,9 @@
     background: #292E3D;
     border-radius: 28px;
     overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
     &:after {
       content: '';
       display: block;
@@ -174,6 +178,15 @@
       z-index: 1;
     }
 
+    .PanelLeft {
+      display: flex;
+      flex-direction: column;
+    }
+    .PanelRight {
+      width: 100%;
+      place-self: end end;
+    }
+
     .SubTitle {
       position: relative;
       z-index: 2;
@@ -196,12 +209,5 @@
       max-width: 660px;
       margin: 0;
     }
-
-    .Input{
-      position: absolute;
-      z-index: 2;
-      right: 60px;
-      bottom: 40px;
-    }
   }
 }

src/views/home/ui/offer/offer.tsx

@@ -1,7 +1,7 @@
 'use client';
 import s from './offer.module.scss';
 
-import { Button, Mark, Input } from '@shared/ui';
+import { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
 import Image from 'next/image';
 
 import arrow from '@public/svg/arrow-tile.svg';
@@ -40,16 +40,16 @@ export default function Offer() {
           новые, что позволяет сократить стоимость сметы на модернизацию.
         </li>
       </ul>
-      <div className={s.RowForm}>
+      <form className={s.RowForm}>
-        <Input type='text' placeholder='+79991234567' />
+        <Input type='text' placeholder='+7 (999) 123 45 67' />
         <Input
           type='text'
-          placeholder=''
+          placeholder='Ваше имя'
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-        <Button>Узнать подробности</Button>
+        <Button variant='orange'>Узнать подробности</Button>
-      </div>
+      </form>
       <div className={s.Inner}>
         <h2 className={s.Title}>
           Возьмем <Mark>на себя</Mark> все заботы
@@ -83,9 +83,18 @@ export default function Offer() {
           fill
           priority
         />
+        <div className={s.PanelLeft}>
           <p className={s.SubTitle}>Нужна помощь?</p>
-        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
+          <h3 className={s.Title}>
-        <input className={s.Input} type='text' placeholder='+79991234567' />
+            Оставьте заявку на бесплатную консультацию
+          </h3>
+        </div>
+        <div className={s.PanelRight}>
+          <AdvancedPhoneInput
+            text='Получить консультацию'
+            placeholder={'+7 (999) 123 45 67'}
+          />
+        </div>
       </div>
     </section>
   );