исправил импорты файлов со стилями

front/src/api/client.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-export const API_BASE = g;/* process.env.REACT_APP_API_BASE || "";*/ 
+export const API_BASE =  "";
 const client = axios.create({
   baseURL: API_BASE,
   headers: { "Content-Type": "application/json" },

front/src/features/catalog/Catalog.module.css

@@ -4,9 +4,9 @@
   gap: 40px;
 }
 
-.sidebar {
+/*.sidebar {
   width: 260px;
-}
+}*/
 
 .productsSection {
   flex: 1;
@@ -54,6 +54,43 @@
   color: #ffcc00;
 }
 
+/*SidebarCategories*/
+.sidebar { width: 260px; padding: 20px 0; }
+.title { font-weight:700; font-size:14px; margin-bottom:16px; }
+.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; }
+/*SidebarCategories*/
+
+/*Pagination*/
+.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;}
+.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+.pages{ display:flex; gap:8px;}
+.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+.active{ background:#ffd400; font-weight:700; border-color:#ffd400;}
+button:disabled{ opacity:.5; cursor:default;}
+/*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; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .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:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
+@media(max-width:600px){ .grid{grid-template-columns:1fr} }
+
 @media (max-width: 900px) {
   .catalogWrapper {
     flex-direction: column;

front/src/features/catalog/CategoriesGrid.tsx

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

front/src/features/catalog/CategoryCards.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./CategoryCards.module.css";
+import styles from "./Catalog.module.css";
 import { useAppSelector } from "../../app/hooks";
 
 interface Props { 

front/src/features/catalog/CategoryFilters.tsx

@@ -1,6 +1,6 @@
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
 import { setSelectedCategory } from "./categoriesSlice";
-import styles from "./CategoriesSidebar.module.css";
+import styles from "./Catalog.module.css";
 import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
 import { useState } from "react";
 
@@ -19,7 +19,7 @@ export const CategoryFilters = () => {
 
   if (!cat) return null;
   return (
-    <div className={styles.wrap}>
+    <div className={styles.filtersWrap}>
       <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
       <div className={styles.blocks}>
         {cat.atributes.map(attr => (

front/src/features/catalog/Pagination.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Pagination.module.css";
+import styles from "./Catalog.module.css";
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
 import { setPage, fetchProductsByCategory } from "./productsSlice";
 

front/src/features/catalog/SidebarCategories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import styles from "./SidebarCategories.module.css";
+import styles from "./Catalog.module.css";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
 import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";

front/src/pages/Products/Products.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./ProductsPage.module.css";
+import styles from "./Products.module.css";
 import SidebarCategories from "../../features/catalog/SidebarCategories";
 import CategoryCards from "../../features/catalog/CategoryCards";
 import Filters from "../../features/catalog/CategoryFilters";