feat: add offer section

src/app/layout.tsx

@@ -4,7 +4,7 @@ import '@core/styles/reset.scss';
 import '@core/styles/globals.scss';
 
 const openSans = Open_Sans({
-  subsets: ['latin', 'cyrillic'],
+  subsets: ['cyrillic'],
   weight: ['300', '400', '500', '600', '700'],
   variable: '--open-sans',
 });

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { default as HomePage } from '@pages/home';
+import { HomePage } from '@views/home';
 
 export default function Home() {
   return (

src/core/styles/variables.scss

@@ -8,7 +8,8 @@ $desktop: 1440px;
 //fonts
 $font-open-sans: var(--open-sans), sans-serif;
 
-$font-regular: 500;
+$font-regular: 400;
+$font-medium: 400;
 $font-semi-bold: 600;
 
 // colors

src/pages/home/index.tsx

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

src/shared/ui/index.ts

@@ -1 +1,2 @@
 export { Button } from './button';
+export { Mark } from './mark';

src/shared/ui/mark/index.ts

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

src/shared/ui/mark/mark.module.scss

@@ -0,0 +1,3 @@
+.Mark {
+  color: $color-orange;
+}

src/shared/ui/mark/mark.tsx

@@ -0,0 +1,14 @@
+import s from './mark.module.scss';
+import { ReactNode } from 'react';
+
+type MarkProps = {
+  children: ReactNode;
+};
+
+export default function Mark({ children }: MarkProps) {
+  return (
+    <>
+      <span className={s.Mark}>{children}</span>
+    </>
+  );
+}

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

@@ -1,4 +1,4 @@
-.Start {
+.Main {
   padding: 0px 160px 0px;
 
   &_BgWrapper {
@@ -23,7 +23,6 @@
   align-items: center;
   border-bottom: 1px solid $color-white;
   height: 80px;
-
   .Logo {
     color: $color-white;
   }
@@ -52,6 +51,7 @@
 }
 
 .Info {
+  margin: 0 auto;
   display: flex;
   flex-direction: row;
   padding: 160px 0 200px;

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

@@ -1,21 +1,23 @@
-import s from './home.module.scss';
+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';
-import bgStart from '@public/images/bg-start-desktop.jpg';
-import Image from 'next/image';
 
-export default function Home() {
+export default function Main() {
   return (
-    <section className={s.Start}>
-      <div className={s.Start_BgWrapper}>
+    <section className={s.Main}>
+      <div className={s.Main_BgWrapper}>
         <Image
           src={bgStart}
           placeholder='blur'
           alt={''}
           sizes='100vw'
-          quality={100}
+          quality={75}
           fill
           priority
         />
@@ -55,5 +57,3 @@ export default function Home() {
     </section>
   );
 }
-
-export { Home };

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>;
+}