title helmate use

package.json

@@ -10,17 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "aos": "^2.3.4",
     "firebase": "^10.10.0",
+    "leaflet": "^1.9.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.51.3",
+    "react-leaflet": "^4.2.1",
     "react-loading": "^2.0.3",
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "swiper": "^11.1.1"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",

src/Error/Error.jsx

@@ -1,8 +1,10 @@
 import { Link } from "react-router-dom";
+import PageTitle from "../PageTitle/PageTitle";
 
 const Error = () => {
   return (
     <div>
+      <PageTitle title="Error"></PageTitle>
       <section className="flex items-center h-full lg:h-[720px] sm:p-16 bg-gray-300 text-black mt-20">
         <div className="container flex flex-col items-center justify-center px-5 mx-auto my-8 space-y-8 text-center sm:max-w-md">
           <svg

src/Home/Home.jsx

@@ -1,9 +1,11 @@
+import PageTitle from "../PageTitle/PageTitle";
 import Banner from "./Banner";
 import Card from "./Card";
 
 const Home = () => {
     return (
         <div>
+            <PageTitle title="Home"></PageTitle>
             <div className="mt-10">
                 <Banner></Banner>
             </div>

src/Login/Login.jsx

@@ -4,6 +4,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { AuthContext } from "../providers/AuthProvider";
 import { toast } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
+import PageTitle from "../PageTitle/PageTitle";
 
 const Login = () => {
   const { signIn, googleLogin, githubLogin } = useContext(AuthContext);
@@ -42,6 +43,7 @@ const Login = () => {
 
   return (
     <div  className="md:w-3/4 lg:w-1/2 border rounded-2xl p-2 mx-auto my-10">
+      <PageTitle title="Login"></PageTitle>
       <form
         onSubmit={handleLogin}>
         <p className="text-3xl text-center mb-4 font-bold text-primary underline">

src/PageTitle/PageTitle.jsx

@@ -0,0 +1,13 @@
+/* eslint-disable react/prop-types */
+import {Helmet} from "react-helmet";
+const PageTitle = ({title}) => {
+    return (
+        <div>
+            <Helmet>
+            <title>{title}</title>
+            </Helmet>
+        </div>
+    );
+};
+
+export default PageTitle;

src/Register/Register.jsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { AuthContext } from "../providers/AuthProvider";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import PageTitle from "../PageTitle/PageTitle";
 
 const Register = () => {
   const {registerUser,  updateProfileInfo} = useContext(AuthContext);
@@ -46,7 +47,7 @@ const Register = () => {
      onSubmit={handleRegister}
       className=" md:w-3/4 lg:w-1/2 border rounded-2xl p-4 mx-auto my-10"
     >
-       {/* <PageTitle title="pPortal-register"></PageTitle> */}
+       <PageTitle title="Register"></PageTitle>
       <p className="text-3xl text-center mb-4 font-bold text-primary underline">
         Please Register
       </p>

src/UpdateProfile/UpdateProfile.jsx

@@ -1,5 +1,6 @@
 import { useContext, useState } from "react";
 import { AuthContext } from "../providers/AuthProvider";
+import PageTitle from "../PageTitle/PageTitle";
 
 const UpdateProfile = () => {
     const { user, updateProfileInfo } = useContext(AuthContext);
@@ -26,6 +27,7 @@ const UpdateProfile = () => {
 
     return (
         <div className="border-2 border-violet-700 rounded-xl mt-5 lg:mt-10 p-5 lg:p-10 w-full lg:w-96 mx-auto">
+            <PageTitle title="UpdateProfile"></PageTitle>
             <form className="flex gap-5 flex-col justify-center items-center" onSubmit={handleUpdateProfile}>
                 <h1 className="font-bold text-4xl underline text-primary">My Profile</h1>
                 <div>

src/UserProfile/Profile.jsx

@@ -1,5 +1,6 @@
 import { useContext } from "react"; 
 import { AuthContext } from "../providers/AuthProvider"; 
+import PageTitle from "../PageTitle/PageTitle";
 
 const Profile = () => {
   const { user, userProfile } = useContext(AuthContext); 
@@ -12,6 +13,7 @@ const Profile = () => {
 
   return (
     <div className="container mx-auto mt-10 ">
+      <PageTitle title="Profile"></PageTitle>
       <form className="flex gap-5 flex-col justify-center items-center" onSubmit={handleUserProfile}>
         <div className="card w-3/4 lg:w-96  h-full shadow-xl bg-cyan-500 hover:bg-cyan-600">
           <figure className="px-10 pt-10">