добавил seo component исправил цвет шрифта

package.json

@@ -19,6 +19,7 @@
     "framer-motion": "^12.23.24",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-helmet-async": "^3.0.0",
     "react-hook-form": "^7.66.0",
     "react-input-mask": "^2.0.4",
     "react-redux": "^9.2.0",
@@ -40,6 +41,8 @@
     "globals": "^16.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "vite-plugin-prerender": "^1.0.8",
+    "vite-plugin-sitemap": "^0.8.2"
   }
 }

src/index.css

@@ -4,7 +4,7 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  
   background-color: #242424;
 
   font-synthesis: none;

src/main.tsx

@@ -5,12 +5,15 @@ import { BrowserRouter } from 'react-router'
 import AppRoutes from './app/routes.tsx'
 import { Provider } from "react-redux";
 import { store } from "./app/store";
+import { HelmetProvider } from 'react-helmet-async'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>
       <BrowserRouter>
+        <HelmetProvider>
           <AppRoutes />
+        </HelmetProvider>
       </BrowserRouter>
     </Provider>
   </StrictMode>,

src/pages/Products/Products.tsx

@@ -6,36 +6,30 @@ import Filters from "../../features/catalog/CategoryFilters";
 import ProductGrid from "../../features/catalog/ProductGrid";
 import Pagination from "../../features/catalog/Pagination";
 import { useAppSelector } from "../../app/hooks";
+import SEO from "../../shared/ui/SEO";
 
 const ProductsPage: React.FC = () => {
-  const { selectedCategoryId } = useAppSelector(s => s.categories);
+  const { selectedCategoryId, items } = useAppSelector(s => s.categories);
+  const category = items.find(c => c.id === selectedCategoryId);
 
   return (
-    /*<div className={styles.wrapper}>
-      <SidebarCategories />
-      <div className={styles.content}>
-        {!selectedCategoryId ? (
-          <CategoryCards/>
-        ) : (
     <>
-            <div className={styles.leftControls}>
-              <Filters />
-            </div>
-
-            <div className={styles.productsArea}>
-              <ProductGrid />
-              <Pagination categoryId={selectedCategoryId} />
-            </div>
-          </>
-        )}
-      </div>
-    </div>*/
+      <SEO
+          title={
+            category
+              ? `${category.name} купить`
+              : "Каталог продукции"
+          }
+          description={
+            category
+              ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
+              : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
+          }
+        />
       <div className={styles.wrapper}>
         <div className={styles.container}>
           <aside className={styles.sidebar}>
             <SidebarCategories />
-
-          {/* 👇 ВОТ СЮДА ПЕРЕНЕСИ */}
             {selectedCategoryId && <Filters />}
           </aside>
 
@@ -51,6 +45,7 @@ const ProductsPage: React.FC = () => {
           </main>
         </div>
       </div>
+    </>
   );
 };
 

src/shared/ui/SEO.tsx

@@ -0,0 +1,21 @@
+import { Helmet } from "react-helmet-async";
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const SEO: React.FC<Props> = ({ title, description }) => {
+  return (
+    <Helmet>
+      <title>{title}</title>
+
+      <meta name="description" content={description} />
+
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+    </Helmet>
+  );
+};
+
+export default SEO;