src/app/experts/page.tsx

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

src/views/experts/category/index.ts

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

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

@@ -0,0 +1,14 @@
+import { ROUTES } from '@shared/const/route';
+
+export const PAGE_NAME = 'Оценщики и эксперты';
+
+export const breadcrumbData = [
+  {
+    name: 'Эксперты',
+    path: ROUTES.JURIST,
+  },
+  {
+    name: PAGE_NAME,
+    path: '',
+  },
+];

src/views/experts/category/model/experts.ts

@@ -0,0 +1,72 @@
+import emptyPhoto from '@public/images/photo/empty-photo.jpg';
+import elchishevPhoto from '@public/images/photo/elchishchev.png';
+import yancenPhoto from '@public/images/photo/yancen-yana.png';
+import kaminskiyPhoto from '@public/images/photo/kaminskiy-dmitriy.png';
+import kolodiyPhoto from '@public/images/photo/kolodiy-aleksandr.png';
+import mikovaPhoto from '@public/images/photo/mikova-inna.png';
+import polinovPhoto from '@public/images/photo/polinov-andrey.jpg';
+import mityaevPhoto from '@public/images/photo/mityaev-alexey.jpg';
+import borodinPhoto from '@public/images/photo/borodin-vitaliy.jpg';
+
+export const expertsData = [
+  {
+    name: 'Ельчищев Иван Борисович',
+    position: 'Директор',
+    photo: elchishevPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Янцен Яна Николаевна',
+    position: 'Автоэксперт',
+    photo: yancenPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Каминский Дмитрий Олегович',
+    position: 'Строительный эксперт',
+    photo: kaminskiyPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Колодий Александр Сергеевич',
+    position: 'Товароведческий эксперт, Компьютерно-технический эксперт',
+    photo: kolodiyPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Микова Инна Георгиевна',
+    position: 'Технический эксперт, Судебный эксперт',
+    photo: mikovaPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Полинов Андрей Владимирович',
+    position: 'Автоэксперт',
+    photo: polinovPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Митяев Алексей Александрович',
+    position: 'Эксперт',
+    photo: mityaevPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Бородин Виталий Петрович',
+    position: 'Эксперт',
+    photo: borodinPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Волкова-Гончарова Татьяна Анатольевна',
+    position: 'Эксперт',
+    photo: emptyPhoto,
+    certificate: undefined,
+  },
+  {
+    name: 'Гюльмамедов Явар Фирмамед оглы',
+    position: 'Эксперт',
+    photo: emptyPhoto,
+    certificate: undefined,
+  },
+];

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

@@ -0,0 +1,86 @@
+.Container {
+  margin: 0 auto;
+  max-width: rem(1540px);
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    padding: 20px;
+  }
+
+  @include iflaptop {
+    padding: 28px;
+  }
+
+  @include ifdesktop {
+    padding: 40px;
+  }
+}
+
+
+.Block {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 28px;
+  box-shadow: 0 0 10px 0 rgba(97, 206, 112, 0.5);
+  padding: 20px;
+
+  .Expert {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    .Image {
+      width: auto;
+      height: 200px;
+      @include iftablet{
+        width: auto;
+        height: 150px;
+      }
+      @include iflaptop{
+        width: auto;
+        height: 200px;
+      }
+      @include ifdesktop{
+      }
+    }
+
+    .Name {
+      font-family: $font-roboto;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 110%;
+      color: $color-text;
+      text-align: center;
+
+      @include iflaptop {
+        font-size: 18px;
+        line-height: 130%;
+      }
+    }
+
+    .Position {
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 100%;
+      color: $color-text-light;
+      text-align: center;
+
+      @include iflaptop {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .Certificate {
+    .Image {
+      width: auto;
+      height: 200px;
+    }
+  }
+}

src/views/experts/category/ui.tsx

@@ -0,0 +1,39 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+import { Breadcrumbs } from '@/widgets';
+import { breadcrumbData } from './model/breadcrums';
+import { expertsData } from './model/experts';
+
+function Experts() {
+  return (
+    <>
+      <Breadcrumbs breadcrumbs={breadcrumbData} />
+      <section className={s.Container}>
+        {expertsData.map(({ name, photo, position, certificate }, index) => (
+          <div key={index} className={s.Block}>
+            <div className={s.Expert}>
+              <Image
+                className={s.Image}
+                src={photo}
+                alt={`${position}-${name}`}
+              />
+              <p className={s.Name}>{name}</p>
+              <p className={s.Position}>{position}</p>
+            </div>
+            <div className={s.Certificate}>
+              {certificate && (
+                <Image
+                  className={s.Image}
+                  src={certificate}
+                  alt={`${position}-${name}`}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+      </section>
+    </>
+  );
+}
+
+export { Experts };

src/views/index.ts

@@ -75,3 +75,6 @@ export * from './jurist/spor-semejnye';
 export * from './jurist/spor-strahovye';
 export * from './jurist/spor-trudovye';
 export * from './jurist/spor-zemel-imush';
+
+//Experts
+export * from './experts/category';