Merge pull request #10 from redrockjs/dev

Dev

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

@@ -18,6 +18,9 @@ $color-white: #FFFFFF;
 $color-black: #000000;
 $color-orange: #E96526;
 $color-lightgray: #E4E1E1;
+$color-darkgray: #999999;
 $color-text: #333333;
 $color-text-light: #222222;
-$color-mark: #E96526;
+$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,2 +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/index.ts

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

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

@@ -0,0 +1,54 @@
+.Input {
+  display: flex;
+  background: $color-white;
+  border: 1px solid $color-darkgray;
+  border-radius: 28px;
+  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;
+  width: max-content;
+
+  &: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;
+  }
+
+  &_fullWidth{
+    width: 100%;
+  }
+
+  &_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/input/input.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import s from './input.module.scss';
+
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+type InputProps = {
+  wrapperClassName?: string;
+  className?: string;
+  fullWidth?: boolean;
+  variant?: 'default' | 'ghost';
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+const Input = ({
+  className,
+  fullWidth = false,
+  variant = 'default',
+  ...props
+}: InputProps) => {
+  return (
+    <input
+      {...props}
+      className={clsx(
+        s.Input,
+        s['Input_' + variant],
+        fullWidth && s.Input_fullWidth,
+        className,
+      )}
+    />
+  );
+};
+
+export default Input;

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

@@ -1,3 +1,166 @@
 .Contacts {
+  background: $color-lightgray;
+  border-radius: 28px;
+  padding: 160px;
 
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 80px;
+  }
+
+  .Clients {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    gap: 40px;
+    max-width: 1200px;
+    margin-bottom: 160px;
+
+    .Client {
+
+      img {
+        width: 300px;
+        height: auto;
+      }
+    }
+  }
+
+  .Form {
+    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-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-white;
+        max-width: 720px;
+      }
+    }
+
+    .Inputs {
+      position: relative;
+      z-index: 2;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 20px;
+    }
+  }
+
+  .Map {
+    position: relative;
+
+    iframe {
+      border-radius: 28px;
+    }
+
+    .Contacts {
+      position: absolute;
+      z-index: 2;
+      top: -40px;
+      right: 180px;
+      border-radius: 28px;
+      background: $color-white;
+      width: 440px;
+      //height: 540px;
+      padding: 40px 35px 20px;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .Title {
+        position: relative;
+        font-family: $font-open-sans;
+        font-weight: $font-semi-bold;
+        font-size: 48px;
+        line-height: 100%;
+        color: $color-text;
+        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: 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,5 +1,97 @@
 import s from './contacts.module.scss';
+import { Button, Input, Mark } from '@shared/ui';
+import Image from 'next/image';
+
+import bogatyrLogo from '@public/images/logo-bogatyr.png';
+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 <section className={s.Contacts}>Contacts</section>;
+  return (
+    <section className={s.Contacts}>
+      <h2 className={s.Header}>
+        Клиенты, которые <Mark>нам доверяют</Mark>
+      </h2>
+      <div className={s.Clients}>
+        {clientsLogos.map(({ logo }, idx) => (
+          <div key={idx} className={s.Client}>
+            <Image src={logo} alt='' />
+          </div>
+        ))}
+      </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>
+
+      <div className={s.Map}>
+        <iframe
+          src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
+          width='100%'
+          height='620'
+          frameBorder='0'
+        ></iframe>
+
+        <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}>
+            <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>
+  );
 }
+
+const clientsLogos = [
+  { logo: bogatyrLogo },
+  { logo: sochiparkLogo },
+  { logo: chateauLogo },
+  { logo: gazpromLogo },
+  { logo: kraspolLogo },
+];

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

@@ -1,2 +1,49 @@
 .Footer {
+  background-color: #1B1B25;
+  padding: 80px 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  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;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: 40px;
+  }
+
+  .Bottom {
+    width: 100%;
+    height: 80px;
+    border-top: 1px solid $color-white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+
+    .Policy {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 16px;
+      line-height: 100%;
+      color: $color-white;
+      margin-left: auto;
+    }
+  }
 }

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

@@ -1,5 +1,36 @@
 import s from './footer.module.scss';
+import { Button, Input, Mark, TextArea } from '@shared/ui';
+import Link from 'next/link';
 
 export default function Footer() {
-  return <section className={s.Footer}>Footer</section>;
+  return (
+    <section className={s.Footer}>
+      <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>
+      <div className={s.Bottom}>
+        <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>
+  );
 }

src/views/home/ui/home.tsx

@@ -1,9 +1,9 @@
 import Main from './main/main';
 import Offer from './offer/offer';
 import Result from './result/result';
-// import License from './license/license';
+import License from './license/license';
-// import Contacts from './contacts/contacts';
+import Contacts from './contacts/contacts';
-// import Footer from './footer/footer';
+import Footer from './footer/footer';
 
 export default function HomePage() {
   return (
@@ -11,9 +11,9 @@ export default function HomePage() {
       <Main />
       <Offer />
       <Result />
-      {/*<License />*/}
+      <License />
-      {/*<Contacts />*/}
+      <Contacts />
-      {/*<Footer />*/}
+      <Footer />
     </>
   );
 }

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

@@ -1,2 +1,86 @@
 .License {
+  padding: 160px;
+
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 80px;
+  }
+
+  .Slider {
+    margin-bottom: 80px;
+  }
+
+  .Form {
+    position: relative;
+    background: #292E3D;
+    padding: 40px 60px;
+    border-radius: 28px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: row;
+    gap: 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: 48px;
+        line-height: 110%;
+        color: $color-white;
+        margin: 0 0 50px;
+      }
+
+      .SubTitle {
+        position: relative;
+        z-index: 2;
+        font-family: $font-open-sans;
+        font-weight: $font-light;
+        font-size: 30px;
+        line-height: 100%;
+        color: $color-white;
+        margin-bottom: 16px;
+        max-width: 820px;
+      }
+    }
+
+    .Inputs {
+      position: relative;
+      z-index: 2;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 20px;
+    }
+
+  }
 }

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

@@ -1,5 +1,47 @@
 import s from './license.module.scss';
 
+import { Button, Input, Mark } from '@shared/ui';
+
+import bgForm from '@public/images/bg-form.jpg';
+import Image from 'next/image';
+
 export default function License() {
-  return <section className={s.License}>License</section>;
+  return (
+    <section className={s.License}>
+      <h2 className={s.Header}>
+        Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
+      </h2>
+
+      <div className={s.Slider}>Slider here</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>
+    </section>
+  );
 }

src/views/home/ui/main/main.tsx

@@ -50,7 +50,7 @@ export default function Main() {
           </ul>
         </div>
         <div className={s.Phone}>
-          <p className={s.Title}>+7 999 123 45 67</p>
+          <p className={s.Title}>+7 988 400 93 93</p>
           <Button variant='orange'>Получить консультацию</Button>
         </div>
       </div>

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,6 +1,7 @@
+'use client';
 import s from './offer.module.scss';
 
-import { Button, Mark } from '@shared/ui';
+import { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
 import Image from 'next/image';
 
 import arrow from '@public/svg/arrow-tile.svg';
@@ -11,8 +12,11 @@ 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}>
       <h2 className={s.Title}>
@@ -36,11 +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='Ваше имя' />
+        <Input
-        <Button>Узнать подробности</Button>
+          type='text'
-      </div>
+          placeholder='Ваше имя'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <Button variant='orange'>Узнать подробности</Button>
+      </form>
       <div className={s.Inner}>
         <h2 className={s.Title}>
           Возьмем <Mark>на себя</Mark> все заботы
@@ -74,9 +83,18 @@ export default function Offer() {
           fill
           priority
         />
-        <p className={s.SubTitle}>Нужна помощь?</p>
+        <div className={s.PanelLeft}>
-        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
+          <p className={s.SubTitle}>Нужна помощь?</p>
-        <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>
   );

src/views/policy/index.ts

@@ -0,0 +1 @@
+export { default as PolicyPage } from './ui/policy';

src/views/policy/ui/policy.module.scss

@@ -0,0 +1,2 @@
+.Policy {
+}

src/views/policy/ui/policy.tsx

@@ -0,0 +1,5 @@
+import s from './policy.module.scss';
+
+export default function Policy() {
+  return <section className={s.Policy}>policy</section>;
+}