perf: ⚡️ Enhance Navbar animations

Add new css for navbar animations such as Neon, underline

✅ Closes: #10

frontend/src/components/Navbar.css

@@ -0,0 +1,119 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    background: transparent;
+    font-size: 1.25rem;
+}
+
+.navbar-logo {
+    display: flex;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff;
+}
+
+.logo-img {
+    width: 3rem;
+    margin-right: 1rem;
+}
+
+.navbar-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.navbar-link {
+    color: #ccc;
+    text-decoration: none;
+    position: relative;
+    transition: color 0.3s, text-shadow 0.3s;
+}
+
+.navbar-link::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    display: block;
+    margin-top: 5px;
+    right: 0;
+    background: #ff00ff;
+    transition: width 0.3s ease;
+    -webkit-transition: width 0.3s ease;
+}
+
+.navbar-link:hover::after {
+    width: 100%;
+    left: 0;
+    background: #ff00ff;
+}
+
+.navbar-link:hover {
+    color: white;
+    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
+}
+
+.navbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.search-container {
+    position: relative;
+}
+
+.search-input {
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 2rem;
+    padding: 0.5rem 1rem 0.5rem 2.5rem;
+    box-shadow: 0 0 10px #ff00ff;
+    transition: box-shadow 0.3s;
+}
+
+.search-input:focus {
+    outline: none;
+    box-shadow: 0 0 20px #ff00ff;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #ff00ff;
+}
+
+.github-button {
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    color: white;
+    border: none;
+    border-radius: 2rem;
+    padding: 0.5rem 1.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.github-button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px #ff00ff;
+}
+
+@media (max-width: 768px) {
+    .navbar-links {
+        display: none;
+    }
+    .navbar {
+        flex-direction: column;
+    }
+    .navbar-actions {
+        margin-top: 1rem;
+    }
+}

frontend/src/components/Navbar.jsx

@@ -1,58 +1,37 @@
 import React from 'react'
 import { Search } from 'lucide-react'
-
 import logo from '../assets/decentrade-logo.png'
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import './Navbar.css' // Import the new CSS file
 
 const Navbar = () => {
     const handleGithubClick = () => {
         window.open('https://github.com/4darsh-Dev/DecenTrade', '_blank')
     }
     return (
-        <nav className="flex items-center justify-between p-4 bg-transparent">
-            <div className=" flex items-center text-white text-2xl font-bold">
-                <span>
-                    <img className="logo-img w-16" src={logo} alt={logo} />
-                </span>
-                DecenTrade{' '}
+        <nav className="navbar">
+            <div className="navbar-logo">
+                <img className="logo-img" src={logo} alt="DecenTrade Logo" />
+                DecenTrade
             </div>
-            <div className="hidden md:flex space-x-6">
-                {[
-                    'Home',
-                    'Explore',
-                    'About',
-                    'Creators',
-                    'How It Works',
-                    'FAQ',
-                ].map((item) => (
-                    <a
-                        key={item}
-                        href="#"
-                        className="text-gray-300 hover:text-white transition-colors"
-                    >
+            <div className="navbar-links">
+                {['Home', 'Explore', 'About', 'Creators', 'How It Works', 'FAQ'].map((item) => (
+                    <a key={item} href="#" className="navbar-link">
                         {item}
                     </a>
                 ))}
             </div>
-            <div className="flex items-center space-x-4">
-                <div className="relative">
+            <div className="navbar-actions">
+                <div className="search-container">
                     <input
                         type="text"
                         placeholder="Search NFTs"
-                        className="bg-gray-700 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500"
-                    />
-                    <Search
-                        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                        size={20}
+                        className="search-input"
                     />
+                    <Search className="search-icon" size={20} />
                 </div>
-                <button
-                    onClick={handleGithubClick}
-                    className="bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full px-6 py-2 hover:opacity-90 transition-opacity"
-                >
+                <button onClick={handleGithubClick} className="github-button">
                     Github <FontAwesomeIcon icon={faGithub} />
                 </button>
             </div>