GLOBAL PATCH

src/app/routes.tsx

@@ -3,6 +3,7 @@ import { Routes } from "react-router";
 import { Route } from "react-router";
 import Main from "../pages/Main/Main";
 import About from "../pages/About/About";
+import Contacts from "../pages/Contacts/Contacts";
 import Products from "../pages/Products/Products";
 import ItemPage from "../pages/ItemPage/ItemPage";
 
@@ -13,6 +14,7 @@ function AppRoutes() {
         <Route index element={<Main />} />
         <Route path="about" element={<About />} />
         <Route path="products" element={<Products />} />
+        <Route path="contacts" element={<Contacts />} />
         <Route path="/product/:id" element={<ItemPage />} />
       </Route>
     </Routes>

src/components/Banner/Banner.module.css

@@ -29,20 +29,25 @@ top: 180px;
 color: white;
 max-width: 500px;
 z-index: 2;
+font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 
 .textBlock h1 {
-font-size: 36px;
+font-size: 42px;
-font-weight: 700;
+font-weight: 800;
-line-height: 1.3;
+line-height: 1.14;
+letter-spacing: 0;
+text-transform: none;
 }
 
 
 .textBlock h2 {
 font-size: 20px;
-font-weight: 400;
+font-weight: 700;
-opacity: 0.8;
+opacity: 0.9;
+letter-spacing: 0.08em;
+text-transform: uppercase;
 }
 
 

src/components/Banner/Banner.tsx

@@ -1,47 +1,44 @@
-import styles from './Banner.module.css'
 import React from "react";
 import { Carousel } from "antd";
-import Button from '../Button/Button.tsx';
+import { useNavigate } from "react-router-dom";
-import banner_img1 from '../../assets/images/mainPage/ChatGPT-Image-Oct-1_-2025_-05_29_18-PM.png'
+import styles from "./Banner.module.css";
-import banner_img2 from '../../assets/images/mainPage/296170994030930.jpg'
+import Button from "../Button/Button.tsx";
-import { useNavigate } from 'react-router-dom';
+import banner_img1 from "../../assets/images/mainPage/ChatGPT-Image-Oct-1_-2025_-05_29_18-PM.png";
+import banner_img2 from "../../assets/images/mainPage/296170994030930.jpg";
 
 export interface SlideItem {
-id: number;
+  id: number;
-image: string;
+  image: string;
-title: string;
+  title: string;
-subtitle: string;
+  subtitle: string;
-description: string;
+  description: string;
 }
 
-
 const slides: SlideItem[] = [
   {
     id: 1,
     image: banner_img1,
-        title: "ПРОИЗВОДСТВО",
+    title: "Производство",
-        subtitle: "ТРУБ, ФИТИНГОВ, КОЛЕН И ОТВОДОВ",
+    subtitle: "Труб, фитингов, колен и отводов",
-        description: "ДЛЯ ВНЕШНЕЙ И ВНУТРЕННЕЙ КАНАЛИЗАЦИИ",
+    description: "для внешней и внутренней канализации",
   },
   {
     id: 2,
     image: banner_img2,
-        title: "ПРОИЗВОДСТВО",
+    title: "Производство",
-        subtitle: "ТРУБ, ФИТИНГОВ, КОЛЕН И ОТВОДОВ",
+    subtitle: "Труб, фитингов, колен и отводов",
-        description: "ДЛЯ ВНЕШНЕЙ И ВНУТРЕННЕЙ КАНАЛИЗАЦИИ",
+    description: "для внешней и внутренней канализации",
-    }
+  },
 ];
 
-
 const BannerSlider: React.FC = () => {
-const navigate = useNavigate();
+  const navigate = useNavigate();
 
-const handleClick = () => {
+  const handleClick = () => {
-    navigate('/products')
+    navigate("/products");
-        console.log('Кнопка нажата!');
   };
 
-return (
+  return (
     <div className={styles.wrapper}>
       <Carousel autoplay dots className={styles.carousel}>
         {slides.map((slide) => (
@@ -53,10 +50,7 @@ return (
                   {slide.subtitle}
                   <br /> {slide.description}
                 </h1>
-                            <Button 
+                <Button label="Смотреть каталог" onClick={handleClick} />
-                                label="СМОТРЕТЬ КАТАЛОГ" 
-                                onClick={handleClick}
-                            />
               </div>
               <img src={slide.image} alt="banner" className={styles.image} />
             </div>
@@ -67,5 +61,4 @@ return (
   );
 };
 
-
 export default BannerSlider;

src/components/Categories/Categories.module.css

@@ -1,145 +1,124 @@
 .wrapper {
-width: 100%;
+  width: 100%;
-margin-top: 40px;
+}
+
+.head {
+  max-width: 760px;
+  margin-bottom: 28px;
+}
+
+.kicker {
+  display: inline-block;
+  margin-bottom: 14px;
+  color: var(--lightblue);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .header {
-font-size: 24px;
+  margin: 0;
-font-weight: 700;
+  color: #111111;
-margin-bottom: 20px;
+  font-size: clamp(30px, 4vw, 46px);
+  font-weight: 800;
+  line-height: 1.16;
 }
 
+.head p {
+  margin: 18px 0 0;
+  color: #3f4652;
+  font-size: 18px;
+  line-height: 1.7;
+}
 
 .grid {
-display: grid;
+  display: grid;
-grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-grid-auto-rows: 230px;
+  gap: 22px;
-gap: 0;
 }
 
 .card {
-position: relative;
+  position: relative;
-overflow: hidden;
+  min-height: 420px;
-border: 1px solid #ececec;
+  overflow: hidden;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: #f8fafc;
+  cursor: pointer;
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.05);
 }
 
-
 .image {
-width: 100%;
+  width: 100%;
-height: 100%;
+  height: 100%;
-object-fit: cover;
+  min-height: 420px;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.4s ease;
 }
 
-
-.highlight {
-grid-column: span 2;
-grid-row: span 2;
-}
-
-
 .overlay {
-position: absolute;
+  position: absolute;
-left: 40px;
+  left: 28px;
-bottom: 40px;
+  right: 28px;
-color: white;
+  bottom: 28px;
-max-width: 320px;
+  max-width: 360px;
+  padding: 24px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #151515;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
 }
 
-
 .overlay h3 {
-font-size: 22px;
+  margin: 0;
-font-weight: 700;
+  color: #111111;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1.2;
 }
 
-
 .overlay h4 {
-margin-top: 4px;
+  margin: 8px 0 22px;
-font-size: 16px;
+  color: #596474;
-opacity: 0.9;
+  font-size: 16px;
-}
+  font-weight: 600;
-
+  line-height: 1.4;
-
-.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);
+  transform: scale(1.04);
-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 {
-grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr;
-}
+  }
-.highlight {
-grid-column: span 2;
-}
 }
 
-@media (max-width: 665px){
+@media (max-width: 560px) {
-    .header {
+  .head p {
-    font-size: 20px;
+    font-size: 16px;
+  }
 
+  .card,
+  .image {
+    min-height: 330px;
+  }
+
+  .overlay {
+    left: 18px;
+    right: 18px;
+    bottom: 18px;
+    padding: 20px;
   }
 
   .overlay h3 {
-font-size: 16px;
+    font-size: 22px;
+  }
 
-}
+  .overlay h4 {
-
+    font-size: 14px;
-
+  }
-.overlay h4 {
-margin-top: 4px;
-font-size: 14px;
-
-}
-}
-
-@media (max-width: 600px) {
-.grid {
-grid-template-columns: 1fr;
-}
-.highlight {
-grid-column: span 1;
-grid-row: span 1;
-}
 }

src/components/Categories/Categories.tsx

@@ -1,89 +1,70 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import styles from "./Categories.module.css";
 import Button from "../Button/Button";
-import category_internal1 from "../../assets/images/mainPage/category_internal1.jpg"
+import category_internal1 from "../../assets/images/mainPage/category_internal1.jpg";
-import category_interna2 from "../../assets/images/mainPage/category_internal2.jpg"
+import category_interna2 from "../../assets/images/mainPage/category_internal2.jpg";
-import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { useNavigate } from "react-router-dom";
 
 interface CategoryItem {
-id: number;
+  id: number;
-title: string;
+  title: string;
-subtitle?: string;
+  subtitle?: string;
-image: string;
+  image: string;
-highlight?: boolean;
+  highlight?: boolean;
 }
 
 const categories: CategoryItem[] = [
-{
+  {
-id: 1,
+    id: 1,
-title: "Труба ПВХ",
+    title: "Труба ПВХ",
-subtitle: "для НАРУЖНОЙ канализации",
+    subtitle: "для наружной канализации",
-image: category_interna2,
+    image: category_interna2,
-highlight: true,
+    highlight: true,
-},
+  },
-/*{ id: 2, title: "КОЛЕНА И ОТВОДЫ", image: "/images/cat-paraffin.jpg" },
+  {
-{ id: 3, title: "ЗАГЛУШКИ И РЕВИЗИИ", image: "/images/cat-hold.jpg" },
+    id: 2,
-{ id: 4, title: "ПЕРЕХОДЫ", image: "/images/cat-wash.jpg" },
+    title: "Труба ПВХ",
-{ id: 5, title: "ТРОЙНИКИ", image: "/images/cat-resin.jpg" },
+    subtitle: "для внутренней канализации",
-{ id: 6, title: "МУФТЫ", image: "/images/cat-scraper.jpg" },
+    image: category_internal1,
-{ id: 7, title: "ПЕРЕХОДЫ", image: "/images/cat-cork.jpg" },*/
+    highlight: true,
-{
+  },
-id: 2,
-title: "Труба ПВХ",
-subtitle: "для ВНУТРЕННЕЙ канализации",
-highlight: true,
-image: category_internal1,
-},
-
-
 ];
 
-
 const CategoriesGrid: React.FC = () => {
-const navigate = useNavigate();
+  const navigate = useNavigate();
 
-const handleClick = () => {
+  const handleClick = () => {
-    navigate('/products');
+    navigate("/products");
-    console.log('Кнопка нажата!');
+  };
-};
-
-return (
-<div className={styles.wrapper}>
-    <h2 className={styles.header}>КАТЕГОРИИ ТОВАРОВ</h2>
 
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.head}>
+        <span className={styles.kicker}>Продукция</span>
+        <h2 className={styles.header}>Категории товаров</h2>
+        <p>
+          Основные позиции для наружной и внутренней канализации. Полный каталог
+          доступен в разделе продукции.
+        </p>
+      </div>
 
       <div className={styles.grid}>
         {categories.map((cat) => (
-            <div
+          <article
             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 
+              <Button label="Смотреть каталог" onClick={handleClick} />
-                        label="СМОТРЕТЬ КАТАЛОГ" 
-                        onClick={handleClick}
-                    />
-                    </div>
-                )}
-
-
-                    {!cat.highlight && (
-                    <div className={styles.titleSmall}>
-                    <span>{cat.title}</span>
-                    {cat.subtitle && <span>{cat.subtitle}</span>}
-                    </div>
-                )}
             </div>
+          </article>
         ))}
       </div>
-</div>
+    </section>
-);
+  );
 };
 
-
 export default CategoriesGrid;

src/components/ContactProduct/ContactProduct.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0px 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .left {
@@ -20,11 +21,22 @@
 }
 
 .title{
-  font-size: 20px;
+  margin: 0 0 12px;
+  color: var(--lightblue);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
 }
 
 .subtitle{
-  font-size: 28px;
+  margin: 0 0 28px;
+  color: #111111;
+  font-size: clamp(30px, 4vw, 46px);
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.16;
 }
 
 .carousel {
@@ -51,7 +63,10 @@ position: relative;
   bottom: 20px;
   left: 40px;
   color: white;
-  font-size: 22px;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.3;
 }
 
 .arrows {
@@ -67,7 +82,9 @@ position: relative;
   height: 48px;
   background: white;
   border: 1px solid #ccc;
-  font-size: 22px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
   cursor: pointer;
 }
 
@@ -89,7 +106,15 @@ position: relative;
 }
 
 @media (max-width: 665px){
+  .title {
+    font-size: 13px;
+  }
+
+  .subtitle {
+    font-size: 30px;
+  }
+
   .arrow {
-  font-size: 20px;
+    font-size: 18px;
-}
+  }
 }

src/components/Footer/Footer.tsx

@@ -16,9 +16,10 @@ const Footer: React.FC = () => {
         </div>
 
         <div className={styles.center}>
-          <NavLink to="about">O КОМПАНИИ</NavLink>
+          <NavLink to="/about">O КОМПАНИИ</NavLink>
-          <NavLink to="products">ПРОДУКЦИЯ</NavLink>
+          <NavLink to="/products">ПРОДУКЦИЯ</NavLink>
-          <NavLink to="products" onClick={() => setIsOpen(true)}>ПРАЙС-ЛИСТ</NavLink>
+          <NavLink to="/contacts">КОНТАКТЫ</NavLink>
+          <NavLink to="/products" onClick={() => setIsOpen(true)}>ПРАЙС-ЛИСТ</NavLink>
         </div>
 
         <div className={styles.right}>

src/components/Header/Header.module.css

@@ -26,10 +26,10 @@
   position: relative;
   color: black;
   text-decoration: none;
-  padding: 1.8rem 1.8rem;
+  padding: 1.2rem 1.2rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 500;
-  font-size: 1.1rem;
+  font-size: 1.0rem;
   transition: all 0.3s ease;
   overflow: hidden;
 }
@@ -109,6 +109,7 @@
 .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; }
+.headerMenu a:nth-child(4) { animation-delay: 0.4s; }
 
 @keyframes slideIn {
   to {

src/components/Header/Header.tsx

@@ -33,8 +33,9 @@ const dispatch = useAppDispatch();
                 {/* НАВИГАЦИЯ */}
                 <div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
                     <NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
-                    <NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
+                    <NavLink to="/about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
-                    <NavLink to="products" onClick={() => {setMenuOpen(false); dispatch(setSelectedCategory(null))}}>ПРОДУКЦИЯ</NavLink>
+                    <NavLink to="/products" onClick={() => {setMenuOpen(false); dispatch(setSelectedCategory(null))}}>ПРОДУКЦИЯ</NavLink>
+                    <NavLink to="/contacts" onClick={() => setMenuOpen(false)}>КОНТАКТЫ</NavLink>
                 </div>
 
             </div>

src/components/Modal/Modal.module.css

@@ -0,0 +1,98 @@
+.modalRoot :global(.ant-modal-content) {
+  overflow: hidden;
+  padding: 0;
+  border-radius: 24px;
+  
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
+}
+
+.modalRoot :global(.ant-modal-close) {
+  top: 18px;
+  right: 18px;
+  border-radius: 50%;
+  color: #222;
+  
+}
+
+.modalRoot :global(.ant-modal-close:hover) {
+  background: #ffffff;
+  transform: translateY(-1px);
+}
+
+.modalBox {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 46px 44px 38px;
+  text-align: center;
+}
+
+.modalBox::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px solid rgba(255, 212, 0, 0.35);
+  border-radius: 24px;
+}
+
+.iconWrap {
+  display: grid;
+  place-items: center;
+  width: 78px;
+  height: 78px;
+  margin-bottom: 22px;
+  border-radius: 50%;
+  background: #fff4a8;
+  box-shadow: 0 14px 30px rgba(255, 212, 0, 0.3);
+}
+
+.icon {
+  color: #111111;
+  font-size: 42px;
+}
+
+.title {
+  max-width: 360px;
+  margin: 0;
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.subtitle {
+  max-width: 350px;
+  margin: 12px 0 28px;
+  color: #636363;
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+@media (max-width: 560px) {
+  .modalRoot :global(.ant-modal) {
+    max-width: calc(100vw - 28px);
+  }
+
+  .modalBox {
+    padding: 40px 24px 30px;
+  }
+
+  .iconWrap {
+    width: 68px;
+    height: 68px;
+    margin-bottom: 18px;
+  }
+
+  .icon {
+    font-size: 36px;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .subtitle {
+    margin-bottom: 24px;
+    font-size: 15px;
+  }
+}

src/components/Modal/Modal.tsx

@@ -0,0 +1,44 @@
+import { CheckCircleFilled } from "@ant-design/icons";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import React from "react";
+import styles from "./Modal.module.css";
+import Button from "../Button/Button";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const Modalka: React.FC<Props> = ({ open, onClose }) => {
+  return (
+    <Modal
+      open={open}
+      footer={null}
+      onCancel={onClose}
+      centered
+      width={460}
+      rootClassName={styles.modalRoot}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 28, scale: 0.96 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.35, ease: "easeOut" }}
+        className={styles.modalBox}
+      >
+        <div className={styles.iconWrap}>
+          <CheckCircleFilled className={styles.icon} />
+        </div>
+
+        <p className={styles.title}>Спасибо за обращение!</p>
+        <p className={styles.subtitle}>
+          Мы свяжемся с вами в ближайшее время. Хорошего дня!
+        </p>
+
+        <Button onClick={onClose} label="Хорошо"/>
+      </motion.div>
+    </Modal>
+  );
+};
+
+export default Modalka;

src/components/ModalRequestForm/ModalRequestForm.tsx

@@ -8,6 +8,8 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import styles from "./ModalRequestForm.module.css";
 import Button from "../Button/Button";
 import { client } from "../../api/client";
+import Modalka from "../Modal/Modal";
+
 
 // ✅ Схема валидации
 const schema = yup.object().shape({
@@ -108,24 +110,7 @@ const ModalRequestForm: React.FC<Props> = ({ open, onClose }) => {
 
   return (
     <>
-    <Modal
+    <Modalka open={isOpen} onClose={() => setIsOpen(false)} />
-      open={isOpen} 
-      footer={null} 
-      onCancel={() => setIsOpen(false)} 
-      centered 
-      width={500}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.35 }}
-        className={styles.modalBox}
-      >
-        <p className={styles.title}>
-          Спасибо за обращение! Мы свяжемся с Вами в ближайшее время. Удачного дня!
-        </p>
-      </motion.div>
-    </Modal>
     <Modal 
       open={open} 
       footer={null} 

src/components/PriceLisForm/PriceLisForm.tsx

@@ -8,6 +8,7 @@ import styles from "./PriceLisForm.module.css";
 import Button from "../Button/Button";
 import { client } from "../../api/client";
 import { useState } from "react";
+import Modalka from "../Modal/Modal";
 
 // ✅ Схема валидации
 const schema = yup.object().shape({
@@ -99,24 +100,7 @@ const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
 
   return (
     <>
-    <Modal
+    <Modalka open={isOpen} onClose={() => setIsOpen(false)} />
-      open={isOpen} 
-      footer={null} 
-      onCancel={() => setIsOpen(false)} 
-      centered 
-      width={500}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.35 }}
-        className={styles.modalBox}
-      >
-        <p className={styles.title}>
-          Спасибо за обращение! Мы свяжемся с Вами в ближайшее время. Удачного дня!
-        </p>
-      </motion.div>
-    </Modal>
     <Modal 
       open={open} 
       footer={null} 

src/components/QuestionsBlock/QuestionsBlock.module.css

@@ -1,170 +1,126 @@
-.phoneIcon {
-  font-size: 28px;
-  color: #ffd400;
-}
-
 .wrapper {
   width: 100%;
-  background-image: url("");
+  margin-top: 72px;
-  background-size: cover;
+  padding: 0;
-  background-position: center;
-  padding: 120px 0;
 }
 
 .inner {
-  width: 90%;
+  display: grid;
-  max-width: 1400px;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
-  margin: 0 auto;
+  gap: 42px;
-  display: flex;
-  justify-content: space-between;
   align-items: center;
+  padding: 42px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #fff7cf 100%);
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.06);
 }
 
 .left {
-  max-width: 45%;
+  min-width: 0;
+}
+
+.kicker {
+  display: inline-block;
+  margin-bottom: 14px;
+  color: var(--lightblue);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .title {
-  font-size: 42px;
+  margin: 0;
-  font-weight: 700;
+  color: #111111;
-  color: #1a1a1a;
+  font-size: clamp(30px, 4vw, 46px);
-  margin-bottom: 25px;
+  font-weight: 800;
+  line-height: 1.16;
 }
 
 .text {
+  max-width: 620px;
+  margin: 18px 0 0;
+  color: #3f4652;
   font-size: 18px;
-  line-height: 1.6;
+  line-height: 1.7;
-  color: #2a2a2a;
 }
 
 .right {
-  max-width: 50%;
+  padding: 28px;
-  text-align: left;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.88);
 }
 
 .phoneBlock {
   display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.phoneIcon {
+  display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
-  margin-bottom: 10px;
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  background: #fff2a6;
+  color: #111111;
+  font-size: 24px;
 }
 
 .phoneNumber {
-  font-size: 25px;
+  color: #111111;
-  font-weight: 600;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.2;
+  text-decoration: none;
 }
 
 .phoneInfo {
-  margin-left: 44px;
+  margin-top: 8px;
-  margin-top: -5px;
+  color: #596474;
   font-size: 14px;
-  color: #555;
+  line-height: 1.5;
 }
 
 .formLabel {
-  margin-top: 40px;
+  margin: 28px 0 20px;
-  font-size: 18px;
+  color: #3f4652;
-  color: #333;
+  font-size: 17px;
+  line-height: 1.55;
 }
 
-.form {
+@media (max-width: 900px) {
-  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: 1300px){
-  .phoneInfo {
-  margin-left: 0;
-  margin-top: 0;
-  
-}
-
-.phoneNumber {
-  font-size: 15px;
-  font-weight: 500;
-}
-}
-
-@media (max-width: 992px) {
   .inner {
-    flex-direction: column;
+    grid-template-columns: 1fr;
-    text-align: center;
+    padding: 30px;
+  }
+}
+
+@media (max-width: 560px) {
+  .wrapper {
+    margin-top: 52px;
   }
 
-  .left,
+  .inner,
   .right {
-    max-width: 100%;
+    padding: 22px;
-    text-align: center;
+  }
+
+  .text,
+  .formLabel {
+    font-size: 16px;
   }
 
   .phoneBlock {
-    justify-content: center;
-  }
-
-  .phoneInfo {
-    margin-left: 0;
-  }
-
-  .form {
     flex-direction: column;
   }
 
-  .input {
+  .phoneNumber {
-    width: 100%;
+    font-size: 20px;
-  }
-
-  .button {
-    width: 100%;
   }
 }
-
-@media (max-width: 665px){
-  .title {
-  font-size: 28px;
-  
-}
-
-.text {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #2a2a2a;
-}
-
-.phoneNumber {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.phoneInfo {
-  margin-left: 44px;
-  margin-top: -5px;
-  font-size: 10px;
-  color: #555;
-}
-
-.formLabel {
-  margin-top: 40px;
-  font-size: 14px;
-  color: #333;
-}
-
-}

src/components/QuestionsBlock/QuestionsBlock.tsx

@@ -1,56 +1,44 @@
-import React from "react";
+import React, { useState } from "react";
+import { PhoneOutlined } from "@ant-design/icons";
 import styles from "./QuestionsBlock.module.css";
 import Button from "../Button/Button";
-import { PhoneOutlined } from "@ant-design/icons";
 import ModalRequestFormQuastion from "../../features/MainPage/PhoneRequest";
-import { useState } from "react";
 
 const QuestionsBlock: React.FC = () => {
-
   const [open, setOpen] = useState(false);
 
   return (
     <section className={styles.wrapper}>
       <div className={styles.inner}>
-        {/* LEFT TEXT */}
         <div className={styles.left}>
-          <h2 className={styles.title}>ЕСТЬ ВОПРОСЫ?</h2>
+          <span className={styles.kicker}>Связь с нами</span>
+          <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}>+7 910 121 09 62</span>
+            <div>
-
+              <a href="tel:+79101210962" className={styles.phoneNumber}>
+                +7 910 121 09 62
+              </a>
               <div className={styles.phoneInfo}>
-              Звоните с понедельника по пятницу <br /> c 09:00 до 18:00 (по Москве)
+                Понедельник - пятница, с 09:00 до 18:00 по Москве
+              </div>
             </div>
           </div>
 
           <p className={styles.formLabel}>
-            Или оставьте заявку и мы вам перезвоним
+            Или оставьте заявку, и мы вам перезвоним.
           </p>
 
-          {/* FORM */}
+          <Button label="Задать вопрос" onClick={() => setOpen(true)} />
-          {/*<div className={styles.form}>
+          <ModalRequestFormQuastion open={open} onClose={() => setOpen(false)} />
-            <input
-              type="text"
-              placeholder="+7 (___) ___-__-__"
-              className={styles.input}
-            />*/}
-            <Button 
-                                label="ЗАДАТЬ ВОПРОС" 
-                                onClick={() => setOpen(true)}
-                            />
-          
-          <ModalRequestFormQuastion open={open} onClose={() => setOpen(false)}/>
         </div>
       </div>
     </section>

src/components/Table/ProducTable.tsx

@@ -1,18 +1,30 @@
+import { CategoryAtributes } from "../../types/categories";
 import styles from "./Table.module.css";
 
 interface Props {
   attributes: Record<string, any>;
+  attrList: CategoryAtributes[];
 }
 
-const formatKey = (key: string) =>
+const ProductAttributes: React.FC<Props> = ({ attributes, attrList }) => {
-  key
+  const rows = Object.entries(attributes)
-    .replace(/_/g, " ")
+    .map(([key, val]) => {
-    .replace(/\b\w/g, (l) => l.toUpperCase());
+      const foundAttr = attrList.find((attr) => key === attr.flag);
+      let newKey: string;
 
-const ProductAttributes: React.FC<Props> = ({ attributes }) => {
+      if (key === "amount") {
-  const rows = Object.entries(attributes).filter(
+        newKey = "Количество";
-    ([key, value]) =>
+      } else if (key === "size") {
-      key !== "categoryId" &&
+        newKey = "Размер";
+      } else {
+        newKey = foundAttr ? foundAttr.name : key;
+      }
+
+      return [newKey, val];
+    })
+    .filter(
+      ([newKey, value]) =>
+        newKey !== "categoryId" &&
         value !== null &&
         value !== undefined &&
         String(value).trim() !== ""
@@ -22,15 +34,9 @@ const ProductAttributes: React.FC<Props> = ({ attributes }) => {
     <div className={styles.wrapper}>
       {rows.map(([key, value]) => (
         <div key={`${key}-${value}`} className={styles.row}>
-          <span className={styles.name}>
+          <span className={styles.name}>{key}</span>
-            {formatKey(key)}
-          </span>
-
           <span className={styles.dots} />
-
+          <span className={styles.value}>{value}</span>
-          <span className={styles.value}>
-            {value}
-          </span>
         </div>
       ))}
     </div>

src/components/Table/Table.module.css

@@ -1,60 +1,51 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
-/* строка */
 .row {
   display: flex;
   align-items: flex-end;
-  font-size: 14px;
+  padding: 14px 0;
-  
+  border-bottom: 1px solid #edf0f4;
+  font-size: 15px;
 }
 
-/* название */
 .name {
-  color: #666;
+  color: #596474;
   white-space: nowrap;
 }
 
-/* пунктир */
 .dots {
   flex: 1;
-  border-bottom: 1px dotted #ccc;
+  border-bottom: 1px dotted #c9d0da;
-  margin: 0 8px;
+  margin: 0 10px;
-  transform: translateY(-4px);
+  transform: translateY(-5px);
 }
 
-/* значение */
 .value {
-  font-weight: 500;
+  color: #151515;
-  color: #000;
+  font-weight: 700;
   white-space: nowrap;
 }
 
-/* hover как в маркетплейсах */
 .row:hover .name {
-  color: #000;
+  color: #111111;
 }
 
 .row:hover .dots {
-  border-color: #999;
+  border-color: #ffd400;
 }
 
-/* мобильная версия */
 @media (max-width: 768px) {
   .row {
     flex-direction: column;
+    gap: 5px;
     align-items: flex-start;
-    gap: 4px;
   }
 
   .dots {
     display: none;
   }
-
-  .value {
-    font-weight: 600;
-  }
 }

src/features/MainPage/PhoneRequest.tsx

@@ -9,6 +9,7 @@ import styles from "../../components/ModalRequestForm/ModalRequestForm.module.cs
 import Button from "../../components/Button/Button";
 import { client } from "../../api/client";
 import { useState } from "react";
+import Modalka from "../../components/Modal/Modal";
 
 // ✅ Схема валидации
 const schema = yup.object().shape({
@@ -108,24 +109,7 @@ const ModalRequestFormQuastion: React.FC<Props> = ({ open, onClose }) => {
 
   return (
     <>
-    <Modal
+    <Modalka open={isOpen} onClose={() => setIsOpen(false)} />
-      open={isOpen} 
-      footer={null} 
-      onCancel={() => setIsOpen(false)} 
-      centered 
-      width={500}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.35 }}
-        className={styles.modalBox}
-      >
-        <p className={styles.title}>
-          Спасибо за обращение! Мы свяжемся с Вами в ближайшее время. Удачного дня!
-        </p>
-      </motion.div>
-    </Modal>
     <Modal 
       open={open} 
       footer={null} 

src/features/catalog/Catalog.module.css

@@ -1,300 +1,319 @@
 .catalogWrapper {
   display: flex;
-  padding: 20px;
   gap: 40px;
+  padding: 20px;
 }
 
-/*.sidebar {
-  width: 260px;
-}*/
-
 .productsSection {
   flex: 1;
 }
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 24px;
+  gap: 22px;
-}
-
-.cardContent{
-  display: flex;
-  flex-direction: column;
-  
 }
 
 .card {
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  padding: 20px;
   position: relative;
-  transition: all 0.3s;
+  display: flex;
-  text-align: center;
+  min-height: 260px;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 24px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: #ffffff;
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
 }
 
 .card:hover {
-  transform: translateY(-3px);
+  border-color: rgba(255, 212, 0, 0.75);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 18px 45px rgba(17, 31, 51, 0.08);
+  transform: translateY(-4px);
 }
 
-.card img {
+.card::before {
-  max-width: 160px;
+  content: "";
-  margin: 0 auto;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(247, 251, 255, 0.9), transparent 42%);
 }
 
-.name {
+.card img,
-  margin-top: 10px;
+.categoryImg,
-  font-size: 14px;
+.img {
-  font-weight: 500;
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  max-width: 180px;
+  height: 150px;
+  margin: 0 auto 18px;
+  object-fit: contain;
+}
+
+.cardContent {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.name,
+.categoryName {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  color: #202733;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.35;
 }
 
 .plus {
-  
+  display: inline-flex;
-  font-size: 22px;
+  flex: 0 0 auto;
-  background: none;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
   border: none;
+  border-radius: 50%;
+  background: #ffd400;
+  color: #111111;
   cursor: pointer;
-  color: #ffcc00;
+  font-size: 24px;
-  align-self: flex-end;
+  font-weight: 600;
+  line-height: 1;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover .plus {
+  background: #ffe667;
+  transform: rotate(90deg);
 }
 
-/*SidebarCategories*/
 .sidebar {
-  width: 260px;
+  width: 100%;
-  padding: 20px 0;
 }
+
 .title {
-  font-weight: 700;
+  margin: 0 0 16px;
-  font-size: 14px;
+  color: #151515;
-  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
+
+.loading {
+  margin: 0;
+  color: #596474;
+  font-size: 14px;
+}
+
 .list {
-  list-style: none;
+  display: grid;
+  gap: 8px;
   padding: 0;
   margin: 0;
+  list-style: none;
 }
+
 .item {
-  padding: 8px 0;
+  padding: 12px 14px;
-  color: #666;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: #596474;
   cursor: pointer;
-  transition: color 0.15s;
+  font-size: 14px;
+  line-height: 1.35;
+  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
 }
+
 .item:hover {
-  color: #000;
+  border-color: #e7ebf0;
+  background: #ffffff;
+  color: #111111;
 }
+
 .activeCat {
-  color: #000;
+  border-color: rgba(255, 212, 0, 0.85);
+  background: #fff7cf;
+  color: #111111;
   font-weight: 700;
 }
-/*SidebarCategories*/
 
-/*Pagination*/
+.filtersWrap {
+  margin-top: 28px;
+  padding-top: 24px;
+  border-top: 1px solid #e1e6ed;
+}
+
+.blocks {
+  display: grid;
+  gap: 18px;
+}
+
+.blockTitle {
+  margin-bottom: 10px;
+  color: #202733;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.options {
+  display: grid;
+  gap: 8px;
+}
+
+.opt {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  color: #596474;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.opt input {
+  width: 16px;
+  height: 16px;
+  accent-color: #ffd400;
+  cursor: pointer;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+.apply,
+.reset,
+.go,
+.page {
+  min-height: 42px;
+  border-radius: 50px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.apply {
+  padding: 0 22px;
+  border: none;
+  background: #ffd400;
+  color: #111111;
+}
+
+.reset,
+.go,
+.page {
+  padding: 0 18px;
+  border: 1px solid #d7dce3;
+  background: #ffffff;
+  color: #151515;
+}
+
+.apply:hover,
+.go:hover,
+.page:hover {
+  background: #ffe667;
+  border-color: #ffe667;
+  transform: translateY(-1px);
+}
+
+.reset:hover {
+  border-color: #111111;
+}
+
 .wrap {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   justify-content: center;
-  margin: 30px 0;
+  margin-top: 6px;
-}
-.go {
-  padding: 8px 14px;
-  background: #fff;
-  border: 1px solid #ddd;
-  cursor: pointer;
 }
+
 .pages {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
+  justify-content: center;
 }
+
 .page {
-  padding: 8px 12px;
+  min-width: 42px;
-  background: #fff;
+  padding: 0 14px;
-  border: 1px solid #ddd;
-  cursor: pointer;
 }
+
 .active {
-  background: #ffd400;
-  font-weight: 700;
   border-color: #ffd400;
+  background: #ffd400;
 }
+
 button:disabled {
   opacity: 0.5;
   cursor: default;
+  transform: none;
 }
-/*Pagination*/
 
-/*CategoryFilters*/
-.filtersWrap {
-  margin: 24px 0;
-}
-.title {
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-.block {
-  margin-bottom: 16px;
-}
-.blockTitle {
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-.opt {
-  display: block;
-  margin: 6px 0;
-  font-size: 14px;
-}
-.actions {
-  margin-top: 12px;
-  display: flex;
-  gap: 12px;
-}
-.apply {
-  background: #ffd400;
-  border: none;
-  padding: 10px 22px;
-  border-radius: 26px;
-  cursor: pointer;
-}
-.reset {
-  background: #fff;
-  border: 1px solid #ddd;
-  padding: 8px 16px;
-  cursor: pointer;
-}
-/*CategoryFilters*/
-
-.categoryGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
 .categoryCard {
-  border: 1px solid #e7e7e7;
+  position: relative;
-  padding: 26px;
-  text-align: center;
-  cursor: pointer;
-  transition: box-shadow 0.15s;
-}
-.categoryCard:hover {
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
-}
-.categoryImg {
-  max-width: 160px;
-  height: auto;
-  display: block;
-  margin: 0 auto 14px;
-}
-.categoryName {
-  font-weight: 700;
 }
+
 @media (max-width: 1090px) {
   .grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 664px){
+@media (max-width: 700px) {
+  .grid {
+    gap: 16px;
+  }
+
   .card {
-  padding: 15px;
+    min-height: 230px;
-}
+    padding: 18px;
-
-.name{
-  font-size: 10px;
-}
-
-.card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.card img {
-  max-width: 130px;
-  margin: 0 auto;
-}
-.title {
-  font-weight: 500;
-  
-}
-
-.blockTitle {
-  font-weight: 500;
-  
-}
-.opt {
-  font-size: 10px;
-}
-.actions {
-  gap: 10px;
-}
-.apply {
-  padding: 8px 18px;
-  border-radius: 20px;
-}
-
-.reset {
-  padding: 6px 14px;
-}
-/*CategoryFilters*/
-
-
-
-.categoryGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-}
-.categoryCard {
-  border: 1px solid #e7e7e7;
-  padding: 26px;
-  text-align: center;
-  cursor: pointer;
-  transition: box-shadow 0.15s;
-}
-
-.categoryImg {
-  max-width: 160px;
-  height: auto;
-  display: block;
-  margin: 0 auto 14px;
-}
-.categoryName {
-  font-weight: 700;
-}
-}
-
-@media (max-width: 600px) {
-  .grid {
-    grid-template-columns: repeat(3, 1fr);
   }
 
-  .wrap{
+  .card img,
-    margin: 0;
+  .categoryImg,
-    padding-bottom: 10px;
+  .img {
+    height: 128px;
+    max-width: 150px;
   }
 
-}
+  .name,
-
+  .categoryName {
-@media (max-width: 1300px) {
+    font-size: 14px;
-  .grid {
-    gap: 0;
   }
 }
 
 @media (max-width: 500px) {
   .grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr;
   }
-}
 
-@media (max-width: 1045px) {
+  .actions {
-}
-
-@media (max-width: 900px) {
-  .catalogWrapper {
     flex-direction: column;
   }
-  .sidebar {
 
+  .apply,
+  .reset {
+    width: 100%;
   }
 }

src/features/catalog/CategoryFilters.tsx

@@ -1,43 +1,72 @@
+import { useState } from "react";
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { setSelectedCategory } from "./categoriesSlice";
 import styles from "./Catalog.module.css";
 import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
-import { useState } from "react";
 
 export const CategoryFilters = () => {
   const dispatch = useAppDispatch();
-  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const { items: cats, selectedCategoryId } = useAppSelector((s) => s.categories);
-  const products = useAppSelector(s => s.products);
+  const products = useAppSelector((s) => s.products);
-  const cat = cats.find(x => x.id === selectedCategoryId);
+  const cat = cats.find((x) => x.id === selectedCategoryId);
-  const [local, setLocal] = useState<Record<string, (string|number)[]>>({});
+  const [local, setLocal] = useState<Record<string, (string | number)[]>>({});
 
   const apply = () => {
     dispatch(setFilters(local));
     dispatch(setPage(1));
-    if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local }));
+    if (selectedCategoryId) {
+      dispatch(
+        fetchProductsByCategory({
+          categoryId: selectedCategoryId,
+          page: 1,
+          limit: products.limit,
+          filters: local,
+        })
+      );
+    }
+  };
+
+  const reset = () => {
+    setLocal({});
+    dispatch(setFilters({}));
+    dispatch(setPage(1));
+    if (selectedCategoryId) {
+      dispatch(
+        fetchProductsByCategory({
+          categoryId: selectedCategoryId,
+          page: 1,
+          limit: products.limit,
+        })
+      );
+    }
   };
 
   if (!cat) return null;
+
   return (
     <div className={styles.filtersWrap}>
-      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      <h4 className={styles.title}>Параметры</h4>
       <div className={styles.blocks}>
-        {cat.attributes.map(attr => (
+        {cat.attributes.map((attr) => (
           <div key={attr.id} className={styles.block}>
-            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+            <div className={styles.blockTitle}>{attr.name}</div>
             <div className={styles.options}>
-              {attr.vals.map(v => {
+              {attr.vals.map((v) => {
                 const key = `${attr.flag}`;
                 const active = local[key]?.includes(v.val);
+
                 return (
                   <label key={v.id} className={styles.opt}>
-                    <input type="checkbox"
+                    <input
+                      type="checkbox"
                       checked={!!active}
                       onChange={() => {
                         const cur = local[key] ?? [];
-                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        const next = cur.includes(v.val)
+                          ? cur.filter((x) => x !== v.val)
+                          : [...cur, v.val];
                         setLocal({ ...local, [key]: next });
-                      }} />
+                      }}
+                    />
                     {v.val}
                   </label>
                 );
@@ -48,8 +77,12 @@ export const CategoryFilters = () => {
       </div>
 
       <div className={styles.actions}>
-        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.apply} onClick={apply}>
-        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+          Показать
+        </button>
+        <button className={styles.reset} onClick={reset}>
+          Сбросить
+        </button>
       </div>
     </div>
   );

src/features/catalog/Pagination.tsx

@@ -3,32 +3,50 @@ import styles from "./Catalog.module.css";
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
 import { setPage, fetchProductsByCategory } from "./productsSlice";
 
-interface Props { categoryId: number }
+interface Props {
+  categoryId: number;
+}
 
 const Pagination: React.FC<Props> = ({ categoryId }) => {
   const dispatch = useAppDispatch();
-  const { total, page, limit } = useAppSelector(s => s.products);
+  const { total, page, limit } = useAppSelector((s) => s.products);
   const totalPages = Math.ceil(total / limit);
+
   if (totalPages <= 1) return null;
 
-  const go = (p:number) => {
+  const go = (p: number) => {
     dispatch(setPage(p));
     dispatch(fetchProductsByCategory({ categoryId, page: p, limit }));
     window.scrollTo({ top: 200, behavior: "smooth" });
-  }
+  };
 
   return (
     <div className={styles.wrap}>
-      <button className={styles.go} onClick={() => go(1)} disabled={page===1}>В НАЧАЛО</button>
+      <button className={styles.go} onClick={() => go(1)} disabled={page === 1}>
+        В начало
+      </button>
 
       <div className={styles.pages}>
-        {Array.from({length: totalPages}, (_,i) => i+1).map(p => (
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
-          <button key={p} className={`${styles.page} ${p===page?styles.active:""}`} onClick={() => go(p)}>{p}</button>
+          <button
+            key={p}
+            className={`${styles.page} ${p === page ? styles.active : ""}`}
+            onClick={() => go(p)}
+          >
+            {p}
+          </button>
         ))}
       </div>
 
-      <button className={styles.go} onClick={() => go(totalPages)} disabled={page===totalPages}>В КОНЕЦ</button>
+      <button
+        className={styles.go}
+        onClick={() => go(totalPages)}
+        disabled={page === totalPages}
+      >
+        В конец
+      </button>
     </div>
   );
 };
+
 export default Pagination;

src/features/catalog/SidebarCategories.tsx

@@ -6,7 +6,7 @@ import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
 
 const SidebarCategories: React.FC = () => {
   const dispatch = useAppDispatch();
-    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+  const { items, selectedCategoryId, loading } = useAppSelector((s) => s.categories);
 
   useEffect(() => {
     dispatch(fetchCategories());
@@ -14,26 +14,33 @@ const SidebarCategories: React.FC = () => {
 
   const onClick = (catId: number) => {
     dispatch(setSelectedCategory(catId));
-    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setFilters({}));
     dispatch(setPage(1));
     dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
   };
-    return(
+
+  return (
     <aside className={styles.sidebar}>
-            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+      <h3 className={styles.title}>Категории товаров</h3>
-            {loading ? <p>Загрузка...</p> : (
+      {loading ? (
+        <p className={styles.loading}>Загрузка...</p>
+      ) : (
         <ul className={styles.list}>
-                {items.map(cat => (
+          {items.map((cat) => (
-                    <li key={cat.id}
+            <li
-                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.activeCat : ""}`}
+              key={cat.id}
-                        onClick={() => onClick(cat.id)}>
+              className={`${styles.item} ${
+                selectedCategoryId === cat.id ? styles.activeCat : ""
+              }`}
+              onClick={() => onClick(cat.id)}
+            >
               {cat.name}
             </li>
           ))}
         </ul>
       )}
     </aside>
-    )
+  );
-}
+};
 
 export default SidebarCategories;

src/pages/About/About.module.css

@@ -11,7 +11,6 @@
 .story,
 .principles,
 .production {
-  width: 100%;
   max-width: 1200px;
   margin: 0 auto;
 }

src/pages/Contacts/Contacts.module.css

@@ -0,0 +1,233 @@
+.page {
+  width: 100%;
+  min-height: 70vh;
+  padding: 126px 20px 96px;
+  background: #ffffff;
+  box-sizing: border-box;
+  color: #151515;
+}
+
+.hero,
+.mapBlock {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
+  gap: 56px;
+  align-items: start;
+}
+
+.heroText {
+  min-width: 0;
+}
+
+.kicker {
+  display: inline-block;
+  margin-bottom: 16px;
+  color: var(--lightblue);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  max-width: 760px;
+  margin: 0;
+  color: #111111;
+  font-size: clamp(38px, 5vw, 64px);
+  line-height: 1.06;
+}
+
+.hero p {
+  max-width: 640px;
+  margin: 26px 0 0;
+  color: #3f4652;
+  font-size: 19px;
+  line-height: 1.7;
+}
+
+.contactPanel {
+  display: grid;
+  gap: 18px;
+  padding: 28px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 62%, #fff7cf 100%);
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.07);
+}
+
+.contactItem {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  gap: 16px;
+  padding: 20px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  background: #fff2a6;
+  color: #111111;
+  font-size: 24px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 8px;
+  color: #77808c;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.contactItem p {
+  margin: 0;
+  color: #202733;
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.contactItem a {
+  color: #151515;
+  font-size: 18px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.contactItem a:hover {
+  color: var(--darkblue);
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mapBlock {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-top: 42px;
+  padding: 30px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.mapPlaceholder {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  min-width: 0;
+  color: #202733;
+}
+
+.mapPlaceholder svg {
+  flex: 0 0 auto;
+  color: var(--lightblue);
+  font-size: 34px;
+}
+
+.mapPlaceholder strong,
+.mapPlaceholder span {
+  display: block;
+}
+
+.mapPlaceholder strong {
+  font-size: 20px;
+  line-height: 1.35;
+}
+
+.mapPlaceholder span {
+  margin-top: 4px;
+  color: #596474;
+  font-size: 15px;
+}
+
+.mapLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-height: 50px;
+  padding: 0 24px;
+  border-radius: 50px;
+  background: #ffd400;
+  color: #111111;
+  font-size: 15px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.mapLink:hover {
+  background: #ffe667;
+  transform: translateY(-2px);
+}
+
+@media (max-width: 980px) {
+  .page {
+    padding-top: 104px;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 34px;
+  }
+
+  .mapBlock {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 560px) {
+  .page {
+    padding: 92px 16px 72px;
+  }
+
+  .hero h1 {
+    font-size: 34px;
+  }
+
+  .hero p {
+    font-size: 16px;
+  }
+
+  .contactPanel {
+    padding: 18px;
+  }
+
+  .contactItem {
+    grid-template-columns: 1fr;
+    padding: 18px;
+  }
+
+  .mapBlock {
+    padding: 22px;
+  }
+
+  .mapPlaceholder {
+    align-items: flex-start;
+  }
+
+  .mapLink {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}

src/pages/Contacts/Contacts.tsx

@@ -0,0 +1,98 @@
+import {
+  EnvironmentOutlined,
+  MailOutlined,
+  PhoneOutlined,
+} from "@ant-design/icons";
+import SEO from "../../shared/ui/SEO";
+import styles from "./Contacts.module.css";
+
+const phones = [
+  {
+    label: "+7 910 121 09 62",
+    href: "tel:+79101210962",
+  },
+];
+
+const Contacts = () => {
+  return (
+    <>
+      <SEO
+        title="Контакты"
+        description="Контакты RK-Plastic Tech: адрес производства и склада в Дзержинске, телефоны и электронная почта для связи."
+      />
+
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className={styles.heroText}>
+            <span className={styles.kicker}>Контакты</span>
+            <h1>Свяжитесь с нами по вопросам продукции и поставок</h1>
+            <p>
+              Подскажем по ассортименту, наличию, срокам производства и условиям
+              сотрудничества.
+            </p>
+          </div>
+
+          <div className={styles.contactPanel}>
+            <article className={styles.contactItem}>
+              <div className={styles.icon}>
+                <EnvironmentOutlined />
+              </div>
+              <div>
+                <span className={styles.label}>Адрес производства и склада</span>
+                <p>
+                  Нижегородская область, г. Дзержинск, Автозаводское шоссе, 70А
+                </p>
+              </div>
+            </article>
+
+            <article className={styles.contactItem}>
+              <div className={styles.icon}>
+                <PhoneOutlined />
+              </div>
+              <div>
+                <span className={styles.label}>Телефоны</span>
+                <div className={styles.links}>
+                  {phones.map((phone) => (
+                    <a href={phone.href} key={phone.href}>
+                      {phone.label}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </article>
+
+            <article className={styles.contactItem}>
+              <div className={styles.icon}>
+                <MailOutlined />
+              </div>
+              <div>
+                <span className={styles.label}>Почта</span>
+                <a href="mailto:rkplastic@mail.ru">rkplastic@mail.ru</a>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        <section className={styles.mapBlock} aria-label="Адрес на карте">
+          <div className={styles.mapPlaceholder}>
+            <EnvironmentOutlined />
+            <div>
+              <strong>Дзержинск, Автозаводское шоссе, 70А</strong>
+              <span>Производство и склад RK-Plastic Tech</span>
+            </div>
+          </div>
+          <a
+            className={styles.mapLink}
+            href="https://yandex.ru/maps/?text=%D0%9D%D0%B8%D0%B6%D0%B5%D0%B3%D0%BE%D1%80%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D1%8F%20%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C%2C%20%D0%B3.%20%D0%94%D0%B7%D0%B5%D1%80%D0%B6%D0%B8%D0%BD%D1%81%D0%BA%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%B7%D0%B0%D0%B2%D0%BE%D0%B4%D1%81%D0%BA%D0%BE%D0%B5%20%D1%88%D0%BE%D1%81%D1%81%D0%B5%2C%2070%D0%90"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Открыть в Яндекс Картах
+          </a>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Contacts;

src/pages/ItemPage/ItemPage.module.css

@@ -1,193 +1,247 @@
 .page {
-  background: #f5f5f5;
   min-height: 100vh;
+  padding: 126px 20px 96px;
+  background: #ffffff;
+  color: #151515;
+  box-sizing: border-box;
 }
 
-.resetLink {
+.loading {
-  text-decoration: none;
+  min-height: 60vh;
-  color: inherit;
+  padding-top: 140px;
-  cursor: pointer;
+  color: #596474;
-  font-size: 16px;
+  text-align: center;
-  color: #f5c400;
+  font-size: 18px;
+}
 
+.top,
+.hero,
+.details {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .top {
-  background: #000;
+  margin-bottom: 22px;
-  padding: 15px 40px;
-  padding-top: 100px;
-}
-
-.short{
-  font-size: 14px;
-  margin-top: 30px;
-  margin-bottom: 40px;
 }
 
 .back {
-  color: white;
+  display: inline-flex;
-  background: none;
+  align-items: center;
-  border: none;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0 18px;
+  border: 1px solid #d7dce3;
+  border-radius: 50px;
+  background: #ffffff;
+  color: #151515;
   cursor: pointer;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
+  transition: border-color 0.2s ease, transform 0.2s ease;
+}
+
+.back:hover {
+  border-color: #111111;
+  transform: translateY(-1px);
 }
 
 .hero {
-  display: flex;
+  display: grid;
-  min-height: 500px;
+  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
+  gap: 30px;
+  align-items: stretch;
+}
+
+.left,
+.right,
+.details {
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
 }
 
 .left {
-  flex: 1;
-  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 520px;
+  padding: 46px;
+  background: #f8fafc;
 }
 
 .left img {
-  max-width: 400px;
+  display: block;
-}
+  width: 100%;
-
+  max-width: 430px;
-.rightContent{
+  max-height: 430px;
-  padding-right: 100px;
+  object-fit: contain;
-  
 }
 
 .right {
-  flex: 1;
-  background: linear-gradient(
-      rgba(44, 44, 44, 0.9),
-      rgba(44, 44, 44, 0.9)
-    ),
-    url("../../assets/images/otkrytie-novogo-proizvodstva-v-g.Krymsk.jpeg");
-  color: white;
-  padding: 90px;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 48px;
+  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #fff7cf 100%);
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.06);
 }
 
 .breadcrumbs {
-  font-size: 16px;
+  display: flex;
-  color: #f5c400;
+  flex-wrap: wrap;
-  margin-bottom: 20px;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 28px;
+  color: #77808c;
+  font-size: 14px;
+  line-height: 1.4;
 }
 
-.download {
+.breadcrumbs a {
-  margin-top: 30px;
+  color: #596474;
-  background: #f5c400;
+  text-decoration: none;
-  border: none;
-  padding: 15px 40px;
-  border-radius: 30px;
-  font-weight: bold;
   cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.breadcrumbs a:hover {
+  color: #111111;
+}
+
+.kicker {
+  display: inline-block;
+  margin-bottom: 14px;
+  color: var(--lightblue);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.title {
+  max-width: 720px;
+  margin: 0;
+  color: #111111;
+  font-size: clamp(32px, 4vw, 54px);
+  line-height: 1.08;
+}
+
+.short {
+  max-width: 620px;
+  margin: 24px 0 0;
+  color: #3f4652;
+  font-size: 17px;
+  line-height: 1.7;
+}
+
+.status {
+  width: fit-content;
+  margin: 28px 0 24px;
+  padding: 8px 14px;
+  border-radius: 50px;
+  background: #fff7cf;
+  color: #111111;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.details {
+  overflow: hidden;
+  margin-top: 30px;
+  background: #ffffff;
 }
 
 .tabs {
   display: flex;
-  border-top: 1px solid #ddd;
+  gap: 0;
+  border-bottom: 1px solid #e7ebf0;
+  background: #f8fafc;
 }
 
 .tabs button {
-  flex: 1;
+  min-height: 58px;
-  padding: 20px;
+  padding: 0 30px;
   border: none;
-  background: #eee;
+  border-right: 1px solid #e7ebf0;
+  background: transparent;
+  color: #596474;
   cursor: pointer;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  transition: background 0.2s ease, color 0.2s ease;
 }
 
-.active {
+.tabs button:hover {
-  background: white;
+  color: #111111;
-  font-weight: bold;
+}
+
+.tabs .active {
+  background: #ffffff;
+  color: #111111;
 }
 
 .content {
-  padding: 40px;
+  padding: 36px;
-  background: white;
 }
 
-.attrRow {
+.content h2 {
-  display: flex;
+  margin: 0 0 18px;
-  justify-content: space-between;
+  color: #151515;
-  padding: 10px 0;
+  font-size: clamp(26px, 3vw, 36px);
-  border-bottom: 1px solid #eee;
+  line-height: 1.16;
 }
 
-.title{
+.content p {
-  font-size: 28px;
+  max-width: 900px;
+  margin: 0 0 14px;
+  color: #3f4652;
+  font-size: 17px;
+  line-height: 1.75;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 980px) {
-  .hero {
+  .page {
-    flex-direction: column-reverse;
+    padding-top: 104px;
-  }
-
-  .top {
-    padding: 20px;
-    padding-top: 100px;
-  }
-
-  .right {
-    padding: 50px;
-  }
-
-  .rightContent {
-    padding-right: 100px;
-  }
-
-  .left img {
-    max-width: 300px;
-  }
-
-  .left{
-    padding: 20px;
-  }
-}
-
-/* ================= MOBILE ================= */
-
-@media (max-width: 768px) {
-  .top {
-    padding: 15px 20px;
-    padding-top: 100px;
-    
   }
 
   .hero {
-    flex-direction: column-reverse;
+    grid-template-columns: 1fr;
   }
 
   .left {
-    padding: 20px;
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 560px) {
+  .page {
+    padding: 92px 16px 72px;
+  }
+
+  .left,
+  .right,
+  .content {
+    padding: 22px;
+  }
+
+  .left {
+    min-height: 280px;
   }
 
   .left img {
-    max-width: 250px;
+    max-height: 260px;
   }
 
-  .right {
+  .title {
-    padding: 30px 20px;
+    font-size: 30px;
   }
 
-  .breadcrumbs{
+  .short,
-    font-size: 14px;
+  .content p {
-  }
+    font-size: 16px;
-
-  .title{
-    font-size: 20px;
-  }
-
-  .short {
-    margin-top: 20px;
-    margin-bottom: 25px;
-    font-size: 10px;
-  }
-
-  .download {
-    width: 100%;
-    padding: 14px;
-    text-align: center;
   }
 
   .tabs {
@@ -195,88 +249,8 @@
   }
 
   .tabs button {
-    padding: 14px;
+    width: 100%;
-    font-size: 14px;
+    border-right: none;
-  }
+    border-bottom: 1px solid #e7ebf0;
-
-  .content {
-    padding: 20px;
-  }
-
-  .attrRow {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
   }
 }
-
-@media (max-width: 665){
-  .download {
-    font-size: 14px;
-  }
-
-  .tabs button {
-    font-size: 14px;
-  }
-
-  .short{
-  margin-top: 30px;
-  margin-bottom: 40px;
-}
-
-.back {
-  color: white;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.hero {
-  display: flex;
-  min-height: 500px;
-}
-
-.left {
-  flex: 1;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.left img {
-  max-width: 400px;
-}
-
-.rightContent{
-  padding-right: 100px;
-  
-}
-
-}
-
-/* ================= SMALL MOBILE ================= */
-
-@media (max-width: 480px) {
-  .top {
-    padding-top: 100px;
-  }
-
-  .left img {
-    max-width: 200px;
-  }
-
-  .right {
-    padding: 20px 15px;
-  }
-
-  .download {
-    font-size: 14px;
-  }
-
-  .tabs button {
-    font-size: 13px;
-  }
-}
-

src/pages/ItemPage/ItemPage.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeftOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { fetchProductById, setSelectedProducts } from "../../features/catalog/productsSlice";
+import { fetchProductById } from "../../features/catalog/productsSlice";
 import styles from "./ItemPage.module.css";
-import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
 import Button from "../../components/Button/Button";
 import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
 import ProductAttributes from "../../components/Table/ProducTable";
-import { p, title } from "framer-motion/client";
 import Link from "antd/es/typography/Link";
 import { setSelectedCategory } from "../../features/catalog/categoriesSlice";
 
@@ -16,103 +15,108 @@ const ItemPage = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { items, loading } = useAppSelector((state) => state.products);
-  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const { items: cats, selectedCategoryId } = useAppSelector((s) => s.categories);
 
   const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
-
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (id) dispatch(fetchProductById(id));
-  }, [id]);
+  }, [dispatch, id]);
 
   const product = items.find((item) => item.id === Number(id));
-  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
+  const category = cats.find((cat) => cat.id === Number(selectedCategoryId));
 
-  if ((loading || !product)) return <div>Загрузка...</div>;
+  if (loading || !product) {
-  if(!category) return <div>Загрузка...</div>;
+    return <div className={styles.loading}>Загрузка...</div>;
+  }
+
+  if (!category) {
+    return <div className={styles.loading}>Загрузка...</div>;
+  }
 
   return (
-    <div className={styles.page}>
+    <main className={styles.page}>
-      <PriceLisForm open={open} onClose={() => setOpen(false)}/>
+      <PriceLisForm open={open} onClose={() => setOpen(false)} />
+
       <div className={styles.top}>
         <button className={styles.back} onClick={() => navigate(-1)}>
-          ← НАЗАД В КАТАЛОГ
+          <ArrowLeftOutlined />
+          Назад в каталог
         </button>
       </div>
 
-      <div className={styles.hero}>
+      <section className={styles.hero}>
         <div className={styles.left}>
           <img src={product.images[0]} alt={product.name} />
         </div>
 
         <div className={styles.right}>
-          <div className={styles.rightContent}>
           <div className={styles.breadcrumbs}>
-            <Link onClick={() => {navigate('/products'); dispatch(setSelectedCategory(null))}} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>КАТЕГОРИИ</Link> / <Link onClick={() => navigate('/products')} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{category?.name}</Link> / <Link onClick={() => navigate(`/product/${id}`)} style={{ textDecoration: 'none', color: 'inherit', fontSize: "16px" }}>{product.name}</Link>
+            <Link
+              onClick={() => {
+                navigate("/products");
+                dispatch(setSelectedCategory(null));
+              }}
+            >
+              Категории
+            </Link>
+            <span>/</span>
+            <Link onClick={() => navigate("/products")}>{category.name}</Link>
+            <span>/</span>
+            <span>{product.name}</span>
           </div>
 
+          <span className={styles.kicker}>Карточка товара</span>
           <h1 className={styles.title}>{product.name}</h1>
-
           <p className={styles.short}>{product.description}</p>
-          <Button
+
-            label="СКАЧАТЬ ПРАЙС-ЛИСТ"
+          <div className={styles.status}>
-            onClick={() => setOpen(true)}
+            {product.inStock ? "В наличии" : "Под заказ"}
-          />
-          </div>
-        </div>
           </div>
 
+          <Button label="Скачать прайс-лист" onClick={() => setOpen(true)} />
+        </div>
+      </section>
+
+      <section className={styles.details}>
         <div className={styles.tabs}>
           <button
             className={activeTab === "desc" ? styles.active : ""}
             onClick={() => setActiveTab("desc")}
           >
-          ОПИСАНИЕ
+            Описание
           </button>
           <button
             className={activeTab === "chars" ? styles.active : ""}
             onClick={() => setActiveTab("chars")}
           >
-          ХАРАКТЕРИСТИКИ
+            Характеристики
           </button>
         </div>
 
         <div className={styles.content}>
           {activeTab === "desc" && (
             <div>
-            <h2>ОПИСАНИЕ</h2>
+              <h2>Описание</h2>
               <p>{product.description}</p>
               <p>{product.full_name}</p>
-            {!product.inStock? 
-              (
-                <p>в наличии</p>
-              ) : (
-                <p>нет в наличии</p>
-              )
-            }
             </div>
           )}
 
           {activeTab === "chars" && (
             <div>
-            <h2>ХАРАКТЕРИСТИКИ</h2>
+              <h2>Характеристики</h2>
-            {/*{product.attributes.map((attr) => (
+              <ProductAttributes
-              <div key={attr.id} className={styles.attrRow}>
+                attributes={product.attributes}
-                <span>{attr.name}</span>
+                attrList={category.attributes}
-                {attr.vals?.map((val: CategoryAtrVals) => (
+              />
-                  <div key={val.id}>
-                    <span>{val.val}</span>
-                  </div>
-                ))}
-              </div>
-            ))}*/}
-            <ProductAttributes attributes={product.attributes}/>
             </div>
           )}
         </div>
-    </div>
+      </section>
+    </main>
   );
-}
+};
 
 export default ItemPage;

src/pages/Main/Main.module.css

@@ -1,13 +1,19 @@
-.container{
+.main {
-    width: 80%;
+  display: flex;
+  justify-content: center;
   margin: 0;
-    align-items: center;
+  background: #ffffff;
 }
 
-.main{
+.container {
-    margin: 0;
+  width: 100%;
-    align-items: center;
+  max-width: 1200px;
-    display: flex;
+  padding: 72px 20px 96px;
-  align-items: center;
+  box-sizing: border-box;
-  justify-content: center;
+}
+
+@media (max-width: 560px) {
+  .container {
+    padding: 52px 16px 72px;
+  }
 }

src/pages/Main/Main.tsx

@@ -1,6 +1,4 @@
 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';
@@ -14,7 +12,7 @@ const Main: React.FC = () =>{
         <main className={styles.main}>
             <div className={styles.container}>
                 <CategoriesGrid/>
-                {<ProductionBanner/>}
+                <ProductionBanner/>
                 <QuestionsBlock/>
             </div>
         </main>

src/pages/Products/Products.module.css

@@ -1,297 +1,218 @@
-/* ===== ОБЩИЙ ЛЭЙАУТ ===== */
 .wrapper {
- 
+  width: 100%;
-}
-
-.container{
-    display: flex;
-  background: #f3f3f3;
   min-height: 100vh;
-  font-family: Arial, sans-serif;
+  padding: 126px 20px 96px;
-  
+  background: #ffffff;
+  box-sizing: border-box;
+  color: #151515;
 }
 
-/* ===== САЙДБАР ===== */
+.hero,
-.sidebar {
+.container {
-  width: 280px;
+  width: 100%;
-  background: #fff;
+  max-width: 1200px;
-  padding: 30px 20px;
+  margin: 0 auto;
-  border-right: 1px solid #e0e0e0;
-
-  display: flex;
-  flex-direction: column;
-  padding-top: 70px;
 }
 
-/* ===== ОСНОВНАЯ ЧАСТЬ ===== */
+.hero {
-.main {
-  flex: 1;
-  padding: 30px 40px;
-  padding-top: 100px;
-}
-
-/* ===== ЛЭЙАУТ КАТАЛОГА ===== */
-.catalogLayout {
-  display: flex;
-  gap: 30px;
-  align-items: flex-start;
-}
-
-/* ===== ФИЛЬТРЫ ===== */
-.filters {
-  width: 100%; /* 🔥 важно */
-  border: 1px solid #e5e5e5;
-}
-
-/* ===== БЛОК ТОВАРОВ ===== */
-.products {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-}
-
-/* ===== GRID ===== */
-.grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
-  border-top: 1px solid #ddd;
+  gap: 48px;
-  border-left: 1px solid #ddd;
+  align-items: end;
+  margin-bottom: 42px;
 }
 
-/* ===== КАРТОЧКА ===== */
+.kicker {
-.card {
+  display: inline-block;
-  background: #fff;
+  margin-bottom: 16px;
-  border-right: 1px solid #ddd;
+  color: var(--lightblue);
-  border-bottom: 1px solid #ddd;
-  padding: 25px 20px;
-  text-align: center;
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.card:hover {
-  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
-}
-
-/* ===== КАРТИНКА ===== */
-.card img {
-  max-height: 140px;
-  object-fit: contain;
-  margin-bottom: 15px;
-}
-
-/* ===== НАЗВАНИЕ ===== */
-.card h3 {
   font-size: 14px;
-  font-weight: 600;
-  color: #222;
-  min-height: 40px;
-}
-
-/* ===== ПЛЮС КНОПКА ===== */
-.card::after {
-  content: "+";
-  position: absolute;
-  right: 15px;
-  bottom: 15px;
-  color: #f5c400;
-  font-size: 22px;
-  font-weight: bold;
-}
-
-/* ===== ПАГИНАЦИЯ ===== */
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-}
-
-.pageBtn {
-  width: 40px;
-  height: 40px;
-  border: 1px solid #ddd;
-  background: #fff;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.pageBtn:hover {
-  background: #f5c400;
-}
-
-.activePage {
-  background: #f5c400;
-  border-color: #f5c400;
-}
-
-/* ===== ФИЛЬТРЫ СТИЛИ ===== */
-.filters h4 {
-  font-size: 14px;
-  margin-bottom: 10px;
-  margin-top: 20px;
-}
-
-.filters label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  margin-bottom: 8px;
-  cursor: pointer;
-}
-
-.filters input {
-  cursor: pointer;
-}
-
-/* ===== КАТЕГОРИИ ===== */
-.sidebar h3 {
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
-.sidebar ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.sidebar li {
-  font-size: 14px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  color: #666;
-  transition: 0.2s;
-}
-
-.sidebar li:hover {
-  color: #000;
-}
-
-.activeCategory {
   font-weight: 700;
-  color: #000;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.mobileFilterBtn {
+.hero h1 {
-  display: none;
+  max-width: 820px;
-  margin-bottom: 15px;
+  margin: 0;
-  padding: 12px;
+  color: #111111;
-  background: #000;
+  font-size: clamp(38px, 5vw, 64px);
-  color: white;
+  line-height: 1.06;
-  border: none;
-  cursor: pointer;
 }
 
-/* overlay */
+.hero p {
-.overlay {
+  max-width: 650px;
-  position: fixed;
+  margin: 26px 0 0;
-  inset: 0;
+  color: #3f4652;
-  background: rgba(0, 0, 0, 0.5);
+  font-size: 19px;
-  z-index: 50;
+  line-height: 1.7;
 }
 
-/* кнопка закрытия */
+.heroCard {
+  display: grid;
+  gap: 10px;
+  padding: 28px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #fff7cf 100%);
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.07);
+}
+
+.heroCard svg {
+  color: #111111;
+  font-size: 34px;
+}
+
+.heroCard strong {
+  color: #111111;
+  font-size: 26px;
+  line-height: 1.15;
+}
+
+.heroCard span {
+  color: #596474;
+  font-size: 15px;
+  line-height: 1.55;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.sidebar {
+  position: sticky;
+  top: 104px;
+  padding: 24px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.main {
+  min-width: 0;
+  padding: 30px;
+  border: 1px solid #e7ebf0;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 18px 50px rgba(17, 31, 51, 0.05);
+}
+
+.sectionHead {
+  margin-bottom: 24px;
+}
+
+.sectionHead span {
+  display: block;
+  margin-bottom: 8px;
+  color: #77808c;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.sectionHead h2 {
+  margin: 0;
+  color: #151515;
+  font-size: clamp(28px, 4vw, 42px);
+  line-height: 1.15;
+}
+
+.products {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+}
+
+.mobileFilterBtn,
 .closeBtn {
   display: none;
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  margin-top: 70px;
 }
 
-/* ================= MOBILE ================= */
+@media (max-width: 980px) {
+  .wrapper {
+    padding-top: 104px;
+  }
 
-@media (max-width: 600px) {
+  .hero,
-  .mobileFilterBtn {
+  .container {
-    display: block;
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    align-items: start;
+    gap: 28px;
   }
 
   .sidebar {
     position: fixed;
-    top: 0;
+    inset: 0 auto 0 -100%;
-    left: -100%;
+    z-index: 1200;
-    width: 80%;
+    width: min(360px, 86vw);
-    height: 100%;
-    background: white;
-    z-index: 100;
-    padding: 20px;
     overflow-y: auto;
-    transition: 0.3s;
+    border-radius: 0;
+    transition: left 0.28s ease;
   }
 
   .sidebarOpen {
     left: 0;
   }
 
-  .closeBtn {
+  .mobileFilterBtn {
-    display: block;
+    display: inline-flex;
-  }
+    align-items: center;
-
-  
-}
-
-/* ===== АДАПТИВ ===== */
-
-
-@media (max-width: 1254px){
-  .sidebar {
-    width: 220px;
-  }
-  .main {
-  padding: 0;
-  padding-top: 100px;
-}
-}
-
-@media (max-width: 1200px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1045px){
-  .sidebar {
-    width: 200px;
-  }
-  
-}
-
-@media (max-width: 827px){
-  .container{
-  background: white;
-}
-}
-
-@media (max-width: 768px) {
-  
-
-  
-
-  .catalogLayout {
-    flex-direction: column;
-  }
-
-  .filters {
-    width: 100%;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 600px){
-  .products {
-    width: 100%;
-}
-
-.main{
     justify-content: center;
+    gap: 10px;
+    min-height: 48px;
+    margin-bottom: 22px;
+    padding: 0 22px;
+    border: none;
+    border-radius: 50px;
+    background: #ffd400;
+    color: #111111;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 700;
+  }
 
+  .closeBtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 42px;
+    margin-bottom: 18px;
+    padding: 0 18px;
+    border: 1px solid #d7dce3;
+    border-radius: 50px;
+    background: #ffffff;
+    color: #111111;
+    cursor: pointer;
+    font-weight: 700;
+  }
 }
 
+@media (max-width: 560px) {
+  .wrapper {
+    padding: 92px 16px 72px;
+  }
+
+  .hero h1 {
+    font-size: 34px;
+  }
+
+  .hero p {
+    font-size: 16px;
+  }
+
+  .heroCard,
+  .main {
+    padding: 22px;
+  }
+
+  .mobileFilterBtn {
+    width: 100%;
+  }
 }

src/pages/Products/Products.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import { AppstoreOutlined, FilterOutlined } from "@ant-design/icons";
 import styles from "./Products.module.css";
 import SidebarCategories from "../../features/catalog/SidebarCategories";
 import CategoryCards from "../../features/catalog/CategoryCards";
@@ -7,12 +8,10 @@ import ProductGrid from "../../features/catalog/ProductGrid";
 import Pagination from "../../features/catalog/Pagination";
 import { useAppSelector } from "../../app/hooks";
 import SEO from "../../shared/ui/SEO";
-import { useState } from "react";
 
 const ProductsPage: React.FC = () => {
   const { selectedCategoryId, items } = useAppSelector((s) => s.categories);
   const category = items.find((c) => c.id === selectedCategoryId);
-
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -26,25 +25,47 @@ const ProductsPage: React.FC = () => {
         }
       />
 
+      <main className={styles.wrapper}>
+        <section className={styles.hero}>
+          <div>
+            <span className={styles.kicker}>Каталог продукции</span>
+            <h1>Подберите продукцию для инженерных и строительных задач</h1>
+            <p>
+              Выберите категорию, уточните параметры и перейдите к карточке
+              товара, чтобы посмотреть характеристики.
+            </p>
+          </div>
 
+          <div className={styles.heroCard}>
+            <AppstoreOutlined />
+            <strong>{items.length || "Все"} категорий</strong>
+            <span>Продукция, комплектующие и позиции для поставок</span>
+          </div>
+        </section>
 
-      <div className={styles.wrapper}>
         <div className={styles.container}>
           <aside className={`${styles.sidebar} ${isOpen ? styles.sidebarOpen : ""}`}>
             <button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
-              ✕
+              Закрыть
             </button>
             <SidebarCategories />
             {selectedCategoryId && <Filters />}
           </aside>
 
-          <main className={styles.main}>
+          <section className={styles.main}>
             <button
               className={styles.mobileFilterBtn}
               onClick={() => setIsOpen(true)}
             >
+              <FilterOutlined />
               Фильтры и категории
             </button>
+
+            <div className={styles.sectionHead}>
+              <span>{selectedCategoryId ? "Выбранная категория" : "Категории"}</span>
+              <h2>{category?.name || "Вся продукция"}</h2>
+            </div>
+
             {!selectedCategoryId ? (
               <CategoryCards />
             ) : (
@@ -53,9 +74,9 @@ const ProductsPage: React.FC = () => {
                 <Pagination categoryId={selectedCategoryId} />
               </div>
             )}
+          </section>
+        </div>
       </main>
-        </div>
-      </div>
     </>
   );
 };