изменения

src/components/Button/Button.module.css

@@ -13,7 +13,7 @@ font-size: 15px;
 
 
 .button:hover {
-background: #ffdf3e;
+background: #ffe667;
 }
 
 

src/components/Categories/Categories.tsx

@@ -22,12 +22,12 @@ subtitle: "для ВНУТРЕННЕЙ канализации",
 image: category_interna2,
 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: 2, title: "КОЛЕНА И ОТВОДЫ", 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: 2,
 title: "Труба ПВХ",
@@ -35,8 +35,8 @@ subtitle: "для НАРУЖНОЙ канализации",
 highlight: true,
 image: category_internal1,
 },
-/*{ id: 9, title: "СВЯЗКИ И СКРЕПКИ ДЛЯ ЛЫЖ", image: "/images/cat-straps.jpg" },
-{ id: 10, title: "ЧЕХЛЫ, СУМКИ", image: "/images/cat-bags.jpg" },*/
+
+
 ];
 
 

src/components/Footer/Footer.module.css

@@ -1,7 +1,7 @@
 .footer {
 color: #bfbfbf;
 background: #000;
-padding: 60px 0;
+padding: 40px 0;
 }
 
 
@@ -17,13 +17,14 @@ justify-content: space-between;
 .left {
 display: flex;
 flex-direction: column;
-gap: 25px;
+gap: 15px;
 }
 
 
 .logo {
-width: 160px;
+width: 60px;
 opacity: 0.9;
+border-radius: 100%;
 }
 
 

src/components/Footer/Footer.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import styles from "./Footer.module.css";
 import { NavLink } from "react-router-dom";
+import blackLogo from '../../assets/images/BlackLogo.jpg'
 
 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>
+<img src={blackLogo} alt="logo" className={styles.logo} />
+<span className={styles.copy}>РК Plastic. 2015-2026 ©</span>
 </div>
 
 

src/components/Header/Header.tsx

@@ -10,7 +10,7 @@ const Header = () =>{
                 <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>
+                        <a href="" className={styles.phoneBlock}>+7 910 121 09 62</a>
                     </div>
                 </div>
                 <div className={styles.headerNav}>

src/components/QuestionsBlock/QuestionsBlock.tsx

@@ -28,7 +28,7 @@ const QuestionsBlock: React.FC = () => {
         <div className={styles.right}>
           <div className={styles.phoneBlock}>
             <PhoneOutlined className={styles.phoneIcon} />
-            <span className={styles.phoneNumber}>8 800 707 25 58</span>
+            <span className={styles.phoneNumber}>+7 910 121 09 62</span>
 
             <div className={styles.phoneInfo}>
               Звоните с понедельника по пятницу <br /> c 09:00 до 18:00 (по Москве)

src/components/Table/ProducTable.tsx

@@ -0,0 +1,40 @@
+import styles from "./Table.module.css";
+
+interface Props {
+  attributes: Record<string, any>;
+}
+
+const formatKey = (key: string) =>
+  key
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+
+const ProductAttributes: React.FC<Props> = ({ attributes }) => {
+  const rows = Object.entries(attributes).filter(
+    ([key, value]) =>
+      key !== "categoryId" &&
+      value !== null &&
+      value !== undefined &&
+      String(value).trim() !== ""
+  );
+
+  return (
+    <div className={styles.wrapper}>
+      {rows.map(([key, value]) => (
+        <div key={`${key}-${value}`} className={styles.row}>
+          <span className={styles.name}>
+            {formatKey(key)}
+          </span>
+
+          <span className={styles.dots} />
+
+          <span className={styles.value}>
+            {value}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ProductAttributes;

src/components/Table/Table.module.css

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

src/features/MainPage/PhoneRequest.tsx

@@ -60,7 +60,7 @@ const PhoneRequest: React.FC<Props> = ({ onSend }) => {
         await onSend(phone);
       } else {
         
-        await client.post("/api/contact/send-phone/", { phone });
+        await client.post("/email/", { phone });
       }
 
       setSuccess(true);

src/features/catalog/Catalog.module.css

@@ -14,7 +14,7 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   gap: 24px;
 }
 
@@ -25,6 +25,7 @@
   position: relative;
   transition: all 0.3s;
   text-align: center;
+  
 }
 
 .card:hover {
@@ -60,7 +61,7 @@
 .list { list-style:none; padding:0; margin:0; }
 .item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; }
 .item:hover { color:#000; }
-.active { color:#000; font-weight:700; }
+.activeCat { color:#000; font-weight:700; }
 /*SidebarCategories*/
 
 /*Pagination*/

src/features/catalog/CategoriesGrid.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import styles from "./Catalog.module.css";
-import { useAppSelector } from "../../app/hooks";
-
-interface Props { onSelect?: (id:number) => void }
-const CategoryCards: React.FC<Props> = ({ onSelect }) => {
-  const categories = useAppSelector(s => s.categories.items);
-
-  return (
-    <div className={styles.categoryGrid}>
-      {categories.map(c => (
-        <div key={c.id} className={styles.categoryGard} onClick={() => onSelect?.(c.id)}>
-          {c.image ? <img src={c.image} alt={c.name} className={styles.categoryImg} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.categoryImg} />}
-          <div className={styles.categoryName}>{c.name}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
-export default CategoryCards;

src/features/catalog/ProductCard.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import type { Product } from "../../types/product";
 import styles from "./Catalog.module.css";
 import { useNavigate } from "react-router-dom";
+import { setSelectedProducts } from "./productsSlice";
 
 interface Props {
     product: Product;
@@ -10,12 +11,17 @@ interface Props {
 const ProductCard: React.FC<Props> = ({ product }) => {
   const navigate = useNavigate();
 
+  const onSelect = (prodId: number) => {
+    navigate(`/product/${product.id}`);
+    setSelectedProducts(prodId);
+  }
+
   return (
     <div 
       className={styles.card}
-      onClick={() => navigate(`/product/${product.id}`)}
+      onClick={() => onSelect(product.id)}
     >
-      <img src={product.image} alt={product.name} />
+      <img src={product.images[0]} alt={product.name} />
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>
     </div>

src/features/catalog/SidebarCategories.tsx

@@ -25,7 +25,7 @@ const SidebarCategories: React.FC = () => {
                 <ul className={styles.list}>
                 {items.map(cat => (
                     <li key={cat.id}
-                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.activeCat : ""}`}
                         onClick={() => onClick(cat.id)}>
                     {cat.name}
                     </li>

src/features/catalog/productsSlice.ts

@@ -54,6 +54,7 @@ interface ProductsState {
   loading: boolean;
   error: string | null;
   filtersApplied: Record<string, (string|number)[]>;
+  selectedProductId: number | null;
 }
 
 const initialState: ProductsState = {
@@ -64,12 +65,16 @@ const initialState: ProductsState = {
   loading: false,
   error: null,
   filtersApplied: {},
+  selectedProductId: null
 };
 
 const slice = createSlice({
   name: "products",
   initialState,
   reducers: {
+    setSelectedProducts(state, action: PayloadAction<number>){
+      state.selectedProductId = action.payload;
+    },
     setPage(state, action: PayloadAction<number>) { 
       state.page = action.payload; 
     },
@@ -105,5 +110,5 @@ const slice = createSlice({
   }
 });
 
-export const { setPage, setLimit, setFilters, resetProducts } = slice.actions;
+export const { setPage, setLimit, setFilters, resetProducts, setSelectedProducts } = slice.actions;
 export default slice.reducer;

src/pages/ItemPage/ItemPage.module.css

@@ -6,6 +6,12 @@
 .top {
   background: #000;
   padding: 15px 40px;
+  padding-top: 100px;
+}
+
+.short{
+  margin-top: 30px;
+  margin-bottom: 40px;
 }
 
 .back {
@@ -33,15 +39,20 @@
   max-width: 400px;
 }
 
+.rightContent{
+  padding-right: 100px;
+  
+}
+
 .right {
   flex: 1;
   background: linear-gradient(
-      rgba(0, 0, 0, 0.7),
-      rgba(0, 0, 0, 0.7)
+      rgba(44, 44, 44, 0.9),
+      rgba(44, 44, 44, 0.9)
     ),
-    url("/bg.jpg");
+    url("../../assets/images/otkrytie-novogo-proizvodstva-v-g.Krymsk.jpeg");
   color: white;
-  padding: 80px;
+  padding: 90px;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/pages/ItemPage/ItemPage.tsx

@@ -6,6 +6,8 @@ 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 } from "framer-motion/client";
 
 const ItemPage = () => {
   const { id } = useParams();
@@ -39,10 +41,11 @@ const ItemPage = () => {
 
       <div className={styles.hero}>
         <div className={styles.left}>
-          <img src={product.image} alt={product.name} />
+          <img src={product.images[0]} alt={product.name} />
         </div>
 
         <div className={styles.right}>
+          <div className={styles.rightContent}>
           <div className={styles.breadcrumbs}>
             ГЛАВНАЯ / {category?.name} / {product.name}
           </div>
@@ -54,6 +57,7 @@ const ItemPage = () => {
             label="СКАЧАТЬ ПРАЙС-ЛИСТ"
             onClick={() => setOpen(true)}
           />
+          </div>
         </div>
       </div>
 
@@ -77,13 +81,21 @@ const ItemPage = () => {
           <div>
             <h2>ОПИСАНИЕ</h2>
             <p>{product.description}</p>
+            <p>{product.full_name}</p>
+            {!product.inStock? 
+              (
+                <p>в наличии</p>
+              ) : (
+                <p>нет в наличии</p>
+              )
+            }
           </div>
         )}
 
         {activeTab === "chars" && (
           <div>
             <h2>ХАРАКТЕРИСТИКИ</h2>
-            {category.atributes?.map((attr: CategoryAtributes) => (
+            {/*{product.attributes.map((attr) => (
               <div key={attr.id} className={styles.attrRow}>
                 <span>{attr.name}</span>
                 {attr.vals?.map((val: CategoryAtrVals) => (
@@ -92,7 +104,8 @@ const ItemPage = () => {
                   </div>
                 ))}
               </div>
-            ))}
+            ))}*/}
+            <ProductAttributes attributes={product.attributes}/>
           </div>
         )}
       </div>

src/pages/Layout/Layout.tsx

@@ -8,7 +8,7 @@ const Layout = () =>{
     return(
         /*token ?*/ <div className="dashboard">
             <div className="content-wrapper">
-                <Header />
+                <Header />              
                 <main className={styles.content}>
                     <Outlet />
                 </main>

src/pages/Products/Products.module.css

@@ -0,0 +1,207 @@
+/* ===== ОБЩИЙ ЛЭЙАУТ ===== */
+.wrapper {
+  display: flex;
+    margin: 0;
+    justify-content: center;
+}
+
+.container{
+    display: flex;
+  background: #f3f3f3;
+  min-height: 100vh;
+  font-family: Arial, sans-serif;
+  width: 80%;
+}
+
+/* ===== САЙДБАР ===== */
+.sidebar {
+  width: 280px;
+  background: #fff;
+  padding: 30px 20px;
+  border-right: 1px solid #e0e0e0;
+
+  display: flex;
+  flex-direction: column;
+  padding-top: 70px;
+}
+
+/* ===== ОСНОВНАЯ ЧАСТЬ ===== */
+.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);
+  border-top: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+
+/* ===== КАРТОЧКА ===== */
+.card {
+  background: #fff;
+  border-right: 1px solid #ddd;
+  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;
+}
+
+/* ===== АДАПТИВ ===== */
+@media (max-width: 1200px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+  }
+
+  .catalogLayout {
+    flex-direction: column;
+  }
+
+  .filters {
+    width: 100%;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}

src/pages/Products/Products.tsx

@@ -11,7 +11,7 @@ const ProductsPage: React.FC = () => {
   const { selectedCategoryId } = useAppSelector(s => s.categories);
 
   return (
-    <div className={styles.wrapper}>
+    /*<div className={styles.wrapper}>
       <SidebarCategories />
       <div className={styles.content}>
         {!selectedCategoryId ? (
@@ -29,6 +29,27 @@ const ProductsPage: React.FC = () => {
           </>
         )}
       </div>
+    </div>*/
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <aside className={styles.sidebar}>
+          <SidebarCategories />
+
+          {/* 👇 ВОТ СЮДА ПЕРЕНЕСИ */}
+          {selectedCategoryId && <Filters />}
+        </aside>
+
+        <main className={styles.main}>
+          {!selectedCategoryId ? (
+            <CategoryCards />
+          ) : (
+            <div className={styles.products}>
+              <ProductGrid />
+              <Pagination categoryId={selectedCategoryId} />
+            </div>
+          )}
+        </main>
+      </div>
     </div>
   );
 };

src/types/product.ts

@@ -1,6 +1,12 @@
 export interface Product {
   id: number;
   name: string;
-  image: string;
   description: string;
+  images: string[];
+  inStock: boolean;
+  price: number | null;
+  attributes: Record<string, string | number | null>;
+  categoryId?: number;
+  created_at: string;
+  full_name: string;
 }