diff --git a/front/src/App.css b/front/src/App.css
new file mode 100644
index 0000000..b9d355d
--- /dev/null
+++ b/front/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/front/src/api/catalogApi.ts b/front/src/api/catalogApi.ts
new file mode 100644
index 0000000..e145965
--- /dev/null
+++ b/front/src/api/catalogApi.ts
@@ -0,0 +1,14 @@
+import axios from "axios";
+import type { Product } from "../types/product";
+import type { Category } from "../types/categories";
+
+export const fetchCategoryProducts = async (category: string): Promise<Product[]> => {
+  const response = await axios.get(`https://your-api.com/api/products?category=${category}`);
+  return response.data;
+};
+
+export const fetchCategories = async (categoryid: string): Promise<Category[]> => {
+  const response = await axios.get(`https://your-api.com/api/category=${categoryid}`);
+  return response.data;
+};
+
diff --git a/front/src/app/hooks.ts b/front/src/app/hooks.ts
new file mode 100644
index 0000000..b218738
--- /dev/null
+++ b/front/src/app/hooks.ts
@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from "react-redux";
+import type {TypedUseSelectorHook} from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// Используем вместо обычных useDispatch и useSelector
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
\ No newline at end of file
diff --git a/front/src/app/routes.tsx b/front/src/app/routes.tsx
new file mode 100644
index 0000000..dc58d6f
--- /dev/null
+++ b/front/src/app/routes.tsx
@@ -0,0 +1,20 @@
+import Layout from "../pages/Layout/Layout";
+import { Routes } from "react-router";
+import { Route } from "react-router";
+import Main from "../pages/Main/Main";
+import About from "../pages/About/About";
+import Products from "../pages/Products/Products";
+
+function AppRoutes() {
+  return (  
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Main />} />
+        <Route path="about" element={<About />} />
+        <Route path="products" element={<Products />} />
+      </Route>
+    </Routes>
+  )
+}
+
+export default AppRoutes;
\ No newline at end of file
diff --git a/front/src/app/store.ts b/front/src/app/store.ts
new file mode 100644
index 0000000..11ebdd1
--- /dev/null
+++ b/front/src/app/store.ts
@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit";
+import catalogReducer from "../features/catalog/catalogSlice";
+
+export const store = configureStore({
+  reducer: {
+    catalog: catalogReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false, // отключаем для async thunk
+    }),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/front/src/assets/images/Logo.jpg b/front/src/assets/images/Logo.jpg
new file mode 100644
index 0000000..9c79212
Binary files /dev/null and b/front/src/assets/images/Logo.jpg differ
diff --git a/front/src/components/Banner/Banner.module.css b/front/src/components/Banner/Banner.module.css
new file mode 100644
index 0000000..3bfecbb
--- /dev/null
+++ b/front/src/components/Banner/Banner.module.css
@@ -0,0 +1,95 @@
+.wrapper {
+width: 100%;
+position: relative;
+}
+
+
+.carousel {
+width: 100%;
+height: 100%;
+}
+
+
+.slide {
+position: relative;
+width: 100%;
+height: 700px;
+overflow: hidden;
+display: flex;
+justify-content: space-between;
+align-items: center;
+background: var(--darkblue);
+}
+
+
+.textBlock {
+position: absolute;
+left: 80px;
+top: 180px;
+color: white;
+max-width: 500px;
+z-index: 2;
+}
+
+
+.textBlock h1 {
+font-size: 36px;
+font-weight: 700;
+line-height: 1.3;
+}
+
+
+.textBlock h2 {
+font-size: 20px;
+font-weight: 400;
+opacity: 0.8;
+}
+
+
+.button {
+margin-top: 30px;
+background: #ffd400 !important;
+border: none !important;
+color: black !important;
+font-weight: 600;
+padding: 0 26px;
+height: 48px;
+}
+
+
+.image {
+width: 100%;
+height: 100%;
+object-fit: cover;
+object-position: center;
+}
+
+/* --- Mobile Adaptive --- */
+@media (max-width: 768px) {
+.slide {
+height: 500px;
+}
+
+
+.textBlock {
+left: 20px;
+top: 120px;
+max-width: 300px;
+}
+
+
+.textBlock h1 {
+font-size: 22px;
+}
+
+
+.textBlock h2 {
+font-size: 16px;
+}
+
+
+.button {
+height: 42px;
+padding: 0 20px;
+}
+}
\ No newline at end of file
diff --git a/front/src/components/Banner/Banner.tsx b/front/src/components/Banner/Banner.tsx
new file mode 100644
index 0000000..712f97b
--- /dev/null
+++ b/front/src/components/Banner/Banner.tsx
@@ -0,0 +1,73 @@
+import styles from './Banner.module.css'
+import React from "react";
+import { Carousel } from "antd";
+import Button from '../Button/Button.tsx';
+
+export interface SlideItem {
+id: number;
+image: string;
+title: string;
+subtitle: string;
+description: string;
+}
+
+
+const slides: SlideItem[] = [
+    {
+        id: 1,
+        image: "/images/banner1.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+    {
+        id: 2,
+        image: "/images/banner2.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+    {
+        id: 3,
+        image: "/images/banner3.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+];
+
+
+const BannerSlider: React.FC = () => {
+
+const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+return (
+    <div className={styles.wrapper}>
+        <Carousel autoplay dots className={styles.carousel}>
+            {slides.map((slide) => (
+                <div key={slide.id}>
+                    <div className={styles.slide}>
+                        <div className={styles.textBlock}>
+                            <h2>{slide.title}</h2>
+                            <h1>
+                            {slide.subtitle}
+                            <br /> {slide.description}
+                            </h1>
+                            <Button 
+                                label="СМОТРЕТЬ КАТАЛОГ" 
+                                onClick={handleClick}
+                            />
+                        </div>
+                        <img src={slide.image} alt="banner" className={styles.image} />
+                    </div>
+                </div>
+            ))}
+        </Carousel>
+    </div>
+    );
+};
+
+
+export default BannerSlider;
\ No newline at end of file
diff --git a/front/src/components/Button/Button.module.css b/front/src/components/Button/Button.module.css
new file mode 100644
index 0000000..36e82e0
--- /dev/null
+++ b/front/src/components/Button/Button.module.css
@@ -0,0 +1,22 @@
+.button {
+background: #ffd400;
+border: none;
+color: #000;
+font-weight: 600;
+padding: 0 50px;
+height: 50px;
+border-radius: 50px;
+cursor: pointer;
+transition: 0.25s ease;
+font-size: 15px;
+}
+
+
+.button:hover {
+background: #ffdf3e;
+}
+
+
+.button:active {
+transform: scale(0.97);
+}
\ No newline at end of file
diff --git a/front/src/components/Button/Button.tsx b/front/src/components/Button/Button.tsx
new file mode 100644
index 0000000..4080234
--- /dev/null
+++ b/front/src/components/Button/Button.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./Button.module.css";
+
+
+interface ButtonProps {
+    label: string;
+    onClick?: () => void;
+    className?: string;
+}
+
+
+const Button: React.FC<ButtonProps> = ({ label, onClick, className }) => {
+    return (
+        <button className={`${styles.button} ${className || ""}`} onClick={onClick}>
+            {label}
+        </button>
+    );
+};
+
+
+export default Button;
\ No newline at end of file
diff --git a/front/src/components/Categories/Categories.module.css b/front/src/components/Categories/Categories.module.css
new file mode 100644
index 0000000..753bbab
--- /dev/null
+++ b/front/src/components/Categories/Categories.module.css
@@ -0,0 +1,127 @@
+.wrapper {
+width: 100%;
+margin-top: 40px;
+}
+
+.header {
+font-size: 24px;
+font-weight: 700;
+margin-bottom: 20px;
+}
+
+
+.grid {
+display: grid;
+grid-template-columns: repeat(4, 1fr);
+grid-auto-rows: 230px;
+gap: 0;
+}
+
+.card {
+position: relative;
+overflow: hidden;
+border: 1px solid #ececec;
+}
+
+
+.image {
+width: 100%;
+height: 100%;
+object-fit: cover;
+}
+
+
+.highlight {
+grid-column: span 2;
+grid-row: span 2;
+}
+
+
+.overlay {
+position: absolute;
+left: 40px;
+bottom: 40px;
+color: white;
+max-width: 320px;
+}
+
+
+.overlay h3 {
+font-size: 22px;
+font-weight: 700;
+}
+
+
+.overlay h4 {
+margin-top: 4px;
+font-size: 16px;
+opacity: 0.9;
+}
+
+
+.button {
+margin-top: 20px;
+background: #ffd400 !important;
+color: black !important;
+border: none !important;
+font-weight: 600;
+}
+
+
+.titleSmall {
+position: absolute;
+bottom: 15px;
+left: 15px;
+font-size: 15px;
+font-weight: 600;
+}
+
+.card:hover .image {
+transform: scale(1.05);
+transition: transform 0.4s ease;
+}
+
+
+.card:hover {
+cursor: pointer;
+background-color: #ffd400;
+}
+
+
+.highlight:hover .overlay h3,
+.highlight:hover .overlay h4 {
+transform: translateX(4px);
+transition: all 0.3s ease;
+}
+
+
+.titleSmall {
+transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+
+.card:hover .titleSmall {
+transform: translateY(-4px);
+opacity: 0.9;
+}
+
+/* Mobile */
+@media (max-width: 900px) {
+.grid {
+grid-template-columns: repeat(2, 1fr);
+}
+.highlight {
+grid-column: span 2;
+}
+}
+
+
+@media (max-width: 600px) {
+.grid {
+grid-template-columns: 1fr;
+}
+.highlight {
+grid-column: span 1;
+grid-row: span 1;
+}
+}
\ No newline at end of file
diff --git a/front/src/components/Categories/Categories.tsx b/front/src/components/Categories/Categories.tsx
new file mode 100644
index 0000000..c270aca
--- /dev/null
+++ b/front/src/components/Categories/Categories.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import styles from "./Categories.module.css";
+import Button from "../Button/Button";
+
+interface CategoryItem {
+id: number;
+title: string;
+subtitle?: string;
+image: string;
+highlight?: boolean;
+}
+
+const categories: CategoryItem[] = [
+{
+id: 1,
+title: "СРЕДСТВА",
+subtitle: "ДЛЯ УХОДА",
+image: "/images/cat-care.jpg",
+highlight: true,
+},
+{ id: 2, title: "СМАЗКИ СКОЛЬЖЕНИЯ", subtitle: "(ПАРАФИНЫ)", image: "/images/cat-paraffin.jpg" },
+{ id: 3, title: "МАЗИ ДЕРЖАНИЯ", image: "/images/cat-hold.jpg" },
+{ id: 4, title: "СМЫВКА", image: "/images/cat-wash.jpg" },
+{ id: 5, title: "СМОЛА", image: "/images/cat-resin.jpg" },
+{ id: 6, title: "СКРЕБКИ", image: "/images/cat-scraper.jpg" },
+{ id: 7, title: "ПРОБКИ / РАСТИРКИ", image: "/images/cat-cork.jpg" },
+{
+id: 8,
+title: "ПОЛЕЗНЫЕ",
+subtitle: "АКССЕСУАРЫ",
+highlight: true,
+image: "/images/cat-accessories.jpg",
+},
+{ id: 9, title: "СВЯЗКИ И СКРЕПКИ ДЛЯ ЛЫЖ", image: "/images/cat-straps.jpg" },
+{ id: 10, title: "ЧЕХЛЫ, СУМКИ", image: "/images/cat-bags.jpg" },
+];
+
+
+const CategoriesGrid: React.FC = () => {
+
+const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+return (
+<div className={styles.wrapper}>
+<h2 className={styles.header}>КАТЕГОРИИ ТОВАРОВ</h2>
+
+
+<div className={styles.grid}>
+{categories.map((cat) => (
+<div
+key={cat.id}
+className={`${styles.card} ${cat.highlight ? styles.highlight : ""}`}
+>
+<img src={cat.image} className={styles.image} alt={cat.title} />
+
+
+{cat.highlight && (
+<div className={styles.overlay}>
+<h3>{cat.title}</h3>
+{cat.subtitle && <h4>{cat.subtitle}</h4>}
+<Button 
+                                label="СМОТРЕТЬ КАТАЛОГ" 
+                                onClick={handleClick}
+                            />
+</div>
+)}
+
+
+{!cat.highlight && (
+<div className={styles.titleSmall}>
+<span>{cat.title}</span>
+{cat.subtitle && <span>{cat.subtitle}</span>}
+</div>
+)}
+</div>
+))}
+</div>
+</div>
+);
+};
+
+
+export default CategoriesGrid;
\ No newline at end of file
diff --git a/front/src/components/ContactProduct/ContactProduct.module.css b/front/src/components/ContactProduct/ContactProduct.module.css
new file mode 100644
index 0000000..c25e673
--- /dev/null
+++ b/front/src/components/ContactProduct/ContactProduct.module.css
@@ -0,0 +1,81 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 0;
+}
+
+.left {
+  flex: 1;
+  padding-left: 0px;
+}
+
+.right {
+  flex: 1;
+  position: relative;
+
+  width: 60%;
+  height: 100%;
+  max-height: 600px;
+}
+
+.carousel {
+  width: 100%;
+  height: 100%; /* Добавьте высоту 100% */
+}
+
+.slide {
+position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+    width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center bottom;
+  display: block;
+}
+
+.label {
+  position: absolute;
+  bottom: 20px;
+  left: 40px;
+  color: white;
+  font-size: 22px;
+}
+
+.arrows {
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+  display: flex;
+  gap: 16px;
+}
+
+.arrow {
+  width: 48px;
+  height: 48px;
+  background: white;
+  border: 1px solid #ccc;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .left {
+    padding-left: 0;
+  }
+
+  .right {
+    margin-top: 30px;
+    height: 300px; /* Меньшая высота для мобильных */
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/front/src/components/ContactProduct/ContactProduct.tsx b/front/src/components/ContactProduct/ContactProduct.tsx
new file mode 100644
index 0000000..b1e9cde
--- /dev/null
+++ b/front/src/components/ContactProduct/ContactProduct.tsx
@@ -0,0 +1,88 @@
+import React, { useRef, useState } from "react";
+import styles from "./ContactProduct.module.css";
+import Button from "../Button/Button";
+import { Carousel } from "antd";
+import ModalRequestForm from "../ModalRequestForm/ModalRequestForm";
+const imageUrl = "http://sprint-pro.com/images/banners/slide1/t1.png";
+
+interface ProductionSlide {
+  id: number;
+  image: string;
+  label: string;
+}
+
+const slides: ProductionSlide[] = [
+  {
+    id: 1,
+    image: "/images/prod1.jpg",
+    label: "Аэрозольная упаковка",
+  },
+  {
+    id: 2,
+    image: "/images/prod2.jpg",
+    label: "Металлические баллоны",
+  },
+];
+
+
+const ProductionBanner: React.FC = () => {
+
+    const [open, setOpen] = useState(false);
+
+    const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+    const carouselRef = useRef<any>(null);
+
+    console.log('ProductionBanner render, open:', open);
+
+    return (
+        <div className={styles.wrapper}>
+            <ModalRequestForm open={open} onClose={() => setOpen(false)} />
+      <div className={styles.left}>
+        <h2 className={styles.title}>КОНТРАКТНОЕ</h2>
+        <h1 className={styles.subtitle}>ПРОИЗВОДСТВО</h1>
+
+        <Button 
+            label="СДЕЛАТЬ ЗАПРОС" 
+            onClick={() => setOpen(true)}
+        />
+      </div>
+
+      <div className={styles.right}>
+        <Carousel
+          ref={carouselRef}
+          dots={false}
+          effect="scrollx"
+          className={styles.carousel}
+        >
+          {slides.map((s) => (
+            <div key={s.id} className={styles.slide}>
+              <img src={imageUrl} className={styles.image} alt="prod" />
+              <div className={styles.label}>{s.label}</div>
+            </div>
+          ))}
+        </Carousel>
+
+        <div className={styles.arrows}>
+          <button
+            className={styles.arrow}
+            onClick={() => carouselRef.current?.prev()}
+          >
+            ←
+          </button>
+          <button
+            className={styles.arrow}
+            onClick={() => carouselRef.current?.next()}
+          >
+            →
+          </button>
+        </div>
+      </div>
+    </div>
+    );
+};
+
+
+export default ProductionBanner;
\ No newline at end of file
diff --git a/front/src/components/Footer/Footer.module.css b/front/src/components/Footer/Footer.module.css
new file mode 100644
index 0000000..378c530
--- /dev/null
+++ b/front/src/components/Footer/Footer.module.css
@@ -0,0 +1,92 @@
+.footer {
+color: #bfbfbf;
+background: #000;
+padding: 60px 0;
+}
+
+
+.container {
+width: 90%;
+margin: 0 auto;
+display: flex;
+align-items: flex-start;
+justify-content: space-between;
+}
+
+
+.left {
+display: flex;
+flex-direction: column;
+gap: 25px;
+}
+
+
+.logo {
+width: 160px;
+opacity: 0.9;
+}
+
+
+.copy {
+font-size: 14px;
+opacity: 0.7;
+}
+
+
+.center {
+display: flex;
+flex-direction: column;
+gap: 14px;
+font-size: 16px;
+}
+
+
+.center a {
+cursor: pointer;
+transition: 0.3s ease;
+}
+
+
+.center a:hover {
+color: #fff;
+}
+
+
+.right {
+text-align: right;
+}
+
+
+.phone {
+color: #fff;
+font-size: 20px;
+font-weight: 600;
+}
+
+
+.mail {
+margin-top: 6px;
+display: inline-block;
+font-size: 16px;
+color: #bfbfbf;
+}
+
+
+.mail:hover {
+color: #fff;
+}
+
+
+/* Mobile */
+@media (max-width: 900px) {
+.container {
+flex-direction: column;
+gap: 40px;
+text-align: center;
+}
+
+
+.right {
+text-align: center;
+}
+}
\ No newline at end of file
diff --git a/front/src/components/Footer/Footer.tsx b/front/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..ba75749
--- /dev/null
+++ b/front/src/components/Footer/Footer.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "./Footer.module.css";
+import { NavLink } from "react-router-dom";
+
+const Footer: React.FC = () => {
+return (
+<footer className={styles.footer}>
+<div className={styles.container}>
+<div className={styles.left}>
+<img src="/images/logo-footer.png" alt="logo" className={styles.logo} />
+<span className={styles.copy}>ТРК Спринт. 2017-2025 ©</span>
+</div>
+
+
+<div className={styles.center}>
+<NavLink to="about" >O КОМПАНИИ</NavLink>
+<NavLink to="products" >ПРОДУКЦИЯ</NavLink>
+<a>ПРАЙС-ЛИСТ</a>
+</div>
+
+
+<div className={styles.right}>
+<div className={styles.phone}>+7 910 121 09 62</div>
+<a className={styles.mail}>rkplastic@mail.ru</a>
+</div>
+</div>
+</footer>
+);
+};
+
+
+export default Footer;
\ No newline at end of file
diff --git a/front/src/components/Header/Header.module.css b/front/src/components/Header/Header.module.css
new file mode 100644
index 0000000..556adcd
--- /dev/null
+++ b/front/src/components/Header/Header.module.css
@@ -0,0 +1,146 @@
+.header {
+  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
+  background-color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  width: 100%;
+}
+
+.phoneBlock a{
+    font-size: 10px;
+}
+
+.headerMenu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.headerMenu a {
+  position: relative;
+  color: black;
+  text-decoration: none;
+  padding: 1.8rem 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 500;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.headerMenu a::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.headerMenu a::after {
+  content: '';
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.headeLogo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  text-decoration: none;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  transition: all 0.3s ease;
+}
+
+.logoImage {
+  height: 80px;
+  border-radius: 8px;
+  object-fit: contain;
+  transition: all 0.3s ease;
+  /*filter: brightness(0) invert(1);*/
+}
+
+.headerMenu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.headerMenu a:hover::before {
+  width: 80%;
+}
+
+.headerMenu a:hover::after {
+  left: 100%;
+}
+
+.headerMenu a.active {
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
+}
+
+.headerMenu a.active::before {
+  width: 100%;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+}
+
+/* Анимация при загрузке */
+.headerMenu a {
+  animation: slideIn 0.6s ease forwards;
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.headerMenu a:nth-child(1) { animation-delay: 0.1s; }
+.headerMenu a:nth-child(2) { animation-delay: 0.2s; }
+.headerMenu a:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes slideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .headerMenu {
+    flex-direction: column;
+    padding: 0;
+  }
+  
+  .headerMenu a {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .headerMenu a:last-child {
+    border-bottom: none;
+  }
+}
+
+/* Эффект пульсации при наведении на кнопку выхода */
+.headerMenu a[onclick]:hover {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+}
+
+.headerMenu a[onclick]:hover::before {
+  background: linear-gradient(90deg, #ffd89b, #ff6b6b);
+}
\ No newline at end of file
diff --git a/front/src/components/Header/Header.tsx b/front/src/components/Header/Header.tsx
new file mode 100644
index 0000000..5974e1e
--- /dev/null
+++ b/front/src/components/Header/Header.tsx
@@ -0,0 +1,26 @@
+import { NavLink } from "react-router-dom";
+import styles from './Header.module.css'
+import logo from '../../assets/images/Logo.jpg'
+
+const Header = () =>{
+
+    return(
+        <nav className={styles.header}>
+            <div className={styles.headerMenu}>
+                <div className={styles.headeLogo}>
+                    <img src={logo} alt="logo" className={styles.logoImage}/>
+                    <div className={styles.phoneBlock}>
+                        <a href="" className={styles.phoneBlock}>+7 905 010 58 40</a>
+                    </div>
+                </div>
+                <div className={styles.headerNav}>
+                <NavLink to="/" end >ГЛАВНАЯ</NavLink>
+                <NavLink to="about" >O КОМПАНИИ</NavLink>
+                <NavLink to="products" >ПРОДУКЦИЯ</NavLink>
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/front/src/components/ModalRequestForm/ModalRequestForm.module.css b/front/src/components/ModalRequestForm/ModalRequestForm.module.css
new file mode 100644
index 0000000..223bef9
--- /dev/null
+++ b/front/src/components/ModalRequestForm/ModalRequestForm.module.css
@@ -0,0 +1,68 @@
+.modalBox {
+  padding: 10px 20px 30px;
+}
+
+.title {
+  text-align: center;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.subtitle {
+  text-align: center;
+  margin-top: 6px;
+  margin-bottom: 26px;
+  color: #666;
+  font-size: 16px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  position: relative;
+}
+
+.input {
+  width: 93%;
+  padding: 18px;
+  font-size: 18px;
+  border-radius: 12px;
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  outline: none;
+  transition: 0.2s;
+}
+
+.input:focus {
+  border-color: #ffd400;
+  background: white;
+}
+
+.textarea {
+  height: 120px;
+  resize: none;
+  padding: 18px;
+  border-radius: 12px;
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  font-size: 18px;
+}
+
+.error {
+  font-size: 13px;
+  color: #d33;
+  position: absolute;
+  bottom: -18px;
+  left: 5px;
+}
+
+.button {
+  margin-top: 10px;
+  width: 100%;
+  height: 58px;
+  font-size: 18px;
+}
\ No newline at end of file
diff --git a/front/src/components/ModalRequestForm/ModalRequestForm.tsx b/front/src/components/ModalRequestForm/ModalRequestForm.tsx
new file mode 100644
index 0000000..f197dd7
--- /dev/null
+++ b/front/src/components/ModalRequestForm/ModalRequestForm.tsx
@@ -0,0 +1,202 @@
+import React from "react";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import InputMask from "react-input-mask";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import styles from "./ModalRequestForm.module.css";
+import Button from "../Button/Button";
+
+// ✅ Схема валидации
+const schema = yup.object().shape({
+  name: yup.string().required("Введите имя"),
+  email: yup.string().email("Некорректный Email").required("Введите Email"),
+  phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
+  message: yup.string().nullable(),
+});
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface FormData {
+  name: string;
+  email: string;
+  phone: string;
+  message?: string | null;
+}
+
+const ModalRequestForm: React.FC<Props> = ({ open, onClose }) => {
+    console.log('ModalRequestForm render, open:', open); 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm({ resolver: yupResolver(schema) });
+
+  const handlePhoneInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.replace(/\D/g, '');
+    
+    if (value.startsWith('7') || value.startsWith('8')) {
+      value = value.substring(1);
+    }
+    
+    let formattedValue = '+7 ';
+    
+    if (value.length > 0) {
+      formattedValue += '(' + value.substring(0, 3);
+    }
+    if (value.length > 3) {
+      formattedValue += ') ' + value.substring(3, 6);
+    }
+    if (value.length > 6) {
+      formattedValue += '-' + value.substring(6, 8);
+    }
+    if (value.length > 8) {
+      formattedValue += '-' + value.substring(8, 10);
+    }
+    
+    e.target.value = formattedValue;
+  };
+
+  // ✅ Отправка данных на бэкенд
+  const sendToBackend = async (data: FormData): Promise<boolean> => {
+    try {
+      const response = await fetch(`/api/requests`, {
+        method: "POST",
+        headers: { 
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          ...data,
+          source: "website-form",
+          timestamp: new Date().toISOString(),
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      return result.success;
+    } catch (error) {
+      console.error("Error sending request:", error);
+      throw new Error("Не удалось отправить заявку. Попробуйте позже.");
+    }
+  };
+
+  // ✅ Submit
+  const onSubmit = async (data: FormData) => {
+    try {
+      await sendToBackend(data);
+      
+      // Показываем уведомление об успехе
+      Modal.success({
+        title: "Заявка отправлена!",
+        content: "Наш менеджер свяжется с вами в ближайшее время.",
+        okText: "Хорошо",
+      });
+      
+      reset();
+      onClose();
+    } catch (error) {
+      // Показываем ошибку
+      Modal.error({
+        title: "Ошибка",
+        content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
+        okText: "Понятно",
+      });
+    }
+  };
+
+  return (
+    <Modal 
+      open={open} 
+      footer={null} 
+      onCancel={onClose} 
+      centered 
+      width={620}
+      closable={!isSubmitting}
+      maskClosable={!isSubmitting}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className={styles.modalBox}
+      >
+        <h2 className={styles.title}>Контрактное производство</h2>
+        <p className={styles.subtitle}>
+          Заполните форму ниже, и наш менеджер свяжется с Вами
+        </p>
+
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите имя *" 
+              {...register("name")}
+              disabled={isSubmitting}
+            />
+            {errors.name && <span className={styles.error}>{errors.name.message}</span>}
+          </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите email *" 
+              {...register("email")}
+              disabled={isSubmitting}
+            />
+            {errors.email && <span className={styles.error}>{errors.email.message}</span>}
+          </div>
+
+          {/*<div className={styles.field}>
+            <InputMask 
+              mask="+7 (999) 999-99-99" 
+              {...register("phone")}
+              disabled={isSubmitting}
+            >
+              {(inputProps: any) => (
+                <input 
+                  className={styles.input} 
+                  placeholder="Введите № телефона *" 
+                  {...inputProps} 
+                />
+              )}
+            </InputMask>
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>*/}
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="+7 (___) ___-__-__ *" 
+              {...register("phone")}
+              onInput={handlePhoneInput}
+              disabled={isSubmitting}
+            />
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>
+
+          <textarea 
+            className={styles.textarea} 
+            placeholder="Задайте свой вопрос" 
+            {...register("message")}
+            disabled={isSubmitting}
+          />
+
+          <Button 
+            label={isSubmitting ? "ОТПРАВКА..." : "СДЕЛАТЬ ЗАПРОС"} 
+            className={styles.button}
+          />
+        </form>
+      </motion.div>
+    </Modal>
+  );
+};
+
+export default ModalRequestForm;
\ No newline at end of file
diff --git a/front/src/components/QuestionsBlock/QuestionsBlock.module.css b/front/src/components/QuestionsBlock/QuestionsBlock.module.css
new file mode 100644
index 0000000..9372ded
--- /dev/null
+++ b/front/src/components/QuestionsBlock/QuestionsBlock.module.css
@@ -0,0 +1,125 @@
+.phoneIcon {
+  font-size: 28px;
+  color: #ffd400;
+}
+
+.wrapper {
+  width: 100%;
+  background-image: url("");
+  background-size: cover;
+  background-position: center;
+  padding: 120px 0;
+}
+
+.inner {
+  width: 90%;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left {
+  max-width: 45%;
+}
+
+.title {
+  font-size: 42px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 25px;
+}
+
+.text {
+  font-size: 18px;
+  line-height: 1.6;
+  color: #2a2a2a;
+}
+
+.right {
+  max-width: 50%;
+  text-align: left;
+}
+
+.phoneBlock {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.phoneNumber {
+  font-size: 25px;
+  font-weight: 600;
+}
+
+.phoneInfo {
+  margin-left: 44px;
+  margin-top: -5px;
+  font-size: 14px;
+  color: #555;
+}
+
+.formLabel {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #333;
+}
+
+.form {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.input {
+  flex: 1;
+  padding: 18px 24px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  outline: none;
+}
+
+.button {
+  height: 56px !important;
+  padding: 0 36px !important;
+  border-radius: 50px !important;
+}
+
+/* --- MOBILE --- */
+
+@media (max-width: 992px) {
+  .inner {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .left,
+  .right {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .phoneBlock {
+    justify-content: center;
+  }
+
+  .phoneInfo {
+    margin-left: 0;
+  }
+
+  .form {
+    flex-direction: column;
+  }
+
+  .input {
+    width: 100%;
+  }
+
+  .button {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/front/src/components/QuestionsBlock/QuestionsBlock.tsx b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
new file mode 100644
index 0000000..8139ead
--- /dev/null
+++ b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./QuestionsBlock.module.css";
+import Button from "../Button/Button";
+import { PhoneOutlined } from "@ant-design/icons";
+
+const QuestionsBlock: React.FC = () => {
+
+    const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.inner}>
+        {/* LEFT TEXT */}
+        <div className={styles.left}>
+          <h2 className={styles.title}>ЕСТЬ ВОПРОСЫ?</h2>
+
+          <p className={styles.text}>
+            Мы готовы ответить на ваши вопросы <br />
+            и предоставить всю необходимую информацию <br />
+            о сотрудничестве и товаре.
+          </p>
+        </div>
+
+        {/* RIGHT CONTENT */}
+        <div className={styles.right}>
+          <div className={styles.phoneBlock}>
+            <PhoneOutlined className={styles.phoneIcon} />
+            <span className={styles.phoneNumber}>8 800 707 25 58</span>
+
+            <div className={styles.phoneInfo}>
+              Звоните с понедельника по пятницу <br /> c 09:00 до 18:00 (по Москве)
+            </div>
+          </div>
+
+          <p className={styles.formLabel}>
+            Или оставьте заявку и мы вам перезвоним
+          </p>
+
+          {/* FORM */}
+          <div className={styles.form}>
+            <input
+              type="text"
+              placeholder="+7 (___) ___-__-__"
+              className={styles.input}
+            />
+            <Button 
+                                label="ОТПРАВИТЬ" 
+                                onClick={handleClick}
+                            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuestionsBlock;
\ No newline at end of file
diff --git a/front/src/features/catalog/Catalog.module.css b/front/src/features/catalog/Catalog.module.css
new file mode 100644
index 0000000..835d39e
--- /dev/null
+++ b/front/src/features/catalog/Catalog.module.css
@@ -0,0 +1,64 @@
+.catalogWrapper {
+  display: flex;
+  padding: 20px;
+  gap: 40px;
+}
+
+.sidebar {
+  width: 260px;
+}
+
+.productsSection {
+  flex: 1;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 24px;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  padding: 20px;
+  position: relative;
+  transition: all 0.3s;
+  text-align: center;
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card img {
+  max-width: 160px;
+  margin: 0 auto;
+}
+
+.name {
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.plus {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  font-size: 22px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #ffcc00;
+}
+
+@media (max-width: 900px) {
+  .catalogWrapper {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+  }
+}
diff --git a/front/src/features/catalog/CategoryFilters.tsx b/front/src/features/catalog/CategoryFilters.tsx
new file mode 100644
index 0000000..98cbbf2
--- /dev/null
+++ b/front/src/features/catalog/CategoryFilters.tsx
@@ -0,0 +1,22 @@
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import { setSelectedCategory } from "../store/categoriesSlice";
+import styles from "./CategoriesSidebar.module.css";
+
+export const CategoriesSidebar = () => {
+  const { items, selectedCategoryId } = useAppSelector(s => s.categories);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className={styles.sidebar}>
+      {items.map(cat => (
+        <div
+          key={cat.id}
+          className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+          onClick={() => dispatch(setSelectedCategory(cat.id))}
+        >
+          {cat.name}
+        </div>
+      ))}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/front/src/features/catalog/ProductCard.tsx b/front/src/features/catalog/ProductCard.tsx
new file mode 100644
index 0000000..2abb1ad
--- /dev/null
+++ b/front/src/features/catalog/ProductCard.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import type { Product } from "../../types/product";
+import styles from "./Catalog.module.css";
+
+interface Props {
+    product: Product;
+}
+
+const ProductCard: React.FC<Props> = ({ product }) => {
+  return (
+    <div className={styles.card}>
+      <img src={product.image} alt={product.name} />
+      <p className={styles.name}>{product.name}</p>
+      <button className={styles.plus}>+</button>
+    </div>
+  );
+};
+
+export default ProductCard;
\ No newline at end of file
diff --git a/front/src/features/catalog/ProductGrid.tsx b/front/src/features/catalog/ProductGrid.tsx
new file mode 100644
index 0000000..0ddbd2c
--- /dev/null
+++ b/front/src/features/catalog/ProductGrid.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import type { Product } from "../../types/product";
+import ProductCard from "./ProductCard";
+import styles from "./Catalog.module.css";
+
+interface Props {
+  products: Product[];
+}
+
+const ProductGrid: React.FC<Props> = ({ products }) => {
+  return (
+    <div className={styles.grid}>
+      {products.map((p) => (
+        <ProductCard key={p.id} product={p} />
+      ))}
+    </div>
+  );
+};
+
+export default ProductGrid;
\ No newline at end of file
diff --git a/front/src/features/catalog/catalogSlice.ts b/front/src/features/catalog/catalogSlice.ts
new file mode 100644
index 0000000..5e0c8e2
--- /dev/null
+++ b/front/src/features/catalog/catalogSlice.ts
@@ -0,0 +1,78 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type {PayloadAction} from "@reduxjs/toolkit";
+import { fetchCategoryProducts, fetchCategories } from "../../api/catalogApi";
+import type { Product } from "../../types/product";
+
+interface CatalogState {
+  products: Product[];
+  filtered: Product[];
+  loading: boolean;
+  error: string | null;
+  filters: Record<string, string[]>;
+  currentCategory: string | null;
+}
+
+const initialState: CatalogState = {
+  products: [],
+  filtered: [],
+  loading: false,
+  error: null,
+  filters: {},
+  currentCategory: null,
+};
+
+export const getCategories = createAsyncThunk(
+  "catalog/getCategories",
+  async (categoryid: string) => {
+    const data = await fetchCategories(categoryid);
+    return data;
+  }
+);
+
+export const getCategoryProducts = createAsyncThunk(
+  "catalog/getCategoryProducts",
+  async (category: string) => {
+    const data = await fetchCategoryProducts(category);
+    return data;
+  }
+);
+
+const catalogSlice = createSlice({
+  name: "catalog",
+  initialState,
+  reducers: {
+    setFilter(state, action: PayloadAction<{ name: string; value: string }>) {
+      const { name, value } = action.payload;
+      const active = state.filters[name] || [];
+      state.filters[name] = active.includes(value)
+        ? active.filter((v) => v !== value)
+        : [...active, value];
+    },
+    applyFilters(state) {
+      state.filtered = state.products.filter((p) =>
+        Object.entries(state.filters).every(([key, values]) =>
+          values.length ? values.includes(p[key as keyof Product] as string) : true
+        )
+      );
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(getCategoryProducts.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(getCategoryProducts.fulfilled, (state, action) => {
+        state.loading = false;
+        state.products = action.payload;
+        state.filtered = action.payload;
+      })
+      .addCase(getCategoryProducts.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || "Ошибка загрузки данных";
+      });
+  },
+});
+
+export const { setFilter, applyFilters } = catalogSlice.actions;
+export default catalogSlice.reducer;
\ No newline at end of file
diff --git a/front/src/features/catalog/catalogeSidebar.tsx b/front/src/features/catalog/catalogeSidebar.tsx
new file mode 100644
index 0000000..4ce1209
--- /dev/null
+++ b/front/src/features/catalog/catalogeSidebar.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { setFilter, applyFilters } from "./catalogSlice";
+import styles from "./Catalog.module.css";
+import type { Category } from "../../types/categories";
+import type { CategoryAtributes } from "../../types/categories";
+import type { CategoryAtrVals } from "../../types/categories";
+
+interface Props{
+  categories: Category[];
+  atributes: CategoryAtributes[]
+  atrVals: CategoryAtrVals[];
+}
+
+const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
+  const dispatch = useDispatch();
+
+  const handleFilterChange = (name: string, value: string) => {
+    dispatch(setFilter({ name, value }));
+    dispatch(applyFilters());
+  };
+
+  return (
+    <aside className={styles.sidebar}>
+      <h3>ПАРАМЕТРЫ</h3>
+      <div className={styles.filterGroup}>
+        <p>размер:</p>
+        {atributes.map((a) => (
+          <>
+            <p>{a.name}</p>
+              {atrVals.map((b) => (
+                <label>
+                  <input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
+                </label>
+              ))}
+          </>
+        ))}
+
+
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
+        </label>
+      </div>
+      <div className={styles.filterGroup}>
+        <p>Форма выпуска:</p>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
+        </label>
+        <label>
+          <input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
+        </label>
+      </div>
+    </aside>
+  );
+};
+
+export default CatalogSidebar;
\ No newline at end of file
diff --git a/front/src/features/catalog/categoriesSlice.ts b/front/src/features/catalog/categoriesSlice.ts
new file mode 100644
index 0000000..ecd87d1
--- /dev/null
+++ b/front/src/features/catalog/categoriesSlice.ts
@@ -0,0 +1,51 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import type { Category } from "../../types/categories";
+
+export const fetchCategories = createAsyncThunk<Category[]>(
+  "categories/fetch",
+  async () => {
+    const res = await fetch("/api/categories");
+    return await res.json();
+  }
+);
+
+interface CategoriesState {
+  items: Category[];
+  loading: boolean;
+  error: string | null;
+  selectedCategoryId: number | null;
+}
+
+const initialState: CategoriesState = {
+  items: [],
+  loading: false,
+  error: null,
+  selectedCategoryId: null
+};
+
+const categoriesSlice = createSlice({
+  name: "categories",
+  initialState,
+  reducers: {
+    setSelectedCategory(state, action) {
+      state.selectedCategoryId = action.payload;
+    }
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetchCategories.pending, state => {
+        state.loading = true;
+      })
+      .addCase(fetchCategories.fulfilled, (state, action) => {
+        state.items = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchCategories.rejected, (state) => {
+        state.loading = false;
+        state.error = "Ошибка загрузки категорий";
+      });
+  }
+});
+
+export const { setSelectedCategory } = categoriesSlice.actions;
+export default categoriesSlice.reducer;
\ No newline at end of file
diff --git a/front/src/index.css b/front/src/index.css
new file mode 100644
index 0000000..633e778
--- /dev/null
+++ b/front/src/index.css
@@ -0,0 +1,77 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --darkblue: #1e11a9;
+  --lightblue: #00adef;
+
+}
+
+/*a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}*/
+
+#root {
+  
+  margin: 0 auto;
+}
+
+body {
+  margin: 0;
+  /*display: flex;
+  place-items: center;*/
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+/*h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}*/
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/front/src/main.tsx b/front/src/main.tsx
new file mode 100644
index 0000000..67216e0
--- /dev/null
+++ b/front/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { BrowserRouter } from 'react-router'
+import AppRoutes from './app/routes.tsx'
+import { Provider } from "react-redux";
+import { store } from "./app/store";
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Provider store={store}>
+      <BrowserRouter>
+        <AppRoutes />
+      </BrowserRouter>
+    </Provider>
+  </StrictMode>,
+)
diff --git a/front/src/pages/About/About.module.css b/front/src/pages/About/About.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/front/src/pages/About/About.tsx b/front/src/pages/About/About.tsx
new file mode 100644
index 0000000..942dcd5
--- /dev/null
+++ b/front/src/pages/About/About.tsx
@@ -0,0 +1,9 @@
+const About = () =>{
+    return(
+        <>
+            <p>gggggggg</p>
+        </>
+    )
+}
+
+export default About;
\ No newline at end of file
diff --git a/front/src/pages/Layout/Layout.module.css b/front/src/pages/Layout/Layout.module.css
new file mode 100644
index 0000000..c717a3e
--- /dev/null
+++ b/front/src/pages/Layout/Layout.module.css
@@ -0,0 +1,4 @@
+.content{
+    background-color: white;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/front/src/pages/Layout/Layout.tsx b/front/src/pages/Layout/Layout.tsx
new file mode 100644
index 0000000..241d865
--- /dev/null
+++ b/front/src/pages/Layout/Layout.tsx
@@ -0,0 +1,24 @@
+import Header from "../../components/Header/Header";
+import { Outlet } from "react-router-dom";
+import styles from './Layout.module.css'
+import Footer from "../../components/Footer/Footer";
+
+const Layout = () =>{
+
+    return(
+        /*token ?*/ <div className="dashboard">
+            <div className="content-wrapper">
+                <Header />
+                <main className={styles.content}>
+                    <Outlet />
+                </main>
+                <footer>
+                    <Footer/>
+                </footer>
+            </div>
+        </div> /*: <Navigate to="/login" replace />*/
+
+    );
+};
+
+export default Layout;
\ No newline at end of file
diff --git a/front/src/pages/Main/Main.module.css b/front/src/pages/Main/Main.module.css
new file mode 100644
index 0000000..13a10f6
--- /dev/null
+++ b/front/src/pages/Main/Main.module.css
@@ -0,0 +1,13 @@
+.container{
+    width: 80%;
+    margin: 0;
+    align-items: center;
+}
+
+.main{
+    margin: 0;
+    align-items: center;
+    display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
new file mode 100644
index 0000000..049fb41
--- /dev/null
+++ b/front/src/pages/Main/Main.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Row, Col } from 'antd';
+import { RocketOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import styles from './Main.module.css'
+import BannerSlider from '../../components/Banner/Banner';
+import CategoriesGrid from '../../components/Categories/Categories';
+import ProductionBanner from '../../components/ContactProduct/ContactProduct';
+import QuestionsBlock from '../../components/QuestionsBlock/QuestionsBlock';
+
+const Main: React.FC = () =>{
+    return (
+    <>
+        <BannerSlider/>
+        <main className={styles.main}>
+            <div className={styles.container}>
+                <CategoriesGrid/>
+                {<ProductionBanner/>}
+                <QuestionsBlock/>
+            </div>
+        </main>
+    </>
+    
+  );
+}
+
+export default Main;
\ No newline at end of file
diff --git a/front/src/pages/Products/Products.module.css b/front/src/pages/Products/Products.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/front/src/pages/Products/Products.tsx b/front/src/pages/Products/Products.tsx
new file mode 100644
index 0000000..e85c1ad
--- /dev/null
+++ b/front/src/pages/Products/Products.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import type { RootState } from "../../app/store";
+import { getCategoryProducts } from "../../features/catalog/catalogSlice";
+import CatalogSidebar from "../../features/catalog/catalogeSidebar"
+import ProductGrid from "../../features/catalog/ProductGrid";
+import styles from "../../features/catalog/catalog.module.css";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+
+const CatalogPage: React.FC = () => {
+  const { category } = useParams<{ category: string }>();
+  const dispatch = useAppDispatch()
+  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);
+
+  useEffect(() => {
+    if (category) dispatch(getCategoryProducts(category));
+  }, [category]);
+
+  return (
+    <div className={styles.catalogWrapper}>
+      <CatalogSidebar />
+      <div className={styles.productsSection}>
+        {loading && <p>Загрузка...</p>}
+        {error && <p>Ошибка: {error}</p>}
+        <ProductGrid products={filtered} />
+      </div>
+    </div>
+  );
+};
+
+export default CatalogPage;
\ No newline at end of file
diff --git a/front/src/types/categories.ts b/front/src/types/categories.ts
new file mode 100644
index 0000000..e0c1813
--- /dev/null
+++ b/front/src/types/categories.ts
@@ -0,0 +1,16 @@
+export interface CategoryAtrVals{
+    id: number;
+    val: string;
+}
+
+export interface CategoryAtributes {
+    id: number;
+    name: string;
+    vals: CategoryAtrVals[];
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  atributes: CategoryAtributes[];
+}
\ No newline at end of file
diff --git a/front/src/types/product.ts b/front/src/types/product.ts
new file mode 100644
index 0000000..801ce97
--- /dev/null
+++ b/front/src/types/product.ts
@@ -0,0 +1,8 @@
+export interface Product {
+  id: number;
+  name: string;
+  image: string;
+  description: string;
+  size: string;
+  category: string;
+}
\ No newline at end of file