public/svg/arrow-tile.svg

@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6706 63.3183C29.9218 64.5674 31.9474 64.5674 33.1954 63.3183C34.4466 62.0692 34.4466 60.047 33.1954 58.8011L12.5874 38.2292C11.5794 37.2229 12.293 35.5042 13.717 35.5042H61.0546C62.821 35.5042 64.2546 34.0442 64.2546 32.2808V32.2667C64.2546 30.5033 62.821 29.1136 61.0546 29.1136H13.717C12.293 29.1136 11.5794 27.3918 12.5874 26.3855L33.2946 5.71049C34.5458 4.4614 34.5458 2.43927 33.2946 1.19018C32.0466 -0.0557426 30.021 -0.0557426 28.7698 1.19018L2.12977 27.7886C-0.369429 30.2836 -0.369429 34.328 2.12977 36.823C2.77937 37.4715 29.1858 63.8326 28.6706 63.3183Z" fill="white"/>
+</svg>

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}>
+    <section className={s.Main}>
-      <div className={s.Start_BgWrapper}>
+      <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>;
+}

tsconfig.json

@@ -21,7 +21,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@core/*": ["./src/core/*"],
-      "@pages/*": ["./src/pages/*"],
+      "@views/*": ["./src/views/*"],
       "@widgets/*": ["./src/widgets/*"],
       "@shared/*": ["./src/shared/*"],
       "@public/*": ["./public/*"]