src/app/ekspertiza/avtotehnicheskaja/page.tsx

@@ -1,3 +1,25 @@
+import { AutoTech } from '@/views';
+import { ROUTES } from '@core/constants/route';
+import Breadcrumbs from '@widgets/breadcrumbs/ui';
+
+const breadcrumbData = [
+  {
+    name: 'Экспертиза',
+    path: ROUTES.EXPERTIZA,
+  },
+  {
+    name: 'Автотехническая экспертиза',
+    path: '',
+  },
+];
+
+const PAGE_NAME = 'Автотехническая экспертиза';
+
 export default function Page() {
-  return <div>Page</div>;
+  return (
+    <>
+      <Breadcrumbs breadcrumbs={breadcrumbData} />
+      <AutoTech />
+    </>
+  );
 }

src/core/constants/route.ts

@@ -1,8 +1,8 @@
 export const ROUTES = {
   EMPTY: '#',
-  HOME: '/home',
+  HOME: '/',
   CONTACTS: '/contacts',
-  EXPERTS: '/',
+  EXPERTS: '/experts',
   PRIVACY_POLICY: '/privacy-policy',
   SITEMAP: '/sitemap',
   COOKIES: '/cookies',

src/entities/base-menu/styles.module.scss

@@ -5,11 +5,11 @@
 .Navbar {
   margin: 0 auto;
   width: rem(1540px);
-  height: 100px;
+  height: rem(100px);
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 20px;
+  gap: rem(20px);
 
 
   .Nav {
@@ -26,12 +26,12 @@
       display: block;
       position: relative;
       float: left;
-      line-height: 40px;
+      line-height: rem(40px);
 
       .Row {
         display: flex;
         justify-content: space-between;
-        gap: 16px;
+        gap: rem(16px);
         align-items: center;
         cursor: default;
       }
@@ -40,6 +40,10 @@
         text-decoration: none;
       }
 
+      & li {
+        transition: background-color 0.2s ease-in-out;
+      }
+
       &:hover > ul {
         display: block;
         position: absolute;
@@ -51,12 +55,15 @@
       display: none;
 
       & li {
-        background-color: #FFFFFF;
-        line-height: 40px;
-        padding: 4px 16px;
+        padding: rem(4px) rem(16px);
         width: 100%;
+        font-size: rem(14px);
+        line-height: rem(40px);
         text-wrap: nowrap;
 
+        background-color: #FFFFFF;
+        transition: background-color 0.2s ease-in-out;
+
         & a {
           color: $color-text;
           display: block;

src/views/expertise/autotech/index.ts

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

src/views/expertise/autotech/styles.module.scss

@@ -0,0 +1,48 @@
+.Container {
+  margin: 0 auto;
+  width: rem(1540px);
+  display: grid;
+  grid-template-columns: auto 360px;
+  gap: 160px;
+}
+
+.Article {
+  display: flex;
+  flex-direction: column;
+  padding: rem(40px) 0;
+
+  .Text {
+    font-family: $font-roboto;
+    font-weight: 400;
+    font-size: rem(16px);
+    line-height: 130%;
+    color: $color-text;
+    margin-bottom: 16px;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    list-style-type: disc;
+    margin-left: 16px;
+    margin-bottom: 16px;
+  }
+
+  .ListItem {
+    font-family: $font-roboto;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 130%;
+    color: $color-text;
+    list-style: unset;
+  }
+
+  .Header {
+    font-family: $font-roboto;
+    font-weight: 300;
+    font-size: 32px;
+    line-height: 130%;
+    color: $color-text;
+    margin-bottom: 16px;
+  }
+}

src/views/expertise/autotech/ui.tsx

@@ -0,0 +1,85 @@
+import s from './styles.module.scss';
+
+function AutoTech() {
+  return (
+    <section>
+      <div className={s.Container}>
+        <div className={s.Article}>
+          <p className={s.Text}>
+            При возникновении ситуаций, возникающих в результате ДТП
+            (дорожно-транспортных происшествий), для решения наиболее сложных
+            проблем, требуется проведение специальной автоэкспертизы,
+            позволяющей реализовать право водителя на получение страховки. В
+            судебной практике нередки случаи, когда независимая техническая
+            экспертиза значительно выгоднее и эффективнее, чем автотехническая
+            экспертиза, проводимая по инициативе страховой компании. Это вполне
+            понятно, поскольку страховые компании стремятся сделать выплаты
+            минимальными, в отличие от них независимые эксперты такой цели не
+            имеют.
+          </p>
+          <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>
+            <li className={s.ListItem}>
+              При рассмотрении дела о возмещении материального ущерба, который
+              был нанесен транспортному средству. Сумма ущерба определяется на
+              основании полученных в результате экспертизы данных.
+            </li>
+            <li className={s.ListItem}>
+              При проверке со стороны таможенных органов.
+            </li>
+            <li className={s.ListItem}>
+              Если возникает подозрение на то, что номер кузова авто был
+              изменен.
+            </li>
+          </ul>
+          WIDGET
+          <h3 className={s.Header}>Документы, необходимые для экспертизы:</h3>
+          <p className={s.Text}>
+            Для начала работ по автомобильной экспертизе эксперту понадобятся
+            основные документы:
+          </p>
+          <ul className={s.List}>
+            <li className={s.ListItem}>
+              свидетельство о государственной регистрации транспортного
+              средства;
+            </li>
+            <li className={s.ListItem}>справка с места ДТП</li>
+            <li className={s.ListItem}>паспортные данные заказчика;</li>
+          </ul>
+          <h3 className={s.Header}>Заказать экспертизу очень просто:</h3>
+          WIDGET
+          <p className={s.Text}>
+            Экспертное заключение, полученный от компании «ДИ ТРАСО», будет
+            являться официальным документом, подтверждающим результат работы
+            эксперта. В нем будет содержаться вся полная информация..
+          </p>
+          <h3 className={s.Header}>Как провести автотехническую экспертизу</h3>
+          <p className={s.Text}>
+            Для того, чтобы заказать выполнение автотехнической экспертизы, вы
+            можете воспользоваться любым удобным способом.
+          </p>
+          WIDGET
+        </div>
+        <div className={s.Sidebar}>sidebar</div>
+      </div>
+    </section>
+  );
+}
+
+export { AutoTech };

src/views/index.ts

@@ -1 +1,4 @@
 export * from './home';
+
+//Expertise
+export * from './expertise/autotech';

src/widgets/breadcrumbs/styles.module.scss

@@ -0,0 +1,74 @@
+.Container {
+  background-color: transparent;
+  background-image: linear-gradient(150deg, #23a455 60%, #58c644 80%);
+
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.Breadcrumbs {
+  margin: 0 auto;
+  width: rem(1540px);
+  padding: rem(20px) 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .Block {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .List {
+      display: flex;
+      flex-direction: row;
+      //gap: 12px;
+    }
+
+    .ListItem {
+      font-family: $font-roboto;
+      font-weight: $font-regular;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+
+      &:after {
+        content: '/';
+        padding: 0 4px;
+      }
+
+      &:last-child:after {
+        content: '';
+      }
+    }
+  }
+
+  .Advertise {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border-radius: rem(20px);
+    background: $color-white;
+    padding: rem(20px);
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: $font-light;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-text;
+    }
+  }
+
+}
+
+.Header {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: rem(48px);
+  line-height: 110%;
+  color: $color-white;
+}

src/widgets/breadcrumbs/ui.tsx

@@ -0,0 +1,36 @@
+import s from './styles.module.scss';
+import Link from 'next/link';
+import { ROUTES } from '@core/constants/route';
+import Image from 'next/image';
+import sberImg from '@public/images/sber-domclick.jpg';
+
+type BreadcrumbsProps = {
+  breadcrumbs: {
+    name: string;
+    path: string;
+  }[];
+};
+
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+  return (
+    <section className={s.Container}>
+      <div className={s.Breadcrumbs}>
+        <div className={s.Block}>
+          <ul className={s.List}>
+            <li className={s.ListItem}>
+              <Link href={ROUTES.HOME}>ДИ ТРАСО</Link>
+            </li>
+            <li className={s.ListItem}>
+              <Link href={breadcrumbs[0].path}>{breadcrumbs[0].name}</Link>
+            </li>
+          </ul>
+          <h2 className={s.Header}>{breadcrumbs[1].name}</h2>
+        </div>
+        <div className={s.Advertise}>
+          <Image src={sberImg} alt={'Сбербанк, Дом-клик'} width={400} />
+          <p className={s.Description}>Аккредитованая оценочная компания</p>
+        </div>
+      </div>
+    </section>
+  );
+}