feat: ui components

2025-06-04 14:59:10 +03:00
parent cb799f8057
commit 8085b3bbde
25 changed files with 475 additions and 213 deletions
--- 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;
    }
  }

@@ -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;
-      padding: 40px 35px;
+      //height: 540px;
+      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;
+        }
      }
    }
  }
--- 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}>
-      <h2 className={s.Header}>
-        Давайте <Mark>обсудим</Mark> ваши задачи
-      </h2>
-
-      <input type='text' placeholder={'Ваше имя'} />
-      <input type='text' placeholder={'+7 999 1234567'} />
-      <textarea
-        name=''
-        id=''
-        placeholder={'Кратко опишите вашу задачу'}
-      ></textarea>
-      <Button variant={'orange'}>Отправить</Button>
+      <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}>
-        <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
        />
-        <p className={s.SubTitle}>Нужна помощь?</p>
-        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
-        <input className={s.Input} type='text' placeholder='+79991234567' />
+        <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>
    </section>
  );