c'est presque parfai tmasi ces tpas encore le cas

components/navbar.js

@@ -41,14 +41,25 @@ class CustomNavbar extends HTMLElement {
             <a href="#signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">
               Get Started
             </a>
-            <button class="md:hidden text-neutral-300">
+            <button class="md:hidden text-neutral-300" aria-label="Toggle menu" aria-controls="mobile-menu" aria-expanded="false">
               <i data-feather="menu"></i>
             </button>
-          </div>
+</div>
         </div>
       </nav>
+      
+      <!-- Mobile menu -->
+      <div id="mobile-menu" class="hidden md:hidden bg-neutral-800 border-t border-neutral-700 px-4 py-2">
+        <div class="flex flex-col gap-3">
+          <a href="#features" class="nav-link text-neutral-300 hover:text-primary-400 px-3 py-2">Features</a>
+          <a href="#how-it-works" class="nav-link text-neutral-300 hover:text-primary-400 px-3 py-2">How It Works</a>
+          <a href="#pricing" class="nav-link text-neutral-300 hover:text-primary-400 px-3 py-2">Pricing</a>
+          <a href="#demo" class="nav-link text-neutral-300 hover:text-primary-400 px-3 py-2">Demo</a>
+          <a href="#login" class="nav-link text-neutral-300 hover:text-primary-400 px-3 py-2">Log In</a>
+        </div>
+      </div>
     `;
-  }
+}
 }
 
 customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -5,9 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RecoFuchsia - AI Recommendations Engine</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/feather-icons"></script>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-  <link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="style.css">
   <script>
     tailwind.config = {
       theme: {
@@ -48,15 +47,15 @@
         <p class="text-neutral-400 text-lg mb-8 max-w-lg">
           Our fuchsia-powered AI engine analyzes user behavior to deliver hyper-relevant recommendations that increase engagement and sales.
         </p>
-        <div class="flex gap-4">
-          <a href="#demo" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">
+        <div class="flex flex-wrap gap-4">
+          <a href="#demo" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-colors whitespace-nowrap">
             Request Demo
           </a>
-          <a href="#how-it-works" class="border border-neutral-700 hover:border-neutral-600 text-neutral-300 px-6 py-3 rounded-lg font-medium transition-colors">
+          <a href="#how-it-works" class="border border-neutral-700 hover:border-neutral-600 text-neutral-300 px-6 py-3 rounded-lg font-medium transition-colors whitespace-nowrap">
             How It Works
           </a>
         </div>
-      </div>
+</div>
       <div class="relative">
         <div class="absolute -top-8 -left-8 w-64 h-64 rounded-full bg-primary-900 opacity-20 blur-3xl"></div>
         <div class="relative bg-neutral-800 border border-neutral-700 rounded-2xl p-6 shadow-xl">
@@ -155,10 +154,12 @@
 
   <script src="components/navbar.js"></script>
   <script src="components/footer.js"></script>
-  <script src="script.js"></script>
-  <script>
+  <script src="script.js" defer></script>
+<script>
     feather.replace();
+    document.addEventListener('DOMContentLoaded', function() {
+      // Initialize any needed JavaScript here
+    });
   </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -7,16 +7,37 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     });
   });
 });
-
 // Intersection Observer for animations
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       entry.target.classList.add('animate-fadeIn');
+      observer.unobserve(entry.target);
     }
   });
-}, { threshold: 0.1 });
-
-document.querySelectorAll('.animate-on-scroll').forEach(el => {
+}, { 
+  threshold: 0.1,
+  rootMargin: '0px 0px -100px 0px'
+});
+document.querySelectorAll('[class*="animate-"]').forEach(el => {
   observer.observe(el);
-});
+});
+
+// Better mobile menu toggle (for future implementation)
+function setupMobileMenu() {
+  const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
+  if (menuButton) {
+    const menu = document.getElementById('mobile-menu');
+    menuButton.addEventListener('click', () => {
+      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
+      menuButton.setAttribute('aria-expanded', !expanded);
+      menu.classList.toggle('hidden');
+    });
+  }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  setupMobileMenu();
+  feather.replace();
+});

style.css

@@ -22,7 +22,6 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #c026d3;
 }
-
 /* Animation for hover effects */
 .hover-scale {
   transition: transform 0.2s ease;
@@ -30,4 +29,25 @@ body {
 
 .hover-scale:hover {
   transform: translateY(-2px);
-}
+}
+
+/* Better focus styles */
+:focus {
+  outline: 2px solid #d946ef;
+  outline-offset: 2px;
+}
+
+/* Responsive improvements */
+@media (max-width: 640px) {
+  .hero-section {
+    flex-direction: column-reverse;
+  }
+  
+  .hero-content {
+    text-align: center;
+  }
+  
+  .hero-buttons {
+    justify-content: center;
+  }
+}