Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VersaLabs - Agencia de IA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Outfit', sans-serif; | |
| background-color: #f8fafc; | |
| color: #0f172a; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| body.dark { | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); | |
| } | |
| .dark .hero-text { | |
| background-image: linear-gradient(90deg, #818cf8, #a78bfa); | |
| } | |
| .dark .bg-white { | |
| background-color: #1e293b ; | |
| } | |
| .dark .text-gray-900 { | |
| color: #f8fafc ; | |
| } | |
| .dark .text-gray-500 { | |
| color: #94a3b8 ; | |
| } | |
| .dark .text-gray-600 { | |
| color: #cbd5e1 ; | |
| } | |
| .dark .bg-gray-50 { | |
| background-color: #1e293b ; | |
| } | |
| .dark .border-gray-200 { | |
| border-color: #334155 ; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .hero-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #4f46e5, #9333ea); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-8 w-auto" src="https://framerusercontent.com/images/t25w12kJO3xpUe3JdSybMTuinn8.png" alt="VersaLabs logo"> | |
| <span class="ml-2 text-xl font-bold text-gray-900">VersaLabs</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-6"> | |
| <button id="language-toggle" class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center"> | |
| <span class="mr-1">ESP</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <button id="theme-toggle" class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"> | |
| <i data-feather="moon" class="hidden dark:block w-5 h-5"></i> | |
| <i data-feather="sun" class="dark:hidden w-5 h-5"></i> | |
| </button> | |
| <a href="#home" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Inicio</a> | |
| <a href="#services" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Servicios</a> | |
| <a href="#testimonials" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Estudios de Caso</a> | |
| <a href="#about" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Acerca de</a> | |
| <a href="#contact" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contacto</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| <span class="hero-text">Transformaci贸n</span><br> | |
| Digital con IA | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg"> | |
| VersaLabs es una firma l铆der en consultor铆a de IA que ofrece soluciones automatizadas con inteligencia artificial, desarrollo web y soluciones de comercio electr贸nico. Con 15 a帽os de experiencia, nuestros expertos en Shopify optimizan flujos de trabajo y aumentan ingresos. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-8 py-3 rounded-lg gradient-bg text-white font-medium shadow-lg hover:shadow-xl transition duration-300"> | |
| Comenzar | |
| </a> | |
| <a href="#" class="px-8 py-3 rounded-lg bg-white text-indigo-600 font-medium border border-indigo-200 hover:bg-indigo-50 transition duration-300"> | |
| Saber M谩s | |
| </a> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <img src="https://framerusercontent.com/images/wk45EXrwdvDOVPbrteiUP4meKk.png" alt="Tecnolog铆a de IA" class="rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-0 -z-10"> | |
| <div class="bg-gradient-to-br from-indigo-100 to-purple-50 rounded-full h-96 w-96 opacity-50 blur-3xl"></div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Nuestros Servicios de IA</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto">Entregamos soluciones de IA de vanguardia adaptadas a las necesidades de su negocio</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Automatizaci贸n con IA</h3> | |
| <p class="text-gray-600">Optimice operaciones con automatizaci贸n inteligente que aprende y se adapta a sus flujos de trabajo.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="shopping-cart" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Soluciones de Comercio Electr贸nico</h3> | |
| <p class="text-gray-600">Aumente las conversiones con recomendaciones de productos con IA y experiencias de compra personalizadas.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Desarrollo Web</h3> | |
| <p class="text-gray-600">Construya sitios web a prueba de futuro con integraci贸n de IA para mayor participaci贸n y an谩lisis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-4xl font-bold mb-2">15+</div> | |
| <div class="text-lg">A帽os de Experiencia</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-4xl font-bold mb-2">200+</div> | |
| <div class="text-lg">Clientes en el Mundo</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-4xl font-bold mb-2">95%</div> | |
| <div class="text-lg">Retenci贸n de Clientes</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-4xl font-bold mb-2">3M+</div> | |
| <div class="text-lg">Ingresos Generados</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Lo que Dicen Nuestros Clientes</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto">Conf铆an en nosotros startups y empresas Fortune 500</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"VersaLabs transform贸 nuestras operaciones de comercio electr贸nico con sus soluciones de IA. Nuestras tasas de conversi贸n aumentaron un 40% en el primer mes."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/1" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">CEO, TechCorp</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Las soluciones de automatizaci贸n implementadas por VersaLabs nos ahorraron m谩s de 200 horas al mes en procesos manuales. Su experiencia es incomparable."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/2" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-sm text-gray-500">COO, Global Retail</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Sus expertos en Shopify nos ayudaron a redise帽ar nuestra tienda con recomendaciones con IA. Nuestro valor promedio de pedido aument贸 un 35%."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/3" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">David Wilson</div> | |
| <div class="text-sm text-gray-500">Fundador, StyleHub</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Ponte en Contacto</h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| 驴Tienes un proyecto en mente o quieres saber m谩s sobre nuestros servicios? | |
| Completa el formulario y nos pondremos en contacto contigo en 24 horas. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-indigo-500 dark:text-indigo-400"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| <div class="ml-3 text-base text-gray-500 dark:text-gray-400"> | |
| <a href="mailto:info@versalabs.io" class="hover:text-indigo-600 dark:hover:text-indigo-400">info@versalabs.io</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-indigo-500 dark:text-indigo-400"> | |
| <i data-feather="phone"></i> | |
| </div> | |
| <div class="ml-3 text-base text-gray-500 dark:text-gray-400"> | |
| <a href="tel:+11234567890" class="hover:text-indigo-600 dark:hover:text-indigo-400">+1 (123) 456-7890</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Correo Electr贸nico</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Mensaje</label> | |
| <textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition duration-300"> | |
| Enviar Mensaje | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-6">驴Listo para Transformar tu Negocio con IA?</h2> | |
| <p class="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">Programa una consulta gratuita con nuestros expertos en IA para discutir las necesidades de tu proyecto.</p> | |
| <a href="#contact" class="inline-block px-8 py-3 rounded-lg bg-white text-gray-900 font-medium hover:bg-gray-100 transition duration-300"> | |
| Reservar una Llamada | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-8 w-auto" src="https://framerusercontent.com/images/t25w12kJO3xpUe3JdSybMTuinn8.png" alt="VersaLabs logo"> | |
| <span class="ml-2 text-xl font-bold text-gray-900">VersaLabs</span> | |
| </div> | |
| <p class="text-gray-500 text-sm">Firma l铆der en consultor铆a de IA que ofrece soluciones de vanguardia para la transformaci贸n digital.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Servicios</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Automatizaci贸n con IA</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Soluciones de Comercio Electr贸nico</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Desarrollo Web</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Expertos en Shopify</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Empresa</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Acerca de Nosotros</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Estudios de Caso</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Carreras</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Conecta</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="mailto:info@versalabs.io" class="text-gray-500 hover:text-gray-900">info@versalabs.io</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-200"> | |
| <p class="text-gray-500 text-sm text-center">© 2023 VersaLabs. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Dark mode toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | |
| // Check for saved theme or use preferred color scheme | |
| const currentTheme = localStorage.getItem('theme') || | |
| (prefersDarkScheme.matches ? 'dark' : 'light'); | |
| if (currentTheme === 'dark') { | |
| document.body.classList.add('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('dark'); | |
| const theme = document.body.classList.contains('dark') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // Language toggle | |
| const languageToggle = document.getElementById('language-toggle'); | |
| languageToggle.addEventListener('click', () => { | |
| window.location.href = 'index.html'; | |
| }); | |
| // Update header transparency on scroll | |
| const nav = document.querySelector('nav'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 10) { | |
| nav.classList.remove('bg-white/80', 'dark:bg-gray-900/80'); | |
| nav.classList.add('bg-white', 'dark:bg-gray-900'); | |
| } else { | |
| nav.classList.add('bg-white/80', 'dark:bg-gray-900/80'); | |
| nav.classList.remove('bg-white', 'dark:bg-gray-900'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |