| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>V-SEK | Digital Twin Security Solutions</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'vsek-primary': '#002B5B', |
| 'vsek-secondary': '#00A3E0', |
| 'vsek-accent': '#FFD100', |
| 'vsek-dark': '#0D1B2A', |
| 'vsek-light': '#F8F9FA', |
| }, |
| fontFamily: { |
| 'sans': ['Inter', 'sans-serif'], |
| 'orbitron': ['Orbitron', 'sans-serif'] |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'slide-up': 'slide-up 0.8s ease-out forwards' |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| }, |
| 'slide-up': { |
| '0%': { opacity: '0', transform: 'translateY(20px)' }, |
| '100%': { opacity: '1', transform: 'translateY(0)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .bg-digital-grid { |
| background-image: |
| linear-gradient(rgba(0, 43, 91, 0.8), rgba(0, 43, 91, 0.95)), |
| radial-gradient(circle at 10% 20%, rgba(0, 163, 224, 0.2) 0%, transparent 20%), |
| radial-gradient(circle at 90% 80%, rgba(255, 209, 0, 0.15) 0%, transparent 25%), |
| url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
| } |
| .digital-twin-glow { |
| box-shadow: 0 0 20px rgba(0, 163, 224, 0.3); |
| border: 1px solid rgba(0, 163, 224, 0.2); |
| } |
| .hover-scale { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| .hover-scale:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .service-icon { |
| transition: all 0.4s ease; |
| } |
| .service-icon:hover { |
| transform: translateY(-5px) rotate(5deg); |
| } |
| .banner-image { |
| height: 70vh; |
| background-image: url('https://lh3.googleusercontent.com/gg-dl/AOI_d_8_8mST89ytdL0H1KYV4MtyPiD4mMznjtBAkJ-LhmcRPlPwh2F_K-ekJt4f9QsglPrufPJUnQyhUhwROsek3W4IXsbMJSZQ1W7CmNTVS9omxpY7sBPLGUF_Uw77GD1glzPxcakNKfH0R73dalGuPIi3G9ACsGVfqET0cb40i8W2-w4maQ=s1024-rj'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| } |
| .banner-overlay { |
| background: linear-gradient(to bottom, rgba(0, 43, 91, 0.8), rgba(0, 43, 91, 0.6)); |
| } |
| </style> |
| </head> |
| <body class="font-sans text-gray-800 bg-vsek-light"> |
|
|
| |
| <nav class="fixed w-full bg-white shadow-lg z-50 backdrop-blur-md bg-opacity-90 border-b border-vsek-primary/20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-20"> |
| <div class="flex items-center"> |
| <a href="#" class="flex-shrink-0 flex items-center"> |
| <div class="w-12 h-12 bg-gradient-to-br from-vsek-primary to-vsek-secondary rounded-xl flex items-center justify-center shadow-lg"> |
| <span class="text-white font-bold text-xl">V</span> |
| </div> |
| <span class="ml-3 text-2xl font-orbitron font-bold text-vsek-primary">V-SEK</span> |
| </a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#home" class="text-vsek-primary hover:text-vsek-secondary font-medium transition">Inicio</a> |
| <a href="#services" class="text-gray-700 hover:text-vsek-primary font-medium transition">Servicios</a> |
| <a href="#mission" class="text-gray-700 hover:text-vsek-primary font-medium transition">Misión</a> |
| <a href="#contact" class="text-gray-700 hover:text-vsek-primary font-medium transition">Contacto</a> |
| <button class="bg-vsek-secondary text-white px-6 py-2 rounded-full hover:bg-vsek-primary transition font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"> |
| Cotizar |
| </button> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button id="mobile-menu-button" class="text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
| <div class="px-2 pt-2 pb-3 space-y-1"> |
| <a href="#home" class="block px-3 py-2 text-vsek-primary font-medium">Inicio</a> |
| <a href="#services" class="block px-3 py-2 text-gray-700 hover:text-vsek-primary font-medium">Servicios</a> |
| <a href="#mission" class="block px-3 py-2 text-gray-700 hover:text-vsek-primary font-medium">Misión</a> |
| <a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-vsek-primary font-medium">Contacto</a> |
| <button class="w-full mt-2 bg-vsek-secondary text-white px-6 py-2 rounded-full hover:bg-vsek-primary transition font-medium"> |
| Cotizar |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="pt-32 pb-10 min-h-screen flex items-center"> |
| <div class="banner-image w-full relative"> |
| <div class="banner-overlay absolute inset-0"></div> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| <div class="space-y-8 text-white animate__animated animate__fadeInLeft" style="animation: slide-up 1s ease-out;"> |
| <h1 class="text-5xl lg:text-6xl font-orbitron font-bold leading-tight"> |
| Seguridad Inteligente <span class="text-vsek-accent">en Tiempo Real</span> |
| </h1> |
| <p class="text-xl leading-relaxed"> |
| V-SEK redefiniendo la seguridad con soluciones de gemelo digital, monitoreo 24/7 y control de acceso remoto para empresas y residencias en Costa Rica. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="bg-vsek-secondary text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-vsek-primary transition shadow-2xl hover:shadow-blue-500/30 transform hover:-translate-y-1"> |
| <i class="fas fa-shield-alt mr-2"></i> Protección Virtual |
| </button> |
| <button class="border-2 border-vsek-accent text-vsek-accent px-8 py-4 rounded-full text-lg font-semibold hover:bg-vsek-accent hover:text-vsek-dark transition"> |
| <i class="fas fa-video mr-2"></i> Video Portero |
| </button> |
| </div> |
| <div class="flex items-center space-x-6 text-white/80"> |
| <div class="flex items-center"> |
| <i class="fas fa-clock text-vsek-accent mr-2"></i> |
| <span>07:00 - 16:00 | Lunes a Viernes</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-map-marker-alt text-vsek-accent mr-2"></i> |
| <span>Heredia, Costa Rica</span> |
| </div> |
| </div> |
| </div> |
| <div class="relative hidden lg:block"> |
| <div class="absolute -top-10 -right-10 w-72 h-72 bg-vsek-secondary rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div> |
| <div class="absolute -bottom-14 -left-14 w-72 h-72 bg-vsek-accent rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow" style="animation-delay: 1.5s"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-24 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-orbitron font-bold text-vsek-primary mb-4 animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out;">Nuestros Servicios</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Soluciones de seguridad integradas con tecnología de punta, diseñadas para proteger lo que más importa. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> |
| |
| <div class="bg-white p-8 rounded-2xl shadow-xl hover-scale border border-gray-100 animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.1s;"> |
| <div class="w-16 h-16 bg-vsek-primary/10 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-eye text-3xl text-vsek-primary"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-vsek-primary mb-4">Protección Virtual 24/7</h3> |
| <ul class="space-y-3 text-gray-700"> |
| <li class="flex items-start"><i class="fas fa-check text-vsek-secondary mt-1 mr-3"></i> Monitoreo en vivo de cámaras</li> |
| <li class="flex items-start"><i class="fas fa-check text-vsek-secondary mt-1 mr-3"></i> Equipos de alta tecnología</li> |
| <li class="flex items-start"><i class="fas fa-check text-vsek-secondary mt-1 mr-3"></i> Seguimiento y documentación</li> |
| <li class="flex items-start"><i class="fas fa-check text-vsek-secondary mt-1 mr-3"></i> Recopilación de datos inteligente</li> |
| </ul> |
| <div class="mt-8"> |
| <a href="tel:+50640525079" class="inline-flex items-center text-vsek-secondary hover:text-vsek-primary transition"> |
| <i class="fas fa-phone-alt mr-2"></i> +506 4052-5079 |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-br from-vsek-primary to-vsek-secondary p-8 rounded-2xl shadow-xl hover-scale text-white relative overflow-hidden animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.2s;"> |
| <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div> |
| <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full translate-y-16 -translate-x-16"></div> |
| <div class="relative z-10"> |
| <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-video text-3xl text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4">Sistema CCTV</h3> |
| <ul class="space-y-3 text-white/90"> |
| <li class="flex items-start"><i class="fas fa-dot-circle text-vsek-accent mt-2 mr-3"></i> Renta de sistemas HD/IP</li> |
| <li class="flex items-start"><i class="fas fa-dot-circle text-vsek-accent mt-2 mr-3"></i> Instalación corporativa y residencial</li> |
| <li class="flex items-start"><i class="fas fa-dot-circle text-vsek-accent mt-2 mr-3"></i> Precios competitivos y personalizados</li> |
| <li class="flex items-start"><i class="fas fa-dot-circle text-vsek-accent mt-2 mr-3"></i> Integración con Protección Virtual</li> |
| </ul> |
| <div class="mt-8"> |
| <span class="inline-block bg-vsek-accent text-vsek-dark px-4 py-2 rounded-full text-sm font-semibold"> |
| ¡Oferta Especial! |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-2xl shadow-xl hover-scale border border-gray-100 animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.3s;"> |
| <div class="w-16 h-16 bg-vsek-accent/20 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-door-open text-3xl text-vsek-accent"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-vsek-primary mb-4">Video Portero Virtual</h3> |
| <p class="text-gray-700 mb-6"> |
| Control de acceso y salida remoto para condominios y empresas, con tecnología de vanguardia. |
| </p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-user-shield text-vsek-secondary mr-3"></i> |
| <span>Acceso remoto seguro</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-mobile-alt text-vsek-secondary mr-3"></i> |
| <span>Control desde cualquier dispositivo</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-bell text-vsek-secondary mr-3"></i> |
| <span>Notificaciones en tiempo real</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-2xl shadow-xl hover-scale border border-gray-100 animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.4s;"> |
| <div class="w-16 h-16 bg-vsek-primary/10 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-fingerprint text-3xl text-vsek-primary"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-vsek-primary mb-4">Control de Acceso</h3> |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Lectoras de proximidad</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Tarjetas RFID</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Lectoras biométricas</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Sistemas de automatización</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-2xl shadow-xl hover-scale border border-gray-100 animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.5s;"> |
| <div class="w-16 h-16 bg-vsek-secondary/20 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-motorcycle text-3xl text-vsek-secondary"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-vsek-primary mb-4">Prevención Motorizada</h3> |
| <p class="text-gray-700 mb-6"> |
| Flotilla de patrullaje motorizado para vigilancia preventiva y respuesta rápida. |
| </p> |
| <div class="flex items-center text-vsek-secondary font-semibold"> |
| <i class="fas fa-shield-alt mr-2"></i> |
| <span>Respuesta en minutos</span> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-2xl shadow-xl hover-scale border border-gray-100 animate__animated animate__fadeInUp" style="animation: slide-up 0.8s ease-out; animation-delay: 0.6s;"> |
| <div class="w-16 h-16 bg-vsek-accent/20 rounded-xl flex items-center justify-center mb-6 service-icon"> |
| <i class="fas fa-leaf text-3xl text-vsek-accent"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-vsek-primary mb-4">Sostenibilidad & Reducción de Costos</h3> |
| <p class="text-gray-700"> |
| Análisis estratégico para mejorar la eficiencia operativa y reducir costos sin comprometer la seguridad. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="mission" class="py-24 bg-gray-50"> |
| <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-16 items-center"> |
| <div class="space-y-8 animate__animated animate__fadeInLeft" style="animation: slide-up 0.8s ease-out;"> |
| <h2 class="text-4xl font-orbitron font-bold text-vsek-primary">Nuestra Misión</h2> |
| <p class="text-xl text-gray-700 leading-relaxed"> |
| Proveer servicios de seguridad con técnicas innovadoras, que satisfagan las necesidades de nuestros clientes mediante tecnología de gemelo digital, monitoreo inteligente y soluciones personalizadas. |
| </p> |
| <div class="grid grid-cols-2 gap-8 pt-6"> |
| <div class="text-center"> |
| <div class="text-3xl font-orbitron font-bold text-vsek-secondary">24/7</div> |
| <div class="text-gray-600">Monitoreo continuo</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-orbitron font-bold text-vsek-accent">99.9%</div> |
| <div class="text-gray-600">Disponibilidad</div> |
| </div> |
| </div> |
| </div> |
| <div class="relative animate__animated animate__fadeInRight" style="animation: slide-up 0.8s ease-out; animation-delay: 0.2s;"> |
| <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Security Team" class="rounded-2xl shadow-2xl"> |
| <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-vsek-primary rounded-xl opacity-20"></div> |
| <div class="absolute -top-6 -right-6 w-24 h-24 bg-vsek-secondary rounded-xl opacity-20"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-orbitron font-bold text-vsek-primary animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out;">Nuestros Clientes Confían en Nosotros</h2> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center opacity-70 hover:opacity-100 transition"> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.1s;"> |
| <div class="text-4xl text-vsek-primary">🏢</div> |
| </div> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.2s;"> |
| <div class="text-4xl text-vsek-primary">🏠</div> |
| </div> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.3s;"> |
| <div class="text-4xl text-vsek-primary">🏭</div> |
| </div> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.4s;"> |
| <div class="text-4xl text-vsek-primary">🏥</div> |
| </div> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.5s;"> |
| <div class="text-4xl text-vsek-primary">🏫</div> |
| </div> |
| <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition animate__animated animate__fadeIn" style="animation: slide-up 0.8s ease-out; animation-delay: 0.6s;"> |
| <div class="text-4xl text-vsek-primary">🏪</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-24 bg-vsek-primary text-white"> |
| <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-16"> |
| <div class="space-y-10 animate__animated animate__fadeInLeft" style="animation: slide-up 0.8s ease-out;"> |
| <div> |
| <h2 class="text-4xl font-orbitron font-bold mb-6">Contacto</h2> |
| <p class="text-xl text-vsek-accent mb-8">Estamos aquí para ayudarle a proteger su propiedad.</p> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-12 h-12 bg-vsek-secondary/20 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold">Correo</h3> |
| <a href="mailto:info@v-sek.com" class="text-vsek-accent hover:underline">info@v-sek.com</a> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-12 h-12 bg-vsek-secondary/20 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-phone"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold">Teléfono</h3> |
| <a href="tel:+50640525079" class="text-vsek-accent hover:underline">+506 4052-5079</a> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-12 h-12 bg-vsek-secondary/20 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold">Ubicación</h3> |
| <p>Asunción de Belén, Heredia y Tamarindo<br>Costa Rica</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-12 h-12 bg-vsek-secondary/20 rounded-xl flex items-center justify-center mr-4"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold">Horario</h3> |
| <p>07:00 a 16:00 | Lunes a Viernes</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20 animate__animated animate__fadeInRight" style="animation: slide-up 0.8s ease-out; animation-delay: 0.2s;"> |
| <form class="space-y-6"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Nombre</label> |
| <input type="text" class="w-full px-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-vsek-accent focus:border-transparent" placeholder="Su nombre"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Correo</label> |
| <input type="email" class="w-full px-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-vsek-accent focus:border-transparent" placeholder="su@email.com"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Teléfono</label> |
| <input type="tel" class="w-full px-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-vsek-accent focus:border-transparent" placeholder="+506"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Mensaje</label> |
| <textarea rows="4" class="w-full px-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-vsek-accent focus:border-transparent" placeholder="¿En qué podemos ayudarle?"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-vsek-accent text-vsek-dark font-bold py-3 px-6 rounded-xl hover:bg-yellow-400 transition transform hover:-translate-y-1 shadow-lg"> |
| Enviar Mensaje |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-vsek-dark text-gray-400 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-6 md:mb-0"> |
| <div class="w-10 h-10 bg-gradient-to-br from-vsek-primary to-vsek-secondary rounded-lg flex items-center justify-center"> |
| <span class="text-white font-bold">V</span> |
| </div> |
| <span class="ml-3 text-xl font-orbitron font-bold text-white">V-SEK</span> |
| </div> |
| |
| <div class="text-center md:text-right"> |
| <p>© <span id="year">2023</span> V-SEK Protección Virtual y Video Portería</p> |
| <p class="text-sm">Todos los derechos reservados</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.getElementById('year').textContent = new Date().getFullYear(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| window.scrollTo({ |
| top: target.offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const header = document.querySelector('nav'); |
| if (window.scrollY > 50) { |
| header.classList.add('shadow-lg'); |
| } else { |
| header.classList.remove('shadow-lg'); |
| } |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.animate__animated'); |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.3; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', animateOnScroll); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=spwotton/vsek" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
