fix: update home - services section

src/views/home/styles.module.scss

@@ -33,23 +33,6 @@
   }
 }
 
-.Container {
-  position: relative;
-  margin: 0 auto;
-  max-width: rem(1540px);
-  padding: 40px 10px;
-
-  @include iftablet {
-    padding: 40px 20px;
-  }
-  @include iflaptop {
-    padding: 40px 28px;
-  }
-  @include ifdesktop {
-    padding: 40px;
-  }
-}
-
 .Row {
   display: grid;
   grid-template-columns: auto;
@@ -165,4 +148,87 @@
     color: $color-text;
     text-align: center;
   }
+}
+
+
+.Service {
+  position: relative;
+  margin: 0 auto;
+  max-width: rem(1540px);
+  padding: 40px 10px;
+
+  @include iftablet {
+    padding: 40px 20px;
+  }
+  @include iflaptop {
+    padding: 40px 28px;
+  }
+  @include ifdesktop {
+    padding: 40px;
+  }
+
+  .Title {
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 100%;
+    color: $color-text;
+    text-align: center;
+    margin-bottom: rem(40px);
+  }
+
+  .Switcher {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    border: 1px solid $color-green;
+    border-radius: rem(20px);
+    margin-bottom: rem(40px);
+
+    .Button {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      border-radius: rem(18px);
+      color: $color-green;
+      text-transform: uppercase;
+
+      &_active {
+        background-color: $color-green;
+        color: $color-white;
+      }
+    }
+  }
+
+  .Grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: rem(20px);
+
+    .Tile {
+      display: flex;
+      flex-direction: column;
+      gap: rem(24px);
+      border: 1px solid $color-green;
+      padding: rem(20px) rem(40px);
+      border-radius: rem(20px);
+      //box-shadow: 4px 0px 10px 0px rgba(0,146,131,0.5);
+      cursor: pointer;
+
+      font-family: $font-roboto;
+      font-weight: 300;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-green;
+      text-align: center;
+      &:hover {
+        box-shadow: 4px 4px 10px 0px rgba(0,146,131,0.5);
+      }
+    }
+  }
 }

src/views/home/ui.tsx

@@ -3,6 +3,8 @@ import Image from 'next/image';
 import { Button, Icons, PartnersSlider } from '@shared/ui';
 import bg from '@public/images/bg-main.jpg';
 import lines from '@public/images/bg-lines.png';
+import clsx from 'clsx';
+import { ROUTES } from '@shared/const/route';
 
 export default function Main() {
   return (
@@ -45,6 +47,24 @@ export default function Main() {
         </div>
       </section>
 
+      <section className={s.Service}>
+        <h2 className={s.Title}>Выберите услугу</h2>
+
+        <div className={s.Switcher}>
+          <div className={clsx(s.Button, s.Button_active)}>Экспертиза</div>
+          <div className={s.Button}>Оценка</div>
+          <div className={s.Button}>Юрист</div>
+        </div>
+
+        <div className={s.Grid}>
+          {servicesData.expertise.map(({ id, title, icon, url }, i) => (
+            <div key={id} className={s.Tile}>
+              {title}
+            </div>
+          ))}
+        </div>
+      </section>
+
       <section className={s.BottomRow}>
         <div className={s.LeftBlock}>
           <p className={s.LineTitle}>Остались вопросы?</p>
@@ -57,9 +77,157 @@ export default function Main() {
       </section>
 
       <section className={s.Slider}>
-        <h3 className={s.Title}>Наши клиенты и партнеры</h3>
+        <h2 className={s.Title}>Наши клиенты и партнеры</h2>
         <PartnersSlider />
       </section>
     </>
   );
 }
+
+const servicesData = {
+  expertise: [
+    {
+      id: 0,
+      title: 'Строительно-техническая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_STROIT,
+    },
+    {
+      id: 1,
+      title: 'Автотехническая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_AUTOTECH,
+    },
+    {
+      id: 2,
+      title: 'Кадастровая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_KADASTR,
+    },
+    {
+      id: 3,
+      title: 'Технико-криминалистическая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_TECH_CRIM,
+    },
+    {
+      id: 4,
+      title: 'Компьютерно-техническая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_COPMPUTER,
+    },
+    {
+      id: 5,
+      title: 'Товароведческая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_TOVAR,
+    },
+    {
+      id: 6,
+      title: 'Трасологическая экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_TRASOLOGIA,
+    },
+    {
+      id: 7,
+      title: 'Бухгалтерская экспертиза',
+      icon: '',
+      url: ROUTES.EXPERTIZA_BUHGALTER,
+    },
+  ],
+  ocenka: [
+    {
+      id: 0,
+      title: 'Оценка недвижимого имущества',
+      icon: '',
+      url: ROUTES.OCENKA_NEDVIGA,
+    },
+    {
+      id: 1,
+      title: 'Оценка движимого имущества',
+      icon: '',
+      url: ROUTES.OCENKA_RYNOCHNAYA,
+    },
+    {
+      id: 2,
+      title: 'Оценка для наследства',
+      icon: '',
+      url: ROUTES.OCENKA_NASLEDSTVO,
+    },
+    {
+      id: 3,
+      title: 'Оценка предприятия, бизнеса',
+      icon: '',
+      url: ROUTES.OCENKA_BUSINESS,
+    },
+    {
+      id: 4,
+      title: 'Оценка арендной платы',
+      icon: '',
+      url: ROUTES.OCENKA_ARENDA,
+    },
+    {
+      id: 5,
+      title: 'Оценка для ипотеки',
+      icon: '',
+      url: ROUTES.OCENKA_IPOTEKA,
+    },
+    {
+      id: 6,
+      title: 'Оценка для нотариуса',
+      icon: '',
+      url: ROUTES.OCENKA_NOTARIUS,
+    },
+    {
+      id: 7,
+      title: 'Оценка машин и оборудования',
+      icon: '',
+      url: ROUTES.OCENKA_MASHINES,
+    },
+  ],
+  jurist: [
+    {
+      id: 0,
+      title: 'Представительство в суде',
+      icon: '',
+      url: ROUTES.JURIST_PREDSTAVITELSTVO,
+    },
+    {
+      id: 1,
+      title: 'Банкротство физических лиц',
+      icon: '',
+      url: ROUTES.JURIST_BANKROTSTVO,
+    },
+    {
+      id: 2,
+      title: 'Сопровождение сделок, составление договоров',
+      icon: '',
+      url: ROUTES.JURIST_SDELKI_DOGOVORA,
+    },
+    {
+      id: 3,
+      title: 'Споры с застройщиком',
+      icon: '',
+      url: ROUTES.JURIST_ZEM_SPORY,
+    },
+    {
+      id: 4,
+      title: 'Споры со страховой компанией',
+      icon: '',
+      url: ROUTES.JURIST_STRAHOVKA,
+    },
+    {
+      id: 5,
+      title: 'Помощь должникам',
+      icon: '',
+      url: ROUTES.JURIST_DOLZHNIKAM,
+    },
+    {
+      id: 6,
+      title: 'Взыскание долгов с юридических лиц',
+      icon: '',
+      url: ROUTES.JURIST_DOLGI,
+    },
+    { id: 7, title: 'Споры по ДТП', icon: '', url: ROUTES.JURIST_DTP },
+  ],
+};