Design a sleek, modern, and professional website navigation menu featuring the following links: Home, Services, Process, About. The menu should be visually appealing, easy to navigate, with a clean layout, subtle hover effects, and a polished appearance. Remove any other menu items and ensure the overall design exudes high quality and user-friendliness.

components/navbar.js

@@ -15,83 +15,95 @@ class CustomNavbar extends HTMLElement {
                     background-color: transparent;
                     backdrop-filter: none;
                 }
-.nav-link {
+                .nav-link {
                     position: relative;
+                    overflow: hidden;
+                }
+                .nav-link span:last-child {
+                    transform-origin: left;
+                    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
                 }
-                .nav-link::after {
-                    content: '';
-                    position: absolute;
-                    width: 0;
-                    height: 2px;
-                    bottom: -2px;
-                    left: 0;
-                    background-color: currentColor;
-                    transition: width 0.3s ease;
+                .nav-link:hover span:last-child {
+                    transform: scaleX(1);
                 }
-                .nav-link:hover::after {
-                    width: 100%;
+                .nav-link.active {
+                    color: white;
+                }
+                .nav-link.active span:last-child {
+                    transform: scaleX(1);
                 }
                 .mobile-menu {
                     max-height: 0;
                     overflow: hidden;
                     transition: max-height 0.3s ease-out;
-                    background: rgba(15, 23, 42, 0.95);
-                    backdrop-filter: blur(10px);
-                    border-radius: 0.5rem;
-                    margin-top: 0.5rem;
+                    background: rgba(15, 23, 42, 0.98);
+                    backdrop-filter: blur(20px);
+                    border: 1px solid rgba(255, 255, 255, 0.08);
+                    border-radius: 0.75rem;
+                    margin-top: 0.75rem;
                 }
                 .mobile-menu.open {
-                    max-height: 500px;
+                    max-height: 400px;
+                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
                 }
-                .dropdown-menu {
+.dropdown-menu {
                     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                 }
 </style>
             <nav class="navbar fixed w-full z-50 px-6 py-4 transition-colors duration-300">
 <div class="max-w-7xl mx-auto flex justify-between items-center">
                     <a href="/" class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">Complex Devs</a>
-<div class="hidden md:flex items-center space-x-8">
-                        <a href="/" class="nav-link text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">Home</a>
-                        <a href="#services" class="nav-link text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">Services</a>
-                        <a href="#process" class="nav-link text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">Process</a>
-                        <a href="#about" class="nav-link text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">About</a>
-                        <a href="#contact" class="nav-link text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">Contact</a>
-                        <div class="relative group">
-                            <button class="flex items-center space-x-1 text-white hover:text-primary-100 transition-colors px-3 py-2 rounded-md text-sm font-medium">
-                                <span>Menu</span>
-                                <i data-feather="chevron-down" class="w-4 h-4 transition-transform group-hover:rotate-180"></i>
-                            </button>
-                            <div class="absolute right-0 mt-2 w-48 origin-top-right bg-white rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform group-hover:translate-y-0 translate-y-1 z-50">
-                                <a href="/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">Home</a>
-                                <a href="#services" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">Services</a>
-                                <a href="#process" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">Process</a>
-                                <a href="#about" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">About</a>
-                                <a href="#contact" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">Contact</a>
-                                <div class="border-t border-gray-200 my-1"></div>
-                                <a href="mailto:developerscomplex@gmail.com" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700">Email Us</a>
-                            </div>
-                        </div>
-                        <a href="#contact" class="ml-4 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold py-2 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
-                            Get Started
-                        </a>
+                <div class="hidden md:flex items-center space-x-6">
+                    <a href="/" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
+                        <span class="relative z-10">Home</span>
+                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
+                    </a>
+                    <a href="#services" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
+                        <span class="relative z-10">Services</span>
+                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
+                    </a>
+                    <a href="#process" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
+                        <span class="relative z-10">Process</span>
+                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
+                    </a>
+                    <a href="#about" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
+                        <span class="relative z-10">About</span>
+                        <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
+                    </a>
 </div>
                     
                     <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
                         <i data-feather="menu"></i>
                     </button>
                 </div>
-                
-                <div id="mobile-menu" class="mobile-menu md:hidden bg-white rounded-lg mt-2 shadow-lg">
-                    <div class="px-4 py-2 space-y-4">
-                        <a href="/" class="block px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition-colors">Home</a>
-                        <a href="#services" class="block px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition-colors">Services</a>
-                        <a href="#process" class="block px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition-colors">Process</a>
-                        <a href="#about" class="block px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition-colors">About</a>
-                        <a href="#contact" class="block px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition-colors">Contact</a>
-                        <a href="#contact" class="block px-4 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 text-white font-semibold text-center rounded-lg hover:from-primary-600 hover:to-secondary-600 mt-2 transition-all">
-Get Started
-                        </a>
-                    </div>
+                    <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 rounded-lg mt-2 shadow-xl">
+                        <div class="px-4 py-2 space-y-2">
+                            <a href="/" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
+                                <div class="flex items-center space-x-3">
+                                    <i data-feather="home" class="w-5 h-5"></i>
+                                    <span>Home</span>
+                                </div>
+                            </a>
+                            <a href="#services" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
+                                <div class="flex items-center space-x-3">
+                                    <i data-feather="layers" class="w-5 h-5"></i>
+                                    <span>Services</span>
+                                </div>
+                            </a>
+                            <a href="#process" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
+                                <div class="flex items-center space-x-3">
+                                    <i data-feather="settings" class="w-5 h-5"></i>
+                                    <span>Process</span>
+                                </div>
+                            </a>
+                            <a href="#about" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
+                                <div class="flex items-center space-x-3">
+                                    <i data-feather="user" class="w-5 h-5"></i>
+                                    <span>About</span>
+                                </div>
+                            </a>
+                        </div>
+</div>
                 </div>
             </nav>