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

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>
-        <AppRoutes />
+        <HelmetProvider>
+          <AppRoutes />
+        </HelmetProvider>
       </BrowserRouter>
     </Provider>
   </StrictMode>,

src/pages/Products/Products.tsx

@@ -6,51 +6,46 @@ 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>
+    <>
+      <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>
 
-            <div className={styles.productsArea}>
-              <ProductGrid />
-              <Pagination categoryId={selectedCategoryId} />
-            </div>
-          </>
-        )}
+          <main className={styles.main}>
+            {!selectedCategoryId ? (
+              <CategoryCards />
+            ) : (
+              <div className={styles.products}>
+                <ProductGrid />
+                <Pagination categoryId={selectedCategoryId} />
+              </div>
+            )}
+          </main>
+        </div>
       </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/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;