remove the logo at the top, and customize the (Home, services, process About Contact and get started layouts) the contacts are +254 718 733 968

components/footer.js

@@ -70,9 +70,9 @@ 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>
-                                    <span>+1 (555) 123-4567</span>
-                                </li>
+                                <i data-feather="phone" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <span>+254 718 733 968</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>

components/navbar.js

@@ -42,20 +42,17 @@ class CustomNavbar extends HTMLElement {
             </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="flex items-center">
-                        <img src="https://huggingface.co/spaces/Ghostgim/codecraft-complex-devs/resolve/main/images/Screenshot%202025-11-02%20064654.png" alt="CodeCraft Complex Logo" class="w-10 h-10 mr-3 glow-effect">
-                        <span class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">CodeCraft Complex</span>
-                    </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">CodeCraft Complex</a>
 <div class="hidden md:flex items-center space-x-8">
-                        <a href="/" class="nav-link text-gray-600 hover:text-primary-500">Home</a>
-                        <a href="#services" class="nav-link text-gray-600 hover:text-primary-500">Services</a>
-                        <a href="#process" class="nav-link text-gray-600 hover:text-primary-500">Process</a>
-                        <a href="#about" class="nav-link text-gray-600 hover:text-primary-500">About</a>
-                        <a href="#contact" class="nav-link text-gray-600 hover:text-primary-500">Contact</a>
-                        <a href="#contact" class="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition duration-300">
+                        <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">
                             Get Started
                         </a>
-                    </div>
+</div>
                     
                     <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
                         <i data-feather="menu"></i>
@@ -64,13 +61,13 @@ class CustomNavbar extends HTMLElement {
                 
                 <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-2 text-gray-700 hover:bg-gray-100 rounded-lg">Home</a>
-                        <a href="#services" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Services</a>
-                        <a href="#process" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Process</a>
-                        <a href="#about" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">About</a>
-                        <a href="#contact" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Contact</a>
-                        <a href="#contact" class="block px-4 py-2 bg-primary-500 text-white font-semibold text-center rounded-lg hover:bg-primary-600">
-                            Get Started
+                        <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>

script.js

@@ -28,6 +28,18 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         });
     });
 });
-
 // Current year for footer
-document.getElementById('current-year').textContent = new Date().getFullYear();
+document.getElementById('current-year').textContent = new Date().getFullYear();
+
+// Add active class to current nav link
+document.querySelectorAll('custom-navbar').forEach(nav => {
+    const shadowRoot = nav.shadowRoot;
+    const links = shadowRoot.querySelectorAll('.nav-link');
+    
+    links.forEach(link => {
+        link.addEventListener('click', function() {
+            links.forEach(l => l.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+});