okay adjust the header of the page to be more reliable, and we can use the logo as somehow as the background image of the home page

components/navbar.js

@@ -7,10 +7,15 @@ class CustomNavbar extends HTMLElement {
                     transition: all 0.3s ease;
                 }
                 .navbar-scrolled {
-                    background-color: white;
+                    background-color: rgba(15, 23, 42, 0.95);
+                    backdrop-filter: blur(10px);
                     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                 }
-                .nav-link {
+                .navbar {
+                    background-color: transparent;
+                    backdrop-filter: none;
+                }
+.nav-link {
                     position: relative;
                 }
                 .nav-link::after {
@@ -35,8 +40,8 @@ class CustomNavbar extends HTMLElement {
                     max-height: 500px;
                 }
             </style>
-            <nav class="navbar fixed w-full z-50 px-6 py-4">
-                <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <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>

index.html

@@ -39,10 +39,16 @@
 
     <main>
         <!-- Hero Section -->
-        <section class="relative bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-24 px-4 sm:px-6 lg:px-8">
-            <div class="max-w-7xl mx-auto text-center">
+        <section class="relative text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden">
+            <div class="absolute inset-0 bg-gray-900 opacity-90"></div>
+            <div class="absolute inset-0">
+                <img src="https://huggingface.co/spaces/Ghostgim/codecraft-complex-devs/resolve/main/images/Screenshot%202025-11-02%20064654.png" 
+                     alt="CodeCraft Complex" 
+                     class="w-full h-full object-cover opacity-20 animate-pulse-slow">
+            </div>
+            <div class="relative max-w-7xl mx-auto text-center">
                 <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-100 via-primary-500 to-secondary-500">Shaping The Digital Future</h1>
-                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-white/90">Pioneering digital solutions powered by cutting-edge technology and visionary leadership.</p>
+                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-white/90 relative z-10">Pioneering digital solutions powered by cutting-edge technology and visionary leadership.</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
                     <a href="#services" class="bg-white text-primary-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300">
                         Explore Services

style.css

@@ -43,6 +43,18 @@ body {
     to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes pulse-slow {
+    0%, 100% { opacity: 0.2; }
+    50% { opacity: 0.3; }
+}
+
+.animate-pulse-slow {
+    animation: pulse-slow 6s infinite ease-in-out;
+}
+from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
 .animate-fade-in {
     animation: fadeIn 0.8s ease-out forwards;
 }