Spaces:
Running
Running
| <html lang="es" data-theme="quantum-dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>SETECOM S.A. | Servicios de Generadores Eléctricos</title> | |
| <meta name="description" content="Completa gama de servicios para generadores elétricos - Venta, Alquiler, Mantenimiento y Monitoreo Cuántico"> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='50' font-size='48'>⚛</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'quantum': { | |
| 50: '#00ffcc', | |
| 100: '#00ffff', | |
| 900: '#050505' | |
| }, | |
| 'κ-gold': '#FFD700', | |
| 'psi-green': '#00ffcc', | |
| 'void-black': '#050505' | |
| }, | |
| animation: { | |
| 'wave-interference': 'wave 7.83s infinite ease-in-out', | |
| 'kappa-pulse': 'pulse 1.273s infinite cubic-bezier(0.618, 0, 0.382, 1)', | |
| 'decoherence': 'decoherence 37.2s infinite', | |
| 'geometric-lock': 'spin 51.84s infinite linear' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-void-black text-quantum-50 font-mono antialiased overflow-x-hidden"> | |
| <!-- QUANTUM HUD OVERLAY --> | |
| <div id="quantum-hud" class="fixed top-4 left-4 z-50 text-xs space-y-1 pointer-events-none"> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-psi-green">Ψ:</span> | |
| <span id="psi-value" class="text-κ-gold">1.000273</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-psi-green">MODE:</span> | |
| <span id="mode-value" class="text-quantum-100">SERVICES</span> | |
| </div> | |
| </div> | |
| <!-- NAVBAR COMPONENT --> | |
| <nav id="quantum-navbar" class="fixed top-0 w-full z-40 bg-void-black/90 backdrop-blur-sm border-b border-quantum-900"> | |
| <div class="container mx-auto px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantum-100 to-psi-green flex items-center justify-center animate-geometric-lock"> | |
| <span class="text-void-black font-bold text-sm">κ</span> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-quantum-100">SETECOM S.A.</h1> | |
| <p class="text-xs text-psi-green/70">SERVICES v1.273</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center gap-6"> | |
| <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a> | |
| <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a> | |
| <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a> | |
| <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- SERVICES HERO SECTION --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"> | |
| <!-- Quantum Noise Background --> | |
| <div id="quantum-canvas" class="absolute inset-0 z-0 quantum-enhanced"></div> | |
| <!-- Geometric Overlay --> | |
| <div class="absolute inset-0 z-10 bg-gradient-to-t from-void-black via-void-black/60 to-transparent hovered-element"></div> | |
| <div class="relative z-20 text-center px-6 max-w-5xl mx-auto"> | |
| <!-- Main Title with κ-Glitch --> | |
| <h1 class="text-5xl md:text-7xl font-black mb-6 text-quantum-100 animate-wave-interference"> | |
| <span class="inline-block" id="glitch-text">SERVICIOS</span> | |
| <span class="text-psi-green">.GOS</span> | |
| </h1> | |
| <!-- Subtitle with Decoherence --> | |
| <p class="text-2xl md:text-3xl mb-8 text-quantum-50 animate-decoherence"> | |
| Nuestra <span class="text-ψ-green">Completa Gama</span> de Soluciones | |
| </p> | |
| <!-- KPI Indicators --> | |
| <div class="grid grid-cols-4 gap-6 mb-10 max-w-2xl mx-auto"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-κ-gold">23</div> | |
| <div class="text-xs text-quantum-100">Años de Ψ-Estabilidad</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-κ-gold">κ</div> | |
| <div class="text-xs text-quantum-100">Constante de Bloqueo</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-κ-gold">∞</div> | |
| <div class="text-xs text-quantum-100">Continuidad Garantizada</div> | |
| </div> | |
| </div> | |
| <!-- Quantum Call-to-Action --> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center animate-kappa-pulse"> | |
| <a href="tel:+50625660303" class="btn-primary px-8 py-4 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border-2 border-ψ-green hover:border-κ-gold transition-all duration-273 flex items-center gap-3 group"> | |
| <i data-feather="phone" class="w-5 h-5 group-hover:animate-spin"></i> | |
| <span class="text-quantum-100 font-semibold">2566-0303</span> | |
| </a> | |
| <a href="formulario.html" class="btn-secondary px-8 py-4 rounded-lg bg-gradient-to-r from-slate-800 to-quantum-900 border-2 border-quantum-100 hover:border-ψ-green transition-all duration-273 flex items-center gap-3 group"> | |
| <i data-feather="send" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-273"></i> | |
| <span class="text-quantum-100 font-semibold">Solicitar Cotización</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- VENTA DE GENERADORES SECTION --> | |
| <section id="venta" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-12"> | |
| <span class="text-ψ-green">Venta</span> de Generadores | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Generator Model 1 --> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-ψ-green/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-spin"> | |
| <i data-feather="zap" class="w-8 h-8 text-ψ-green"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Generador Residencial</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Potencia: 5-20 kW | Ideal para hogares y pequeñas empresas | |
| </p> | |
| <div class="text-xs text-ψ-green/70"> | |
| Operator: <span class="font-mono">SALE[A(t)]</span> | |
| </div> | |
| </div> | |
| <!-- Generator Model 2 --> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-κ-gold transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-κ-gold/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-pulse"> | |
| <i data-feather="activity" class="w-8 h-8 text-κ-gold"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Generador Comercial</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Potencia: 20-200 kW | Perfecto para centros comerciales, hospitales, fábricas | |
| </p> | |
| <div class="text-xs text-κ-gold/70"> | |
| Operator: <span class="font-mono">SALE[A(t)]</span> | |
| </div> | |
| </div> | |
| <!-- Generator Model 3 --> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-quantum-100/20 to-slate-800/50 flex items-center justify-center mb-6 group-hover:animate-geometric-lock"> | |
| <i data-feather="repeat" class="w-8 h-8 text-quantum-100"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Generador Industrial</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Potencia: 200-2000 kW | Para grandes industrias y plantas de energía | |
| </p> | |
| <div class="text-xs text-quantum-100/70"> | |
| Operator: <span class="font-mono">SALE[A(t)]</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ALQUILER SECTION --> | |
| <section id="alquiler" class="py-20 bg-gradient-to-br from-slate-900 to-void-black"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-12"> | |
| <span class="text-ψ-green">Alquiler</span> de Equipos | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="space-y-6"> | |
| <p class="text-lg text-quantum-50 leading-relaxed"> | |
| Soluciones temporales de energía para <strong>eventos, emergencias o proyectos específicos</strong>. | |
| </p> | |
| <!-- Rental Features --> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-κ-gold/20 flex items-center justify-center"> | |
| <i data-feather="clock" class="w-4 h-4 text-κ-gold"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-κ-gold transition-colors duration-273">Incluye instalación y soporte técnico</span> | |
| </li> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-ψ-green/20 flex items-center justify-center"> | |
| <i data-feather="users" class="w-4 h-4 text-ψ-green"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-ψ-green transition-colors duration-273">Disponible para corto y largo plazo</span> | |
| </li> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-quantum-100/20 flex items-center justify-center"> | |
| <i data-feather="truck" class="w-4 h-4 text-quantum-100"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-quantum-100 transition-colors duration-273">Equipos desde 5 kW hasta 2000 kW</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Rental Generator Images --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="relative group"> | |
| <img src="https://enzostvs-cached-generation.hf.space/generate/industrial-generator-set?format=landscape-16_9" alt="Generador Industrial" | |
| class="w-full h-48 object-cover rounded-lg border border-quantum-900 group-hover:border-ψ-green transition-all duration-273"> | |
| <div class="absolute -inset-2 bg-gradient-to-r from-ψ-green/20 to-transparent rounded-lg blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-273"></div> | |
| </div> | |
| <div class="relative group"> | |
| <img src="https://enzostvs-cached-generation.hf.space/generate/commercial-generator?format=landscape-16_9" alt="Generador Comercial"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MANTENIMIENTO SECTION --> | |
| <section id="mantenimiento" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-12"> | |
| <span class="text-ψ-green">Mantenimiento</span> Preventivo y Correctivo | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="space-y-6"> | |
| <p class="text-lg text-quantum-50 leading-relaxed"> | |
| Planes de mantenimiento preventivo y correctivo garantizando <strong>Ψ ≡ 1</strong> continuamente. | |
| </p> | |
| <!-- Maintenance Plans --> | |
| <div class="grid sm:md:lg:grid-cols-3 gap-8"> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-ψ-green/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-geometric-lock"> | |
| <i data-feather="repeat" class="w-8 h-8 text-quantum-100"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Mantenimiento Básico</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Incluye: Revisión mensual, cambio de filtros, limpieza de componentes. | |
| </p> | |
| </div> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-κ-gold transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-κ-gold/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-pulse"> | |
| <i data-feather="shield" class="w-8 h-8 text-κ-gold"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Mantenimiento Estándar</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Incluye: Revisión semanal, monitoreo remoto, alertas automáticas</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Incluye: Revisión mensual, cambio de filtros, limpieza de componentes, y reportes detallados. | |
| </p> | |
| </div> | |
| <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273"> | |
| <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-ψ-green/20 to-slate-800/50 flex items-center justify-center mb-6 group-hover:animate-spin"> | |
| <i data-feather="award" class="w-8 h-8 text-κ-gold"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-quantum-100 mb-3">Mantenimiento Premium</h3> | |
| <p class="text-quantum-50 mb-4"> | |
| Incluye: Revisión diaria, soporte 24/7, reemplazo de partes desgastadas, y garantía extendida. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MONITOREO CUÁNTICO SECTION --> | |
| <section id="monitoreo" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-12"> | |
| <span class="text-ψ-green">Monitoreo</span> Cuántico | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="space-y-6"> | |
| <p class="text-lg text-quantum-50 leading-relaxed"> | |
| Consulte por nuestro servicio de <strong>monitoreo remoto cuántico</strong> y asegure el funcionamiento óptimo de sus equipos las 24 horas con <strong>coherencia Ψ-garantizada</strong>. | |
| </p> | |
| <!-- Monitoring Features --> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-ψ-green/20 flex items-center justify-center"> | |
| <i data-feather="radio" class="w-4 h-4 text-ψ-green"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-ψ-green transition-colors duration-273">Supervisión en tiempo real (Δt → 0)</span> | |
| </li> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-κ-gold/20 flex items-center justify-center"> | |
| <i data-feather="activity" class="w-4 h-4 text-κ-gold"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-κ-gold transition-colors duration-273">Alertas automáticas (Ψ < 0.9)</span> | |
| </li> | |
| <li class="flex items-center gap-4 group"> | |
| <div class="w-6 h-6 rounded-full bg-quantum-100/20 flex items-center justify-center"> | |
| <i data-feather="file-text" class="w-4 h-4 text-quantum-100"></i> | |
| </div> | |
| <span class="text-quantum-100 group-hover:text-quantum-100 transition-colors duration-273">Reportes detallados (Base-53)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Quantum Dashboard Visual --> | |
| <div class="relative"> | |
| <div class="aspect-video rounded-2xl border border-quantum-900 bg-slate-900/30 backdrop-blur-lg p-6"> | |
| <!-- Simulated Terminal --> | |
| <div class="font-mono text-sm space-y-2" id="quantum-terminal"> | |
| <div class="text-quantum-100">$ <span class="text-ψ-green">gos-kernel</span> --monitor=all</div> | |
| <div class="text-quantum-100">[Ψ-COHERENCE] Scanning BSP nodes...</div> | |
| <div class="text-quantum-50">├── Node <span class="text-ψ-green">#2566-0303</span>: A(t) = 0.847, N(t) = 1.273</div> | |
| <div class="text-quantum-50">├── Node <span class="text-ψ-green">#61961355</span>: A(t) = 0.923, N(t) = 1.084</div> | |
| <div class="text-ψ-green">├── Ψ ≈ 1.000... LOCK MAINTAINED</div> | |
| <div class="text-quantum-100 animate-kappa-pulse">[STATUS] All timelines rendering at LOD 0</div> | |
| </div> | |
| <!-- Terminal Cursor --> | |
| <div class="absolute bottom-4 left-6 text-ψ-green animate-blink">█</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer id="quantum-footer" class="bg-void-black border-t border-quantum-900 py-8"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="mb-4"> | |
| <span class="text-2xl font-black text-quantum-100">SETECOM</span> | |
| <span class="text-ψ-green">.GOS</span> | |
| <span class="text-xs text-quantum-100/70 block mt-1">v1.273.418.∞</span> | |
| </div> | |
| <p class="text-xs text-quantum-50/70 mb-4"> | |
| © 2024 SETECOM S.A. | Constancia Substrato Nivel-Líder | Todos los derechos reservados en todas las ramas del BSP-Árbol | |
| </p> | |
| <div class="flex justify-center gap-6 text-sm text-quantum-100/70"> | |
| <span>Ψ-Coherence: <span class="text-ψ-green">1.000</span></span> | |
| <span>|</span> | |
| <span>κ-Lock: <span class="text-κ-gold">4/π</span></span> | |
| <span>|</span> | |
| <span>Status: <span class="text-quantum-100 animate-pulse">ONLINE</span></span> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |