fix(home): add adaptive to sections

src/views/home/about/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/views/home/about/styles.module.scss

@@ -0,0 +1,148 @@
+.About{
+  background: #f7f7f7;
+}
+
+.Inner{
+  margin: 0 auto;
+  max-width: rem(1540px);
+  padding: rem(80px) rem(10px);
+  display: flex;
+  flex-direction: column;
+}
+
+.Title {
+  font-family: $font-roboto;
+  font-weight: 500;
+  font-size: rem(32px);
+  line-height: 100%;
+  color: $color-title;
+  text-align: center;
+  margin-bottom: rem(80px);
+}
+
+.Block{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: rem(40px);
+
+  @include iflaptop{
+    flex-direction: row;
+  }
+}
+
+.Card {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: rem(40px) rem(20px);
+  grid-template-areas:
+    "left right"
+    "bottom bottom";
+  margin: 0;
+  padding: rem(20px);
+  border-radius: rem(28px);
+
+  background-color: #FFFFFF;
+  background-image: linear-gradient(185deg, #58c644 55%, #ffffff 0%);
+  box-shadow: rem(15px) 0 rem(40px) 0 rgba(0, 0, 0, 0.5);
+  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
+
+  @include iftablet{
+    gap: rem(80px) rem(20px);
+    margin: 0 rem(40px);
+    padding: rem(40px);
+    max-width: rem(760px);
+  }
+  @include iflaptop{
+    max-width: unset;
+  }
+
+  .Left{
+    grid-area: left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    font-family: $font-roboto;
+    font-weight: 300;
+    font-size: rem(16px);
+    line-height: 130%;
+    color: $color-white;
+    text-align: center;
+
+    @include iftablet{
+      font-size: rem(20px);
+    }
+
+
+    & p:first-child{
+      font-weight: 500;
+      font-size: rem(20px);
+      margin-bottom: rem(16px);
+
+      @include iftablet{
+        font-size: rem(28px);
+        margin-bottom: rem(16px);
+      }
+    }
+  }
+
+  .Right{
+    grid-area: right;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    font-family: $font-roboto;
+    font-weight: 300;
+    font-size: rem(16px);
+    line-height: 130%;
+    color: $color-white;
+    text-align: center;
+
+    @include iftablet{
+      font-size: rem(20px);
+    }
+
+
+    & p:first-child{
+      font-weight: 500;
+      font-size: rem(20px);
+      margin-bottom: rem(16px);
+
+      @include iftablet{
+        font-size: rem(28px);
+        margin-bottom: rem(16px);
+      }
+    }
+  }
+
+  .Bottom{
+    grid-area: bottom;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+}
+
+.Slider {
+  display: block;
+  padding: rem(20px) rem(20px);
+  width: 100%;
+
+  @include iftablet{
+    flex: 1;
+    display: block;
+    padding: 0 rem(20px);
+  }
+}
+
+.Slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/views/home/about/ui.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import s from './styles.module.scss';
+import { Button } from '@shared/ui';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/grid';
+import 'swiper/css/autoplay';
+import Image from 'next/image';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Grid } from 'swiper/modules';
+import lic0 from '@public/images/licence/dtr-strahovka.png';
+import lic1 from '@public/images/licence/dtr-eac-0.png';
+import lic2 from '@public/images/licence/dtr-eac-1.png';
+import lic3 from '@public/images/licence/dtr-eac-2.png';
+import lic4 from '@public/images/licence/dtr-eac-3.png';
+
+const slidesData = [
+  {
+    id: 0,
+    name: 'Страховое свидетельство',
+    image: lic0,
+  },
+  {
+    id: 1,
+    name: 'Сертификат соответствия',
+    image: lic1,
+  },
+  {
+    id: 2,
+    name: 'Разрешение система качества ЕАС',
+    image: lic2,
+  },
+  {
+    id: 3,
+    name: 'Приложение к разрешению ЕАС',
+    image: lic3,
+  },
+  {
+    id: 4,
+    name: 'Приложение к разрешению ЕАС',
+    image: lic4,
+  },
+];
+
+const swiperBreakpoints = {
+  360: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  768: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+  1440: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+};
+
+function About() {
+  return (
+    <section className={s.About}>
+      <div className={s.Inner}>
+        <h2 className={s.Title}>О компании</h2>
+        <div className={s.Block}>
+          <div className={s.Card}>
+            <div className={s.Left}>
+              <p>5.000.000 руб.</p>
+              <p>
+                Страхование компании <br />
+                <strong>&#34;ДИ ТРАСО&#34;</strong>
+              </p>
+            </div>
+            <div className={s.Right}>
+              <p> 300.000 руб. </p>
+              <p>
+                Индивидуальное страхование <br />
+                <strong>специалиста</strong>
+              </p>
+            </div>
+            <div className={s.Bottom}>
+              <Button>Посмотреть видео о нас</Button>
+            </div>
+          </div>
+          <Swiper
+            className={s.Slider}
+            modules={[Grid, Autoplay]}
+            breakpoints={swiperBreakpoints}
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+            }}
+            loop={true}
+          >
+            {slidesData.map(({ id, name, image }) => (
+              <SwiperSlide key={id} className={s.Slide}>
+                <Image src={image} alt={name} quality={75} width={200} />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { About };

src/views/home/call-us/styles.module.scss

@@ -0,0 +1,47 @@
+.CallUs {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0;
+  width: 100%;
+  background-color: transparent;
+  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+    padding: rem(20px) 0;
+  }
+
+  .LeftBlock {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    gap: rem(10px);
+    padding: rem(20px) rem(40px);
+
+    .LineTitle {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: rem(24px);
+      line-height: 130%;
+      color: $color-white;
+    }
+
+    .LineText {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+    }
+  }
+
+  .RightBlock {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: rem(40px);
+    padding: rem(20px) rem(40px);
+  }
+}

src/views/home/call-us/ui.tsx

@@ -0,0 +1,19 @@
+import s from './styles.module.scss';
+import { Button } from '@shared/ui';
+
+function CallUs() {
+  return (
+    <section className={s.CallUs}>
+      <div className={s.LeftBlock}>
+        <p className={s.LineTitle}>Остались вопросы?</p>
+        <p className={s.LineText}>Свяжитесь с нами любым удобным способом</p>
+      </div>
+      <div className={s.RightBlock}>
+        <Button>Написать в чат</Button>
+        <Button>Бесплатный звонок</Button>
+      </div>
+    </section>
+  );
+}
+
+export { CallUs };

src/views/home/experience/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/views/home/experience/styles.module.scss

@@ -0,0 +1,86 @@
+.Experience {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0;
+  width: 100%;
+  background-color: transparent;
+  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
+  padding: rem(40px) 0 rem(20px);
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+    padding: rem(20px) 0;
+  }
+
+  .LeftBlock {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: rem(20px);
+
+    @include iftablet{
+      gap: rem(40px);
+    }
+
+    .Rounded {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(24px);
+      line-height: 130%;
+      color: $color-white;
+
+      border-radius: rem(28px);
+      border: 1px solid $color-white;
+      padding: rem(20px);
+      text-align: center;
+
+      @include iftablet{
+        font-size: rem(24px);
+        line-height: 130%;
+        width: rem(160px);
+        padding: rem(20px) rem(20px);
+        border-radius: rem(60px);
+      }
+
+      @include iflaptop{
+        font-size: rem(30px);
+        line-height: 130%;
+        width: rem(260px);
+        padding: rem(10px) rem(20px);
+        border-radius: rem(60px);
+      }
+    }
+  }
+
+  .RightBlock {
+    display: flex;
+    flex-direction: column;
+    gap: rem(10px);
+    padding: rem(20px) rem(40px);
+
+    .SubBlock {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: rem(16px);
+
+      .Icon {
+        width: rem(32px);
+        flex-shrink: 0;
+        @include iftablet{
+          width: rem(64px);
+        }
+      }
+
+      .Text {
+        flex-shrink: 1;
+        font-family: $font-roboto;
+        font-weight: 400;
+        font-size: rem(16px);
+        line-height: 130%;
+        color: $color-white;
+      }
+    }
+  }
+}

src/views/home/experience/ui.tsx

@@ -0,0 +1,46 @@
+import { Icons } from '@/shared/ui';
+import s from './styles.module.scss';
+
+export default function Experience() {
+  return (
+    <section className={s.Experience}>
+      <div className={s.LeftBlock}>
+        <div className={s.Rounded}>
+          <p> 3300 </p>
+          <p>оценок</p>
+        </div>
+        <div className={s.Rounded}>
+          <p>2800</p>
+          <p>экспертиз</p>
+        </div>
+      </div>
+      <div className={s.RightBlock}>
+        <div className={s.SubBlock}>
+          <Icons.MapOutline
+            className={s.Icon}
+            // width={64}
+            // height={64}
+            color={'#FFFFFF'}
+          />
+          <p className={s.Text}>
+            Мы производим независимую оценку и экспертизу на всей территории
+            Краснодарского края и города Сочи
+          </p>
+        </div>
+        <div className={s.SubBlock}>
+          <Icons.Consultation
+            className={s.Icon}
+            // width={64}
+            // height={64}
+            color={'#FFFFFF'}
+          />
+          <p className={s.Text}>
+            Клиентам предоставляется бесплатная юридическая консультация
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { Experience };

src/views/home/main/index.ts

@@ -0,0 +1 @@
+export * from './ui';

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

@@ -0,0 +1,82 @@
+.Main {
+  height: rem(600px);
+  position: relative;
+
+  .BgWrapper {
+    position: absolute;
+    top: rem(-200px);
+    left: rem(-880px);
+    width: 100vw;
+    z-index: -1;
+
+    @include iftablet{
+      top: rem(-200px);
+      left: rem(-600px);
+    }
+
+    @include iflaptop{
+      top: rem(-200px);
+      left: rem(-360px);
+    }
+
+    @include ifdesktop{
+      top: rem(-200px);
+      left: 0;
+    }
+
+    .Background {
+      object-fit: cover;
+    }
+  }
+
+  .Header {
+    position: absolute;
+    top: rem(180px);
+    left: rem(20px);
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: rem(32px);
+    line-height: 130%;
+    color: $color-title;
+    max-width: rem(360px);
+
+    @include iftablet{
+      top: rem(180px);
+      left: rem(60px);
+      font-size: rem(42px);
+      max-width: rem(660px);
+    }
+
+    @include iflaptop{
+      top: rem(180px);
+      left: rem(140px);
+      font-size: rem(42px);
+      max-width: rem(660px);
+    }
+
+    @include ifdesktop{
+      top: rem(180px);
+      left: rem(300px);
+      font-size: rem(48px);
+      max-width: rem(720px);
+    }
+  }
+
+  .Lines {
+    position: absolute;
+    top: rem(420px);
+    left: rem(-80px);
+
+    @include iftablet{
+      left: rem(0px);
+    }
+
+    @include iflaptop{
+      left: rem(120px);
+    }
+
+    @include ifdesktop{
+      left: rem(200px);
+    }
+  }
+}

src/views/home/main/ui.tsx

@@ -0,0 +1,20 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import bg from '@public/images/bg-main.jpg';
+import lines from '@public/images/bg-lines.png';
+
+function Main() {
+  return (
+    <section className={s.Main}>
+      <div className={s.BgWrapper}>
+        <Image className={s.Background} src={bg} alt={''} />
+      </div>
+      <h2 className={s.Header}>
+        Независимая оценка и экспертиза в <br /> Краснодарском крае
+      </h2>
+      <Image className={s.Lines} src={lines} alt={''} />
+    </section>
+  );
+}
+
+export { Main };

src/views/home/partners/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/views/home/partners/styles.module.scss

@@ -0,0 +1,13 @@
+.Slider {
+  padding: rem(80px) 0;
+
+  .Title {
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: rem(32px);
+    line-height: 100%;
+    color: $color-title;
+    text-align: center;
+    margin-bottom: rem(40px);
+  }
+}

src/views/home/partners/ui.tsx

@@ -0,0 +1,13 @@
+import s from './styles.module.scss';
+import { PartnersSlider } from '@shared/ui';
+
+function Partners() {
+  return (
+    <section className={s.Slider}>
+      <h2 className={s.Title}>Наши клиенты и партнеры</h2>
+      <PartnersSlider />
+    </section>
+  );
+}
+
+export { Partners };

src/views/home/services/data.tsx

@@ -0,0 +1,157 @@
+import { Icons } from '@/shared/ui';
+import { ROUTES } from '@shared/const/route';
+
+const iconProps = { height: 100, width: 100, fill: '#23A455' };
+
+export const servicesData = {
+  expertise: [
+    {
+      id: 0,
+      title: 'Строительно-техническая экспертиза',
+      icon: <Icons.GridWall {...iconProps} />,
+      url: ROUTES.EXPERTIZA_STROIT,
+    },
+    {
+      id: 1,
+      title: 'Автотехническая экспертиза',
+      icon: <Icons.GridCar {...iconProps} />,
+      url: ROUTES.EXPERTIZA_AUTOTECH,
+    },
+    {
+      id: 2,
+      title: 'Кадастровая экспертиза',
+      icon: <Icons.GridMap {...iconProps} />,
+      url: ROUTES.EXPERTIZA_KADASTR,
+    },
+    {
+      id: 3,
+      title: 'Технико-криминалистическая экспертиза',
+      icon: <Icons.GridBook {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TECH_CRIM,
+    },
+    {
+      id: 4,
+      title: 'Компьютерно-техническая экспертиза',
+      icon: <Icons.GridComputer {...iconProps} />,
+      url: ROUTES.EXPERTIZA_COPMPUTER,
+    },
+    {
+      id: 5,
+      title: 'Товароведческая экспертиза',
+      icon: <Icons.GridBox {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TOVAR,
+    },
+    {
+      id: 6,
+      title: 'Трасологическая экспертиза',
+      icon: <Icons.GridRoute {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TRASOLOGIA,
+    },
+    {
+      id: 7,
+      title: 'Бухгалтерская экспертиза',
+      icon: <Icons.GridDocument {...iconProps} />,
+      url: ROUTES.EXPERTIZA_BUHGALTER,
+    },
+  ],
+  ocenka: [
+    {
+      id: 0,
+      title: 'Оценка недвижимого имущества',
+      icon: <Icons.GridHouseWithAttic {...iconProps} />,
+      url: ROUTES.OCENKA_NEDVIGA,
+    },
+    {
+      id: 1,
+      title: 'Оценка движимого имущества',
+      icon: <Icons.GridAuto {...iconProps} />,
+      url: ROUTES.OCENKA_RYNOCHNAYA,
+    },
+    {
+      id: 2,
+      title: 'Оценка для наследства',
+      icon: <Icons.GridBlueprint {...iconProps} />,
+      url: ROUTES.OCENKA_NASLEDSTVO,
+    },
+    {
+      id: 3,
+      title: 'Оценка предприятия, бизнеса',
+      icon: <Icons.GridStore {...iconProps} />,
+      url: ROUTES.OCENKA_BUSINESS,
+    },
+    {
+      id: 4,
+      title: 'Оценка арендной платы',
+      icon: <Icons.GridOffice {...iconProps} />,
+      url: ROUTES.OCENKA_ARENDA,
+    },
+    {
+      id: 5,
+      title: 'Оценка для ипотеки',
+      icon: <Icons.GridMortgage {...iconProps} />,
+      url: ROUTES.OCENKA_IPOTEKA,
+    },
+    {
+      id: 6,
+      title: 'Оценка для нотариуса',
+      icon: <Icons.GridWrite {...iconProps} />,
+      url: ROUTES.OCENKA_NOTARIUS,
+    },
+    {
+      id: 7,
+      title: 'Оценка машин и оборудования',
+      icon: <Icons.GridCrane {...iconProps} />,
+      url: ROUTES.OCENKA_MASHINES,
+    },
+  ],
+  jurist: [
+    {
+      id: 0,
+      title: 'Представительство в суде',
+      icon: <Icons.GridPersonCombination {...iconProps} />,
+      url: ROUTES.JURIST_PREDSTAVITELSTVO,
+    },
+    {
+      id: 1,
+      title: 'Банкротство физических лиц',
+      icon: <Icons.GridTransferAccount {...iconProps} />,
+      url: ROUTES.JURIST_BANKROTSTVO,
+    },
+    {
+      id: 2,
+      title: 'Сопровождение сделок, составление договоров',
+      icon: <Icons.GridDocumentWithPen {...iconProps} />,
+      url: ROUTES.JURIST_SDELKI_DOGOVORA,
+    },
+    {
+      id: 3,
+      title: 'Споры с застройщиком',
+      icon: <Icons.GridJustice {...iconProps} />,
+      url: ROUTES.JURIST_ZEM_SPORY,
+    },
+    {
+      id: 4,
+      title: 'Споры со страховой компанией',
+      icon: <Icons.GridInsurance {...iconProps} />,
+      url: ROUTES.JURIST_STRAHOVKA,
+    },
+    {
+      id: 5,
+      title: 'Помощь должникам',
+      icon: <Icons.GridShield {...iconProps} />,
+      url: ROUTES.JURIST_DOLZHNIKAM,
+    },
+    {
+      id: 6,
+      title: 'Взыскание долгов с юридических лиц',
+      icon: <Icons.GridStore {...iconProps} />,
+      url: ROUTES.JURIST_DOLGI,
+    },
+    {
+      id: 7,
+      title: 'Споры по ДТП',
+      icon: <Icons.GridCollision {...iconProps} />,
+      url: ROUTES.JURIST_DTP,
+    },
+  ],
+};

src/views/home/services/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/views/home/services/styles.module.scss

@@ -0,0 +1,139 @@
+
+.Service {
+  position: relative;
+  margin: 0 auto;
+  max-width: rem(1540px);
+  padding: rem(40px) rem(10px);
+
+  @include iftablet {
+    padding: rem(40px) rem(20px);
+  }
+  @include iflaptop {
+    padding: rem(40px) rem(28px);
+  }
+  @include ifdesktop {
+    padding: rem(80px) rem(40px);
+  }
+
+  .Title {
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: rem(32px);
+    line-height: 100%;
+    color: $color-title;
+    text-align: center;
+    margin-bottom: rem(40px);
+
+    @include iftablet{
+      margin-bottom: rem(60px);
+    }
+  }
+
+  .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(20px);
+
+    @include iftablet{
+      margin-bottom: rem(40px);
+    }
+
+    .Button {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(14px);
+      line-height: 100%;
+      padding: rem(16px) rem(10px);
+      border-radius: rem(18px);
+      color: $color-green;
+      text-transform: uppercase;
+      cursor: pointer;
+      border: 1px solid transparent;
+
+      @include iftablet{
+        font-size: rem(16px);
+        padding: rem(20px);
+      }
+
+      &_active {
+        background-color: $color-green;
+        color: $color-white;
+        cursor: auto;
+      }
+      &:hover {
+        border: 1px solid $color-green;
+      }
+    }
+  }
+
+  .Grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: rem(10px);
+
+    @include iflaptop{
+      gap: rem(20px);
+    }
+
+    @include iflaptop{
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .Tile {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      gap: rem(20px);
+      border: 1px solid $color-green;
+      padding: rem(10px);
+      border-radius: rem(20px);
+      cursor: pointer;
+      height: 100%;
+
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(14px);
+      line-height: 100%;
+      color: $color-green;
+      text-align: center;
+
+      @include iftablet{
+        font-size: rem(16px);
+        padding: rem(20px) rem(20px);
+      }
+      @include iflaptop{
+        padding: rem(20px) rem(40px);
+        min-height: rem(220px);
+        font-size: rem(18px);
+      }
+      @include ifdesktop{
+      }
+
+      &:hover {
+        box-shadow: 4px 4px 10px 0px rgba(0,146,131,0.5);
+      }
+    }
+
+    svg {
+      width: rem(48px);
+      height: rem(48px);
+
+      @include iftablet{
+        width: rem(64px);
+        height: rem(64px);
+      }
+    }
+  }
+}

src/views/home/services/ui.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import s from './styles.module.scss';
+import clsx from 'clsx';
+import { useState } from 'react';
+import Link from 'next/link';
+import { servicesData } from './data';
+
+enum SwitcherOption {
+  EXPERTISE = 'expertise',
+  OCENKA = 'ocenka',
+  JURIST = 'jurist',
+}
+
+function Services() {
+  const [switcher, setSwitcher] = useState<SwitcherOption>(
+    SwitcherOption.EXPERTISE,
+  );
+
+  const handleSwitch = (switcher: SwitcherOption) => () => {
+    setSwitcher(switcher);
+  };
+
+  return (
+    <section className={s.Service}>
+      <h2 className={s.Title}>Выберите услугу</h2>
+
+      <div className={s.Switcher}>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.EXPERTISE && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.EXPERTISE)}
+        >
+          Экспертиза
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.OCENKA && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.OCENKA)}
+        >
+          Оценка
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.JURIST && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.JURIST)}
+        >
+          Юрист
+        </div>
+      </div>
+
+      <div className={s.Grid}>
+        {servicesData[switcher].map(({ id, title, icon, url }, i) => (
+          <Link key={id} href={url}>
+            <div className={s.Tile}>
+              {icon}
+              {title}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export { Services };

src/views/home/styles.module.scss

@@ -1,151 +0,0 @@
-.Main {
-  height: 600px;
-  position: relative;
-
-  .BgWrapper {
-    position: absolute;
-    top: -200px;
-    left: 0;
-    width: 100vw;
-    z-index: -1;
-
-    .Background {
-      object-fit: cover;
-    }
-  }
-
-  .Header {
-    position: absolute;
-    top: 180px;
-    left: 300px;
-    font-family: $font-roboto;
-    font-weight: 500;
-    font-size: 48px;
-    line-height: 130%;
-    color: $color-text;
-    max-width: 720px;
-  }
-
-  .Lines {
-    position: absolute;
-    top: 420px;
-    left: 200px;
-  }
-}
-
-.Row {
-  display: grid;
-  grid-template-columns: auto;
-  gap: 0;
-  width: 100%;
-  background-color: transparent;
-  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
-
-  @include iftablet {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .LeftBlock {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 40px;
-
-    .Rounded {
-      border-radius: 60px;
-      border: 1px solid $color-white;
-      padding: 20px;
-      text-align: center;
-      font-family: $font-roboto;
-      font-weight: 400;
-      font-size: 30px;
-      line-height: 150%;
-      color: $color-white;
-      text-transform: uppercase;
-      width: 260px;
-    }
-  }
-
-  .RightBlock {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 20px 40px;
-
-    .SubBlock {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 16px;
-
-      .Text {
-        font-family: $font-roboto;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 130%;
-        color: $color-white;
-      }
-    }
-  }
-}
-
-.BottomRow {
-  display: grid;
-  grid-template-columns: auto;
-  gap: 0;
-  width: 100%;
-  background-color: transparent;
-  background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
-
-  @include iftablet {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .LeftBlock {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    gap: 10px;
-    padding: 20px 40px;
-
-    .LineTitle {
-      font-family: $font-roboto;
-      font-weight: 500;
-      font-size: 24px;
-      line-height: 130%;
-      color: $color-white;
-    }
-
-    .LineText {
-      font-family: $font-roboto;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 100%;
-      color: $color-white;
-    }
-  }
-
-  .RightBlock {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 50px;
-    padding: 20px 40px;
-  }
-}
-
-.Slider {
-  padding: 60px 0;
-
-  .Title {
-    font-family: $font-roboto;
-    font-weight: 500;
-    font-size: 32px;
-    line-height: 100%;
-    color: $color-text;
-    text-align: center;
-  }
-}

src/views/home/ui.tsx

@@ -1,68 +1,19 @@
-import s from './styles.module.scss';
-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 { ServiceGrid } from '@/widgets';
+import { Services } from './services';
+import { Partners } from './partners';
+import { Experience } from './experience';
+import { About } from './about';
+import { CallUs } from './call-us/ui';
+import { Main } from './main';
 
-export default function Main() {
+export default function Home() {
   return (
     <>
-      <section className={s.Main}>
-        <div className={s.BgWrapper}>
-          <Image className={s.Background} src={bg} alt={''} />
-        </div>
-        <h2 className={s.Header}>
-          Независимая оценка и экспертиза в <br /> Краснодарском крае
-        </h2>
-        <Image className={s.Lines} src={lines} alt={''} />
-      </section>
-
-      <section className={s.Row}>
-        <div className={s.LeftBlock}>
-          <div className={s.Rounded}>
-            <p> 3300 </p>
-            <p>оценок</p>
-          </div>
-          <div className={s.Rounded}>
-            <p>2800</p>
-            <p>экспертиз</p>
-          </div>
-        </div>
-        <div className={s.RightBlock}>
-          <div className={s.SubBlock}>
-            <Icons.MapOutline width={64} height={64} color={'#FFFFFF'} />
-            <p className={s.Text}>
-              Мы производим независимую оценку и экспертизу на всей территории
-              Краснодарского края и города Сочи
-            </p>
-          </div>
-          <div className={s.SubBlock}>
-            <Icons.Consultation width={64} height={64} color={'#FFFFFF'} />
-            <p className={s.Text}>
-              Клиентам предоставляется бесплатная юридическая консультация
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <ServiceGrid />
-
-      <section className={s.BottomRow}>
-        <div className={s.LeftBlock}>
-          <p className={s.LineTitle}>Остались вопросы?</p>
-          <p className={s.LineText}>Свяжитесь с нами любым удобным способом</p>
-        </div>
-        <div className={s.RightBlock}>
-          <Button>Написать в чат</Button>
-          <Button>Бесплатный звонок</Button>
-        </div>
-      </section>
-
-      <section className={s.Slider}>
-        <h2 className={s.Title}>Наши клиенты и партнеры</h2>
-        <PartnersSlider />
-      </section>
+      <Main />
+      <Experience />
+      <Services />
+      <About />
+      <CallUs />
+      <Partners />
     </>
   );
 }