Страница всех категорий. Задачи 408 и 409

src/entities/CategoryCard/CategoryCard.module.scss

@@ -1,15 +1,21 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .category-card {
-  width: 255px;
-  height: 183px;
+  width: 100%;
+  min-height: 183px;
+  padding: 5px;
   border-radius: 10px;
   box-sizing: border-box;
   background-color: white;
   display: flex;
-  gap: auto;
   flex-direction: column;
   justify-content: space-between;
+  cursor: pointer;
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 }
 
 .category-card__img {

src/entities/CategoryCard/CategoryCard.tsx

@@ -1,22 +1,33 @@
-import { FC } from 'react'
+import { type FC } from 'react'
+import { useNavigate } from 'react-router'
 
-import { TCategory } from '@/shared/model/types/CategoryModel'
+import defaultCard from '@/assets/images/categoryCards/placeholder-1200x800.png'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import type { TCategory } from '@/shared/model/types/CategoryModel'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
-import card1 from '../../assets/images/categoryCards/placeholder-1200x800.png'
-
 import styles from './CategoryCard.module.scss'
 
 interface CategoryCardProps {
   category: TCategory
 }
 
 export const CategoryCard: FC<CategoryCardProps> = ({ category }) => {
+  const navigate = useNavigate()
+
+  const clickHandle = () => {
+    navigate(`${Routes.CATEGORIES}/${category.slug}?id=${category.id}`)
+  }
+
   return (
-    <div className={styles['category-card']}>
+    <div className={styles['category-card']} onClick={clickHandle}>
       {category && (
         <>
-          <img src={category.image || card1} alt={category.name} className={styles['category-card__img']} />
+          <img
+            src={category.image || defaultCard}
+            alt={category.name}
+            className={styles['category-card__img']}
+          />
           <Paragraph className={styles['category-card__text']}>{category.name}</Paragraph>
         </>
       )}

src/pages/CategoryPage/CategoryPage.module.scss

@@ -2,12 +2,13 @@
 
 .category-page {
   width: 100%;
-  margin-left: 15px;
 }
 
 .category-page__title {
   margin-top: 24px;
   margin-bottom: 10px;
+  font-size: 25px;
+  line-height: 1.15;
 }
 
 .category-page__nav {
@@ -17,5 +18,8 @@
 }
 
 .category-page__subtiitle {
-  margin-bottom: 30px;
+  margin: 30px 0;
+  color: var.$black;
+  font-size: 20px;
+  line-height: 1.15;
 }

src/pages/CategoryPage/CategoryPage.tsx

@@ -1,24 +1,28 @@
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading from '@/shared/ui/Heading/Heading'
-import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 import CategoryCardList from '@/widgets/CategoryCardList/CategoryCardList'
-import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
 
 import styles from './CategoryPage.module.scss'
 
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Все категории', href: '' }
+]
+
 /**
  * Страница всех категорий
  */
-
 export const CategoryPage = () => {
   return (
-    <div className={styles['category-page']}>
-      <Heading className={styles['category-page__title']}>Все категории</Heading>
-      <div className={styles['category-page__nav']}>
-        <NavigationLink label={'Главная'} to={'/'} />
-        <Paragraph> / Все категории</Paragraph>
+    <WrapperForMainContent>
+      <div className={styles['category-page']}>
+        <Heading className={styles['category-page__title']}>Все категории</Heading>
+        <Breadcrumbs links={links} />
+        <Subheading className={styles['category-page__subtiitle']}>Категории</Subheading>
+        <CategoryCardList />
       </div>
-      <Paragraph className={styles['category-page__subtiitle']}>Категории</Paragraph>
-      <CategoryCardList />
-    </div>
+    </WrapperForMainContent>
   )
 }

src/widgets/CategoryCardList/CategoryCardList.module.scss

@@ -1,9 +1,9 @@
-.categoryCardList{
-    margin-right: 24px;
-    display: grid;
-    justify-content: center;
-    row-gap: 19px;
-    column-gap: 19px;
-    grid-template-columns: repeat(auto-fit, 255px);
-    margin-bottom: 115px;
-}
+.categoryCardList {
+  margin-top: 24px;
+  display: grid;
+  justify-content: space-between;
+  row-gap: 19px;
+  column-gap: 19px;
+  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
+  margin-bottom: 115px;
+}