From 8105224012504fff2b7a66dd7a1766ee38c9bee3 Mon Sep 17 00:00:00 2001
From: Deeksha K <deekshak@Deekshas-MacBook-Air.local>
Date: Sun, 27 Oct 2024 22:32:13 +0530
Subject: [PATCH] made nav bar buttons more uniformed

---
 package.json                    |  1 +
 src/components/Navbar/index.jsx | 35 +++++++++++++++++++--------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index ace5251..5936666 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.453.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index e0b8216..3d28b74 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -1,4 +1,4 @@
-import { Brand } from "./Brand"
+import { Brand } from "./Brand";
 import { Link } from "react-router-dom";
 // Icons
 import TelegramIcon from "@/assets/icons/telegram.svg";
@@ -8,33 +8,38 @@ import HamburgerIcon from '@/assets/icons/menu.svg';
 function CTAButtons() {
     return (
         <div className="hidden lg:flex justify-center">
-            <a href="https://t.me/lotengdev" target="_blank" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white">
-                <img className="inline mr-3" src={TelegramIcon} />Join Group
+            <a href="https://t.me/lotengdev" target="_blank" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded-full text-white shadow hover:bg-blue-700 transition duration-300">
+                <img className="inline mr-3" src={TelegramIcon} alt="Telegram" />Join Group
             </a>
-            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
-                <img className="inline mr-3" src={GithubIcon} />Contribute
+            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">
+                <img className="inline mr-3" src={GithubIcon} alt="Github" />Contribute
             </a>
         </div>
-    )
+    );
 }
 
-
 export default function Navbar() {
     return (
         <nav className="px-6 py-4 flex items-center shadow-md">
             <Brand url="/" />
             <ul className="hidden lg:flex flex-grow pl-10 list-none">
-                <li className="mr-8">
-                    <Link to="/">Home</Link>
+                <li className="mr-4">
+                    <Link to="/" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Home</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/event" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Acara</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/speaker" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Pembicara</Link>
+                </li>
+                <li className="mr-4">
+                    <Link to="/about" className="bg-white text-gray-800 px-4 py-2 rounded-full shadow hover:bg-blue-600 hover:text-white transition duration-300">Tentang</Link>
                 </li>
-                <li className="mr-8"><Link to="/event">Acara</Link></li>
-                <li className="mr-8"><Link to="/speaker">Pembicara</Link></li>
-                <li className="mr-8"><Link to="/about">Tentang</Link></li>
             </ul>
             <CTAButtons />
             <div className="lg:hidden flex flex-grow justify-end">
-                <img src={HamburgerIcon} />
+                <img src={HamburgerIcon} alt="Menu" />
             </div>
         </nav>
-    )
-}
\ No newline at end of file
+    );
+}