Update index.html

Website About/NEW/index.html

@@ -31,6 +31,70 @@
          border-color: #6366f1;
          background-color: #eef2ff;
          }
+
+         /* Header responsivo */
+         .header-container {
+           width: 100%;
+           overflow: hidden;
+         }
+
+         /* Desktop styles */
+         @media (min-width: 1024px) {
+           .header-container nav {
+             display: flex !important;
+           }
+           .mobile-menu {
+             display: none !important;
+           }
+           .mobile-only {
+             display: none !important;
+           }
+           .desktop-nav {
+             display: flex !important;
+           }
+         }
+         
+         /* Mobile e Tablet styles */
+         @media (max-width: 1023px) {
+           .mobile-menu {
+             position: fixed;
+             top: 72px;
+             right: 0;
+             width: 100%;
+             background-color: white;
+             padding: 1rem;
+             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+             z-index: 50;
+             display: none;
+           }
+           
+           .mobile-menu.active {
+             display: flex;
+             flex-direction: column;
+             align-items: center;
+             gap: 1rem;
+           }
+           
+           .mobile-menu a {
+             width: 100%;
+             text-align: center;
+             padding: 0.5rem;
+           }
+           
+           .mobile-menu .mobile-cta {
+             width: 100%;
+             margin-top: 1rem;
+           }
+
+           .desktop-nav {
+             display: none !important;
+           }
+
+           .desktop-only {
+             display: none !important;
+           }
+         }
+
          /* Estilo padrão (desktop) */
          .iframe-container {
          position: relative;
@@ -79,19 +143,29 @@
                </a>
                <span class="text-xl font-bold text-gray-800 whitespace-nowrap">ErikrafT Drop</span>
             </div>
-            <nav class="hidden md:flex space-x-8">
+            <nav class="desktop-nav hidden lg:flex items-center space-x-8">
                <a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium">Recursos</a>
                <a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 font-medium">Como funciona</a>
                <a href="#advantages" class="text-gray-600 hover:text-indigo-600 font-medium">Vantagens</a>
                <a href="#self-host" class="text-gray-600 hover:text-indigo-600 font-medium">Auto-hospedagem</a>
-            </nav>
                <a href="https://drop.erikraft.com" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
-            <i class="fa-solid fa-up-right-from-square fa-beat"></i> Experimente agora
+                 <i class="fa-solid fa-up-right-from-square fa-beat"></i> Experimente agora
                </a>
-            <button class="md:hidden text-gray-600">
+            </nav>
+            <button class="lg:hidden text-gray-600" id="mobile-menu-button">
               <i class="fas fa-bars text-xl"></i>
             </button>
          </div>
+         <!-- Menu mobile -->
+         <div class="mobile-menu" id="mobile-menu">
+           <a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium">Recursos</a>
+           <a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 font-medium">Como funciona</a>
+           <a href="#advantages" class="text-gray-600 hover:text-indigo-600 font-medium">Vantagens</a>
+           <a href="#self-host" class="text-gray-600 hover:text-indigo-600 font-medium">Auto-hospedagem</a>
+           <a href="https://drop.erikraft.com" class="mobile-cta bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors text-center">
+             <i class="fa-solid fa-up-right-from-square fa-beat"></i> Experimente agora
+           </a>
+         </div>
       </header>
       <!-- Hero Section -->
       <section class="gradient-bg text-white">
@@ -458,20 +532,30 @@
       </footer>
       <script>
          // Mobile menu toggle functionality
-         document.querySelector('button.md\\:hidden').addEventListener('click', function() {
+         const mobileMenuButton = document.getElementById('mobile-menu-button');
-             const nav = document.querySelector('nav.hidden.md\\:flex');
+         const mobileMenu = document.getElementById('mobile-menu');
-             nav.classList.toggle('hidden');
+         
-             nav.classList.toggle('flex');
+         mobileMenuButton.addEventListener('click', function() {
-             nav.classList.toggle('flex-col');
+           mobileMenu.classList.toggle('active');
-             nav.classList.toggle('absolute');
+           // Alterna o ícone do botão
-             nav.classList.toggle('top-16');
+           const icon = this.querySelector('i');
-             nav.classList.toggle('right-4');
+           if (mobileMenu.classList.contains('active')) {
-             nav.classList.toggle('bg-white');
+             icon.classList.remove('fa-bars');
-             nav.classList.toggle('p-4');
+             icon.classList.add('fa-times');
-             nav.classList.toggle('rounded-md');
+           } else {
-             nav.classList.toggle('shadow-md');
+             icon.classList.remove('fa-times');
-             nav.classList.toggle('space-y-4');
+             icon.classList.add('fa-bars');
-             nav.classList.toggle('space-x-8');
+           }
+         });
+         
+         // Fecha o menu mobile ao clicar em um link
+         document.querySelectorAll('#mobile-menu a').forEach(link => {
+           link.addEventListener('click', () => {
+             mobileMenu.classList.remove('active');
+             const icon = mobileMenuButton.querySelector('i');
+             icon.classList.remove('fa-times');
+             icon.classList.add('fa-bars');
+           });
          });
          
          // Smooth scrolling for anchor links
@@ -487,14 +571,6 @@
                      targetElement.scrollIntoView({
                          behavior: 'smooth'
                      });
-                     
-                     // Close mobile menu if open
-                     const nav = document.querySelector('nav');
-                     if (nav.classList.contains('absolute')) {
-                         nav.classList.add('hidden');
-                         nav.classList.remove('flex', 'flex-col', 'absolute', 'top-16', 'right-4', 
-                                            'bg-white', 'p-4', 'rounded-md', 'shadow-md', 'space-y-4');
-                     }
                  }
              });
          });