feat(): Added ci restruct project and add dockerfile

src/pages/About/About.tsx

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

src/pages/ItemPage/ItemPage.module.css

@@ -0,0 +1,93 @@
+.page {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.top {
+  background: #000;
+  padding: 15px 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;
+}
+
+.right {
+  flex: 1;
+  background: linear-gradient(
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0.7)
+    ),
+    url("/bg.jpg");
+  color: white;
+  padding: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.breadcrumbs {
+  color: #f5c400;
+  margin-bottom: 20px;
+}
+
+.download {
+  margin-top: 30px;
+  background: #f5c400;
+  border: none;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.tabs {
+  display: flex;
+  border-top: 1px solid #ddd;
+}
+
+.tabs button {
+  flex: 1;
+  padding: 20px;
+  border: none;
+  background: #eee;
+  cursor: pointer;
+}
+
+.active {
+  background: white;
+  font-weight: bold;
+}
+
+.content {
+  padding: 40px;
+  background: white;
+}
+
+.attrRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}

src/pages/ItemPage/ItemPage.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchProductById } from "../../features/catalog/productsSlice";
+import styles from "./ProductPage.module.css";
+import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories";
+
+const ItemPage = () => {
+    const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { items, loading } = useAppSelector((state) => state.products);
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+
+  const [activeTab, setActiveTab] = useState<"desc" | "chars">("desc");
+
+  useEffect(() => {
+    if (id) dispatch(fetchProductById(id));
+  }, [id]);
+
+  const product = items.find((item) => item.id === Number(id));
+  const category = cats.find((cat) => cat.id === Number(selectedCategoryId))
+
+  if ((loading || !product)) return <div>Загрузка...</div>;
+  if(!category) return <div>Загрузка...</div>;
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.top}>
+        <button className={styles.back} onClick={() => navigate(-1)}>
+          ← НАЗАД В КАТАЛОГ
+        </button>
+      </div>
+
+      <div className={styles.hero}>
+        <div className={styles.left}>
+          <img src={product.image} alt={product.name} />
+        </div>
+
+        <div className={styles.right}>
+          <div className={styles.breadcrumbs}>
+            ГЛАВНАЯ / {category?.name} / {product.name}
+          </div>
+
+          <h1>{product.name}</h1>
+
+          <p className={styles.short}>{product.description}</p>
+
+          <button className={styles.download}>
+            СКАЧАТЬ ПРАЙС-ЛИСТ
+          </button>
+        </div>
+      </div>
+
+      <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>
+            <p>{product.description}</p>
+          </div>
+        )}
+
+        {activeTab === "chars" && (
+          <div>
+            <h2>ХАРАКТЕРИСТИКИ</h2>
+            {category.atributes?.map((attr: CategoryAtributes) => (
+              <div key={attr.id} className={styles.attrRow}>
+                <span>{attr.name}</span>
+                {attr.vals?.map((val: CategoryAtrVals) => (
+                  <div key={val.id}>
+                    <span>{val.val}</span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ItemPage;

src/pages/Layout/Layout.module.css

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

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;

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;
+}

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;

src/pages/Products/Products.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styles from "./Products.module.css";
+import SidebarCategories from "../../features/catalog/SidebarCategories";
+import CategoryCards from "../../features/catalog/CategoryCards";
+import Filters from "../../features/catalog/CategoryFilters";
+import ProductGrid from "../../features/catalog/ProductGrid";
+import Pagination from "../../features/catalog/Pagination";
+import { useAppSelector } from "../../app/hooks";
+
+const ProductsPage: React.FC = () => {
+  const { selectedCategoryId } = useAppSelector(s => s.categories);
+
+  return (
+    <div className={styles.wrapper}>
+      <SidebarCategories />
+      <div className={styles.content}>
+        {!selectedCategoryId ? (
+          <CategoryCards onSelect={(id) => {}} />
+        ) : (
+          <>
+            <div className={styles.leftControls}>
+              <Filters />
+            </div>
+
+            <div className={styles.productsArea}>
+              <ProductGrid />
+              <Pagination categoryId={selectedCategoryId} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductsPage;