Enhance Website Navigation with floating navbar and Remove Unnecessary Navbar from Login,Sign-up Pages

frontend/src/components/Navbar.jsx

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from "react";
 import { useNavigate, useLocation, Link } from "react-router-dom";
 import ProfileInfo from "./Cards/ProfileInfo";
+
+import { useNavigate, useLocation, Link } from "react-router-dom";
 import SearchBar from "./SearchBar/SearchBar";
 import { toast } from "react-hot-toast";
 import gsap from "gsap/all";
@@ -26,6 +28,19 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
   };
 
   useEffect(() => {
+
+    // GSAP animations
+    gsap.fromTo(logoRef.current, { y: -20, opacity: 0, scale: 0.8 }, { duration: 1, y: 0, opacity: 1, scale: 1, ease: "power3.out" });
+    gsap.fromTo(searchBarRef.current, { x: 50, opacity: 0 }, { duration: 1, x: 0, opacity: 1, ease: "power3.out", delay: 0.5 });
+    gsap.fromTo(profileRef.current, { opacity: 0, scale: 0.8 }, { duration: 1, opacity: 1, scale: 1, ease: "power3.out", delay: 1 });
+
+    // Animating login/signup buttons
+    if (loginButtonRef.current) {
+      gsap.fromTo(loginButtonRef.current, { opacity: 0, y: 20 }, { duration: 1, opacity: 1, y: 0, ease: "bounce.out", delay: 1.7 });
+    }
+    if (signupButtonRef.current) {
+      gsap.fromTo(signupButtonRef.current, { opacity: 0, y: 20 }, { duration: 1, opacity: 1, y: 0, ease: "bounce.out", delay: 1.5 });
+
     // Animate logo
     gsap.fromTo(
       logoRef.current,
@@ -63,6 +78,7 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
         { opacity: 0, y: 20 },
         { duration: 1, opacity: 1, y: 0, ease: "bounce.out", delay: 1.5 }
       );
+
     }
   }, []);
 
@@ -94,6 +110,40 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
 
   console.log(location.pathname);
   return (
+
+    <div className="fixed bg-neutral-200 top-0 left-0 w-full  z-50">
+      <div className=" backdrop-blur-lg rounded-[1.2rem] flex items-center justify-between px-4 py-2 drop-shadow-md mx-4 mt-4">
+        {/* Logo */}
+        <Link to={userInfo ? "/dashboard" : "/"}>
+          <div ref={logoRef} className="flex items-center p-1">
+            <img src="/logo.png" className="h-10" alt="logo" />
+          <h2 className="text-2xl font-medium ml-[-12px] text-[#2B2B2B] mt-2">
+              cribbie
+            </h2>
+          </div>
+        </Link>
+
+
+
+        {/* Tabs */}
+        <SlideTabsExample />
+
+        {/* Search bar (hidden on specific paths) */}
+        {userInfo && !hideSearchBarPaths.includes(location.pathname) && (
+          <div ref={searchBarRef} className="hidden md:flex flex-grow justify-center mx-6">
+            <SearchBar
+              value={searchQuery}
+              onChange={({ target }) => {
+                setSearchQuery(target.value);
+                onSearchNote(target.value);
+              }}
+              onClearSearch={onClearSearch}
+            />
+          </div>
+        )}
+
+        {/* Profile or Signup/Login */}
+
     <div
       className={`flex items-center justify-between px-4 py-2 drop-shadow-md ${
         theme === "dark" ? "bg-black text-white" : "bg-white text-black"
@@ -150,11 +200,34 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
           )}
         </button>
 
+
         {userInfo ? (
           <div ref={profileRef}>
             <ProfileInfo userInfo={userInfo} onLogout={onLogout} />
           </div>
         ) : (
+
+          location.pathname !== "/login" && location.pathname !== "/signup" && (
+            <div className="flex justify-evenly items-center space-x-4">
+              <button
+                ref={signupButtonRef}
+                onClick={() => navigate("/signup")}
+                className="text-white bg-blue-600 rounded-md px-4 py-2 transition hover:bg-blue-800"
+              >
+                Signup
+              </button>
+              <button
+                ref={loginButtonRef}
+                onClick={() => navigate("/login")}
+                className="text-white bg-gray-700 rounded-md px-4 py-2 transition hover:bg-gray-900"
+              >
+                Login
+              </button>
+            </div>
+          )
+        )}
+      </div>
+
           <>
             {location.pathname !== "/login" && (
               <button
@@ -183,6 +256,7 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => {
       </div>
       </div>
       {/* Theme toggle button */}
+
     </div>
   );
 };

frontend/src/components/Tabs.jsx

@@ -5,8 +5,13 @@ import { Link, useLocation } from "react-router-dom";
 // Accept theme as a prop in SlideTabsExample
 export const SlideTabsExample = ({ theme }) => {
   return (
+
+    <div className="bg-white  rounded-lg m-2 p-2">
+      <SlideTabs />
+
     <div className={theme === "dark" ? "bg-gray-800" : "bg-white py-2"}>
       <SlideTabs theme={theme} />
+
     </div>
   );
 };
@@ -30,6 +35,35 @@ const SlideTabs = ({ theme }) => {
         }));
         setHoveredTab(null);
       }}
+
+      className="relative mx-auto b flex w-fit bg-white p-1"
+    >
+      <Tab
+        setPosition={setPosition}
+        currentPathName={currentPathName}
+        to="/"
+        hoveredTab={hoveredTab}
+        setHoveredTab={setHoveredTab}
+      >
+        Home
+      </Tab>
+      <Tab
+        setPosition={setPosition}
+        currentPathName={currentPathName}
+        to="/dashboard"
+        hoveredTab={hoveredTab}
+        setHoveredTab={setHoveredTab}
+      >
+        Dashboard
+      </Tab>
+      <Tab
+        setPosition={setPosition}
+        currentPathName={currentPathName}
+        to="/about"
+        hoveredTab={hoveredTab}
+        setHoveredTab={setHoveredTab}
+      >
+
       className={`relative mx-auto flex w-fit p-1 ${
         theme === "dark" ? "bg-black" : "bg-white"
       }`}
@@ -38,6 +72,7 @@ const SlideTabs = ({ theme }) => {
         Home
       </Tab>
       <Tab theme={theme} setPosition={setPosition} to="/about" currentPathName={currentPathName} hoveredTab={hoveredTab} setHoveredTab={setHoveredTab}>
+
         About
       </Tab>
       <Tab theme={theme} setPosition={setPosition} to="/testimonial" currentPathName={currentPathName} hoveredTab={hoveredTab} setHoveredTab={setHoveredTab}>

frontend/src/pages/Login/Login.jsx

@@ -167,10 +167,6 @@ const Login = ({ setUser }) => {
 
   return (
     <div>
-      <div className="fixed top-0 left-0 right-0 z-50">
-        <Navbar />
-      </div>
-
       <section className="bg-white">
         <div className="lg:grid lg:min-h-screen lg:grid-cols-12">
           <section className="relative flex h-32 items-end bg-gray-900 lg:col-span-5 lg:h-full xl:col-span-6">

frontend/src/pages/Signup/Signup.jsx

@@ -219,9 +219,7 @@ const Signup = () => {
 
   return (
     <div>
-      <div className="fixed top-0 left-0 right-0 z-50">
-        <Navbar />
-      </div>
+
 
       <section className="bg-white">
         <div className="lg:grid lg:min-h-screen lg:grid-cols-12">