src/app/ekspertiza/page.tsx

@@ -1,3 +1,5 @@
+import { ExpertiseCategory } from '@/views';
+
 export default function ExpertizaPage() {
-  return <div>Expertiza</div>;
+  return <ExpertiseCategory />;
 }

src/views/expertise/category/index.ts

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

src/views/expertise/category/model/breadcrums.ts

@@ -0,0 +1,14 @@
+import { ROUTES } from '@shared/const/route';
+
+export const PAGE_NAME = 'Экспертиза';
+
+export const breadcrumbData = [
+  {
+    name: 'Экспертиза',
+    path: ROUTES.EXPERTIZA,
+  },
+  {
+    name: PAGE_NAME,
+    path: '',
+  },
+];

src/views/expertise/category/model/links.ts

@@ -0,0 +1,30 @@
+import { ROUTES } from '@shared/const/route';
+
+export const linksData = {
+  blockA: [
+    { name: 'Автотехническая', link: ROUTES.EXPERTIZA_AUTOTECH },
+    { name: 'Трасологическая', link: ROUTES.EXPERTIZA_TRASOLOGIA },
+    { name: 'Оценочная', link: ROUTES.EXPERTIZA_OCENKI },
+    { name: 'Пожарно-техническая', link: ROUTES.EXPERTIZA_POZHAR },
+    { name: 'Товароведческая', link: ROUTES.EXPERTIZA_TOVAR },
+    {
+      name: 'Рецензирование и проверка экспертизы',
+      link: ROUTES.EXPERTIZA_RECENZII,
+    },
+  ],
+  blockB: [
+    { name: 'Документарная', link: ROUTES.EXPERTIZA_DOCUMENT },
+    { name: 'Бухгалтерская', link: ROUTES.EXPERTIZA_BUHGALTER },
+    { name: 'Финансово-экономическая', link: ROUTES.EXPERTIZA_FINANS },
+    { name: 'Земле-устроительная', link: ROUTES.EXPERTIZA_ZEM_STROY },
+    { name: 'Кадастровая', link: ROUTES.EXPERTIZA_KADASTR },
+    { name: 'Строительно-техническая', link: ROUTES.EXPERTIZA_STROIT },
+  ],
+  blockC: [
+    { name: 'Компьютерно-техническая', link: ROUTES.EXPERTIZA_COPMPUTER },
+    { name: 'Почерковедческая', link: ROUTES.EXPERTIZA_POCHERK },
+    { name: 'Судебно-биологическая', link: undefined },
+    { name: 'Судебно-психологическая', link: undefined },
+    { name: 'Технико-криминалистическая', link: ROUTES.EXPERTIZA_TECH_CRIM },
+  ],
+};

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

@@ -0,0 +1,68 @@
+.Container {
+  margin: 0 auto;
+  max-width: rem(1540px);
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+  padding: 10px;
+
+  @include iftablet {
+    padding: 20px;
+  }
+
+  @include iflaptop {
+    padding: 28px;
+  }
+
+  @include ifdesktop {
+    padding: 40px;
+  }
+}
+
+.Header {
+  font-family: $font-roboto;
+  font-weight: 500;
+  font-size: 32px;
+  line-height: 130%;
+  color: $color-text;
+  margin-bottom: 40px;
+}
+
+.Grid {
+  display: grid;
+  grid-template-columns: auto;
+
+  @include iftablet {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.Block {
+  display: block;
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    list-style-type: disc;
+    margin-left: 16px;
+  }
+
+  .ListItem {
+    font-family: $font-roboto;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 130%;
+    color: $color-text;
+    list-style: unset;
+
+    a {
+      color: $color-green;
+    }
+
+    a:hover {
+      color: $color-green-hover;
+      text-decoration: underline;
+    }
+  }
+}

src/views/expertise/category/ui.tsx

@@ -0,0 +1,49 @@
+import s from './styles.module.scss';
+import { breadcrumbData } from './model/breadcrums';
+import { Breadcrumbs } from '@/widgets';
+import Link from 'next/link';
+import { Partners } from '@/feature/article';
+import { linksData } from './model/links';
+
+function ExpertiseCategory() {
+  return (
+    <>
+      <Breadcrumbs breadcrumbs={breadcrumbData} />
+      <section className={s.Container}>
+        <h2 className={s.Header}>Судебная экспертиза</h2>
+        <div className={s.Grid}>
+          <div className={s.Block}>
+            <ul className={s.List}>
+              {linksData.blockA.map(({ name, link }, index) => (
+                <li key={index} className={s.ListItem}>
+                  {link ? <Link href={link}>{name}</Link> : name}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className={s.Block}>
+            <ul className={s.List}>
+              {linksData.blockB.map(({ name, link }, index) => (
+                <li key={index} className={s.ListItem}>
+                  {link ? <Link href={link}>{name}</Link> : name}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className={s.Block}>
+            <ul className={s.List}>
+              {linksData.blockC.map(({ name, link }, index) => (
+                <li key={index} className={s.ListItem}>
+                  {link ? <Link href={link}>{name}</Link> : name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+      <Partners />
+    </>
+  );
+}
+
+export { ExpertiseCategory };

src/views/index.ts

@@ -1,6 +1,7 @@
 export * from './home';
 
 //Expertise
+export * from './expertise/category';
 export * from './expertise/autotech';
 export * from './expertise/buhgalter';
 export * from './expertise/computer';