updated navbar

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

src/components/Navbar.jsx

@@ -1,16 +1,41 @@
 import { Link } from "react-router-dom";
-import Image from '../Assets/image.png';
+import { FaUserCircle } from "react-icons/fa";
+import Image from "../Assets/image.png";
 
 const Navbar = () => {
-  return ( 
-    <div className="flex flex-col md:flex-row items-center justify-between p-5 shadow-lg shadow-slate-500  bg-[#e2e8f0] text-black ">
-      <div className="mb-4 md:mb-0"><Link to=""><img src={Image} alt="not found"  className=" w-36" /></Link></div>
-      <div className="flex flex-col md:flex-row items-center gap-8">
-        <div><Link to ="/dashboard">DashBoard</Link></div>
-        <div><Link to="/login">login</Link></div>
-        <div><Link to="/signup">Sign up</Link></div>
-        <div><Link to="/profile">Profile</Link></div>
-
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-between px-6 py-4 bg-[#e2e8f0] shadow-lg shadow-slate-500">
+      {/* Logo Section */}
+      <div className="mb-4 md:mb-0">
+        <Link to="/">
+          <img src={Image} alt="Logo" className="w-36" />
+        </Link>
+      </div>
+
+      {/* Nav Links Section */}
+      <div className="flex flex-col md:flex-row items-center gap-6 text-lg">
+        <Link
+          to="/dashboard"
+          className="text-black hover:text-gray-700 transition duration-300 ease-in-out"
+        >
+          Dashboard
+        </Link>
+
+        {/* Login/Sign Up Button */}
+        <Link
+          to="/login"
+          className="bg-blue-500 text-white py-2 px-4 rounded-full hover:bg-blue-600 transition duration-300 ease-in-out"
+        >
+          Login/Sign Up
+        </Link>
+
+        {/* Profile with Icon */}
+        <Link
+          to="/profile"
+          className="flex items-center text-black hover:text-gray-700 transition duration-300 ease-in-out"
+        >
+          <FaUserCircle className="mr-2 text-2xl" /> Profile
+        </Link>
       </div>
     </div>
   );