2025-06-04 12:02:17 +00:00
25 changed files with 475 additions and 213 deletions
--- a/public/svg/email.svg
+++ b/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>
--- a/public/svg/led-on.svg
+++ b/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> 
--- a/public/svg/map.svg
+++ b/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>
--- a/public/svg/phone-call.svg
+++ b/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>
--- a/src/core/styles/variables.scss
+++ b/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;
--- a/src/shared/ui/advanced-phone-input/advanced-phone-input.tsx
+++ b/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>
+  );
+}
--- a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
+++ b/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);
+}
--- a/src/shared/ui/advanced-phone-input/index.ts
+++ b/src/shared/ui/advanced-phone-input/index.ts
@@ -0,0 +1 @@
+export { default as AdvancedPhoneInput } from './advanced-phone-input';
--- a/src/shared/ui/button/button.module.scss
+++ b/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;
  }
--- a/src/shared/ui/button/button.tsx
+++ b/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}
--- a/src/shared/ui/index.ts
+++ b/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';
--- a/src/shared/ui/input/input.module.scss
+++ b/src/shared/ui/input/input.module.scss
@@ -1,113 +1,54 @@
-.input {
-  position: relative;
+.Input {
  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
-  height: 42px;
+  background: $color-white;
  border: 1px solid $color-darkgray;
  border-radius: 28px;
+  padding: 10px 24px;
+  transition: border ease .5s;

-  //@include iftablet {
-  //  height: rem(53px);
-  //}
-
-  &__self {
-    width: 100%;
-    height: 100%;
-    padding: 22px 16px 6px 16px;
-    font-size: 14px;
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: 24px;
  line-height: 100%;
  color: $color-text;
-    opacity: 0.9;
+  width: max-content;

-    //@include iftablet {
-    //  padding: rem(26px) rem(16px) rem(6px) rem(16px);
-    //  font-size: rem(16px);
-    //  line-height: 130%;
-    //}
+  &:focus {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
  }

-  &__placeholder {
-    position: absolute;
-    top: 12px;
-    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);
-    //}
+  &:hover {
+    border-color: $color-text;
+    transition: border-color ease .5s;
  }

-  &__placeholder_active {
-    top: 6px;
-    left: 16px;
-    font-size: 11px;
-    color: $color-darkgray;
-
-    //@include iftablet {
-    //  top: rem(6px);
-    //  left: rem(16px);
-    //  font-size: rem(14px);
-    //}
+  &:focus:hover {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
  }

-  &--error {
-    border-color: $color-error !important;
+  &_fullWidth{
+    width: 100%;
  }

-  &__errorMessage {
-    margin-top: 10px;
+  &_ghost {
+    background: transparent;
+    color: $color-white;

-    font-size: 12px;
-    line-height: 130%;
-    color: $color-error;
-
-    //@include iftablet {
-    //  margin-top: 6px;
-    //}
+    &:focus {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
    }

-  &--disabled {
-    cursor: not-allowed;
-    color: $color-lightgray;
+    &:hover {
+      border-color: $color-white;
+      transition: border-color ease .5s;
    }

-  &__password-rules {
-    display: flex;
-    align-items: center;
-    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);
-      //}
+    &:focus:hover {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
    }
  }
 }
--- a/src/shared/ui/input/input.tsx
+++ b/src/shared/ui/input/input.tsx
@@ -2,67 +2,32 @@

 import s from './input.module.scss';

-import React, { InputHTMLAttributes, useState } from 'react';
-import clsx from 'clsx';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { clsx } from 'clsx';

-type InputPropsType = {
+type InputProps = {
+  wrapperClassName?: string;
  className?: string;
-  placeholder: string;
-  errorMessage?: string | boolean;
-} & InputHTMLAttributes<HTMLInputElement>;
+  fullWidth?: boolean;
+  variant?: 'default' | 'ghost';
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

 const Input = ({
-  placeholder,
-  errorMessage,
-  disabled,
  className,
-  onChange,
+  fullWidth = false,
+  variant = 'default',
  ...props
-}: InputPropsType) => {
-  const [onFocus, setOnFocus] = useState(false);
-
-  const hasValue =
-    typeof props.value === 'string'
-      ? props.value.length > 0
-      : props.value !== undefined && props.value !== null;
-
+}: InputProps) => {
  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}
-          onFocus={(event) => {
-            if (typeof props.onFocus !== 'undefined') {
-              props.onFocus(event);
-            }
-            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>
+      className={clsx(
+        s.Input,
+        s['Input_' + variant],
+        fullWidth && s.Input_fullWidth,
+        className,
      )}
-    </div>
+    />
  );
 };

--- a/src/shared/ui/phone-input/index.ts
+++ b/src/shared/ui/phone-input/index.ts
--- a/src/shared/ui/text-area/index.ts
+++ b/src/shared/ui/text-area/index.ts
@@ -0,0 +1 @@
+export { default as TextArea } from './text-area';
--- a/src/shared/ui/text-area/text-area.module.scss
+++ b/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;
+    }
+  }
+}
--- a/src/shared/ui/text-area/text-area.tsx
+++ b/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>
+  );
+}
--- a/src/views/home/ui/contacts/contacts.module.scss
+++ b/src/views/home/ui/contacts/contacts.module.scss
@@ -33,43 +33,71 @@
  }

  .Form {
-    background: $color-white;
-    border-radius: 28px;
+    position: relative;
+    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;
    }
  }

@@ -88,8 +116,8 @@
      border-radius: 28px;
      background: $color-white;
      width: 440px;
-      height: 540px;
-      padding: 40px 35px;
+      //height: 540px;
+      padding: 40px 35px 20px;

      display: flex;
      flex-direction: column;
@@ -97,6 +125,7 @@
      align-items: flex-start;

      .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;
+        }
      }
    }
  }
--- a/src/views/home/ui/contacts/contacts.tsx
+++ b/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 type='text' placeholder='+79991234567' />
-          <Button variant='orange'>Получить консультацию</Button>
+          <Input placeholder='Ваше имя' fullWidth />
+          <Input type='text' placeholder='+79991234567' fullWidth />
+          <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}>office@firecheck.ru</p>
+          <p className={s.Address}>
+            <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>
--- a/src/views/home/ui/footer/footer.module.scss
+++ b/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;
--- a/src/views/home/ui/footer/footer.tsx
+++ b/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 type='text' placeholder={'Ваше имя'} />
-      <input type='text' placeholder={'+7 999 1234567'} />
-      <textarea
-        name=''
-        id=''
+        <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
+        <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
+        <TextArea
+          variant='ghost'
          placeholder={'Кратко опишите вашу задачу'}
-      ></textarea>
-      <Button variant={'orange'}>Отправить</Button>
+          fullWidth
+          id='story'
+          name='story'
+          rows={6}
+        />
+        <Button className={s.SendBtn} variant={'orange'} fullWidth>
+          Отправить
+        </Button>
+      </div>
      <div className={s.Bottom}>
-        <div>TG</div>
-        <div>WA</div>
-        <div>+7 999 1234567</div>
-        <p className={s.Policy}>Политика конфиденциальности</p>
+        <Button variant='ghost'>Telegram</Button>
+        <Button variant='ghost'>WhatsApp</Button>
+        <Button variant='ghost'>+7 (999) 123 45 67</Button>
+        <p className={s.Policy}>
+          <Link href='#'>Политика конфиденциальности</Link>
+        </p>
      </div>
    </section>
  );
--- a/src/views/home/ui/license/license.module.scss
+++ b/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;
    }

  }
--- a/src/views/home/ui/license/license.tsx
+++ b/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 type='text' placeholder='+79991234567' />
-          <Button variant='orange'>Получить консультацию</Button>
+          <Input placeholder={'Ваше имя'} fullWidth />
+          <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
+          <Button variant='orange' fullWidth>
+            Получить консультацию
+          </Button>
        </div>
      </div>
    </section>
--- a/src/views/home/ui/offer/offer.module.scss
+++ b/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;
-    }
  }
 }
--- a/src/views/home/ui/offer/offer.tsx
+++ b/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}>
-        <Input type='text' placeholder='+79991234567' />
+      <form className={s.RowForm}>
+        <Input type='text' placeholder='+7 (999) 123 45 67' />
        <Input
          type='text'
-          placeholder=''
+          placeholder='Ваше имя'
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
-        <Button>Узнать подробности</Button>
-      </div>
+        <Button variant='orange'>Узнать подробности</Button>
+      </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>
-        <input className={s.Input} type='text' placeholder='+79991234567' />
+          <h3 className={s.Title}>
+            Оставьте заявку на бесплатную консультацию
+          </h3>
+        </div>
+        <div className={s.PanelRight}>
+          <AdvancedPhoneInput
+            text='Получить консультацию'
+            placeholder={'+7 (999) 123 45 67'}
+          />
+        </div>
      </div>
    </section>
  );
				`@@ -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>`
				`@@ -0,0 +1 @@`
				`export { default as AdvancedPhoneInput } from './advanced-phone-input';`
				`@@ -0,0 +1 @@`
				`export { default as TextArea } from './text-area';`