navbar footer name change and view property edit

package.json

@@ -18,6 +18,7 @@
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.1.0",

src/Footer/Footer.jsx

@@ -1,3 +1,5 @@
+import { Link } from "react-router-dom";
+
 const Footer = () => {
   return (
     <div className="mx-auto mt-10">
@@ -19,9 +21,9 @@ const Footer = () => {
                   <path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
                 </svg>
               </div>
-              <span className="self-center text-2xl font-semibold">
-                Brand name
-              </span>
+              <Link to={'/'} className="self-center text-2xl font-semibold">
+              RealResort
+              </Link>
             </a>
           </div>
           <div className="grid grid-cols-2 text-sm gap-x-3 gap-y-8 lg:w-2/3 sm:grid-cols-4">

src/Login/Login.jsx

@@ -30,7 +30,7 @@ const Login = () => {
       console.log(result.user);
     } catch (error) {
       console.error(error);
-      toast.error("Invalid email or password"); // Show toast notification for login failure
+      toast.error("Invalid email or password");
     }
   };
   const handleSocialLogin = (provider) => {

src/Navbar/Navbar.jsx

@@ -107,7 +107,7 @@ const Navbar = () => {
             to={"/"}
             className="btn btn-ghost text-lg md:text-2xl lg:text-3xl font-extrabold  bg-clip-text animate-gradient text-green-400"
           >
-            realProperty
+            RealResort
           </Link>
         </div>
         <div className="navbar-center hidden lg:flex">

src/PrivateRoute/PrivateRoute.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import { useContext } from "react";
+import { AuthContext } from "../providers/AuthProvider";
+import { Navigate, useLocation } from "react-router-dom";
+
+
+const PrivateRoute = ({ children }) => {
+    const { user, loading } = useContext(AuthContext);
+    const location = useLocation();
+    console.log(location.pathname)
+
+
+    if (loading) {
+        return <span className="loading loading-infinity loading-lg"></span>
+    }
+
+    if (user) {
+        return children;
+    }
+
+    return <Navigate state={location.pathname} to="/login"></Navigate>;
+};
+
+export default PrivateRoute;

src/Single/Single.jsx

@@ -1,4 +1,5 @@
-import { useLoaderData, useParams } from "react-router-dom";
+import { Link, useLoaderData, useParams } from "react-router-dom";
+import Marquee from "react-fast-marquee";
 
 const Single = () => {
   const single = useLoaderData();
@@ -8,16 +9,20 @@ const Single = () => {
 
   return (
     <div className=" container mx-auto mt-10 p-5">
-      <div className="text-center mb-8">
-        <h2 className="text-2xl font-bold ">
-          View Details:
-          <span className="text-2xl font-extrabold text-orange-500">
-            {card.estate_title}
-          </span>
-        </h2>
+      <div>
+      <div className="flex">
+            <button className="btn btn-secondary">View Details:</button>
+            <Marquee pauseOnHover={true} speed={40}>
+                <Link className="mr-12 lg:mr-24 text-orange-500 text-2xl font-extrabold" to="/">{card.estate_title}</Link>
+                <Link className="mr-12 lg:mr-24 text-orange-500 text-2xl font-extrabold" to="/">{card.estate_title}</Link>
+                <Link className="mr-12 lg:mr-24 text-orange-500 text-2xl font-extrabold" to="/">{card.estate_title}</Link>
+                <Link className="mr-12 lg:mr-24 text-orange-500 text-2xl font-extrabold" to="/">{card.estate_title}</Link>
+
+            </Marquee>
+        </div>
       </div>
 
-      <section className="bg-gray-200 text-gray-100 space-y-3 lg:h-[720px] w-full rounded-xl">
+      <section className="bg-gray-200 text-gray-100 space-y-3 lg:h-[720px] w-full rounded-xl mt-10">
         <div className="container flex flex-col justify-center p-6 mx-auto sm:py-12 lg:py-24 lg:flex-row lg:justify-between space-y-8">
           <div className="flex items-center justify-center lg:pt-32 lg:pl-16  h-72 sm:h-80 lg:h-96 xl:h-112 2xl:h-128">
             <img

src/main.jsx

@@ -13,6 +13,7 @@ import { ToastContainer } from "react-toastify";
 import UpdateProfile from "./UpdateProfile/UpdateProfile";
 import Profile from "./UserProfile/Profile";
 import Single from "./Single/Single";
+import PrivateRoute from "./PrivateRoute/PrivateRoute";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -25,7 +26,7 @@ const router = createBrowserRouter([
       },
       {
         path: "/single/:id",
-        element:<Single></Single>,
+        element:<PrivateRoute><Single></Single></PrivateRoute>,
         loader:() =>
         (fetch('../data.json')),
       },

src/providers/AuthProvider.jsx

@@ -60,7 +60,6 @@ const AuthProvider = ({ children }) => {
 
   useEffect(() => {
     const unSubscribe = onAuthStateChanged(auth, (currentUser) => {
-      console.log("use in auth chnge", currentUser);
       setUser(currentUser);
     });
     return () => {