feat : add react-helmet on pages

src/App.tsx

@@ -16,39 +16,42 @@ import Login from "./pages/login";
 import Profile from "./pages/profile";
 import { Toaster } from "react-hot-toast";
 import { isAuthenticated } from "./utils/auth";
+import { HelmetProvider } from "react-helmet-async";
 
 const App = () => {
   return (
     <Router basename="/">
-      <Toaster
-        toastOptions={{
-          className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
-        }}
-      />
-      <ProgressBar />
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<Shop />} />
-          <Route path="tutorial" element={<Tutorial />} />
-          <Route path="rule" element={<Rule />} />
-          <Route path="about" element={<About />} />
-          <Route path="profile" element={<PrivateRoute />}>
-            <Route index element={<Profile />} />
+      <HelmetProvider>
+        <Toaster
+          toastOptions={{
+            className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
+          }}
+        />
+        <ProgressBar />
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<Shop />} />
+            <Route path="tutorial" element={<Tutorial />} />
+            <Route path="rule" element={<Rule />} />
+            <Route path="about" element={<About />} />
+            <Route path="profile" element={<PrivateRoute />}>
+              <Route index element={<Profile />} />
+            </Route>
           </Route>
-        </Route>
-        <Route
-          path="login"
-          element={
-            isAuthenticated() ? (
-              <Navigate to="/" replace={true} />
-            ) : (
-              <AuthLayout />
-            )
-          }
-        >
-          <Route index element={<Login />} />
-        </Route>
-      </Routes>
+          <Route
+            path="login"
+            element={
+              isAuthenticated() ? (
+                <Navigate to="/" replace={true} />
+              ) : (
+                <AuthLayout />
+              )
+            }
+          >
+            <Route index element={<Login />} />
+          </Route>
+        </Routes>
+      </HelmetProvider>
     </Router>
   );
 };

src/layout/index.tsx

@@ -2,10 +2,23 @@ import { Outlet } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
+import { Helmet } from 'react-helmet-async';
 
 const Layout = () => {
   return (
     <>
+      <Helmet>
+        <title>پرشین پینگ | Persian Ping</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ"
+        />
+      </Helmet>
+
       <Particle />
       <div className={`relative bg-noisy w-full min-h-screen`}>
         <div className="relative max-w-[1400px] mx-auto h-full flex flex-col justify-between">

src/pages/about/index.tsx

@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Info from "./section/Info";
 
 const About = () => {
   return (
-    <div className="relative w-full h-full py-2">
-      <div className="relative w-full h-full glass px-4 py-2">
-        <Info />
+    <>
+      <Helmet>
+        <title>درباره ما</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , درباره ما"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Info />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/rule/index.tsx

@@ -1,12 +1,26 @@
+import { Helmet } from "react-helmet-async";
 import Rules from "./section/Rules";
 
 const Rule = () => {
   return (
-    <div className="relative w-full h-full py-2">
-      <div className="relative w-full h-full glass px-4 py-2">
-        <Rules />
-      </div>
-    </div>
+    <>
+      <Helmet>
+        <title>قوانین</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , قوانین"
+        />
+      </Helmet>
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Rules />
+        </div>
+      </div>{" "}
+    </>
   );
 };
 

src/pages/shop/index.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from "react-helmet-async";
 import BestQuality from "./section/bestQuality/BestQuality";
 import FastSell from "./section/fastSell/FastSell";
 import Intro from "./section/intro/Intro";
@@ -6,15 +7,29 @@ import ProductList from "./section/productList/ProductList";
 
 const Shop = () => {
   return (
-    <div className="relative w-full h-full py-2">
-      <div className="relative w-full h-full glass px-4 py-2">
-        <Intro />
-        <FastSell />
-        <NowSell />
-        <ProductList />
-        <BestQuality />
+    <>
+      <Helmet>
+        <title>فروشگاه</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و فروشگاه"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Intro />
+          <FastSell />
+          <NowSell />
+          <ProductList />
+          <BestQuality />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/tutorial/index.tsx

@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Tutorials from "./section/Tutorials";
 
 const Tutorial = () => {
   return (
-    <div className="relative w-full h-full py-2">
-      <div className="relative w-full h-full glass px-4 py-2">
-        <Tutorials />
+    <>
+      <Helmet>
+        <title>اموزش</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و آموزش"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Tutorials />
+        </div>
       </div>
-    </div>
+    </>
   );
 };