добавил ветку main-page

front/src/pages/About/About.tsx

@@ -0,0 +1,9 @@
+const About = () =>{
+    return(
+        <>
+            <p>gggggggg</p>
+        </>
+    )
+}
+
+export default About;

front/src/pages/Layout/Layout.module.css

@@ -0,0 +1,4 @@
+.content{
+    background-color: white;
+    margin: 0;
+}

front/src/pages/Layout/Layout.tsx

@@ -0,0 +1,24 @@
+import Header from "../../components/Header/Header";
+import { Outlet } from "react-router-dom";
+import styles from './Layout.module.css'
+import Footer from "../../components/Footer/Footer";
+
+const Layout = () =>{
+
+    return(
+        /*token ?*/ <div className="dashboard">
+            <div className="content-wrapper">
+                <Header />
+                <main className={styles.content}>
+                    <Outlet />
+                </main>
+                <footer>
+                    <Footer/>
+                </footer>
+            </div>
+        </div> /*: <Navigate to="/login" replace />*/
+
+    );
+};
+
+export default Layout;

front/src/pages/Main/Main.module.css

@@ -0,0 +1,13 @@
+.container{
+    width: 80%;
+    margin: 0;
+    align-items: center;
+}
+
+.main{
+    margin: 0;
+    align-items: center;
+    display: flex;
+  align-items: center;
+  justify-content: center;
+}

front/src/pages/Main/Main.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Row, Col } from 'antd';
+import { RocketOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import styles from './Main.module.css'
+import BannerSlider from '../../components/Banner/Banner';
+import CategoriesGrid from '../../components/Categories/Categories';
+import ProductionBanner from '../../components/ContactProduct/ContactProduct';
+import QuestionsBlock from '../../components/QuestionsBlock/QuestionsBlock';
+
+const Main: React.FC = () =>{
+    return (
+    <>
+        <BannerSlider/>
+        <main className={styles.main}>
+            <div className={styles.container}>
+                <CategoriesGrid/>
+                {<ProductionBanner/>}
+                <QuestionsBlock/>
+            </div>
+        </main>
+    </>
+    
+  );
+}
+
+export default Main;

front/src/pages/Products/Products.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import type { RootState } from "../../app/store";
+import { getCategoryProducts } from "../../features/catalog/catalogSlice";
+import CatalogSidebar from "../../features/catalog/catalogeSidebar"
+import ProductGrid from "../../features/catalog/ProductGrid";
+import styles from "../../features/catalog/catalog.module.css";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+
+const CatalogPage: React.FC = () => {
+  const { category } = useParams<{ category: string }>();
+  const dispatch = useAppDispatch()
+  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);
+
+  useEffect(() => {
+    if (category) dispatch(getCategoryProducts(category));
+  }, [category]);
+
+  return (
+    <div className={styles.catalogWrapper}>
+      <CatalogSidebar />
+      <div className={styles.productsSection}>
+        {loading && <p>Загрузка...</p>}
+        {error && <p>Ошибка: {error}</p>}
+        <ProductGrid products={filtered} />
+      </div>
+    </div>
+  );
+};
+
+export default CatalogPage;