feat: add offer section

src/views/home/index.ts

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

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

@@ -0,0 +1,3 @@
+.Contacts {
+
+}

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

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

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

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

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

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

src/views/home/ui/home.tsx

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+.Main {
+  padding: 0px 160px 0px;
+
+  &_BgWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 900px;
+    z-index: -1;
+
+    & img {
+      object-fit: cover;
+      filter: brightness(0.5);
+    }
+  }
+}
+
+.Header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid $color-white;
+  height: 80px;
+  .Logo {
+    color: $color-white;
+  }
+
+  .Buttons {
+    color: $color-white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 30px;
+
+    .Icon {
+      width: 60px;
+      height: 60px;
+      cursor: pointer;
+    }
+
+    .Button {
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      height: 48px;
+      padding: 24px;
+    }
+  }
+}
+
+.Info {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  padding: 160px 0 200px;
+
+  .Content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 60px;
+
+    .Title {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 60px;
+      line-height: 1;
+      color: $color-white;
+      max-width: 960px;
+    }
+
+    .List {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: 16px;
+    }
+
+    .ListItem {
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: 26px;
+      line-height: 1;
+      color: $color-white;
+    }
+  }
+
+  .Phone {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-basis: 40%;
+    gap: 40px;
+
+    .Title {
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: 60px;
+      line-height: 1;
+      color: $color-white;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import s from './main.module.scss';
+
+import { Button } from '@shared/ui';
+import Image from 'next/image';
+
+import bgStart from '@public/images/bg-start-desktop.jpg';
+import waIcon from '@public/svg/whatsapp.svg';
+import tgIcon from '@public/svg/telegram.svg';
+import callBtn from '@public/svg/phone-calling.svg';
+
+export default function Main() {
+  return (
+    <section className={s.Main}>
+      <div className={s.Main_BgWrapper}>
+        <Image
+          src={bgStart}
+          placeholder='blur'
+          alt={''}
+          sizes='100vw'
+          quality={75}
+          fill
+          priority
+        />
+      </div>
+      <div className={s.Header}>
+        <div className={s.Logo}>Пожарная экспертиза</div>
+        <div className={s.Buttons}>
+          <Image className={s.Icon} src={waIcon} alt='whatsapp' />
+          <Image className={s.Icon} src={tgIcon} alt='telegram' />
+          <Button className={s.Button}>
+            <Image src={callBtn} alt='Call' />
+            Обратный звонок
+          </Button>
+        </div>
+      </div>
+      <div className={s.Info}>
+        <div className={s.Content}>
+          <h1 className={s.Title}>
+            Полное обследование объекта на соответствие требованиям пожарной
+            безопасности
+          </h1>
+          <ul className={s.List}>
+            <li className={s.ListItem}>
+              Пожарно-техническое обследование (пожарный аудит)
+            </li>
+            <li className={s.ListItem}>Расчёт пожарного риска</li>
+            <li className={s.ListItem}>
+              Сокращение затрат на модернизацию пожарных систем
+            </li>
+          </ul>
+        </div>
+        <div className={s.Phone}>
+          <p className={s.Title}>+7 999 123 45 67</p>
+          <Button variant='orange'>Получить консультацию</Button>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,159 @@
+.Offer {
+  background: $color-lightgray;
+  border-radius: 28px;
+  padding: 160px;
+
+  .Title {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    max-width: 1330px;
+    margin-bottom: 80px;
+  }
+
+  .Text {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: 32px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 20px;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 1330px;
+    margin-bottom: 60px;
+
+    .ListItem {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 32px;
+      line-height: 160%;
+      color: $color-text;
+      list-style-type: decimal;
+      margin-left: 40px;
+    }
+  }
+
+  .RowForm {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    justify-content: center;
+  }
+
+  .Inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: $color-white;
+    border-radius: 28px;
+    padding: 80px 40px;
+    margin-bottom: 130px;
+
+    .Title {
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: 60px;
+      line-height: 1;
+      color: $color-text;
+    }
+
+    .Grid {
+      display: grid;
+      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: repeat(3, 1fr);
+      gap: 40px;
+      padding: 40px 0;
+    }
+
+    .Tile {
+      position: relative;
+      padding: 25px;
+      height: 352px;
+      border-radius: 28px;
+      overflow: hidden;
+
+      &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        background-color: rgba(#292E3D, .7);
+        transition: 250ms background-color;
+      }
+
+      &:hover {
+        &:after {
+          background-color: rgba(#292E3D, .5);
+        }
+
+        .Title {
+          display: none;
+        }
+
+        .Description {
+          display: block;
+        }
+
+        .Arrow {
+          transform: rotate(45deg);
+          transition: transform 250ms ease-in-out;
+        }
+      }
+
+      .Background {
+        position: absolute;
+      }
+
+      .Title {
+        position: relative;
+        z-index: 2;
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 42px;
+        line-height: 100%;
+        color: $color-white;
+      }
+
+      .Description {
+        position: relative;
+        z-index: 2;
+        display: none;
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 24px;
+        line-height: 130%;
+        color: $color-white;
+      }
+
+      .Arrow {
+        position: absolute;
+        z-index: 2;
+        right: 25px;
+        bottom: 25px;
+        width: 64px;
+        height: 64px;
+        transform: rotate(-135deg);
+        transition: transform 250ms ease-in-out;
+      }
+    }
+  }
+
+  .Form {
+    .Title {
+    }
+
+    .SubTitle {
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+import s from './offer.module.scss';
+
+import { Button, Mark } from '@shared/ui';
+import Image from 'next/image';
+
+import arrow from '@public/svg/arrow-tile.svg';
+import gridOne from '@public/images/grid-1.png';
+import gridTwo from '@public/images/grid-2.png';
+import gridThree from '@public/images/grid-3.png';
+import gridFour from '@public/images/grid-4.png';
+import gridFive from '@public/images/grid-5.png';
+import gridSix from '@public/images/grid-6.png';
+
+export default function Offer() {
+  return (
+    <section className={s.Offer}>
+      <h2 className={s.Title}>
+        Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
+        систему Охранно-Пожарной <br />
+        сигнализации <Mark> в соответствие </Mark> со всеми нормативами
+      </h2>
+      <p className={s.Text}>Методика работы:</p>
+      <ul className={s.List}>
+        <li className={s.ListItem}>
+          Экспертиза (аудит) выявляет нарушения ОПС
+        </li>
+        <li className={s.ListItem}>
+          На основании экспертизы оформляется заключение
+        </li>
+        <li className={s.ListItem}>
+          На основании выявленных нарушений производится устранение недостатков
+        </li>
+        <li className={s.ListItem}>
+          Производится проверка проекта по замене старых пожарных систем на
+          новые, что позволяет сократить стоимость сметы на модернизацию.
+        </li>
+      </ul>
+      <div className={s.RowForm}>
+        <input type='text' placeholder='+79991234567' />
+        <input type='text' placeholder='Ваше имя' />
+        <Button>Узнать подробности</Button>
+      </div>
+      <div className={s.Inner}>
+        <h2 className={s.Title}>
+          Возьмем <Mark>на себя</Mark> все заботы
+        </h2>
+        <div className={s.Grid}>
+          {tileList.map(({ title, description, image }, idx) => (
+            <div key={idx} className={s.Tile}>
+              <Image
+                className={s.Background}
+                src={image}
+                placeholder='blur'
+                alt={''}
+                quality={75}
+                fill
+                priority
+              />
+              <h3 className={s.Title}> {title} </h3>
+              <p className={s.Description}> {description} </p>
+              <Image className={s.Arrow} src={arrow} alt='' />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className={s.Form}>
+        <p className={s.SubTitle}>Нужна помощь?</p>
+        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
+        <input type='text' placeholder='+79991234567' />
+      </div>
+    </section>
+  );
+}
+
+const tileList = [
+  {
+    title: 'Минимизация затрат',
+    description:
+      'Консультации по минимизации затрат на выполнение мероприятий в области пожарной безопасности',
+    image: gridOne,
+  },
+  {
+    title: 'Проверка на соответствие требованиям',
+    description:
+      'Проверка на соответствие требованиям пожарной безопасности зданий и помещений',
+    image: gridTwo,
+  },
+  {
+    title: 'Оценка пожарного риска',
+    description:
+      'Определение расчетной величины пожарного риска в соответствии с действующими Методиками',
+    image: gridThree,
+  },
+  {
+    title: 'Консультации по соответствию требованиям',
+    description:
+      'Оказание консультаций по соответствию требованиям пожарной безопасности зданий и помещений',
+    image: gridFour,
+  },
+  {
+    title: 'Расчет категорий взрывопожарной и пожарной опасности',
+    description:
+      'Проведение расчета категорий по взрывопожарной и пожарной опасности для помещений, зданий производственного и складского назначения',
+    image: gridFive,
+  },
+  {
+    title: 'Монтаж, техническое обслуживание и ремонт систем',
+    description:
+      'Монтаж, техническое обслуживание и ремонт систем оповещения и эвакуации при пожаре и их элементов, включая диспетчеризацию и проведение пусконаладочных работ',
+    image: gridSix,
+  },
+];

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

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

src/views/home/ui/result/result.tsx

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