Filled schedule page

src/app/page.tsx

@@ -2,7 +2,6 @@ import H2 from '@/components/H2'
 import P from '@/components/P'
 import Section from '@/components/Section'
 import Image from 'next/image'
-import Link from 'next/link'
 import { SVGProps } from 'react'
 
 import MoneyBagIcon from '@/components/svg/icons_big/money_bag.svg'
@@ -12,7 +11,6 @@ import ReviewIcon from '@/components/svg/icons_big/review.svg'
 import DollarIcon from '@/components/svg/icons_big/dollar.svg'
 import ScholarHatIcon from '@/components/svg/icons_big/scholar_hat.svg'
 import PirateMapIcon from '@/components/svg/icons_big/pirate_map.svg'
-import H3 from '@/components/H3'
 
 import {
   Accordion,
@@ -23,14 +21,7 @@ import {
 import Main from '@/components/Main'
 import H1 from '@/components/H1'
 import ClassSignUp from '@/components/ClassSignUp'
-
-type LinkCardType = {
-  id: number
-  title: string
-  description: string
-  href: string
-  icon: React.ReactNode
-}
+import LinkCard, { LinkCardType } from '@/components/LinkCard'
 
 const linkCardProps: SVGProps<SVGElement> = {
   width: 64,
@@ -39,54 +30,54 @@ const linkCardProps: SVGProps<SVGElement> = {
 
 const linkCardsData: LinkCardType[] = [
   {
-    id: 1,
+    id: '1',
     title: 'Стоимость занятий',
     description: 'Абонементы на посещение занятий, способы оплаты, акции',
     href: '/pricing',
     icon: <MoneyBagIcon {...linkCardProps} />,
   },
   {
-    id: 2,
+    id: '2',
     title: 'Расписание занятий',
     description:
       'Здесь вы узнаете, какие у нас есть виды занятий и сможете подобрать те, которые наиболее подойдут вашим навыкам и графику',
     href: '#',
     icon: <CalendarIcon {...linkCardProps} />,
   },
   {
-    id: 3,
+    id: '3',
     title: 'Преподаватели',
     description:
       'Здесь вы узнаете, кто преподает в нашей школе, и сможете найти того, с кем вам будет наиболее комфортно заниматься.',
     href: '/trainers',
     icon: <ScholarIcon {...linkCardProps} />,
   },
   {
-    id: 4,
+    id: '4',
     title: 'Отзывы',
     description:
       'Здесь вы узнаете, что о нас думают люди, которые занимаются или раньше занимались в нашей школе.',
     href: '#',
     icon: <ReviewIcon {...linkCardProps} />,
   },
   {
-    id: 5,
+    id: '5',
     title: 'Аренда залов',
     description:
       'Информация о доступных залах, когда можно арендовать, стоимость аренды, с кем связаться по деталям аренды',
     href: '#',
     icon: <DollarIcon {...linkCardProps} />,
   },
   {
-    id: 6,
+    id: '6',
     title: 'О школе',
     description:
       'Здесь вы узнаете, чем живет школа, сможете посмотреть на кадры с наших занятий, выступления наших учеников, фото и видео с наших мероприятий.',
     href: '#',
     icon: <ScholarHatIcon {...linkCardProps} />,
   },
   {
-    id: 7,
+    id: '7',
     title: 'Как нас найти',
     description:
       'Наш адрес и как добраться до нас от ближайших станций метро. Есть даже видео путь!',
@@ -172,15 +163,13 @@ export default function HomePage() {
           <H2>Полезная информация</H2>
           <div className="mt-6 grid grid-cols-[repeat(auto-fit,minmax(min(300px,100%),1fr))] gap-8">
             {linkCardsData.map((item) => (
-              <Link
+              <LinkCard
                 key={item.id}
                 href={item.href}
-                className="group flex flex-col gap-4 rounded-2xl border border-neutral-300 bg-white p-6 drop-shadow transition hover:drop-shadow-xl"
-              >
-                {item.icon}
-                <H3 className="group-hover:underline">{item.title}</H3>
-                <p className="leading-7 text-neutral-500">{item.description}</p>
-              </Link>
+                icon={item.icon}
+                title={item.title}
+                description={item.description}
+              />
             ))}
           </div>
         </Section>

src/app/pricing/page.tsx

@@ -29,7 +29,6 @@ const PricingPage = () => {
         description="Пока ты думаешь, другие пробуют и у них получается. И у тебя получится!"
         isIncludeContract
       />
-      <div></div>
       {pricingData.map((pricingGroup) => (
         <section key={pricingGroup.id} className="mt-16">
           {pricingGroup.title !== undefined && <H2>{pricingGroup.title}</H2>}

src/app/schedule/page.tsx

@@ -0,0 +1,103 @@
+import Breadcrumbs, { BreadcrumbType } from '@/components/Breadcrumbs'
+import ClassSignUp from '@/components/ClassSignUp'
+import H1 from '@/components/H1'
+import LinkCard, { LinkCardType } from '@/components/LinkCard'
+import Main from '@/components/Main'
+import { SVGProps } from 'react'
+
+import StartIcon from '@/components/svg/icons_big/start.svg'
+import StarIcon from '@/components/svg/icons_big/star_in_circle.svg'
+import CupIcon from '@/components/svg/icons_big/cup_with_star.svg'
+import DumbellsIcon from '@/components/svg/icons_big/dumbells.svg'
+import SoloIcon from '@/components/svg/icons_big/solo.svg'
+import KidIcon from '@/components/svg/icons_big/little_one.svg'
+
+const breadCrumbsData: BreadcrumbType[] = [
+  {
+    id: 1,
+    title: 'Главная',
+    link: '/',
+  },
+  {
+    id: 2,
+    title: 'Расписание занятий',
+  },
+]
+
+const linkCardProps: SVGProps<SVGElement> = {
+  width: 64,
+  height: 64,
+}
+
+const basePath = '/schedule'
+
+const linkCardsData: LinkCardType[] = [
+  {
+    id: '1',
+    title: 'Для начинающих',
+    description:
+      'Для тех, кто никогда не занимался хастлом или у кого мало опыта',
+    href: `${basePath}/start`,
+    icon: <StartIcon {...linkCardProps} />,
+  },
+  {
+    id: '2',
+    title: 'Для продолжающих',
+    description: 'Для тех, кто занимается хастлом уже несколько месяцев',
+    href: `${basePath}/continuing`,
+    icon: <StarIcon {...linkCardProps} />,
+  },
+  {
+    id: '3',
+    title: 'Для соревнующихся',
+    description:
+      'Для тех, кто хочет готовиться к соревнованиям и в дальнейшем участвовать в них',
+    href: `${basePath}/sport`,
+    icon: <CupIcon {...linkCardProps} />,
+  },
+  {
+    id: '4',
+    title: 'Для практикующихся',
+    description:
+      'Для тех, кто хочет оточить до совершенства свои навыки в рамках одиночных и групповых практик',
+    href: `${basePath}/practice`,
+    icon: <DumbellsIcon {...linkCardProps} />,
+  },
+  {
+    id: '5',
+    title: 'Для одиноких',
+    description: 'Если ты одинок, то прими наши соболезнования',
+    href: `${basePath}/solo`,
+    icon: <SoloIcon {...linkCardProps} />,
+  },
+  {
+    id: '6',
+    title: 'Для детей',
+    description: 'Хахахаха, маленький человек',
+    href: `${basePath}/kids`,
+    icon: <KidIcon {...linkCardProps} />,
+  },
+]
+
+const SchedulePage = () => {
+  return (
+    <Main>
+      <H1>Расписаний занятий</H1>
+      <Breadcrumbs breadcrumbsData={breadCrumbsData} />
+      <ClassSignUp description="Если не знаете, что выбрать, вы всегда можете связаться с нами и задать все интересующие вопросы:" />
+      <div className="mt-6 grid grid-cols-[repeat(auto-fit,minmax(min(300px,100%),1fr))] gap-8">
+        {linkCardsData.map((item) => (
+          <LinkCard
+            key={item.id}
+            href={item.href}
+            icon={item.icon}
+            title={item.title}
+            description={item.description}
+          />
+        ))}
+      </div>
+    </Main>
+  )
+}
+
+export default SchedulePage

src/components/LinkCard.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import H3 from './H3'
+
+export type LinkCardType = {
+  id: string
+  href: string
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+const LinkCard = ({
+  href,
+  icon,
+  title,
+  description,
+}: Omit<LinkCardType, 'id'>) => {
+  return (
+    <Link
+      href={href}
+      className="group flex flex-col gap-4 rounded-2xl border border-neutral-300 bg-white p-6 drop-shadow transition hover:drop-shadow-xl"
+    >
+      {icon}
+      <H3 className="group-hover:underline">{title}</H3>
+      <p className="leading-7 text-neutral-500">{description}</p>
+    </Link>
+  )
+}
+
+export default LinkCard

src/components/Menu.tsx

@@ -57,6 +57,7 @@ const linksData: HeaderType[] = [
     id: 3,
     name: 'Расписание',
     icon: <CalendarClockIcon {...menuIconProps} />,
+    link: '/schedule',
   },
   {
     id: 4,