Added /trainers page, filled it with data

src/app/trainers/TrainerCard.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import { Fragment } from 'react'
+import { TrainerType } from './trainersData'
+import Link from 'next/link'
+
+const RankBadge = ({ rank }: { rank: string }) => {
+  return (
+    <div className="rounded-lg border border-neutral-900 px-3 py-[0.375rem]">
+      {rank}
+    </div>
+  )
+}
+
+const TrainerCard = ({
+  name,
+  imgSrc,
+  description,
+  ranks,
+  link,
+}: TrainerType) => {
+  return (
+    <Link
+      href={link}
+      className="group flex flex-col no-underline transition active:scale-[0.98]"
+    >
+      <Image
+        src={imgSrc}
+        width={2000}
+        height={2000}
+        alt={name}
+        className="block aspect-square w-full rounded-2xl border border-neutral-200 object-cover shadow transition-shadow group-hover:shadow-xl"
+        draggable={false}
+      />
+      <h2 className="mt-4 text-xl font-semibold group-hover:underline mobile:underline">
+        {name}
+      </h2>
+      {description !== undefined && description.length !== 0 && (
+        <p className="mt-2 flex-grow leading-[170%] text-slate-500">
+          {description.map((item, index, arr) => (
+            <Fragment key={index}>
+              {item}
+              {index !== arr.length - 1 && <br />}
+            </Fragment>
+          ))}
+        </p>
+      )}
+      {ranks !== undefined && ranks.length !== 0 && (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {ranks.map((item) => (
+            <RankBadge key={item} rank={item} />
+          ))}
+        </div>
+      )}
+    </Link>
+  )
+}
+
+export default TrainerCard

src/app/trainers/page.tsx

@@ -0,0 +1,40 @@
+import Breadcrumbs, { BreadcrumbType } from '@/components/Breadcrumbs'
+import H1 from '@/components/H1'
+import Main from '@/components/Main'
+import { trainersData } from './trainersData'
+import TrainerCard from './TrainerCard'
+
+const breadCrumbsData: BreadcrumbType[] = [
+  {
+    id: 1,
+    title: 'Главная',
+    link: '/',
+  },
+  {
+    id: 2,
+    title: 'Преподаватели',
+  },
+]
+
+const TrainersPage = () => {
+  return (
+    <Main>
+      <H1>Преподаватели</H1>
+      <Breadcrumbs breadcrumbsData={breadCrumbsData} />
+      <div className="mt-16 grid grid-cols-[repeat(auto-fit,minmax(min(320px,100%),1fr))] gap-16">
+        {trainersData.map((trainer) => (
+          <TrainerCard
+            key={trainer.name}
+            name={trainer.name}
+            description={trainer.description}
+            ranks={trainer.ranks}
+            imgSrc={trainer.imgSrc}
+            link={trainer.link}
+          />
+        ))}
+      </div>
+    </Main>
+  )
+}
+
+export default TrainersPage

src/app/trainers/trainersData.ts

@@ -0,0 +1,110 @@
+const defaultPath = '/trainers'
+
+export const trainersData: TrainerType[] = [
+  {
+    name: 'Роман Самохвалов',
+    description: [
+      'Руководитель Школы',
+      'Судья 1-й категории АСХ',
+      'Танцует 19 лет',
+      'Преподает 10 лет',
+    ],
+    ranks: ['Champion', 'A'],
+    imgSrc: '/trainers/roman_samohvalov.jpg',
+    link: `${defaultPath}/roman_samohvalov`,
+  },
+  {
+    name: 'Дарья Кошевая',
+    description: [
+      'Судья 3-й категории АСХ',
+      'Танцует 25 лет',
+      'Преподает 14 лет',
+    ],
+    ranks: ['Champion', 'A'],
+    imgSrc: '/trainers/daria_koshevaya.jpg',
+    link: `${defaultPath}/daria_koshevaya`,
+  },
+  {
+    name: 'Леонид Леонов',
+    description: ['Танцует 10 лет', 'Преподает 6 лет'],
+    ranks: ['Star', 'B'],
+    imgSrc: '/trainers/leonid_leonov.jpg',
+    link: `${defaultPath}/leonid_leonov`,
+  },
+  {
+    name: 'Дария Самохвалова',
+    description: [
+      'Дипломированный хореограф',
+      'Танцует 19 лет',
+      'Преподает 8 лет',
+    ],
+    ranks: ['Main', 'D'],
+    imgSrc: '/trainers/daria_samohvalova.jpg',
+    link: `${defaultPath}/daria_samohvalova`,
+  },
+  {
+    name: 'Александр Носов',
+    description: ['Танцует 4 года', 'Преподает 2 года'],
+    ranks: ['Star', 'C'],
+    imgSrc: '/trainers/alexander_nosov.jpg',
+    link: `${defaultPath}/alexander_nosov`,
+  },
+  {
+    name: 'Анна Страмилова',
+    description: ['Танцует 4 года', 'Преподает 2 года'],
+    ranks: ['Main', 'D'],
+    imgSrc: '/trainers/anna_stramilova.jpg',
+    link: `${defaultPath}/anna_stramilova`,
+  },
+  {
+    name: 'Максим Яремчук',
+    description: ['Танцует 7 лет', 'Преподает 2 года'],
+    ranks: ['Main', 'C'],
+    imgSrc: '/trainers/maxim_yaremchuk.jpg',
+    link: `${defaultPath}/maxim_yaremchuk`,
+  },
+  {
+    name: 'Вячеслав Вязов',
+    description: ['Танцует 11 лет', 'Преподает 9 лет'],
+    ranks: ['Main', 'C'],
+    imgSrc: '/trainers/vyacheslav_vyazov.jpg',
+    link: `${defaultPath}/vyacheslav_vyazov`,
+  },
+  {
+    name: 'Виктория Балганова',
+    description: ['Танцует 16 лет', 'Преподает 2 года'],
+    ranks: ['Star', 'C'],
+    imgSrc: '/trainers/victoria_balganova.jpg',
+    link: `${defaultPath}/victoria_balganova`,
+  },
+  {
+    name: 'Анна Васильева',
+    description: ['Танцует 15 лет', 'Преподает 3 года'],
+    ranks: ['Star', 'D'],
+    imgSrc: '/trainers/anna_vasilieva.jpg',
+    link: `${defaultPath}/anna_vasilieva`,
+  },
+  {
+    name: 'Татьяна Пароль',
+    description: [
+      'Специалист с высшим хореографическим образованием',
+      'Танцует 25 лет',
+      'Преподает 20 лет',
+    ],
+    imgSrc: '/trainers/tatiana_parol.jpg',
+    link: `${defaultPath}/tatiana_parol`,
+  },
+]
+
+export type TrainerType = {
+  /** Trainer name */
+  name: string
+  /** Trainer description */
+  description?: string[]
+  /** Trainer ranks (DnD, classic, etc.) */
+  ranks?: string[]
+  /** Source of the trainer avatar image */
+  imgSrc: string
+  /** Link to trainer's page */
+  link: string
+}

src/components/Menu.tsx

@@ -62,6 +62,7 @@ const linksData: HeaderType[] = [
     id: 4,
     name: 'Преподаватели',
     icon: <UsersIcon {...menuIconProps} />,
+    link: '/trainers',
   },
   {
     id: 5,