okay so our Gmail is;developerscomplex@gmail.com

we are located at Nairobi, Ongata rongai
NOw customize the dropdown menu's in the top right of the page to be more stylish and more advanced upto date style. And remove the CodeCraft Complex.

components/footer.js

@@ -70,14 +70,18 @@ class CustomFooter extends HTMLElement {
                                     <span>contact@codecraftcomplex.com</span>
                                 </li>
                                 <li class="flex items-start">
-                                <i data-feather="phone" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <i data-feather="phone" class="w-5 h-5 mr-3 mt-1"></i>
                                     <span>+254 718 733 968</span>
-</li>
+                                </li>
                                 <li class="flex items-start">
+                                    <i data-feather="mail" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <span>developerscomplex@gmail.com</span>
+                                </li>
+<li class="flex items-start">
                                     <i data-feather="map-pin" class="w-5 h-5 mr-3 mt-1"></i>
-                                    <span>123 Tech Street, Silicon Valley, CA 94000</span>
+                                    <span>Nairobi, Ongata Rongai</span>
                                 </li>
-                            </ul>
+</ul>
                         </div>
                     </div>
                     

components/navbar.js

@@ -35,21 +35,43 @@ class CustomNavbar extends HTMLElement {
                     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;
                 }
                 .mobile-menu.open {
                     max-height: 500px;
                 }
-            </style>
+                .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">CodeCraft Complex</a>
+                    <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>
-                        <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">
+                        <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>