Added titles to pages

package.json

@@ -11,6 +11,7 @@
     "mockman-js": "^1.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-icons": "^4.8.0",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",

src/App.jsx

@@ -3,14 +3,17 @@ import "react-toastify/dist/ReactToastify.css";
 import { Index as Route } from "./routes/index";
 import "./custom.styles.css";
 import { ToastContainer } from "react-toastify";
+import { HelmetProvider } from "react-helmet-async";
 
 const App = () => {
+  const helmetContext = {};
   return (
     <>
-      <ToastContainer hideProgressBar theme="dark" autoClose={2000} />
-      <Route />
+      <HelmetProvider context={helmetContext}>
+        <ToastContainer hideProgressBar theme="dark" autoClose={2000} />
+        <Route />
+      </HelmetProvider>
     </>
   );
 };
-
 export default App;

src/pages/Cart.jsx

@@ -4,15 +4,20 @@ import { useCartContext } from "../contexts";
 import { CartItemCard } from "../components";
 import CartTotalCard from "../components/cart/CartTotalCard";
 import { useNavigate } from "react-router";
+import { Helmet } from "react-helmet-async";
 
 const Cart = () => {
   const { cart } = useCartContext();
   const navigate = useNavigate();
 
   return (
     <div className="py-2 ">
+      <Helmet>
+        <title>Cart | eyesome</title>
+        <meta name="description" content="Login page eyesome" />
+      </Helmet>
       {cart.length > 0 && (
-        <h1 className="text-2xl font-bold p-3 ">Bag({cart.length})</h1>
+        <h1 className="text-2xl font-bold p-3 ">Bag({cart.length})</h1> 
       )}
       {cart.length ? (
         <div className="md:grid md:grid-cols-3 gap-5">

src/pages/Checkout.jsx

@@ -4,6 +4,7 @@ import Address from "../components/address/Address";
 import { useLocation, useNavigate } from "react-router";
 import Modal from "../components/checkout/Modal";
 import { useCartContext } from "../contexts";
+import { Helmet } from "react-helmet-async";
 
 const Checkout = () => {
   const navigate = useNavigate();
@@ -20,6 +21,10 @@ const Checkout = () => {
 
   return (
     <>
+      <Helmet>
+        <title>Checkout | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <div className="md:min-h-[80vh] flex justify-center items-center py-3">
         <main className="grid md:grid-cols-2 gap-10 w-full">
           <Modal

src/pages/ErrorPage.jsx

@@ -1,9 +1,14 @@
 import React from "react";
 import errorImage from "../assets/404-error.gif";
+import { Helmet } from "react-helmet-async";
 
 const ErrorPage = () => {
   return (
     <div className="h-[60vh] w-full flex flex-col items-center justify-center ">
+      <Helmet>
+        <title>Error 404 | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <img
         src={errorImage}
         alt="error-image"
@@ -15,5 +20,4 @@ const ErrorPage = () => {
     </div>
   );
 };
-
 export default ErrorPage;

src/pages/Home.jsx

@@ -1,10 +1,15 @@
 import { useRef } from "react";
 import { Banner, CategoryList, Footer, Trending } from "../components";
+import { Helmet } from "react-helmet-async";
 
 const Home = () => {
   const catRef = useRef(null);
   return (
     <>
+     <Helmet>
+        <title>Home | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <Banner catRef={catRef} />
       <Trending />
       <CategoryList catRef={catRef} />

src/pages/Login.jsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import bannerHero from "../assets/bannerHero.jpg";
 import { Logo } from "../components";
 import { useAuthContext } from "../contexts";
+import { Helmet } from "react-helmet-async";
 
 const Login = () => {
   const { loginHandler, token, loggingIn } = useAuthContext();
@@ -33,6 +34,10 @@ const Login = () => {
   };
   return (
     <main className="grid  grid-rows-1 lg:grid-cols-2 w-full  h-screen m-auto">
+      <Helmet>
+        <title>Login | eyesome</title>
+        <meta name="description" content="Login page eyesome" />
+      </Helmet>
       <section className=" hidden lg:block max-h-screen  rounded-lg">
         <img src={bannerHero} alt="" className="w-full h-full object-cover" />
       </section>

src/pages/Orders.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import orderSuccess from "../assets/success-order.gif";
 import { useLocation, useNavigate } from "react-router";
+import { Helmet } from "react-helmet-async";
 
 const Orders = () => {
   const location = useLocation();
@@ -16,6 +17,10 @@ const Orders = () => {
   }, []);
   return (
     <div className="min-h-[80vh] flex justify-center items-center py-3 ">
+     <Helmet>
+        <title>Orders | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <div className="bg-white h-1/2 w-96 m-auto  rounded-md flex flex-col items-center justify-center p-5 modalShadow">
         <div className=" w-64  flex items-center justify-center ">
           <img

src/pages/ProductDetails.jsx

@@ -12,6 +12,7 @@ import {
 import { getProductByIdService } from "../api/apiServices";
 import { StarRating } from "../components";
 import { notify } from "../utils/utils";
+import { Helmet } from "react-helmet-async";
 
 const ProductDetails = () => {
   const navigate = useNavigate();
@@ -40,6 +41,10 @@ const ProductDetails = () => {
 
   return (
     <div className="md:min-h-[80vh] flex justify-center items-center pt-5 sm:pt-3 pb-2 relative">
+      <Helmet>
+        <title>Product Details | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <main className="grid grid-rows-1 sm:grid-cols-2 gap-2 sm:gap-10 ">
         <section className="relative p-7 bg-black/[0.075]  flex items-center justify-center rounded-lg">
           <img

src/pages/Profile.jsx

@@ -4,6 +4,7 @@ import { useAuthContext, useProductsContext } from "../contexts";
 
 import { AddressCard, AddressForm } from "../components";
 import Address from "../components/address/Address";
+import { Helmet } from "react-helmet-async";
 
 const Profile = () => {
   const userDetails = localStorage.getItem("userInfo")
@@ -26,6 +27,10 @@ const Profile = () => {
 
   return (
     <div className="min-h-[80vh] min-w-md max-w-lg m-auto mt-10">
+     <Helmet>
+        <title>Profile | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
       <section className="h-full p-7 rounded-md shadow-sm bg-white/[0.7] flex flex-col gap-6 w-full">
         <div className="flex">
           <button

src/pages/Signup.jsx

@@ -5,6 +5,7 @@ import bannerHero from "../assets/bannerHero.jpg";
 import { Logo } from "../components";
 import { useAuthContext } from "../contexts";
 import { useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
 
 const Signup = () => {
   const { signupHandler, signingUp, isAuthenticated } = useAuthContext();
@@ -47,6 +48,11 @@ const Signup = () => {
     !confirmPassword;
   return (
     <main className="grid  grid-rows-1 md:grid-cols-2 w-full  h-screen m-auto ">
+      <Helmet>
+        <title>Signup | eyesome</title>
+        <meta name="description" content="" />
+      </Helmet>
+
       <section className=" hidden md:block max-h-screen  rounded-lg">
         <img src={bannerHero} alt="" className="w-full h-full object-cover" />
       </section>

src/pages/Wishlist.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import SingleProduct from "../components/products/SingleProduct";
 import { useWishlistContext } from "../contexts";
 import emptyWish from "../assets/empty-wish.gif";
+import { Helmet } from "react-helmet-async";
 
 const Wishlist = () => {
   const { wishlist } = useWishlistContext();
@@ -10,7 +11,10 @@ const Wishlist = () => {
     <div>
       {wishlist.length ? (
         <>
-          {" "}
+          <Helmet>
+            <title>Wishlist | eyesome</title>
+            <meta name="description" content="" />
+          </Helmet>
           <h1 className="text-2xl py-6 font-semibold text-gray-800">
             Wishlist
           </h1>