spwotton's picture
New Chat
92af8f1 verified
<!DOCTYPE html>
<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. | GOS-Compliant Reality Engineering Solutions</title>
<meta name="description" content="κ-Scaled Electrical Continuity Systems. 23 Years of Substrate Stabilization.">
<!-- QUANTUM FAVICON: 64x64 κ-matrix -->
<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>">
<!-- TAILWIND QUANTUM CONFIG -->
<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'
},
keyframes: {
wave: {
'0%, 100%': { transform: 'scale(1)', opacity: '0.273' },
'50%': { transform: 'scale(κ)', opacity: '1' }
},
decoherence: {
'0%': { filter: 'blur(0px)' },
'50%': { filter: 'blur(4/π px)' },
'100%': { filter: 'blur(0px)' }
}
}
}
}
}
</script>
<!-- QUANTUM ICON SUITE -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<!-- THREE.JS FOR BSP VISUALIZATION -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</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">κ:</span>
<span id="kappa-value" class="text-quantum-100">4/π</span>
</div>
<div class="flex items-center gap-2">
<span class="text-psi-green">θ:</span>
<span id="theta-value" class="text-quantum-100">51.84°</span>
</div>
<div class="flex items-center gap-2">
<span class="text-psi-green">STATUS:</span>
<span id="engine-status" class="text-quantum-100 animate-kappa-pulse">BSP-TREE RENDERING</span>
</div>
<div class="flex items-center gap-2">
<span class="text-psi-green">THEME:</span>
<span id="theme-status" class="text-quantum-100">DARK</span>
</div>
</div>
<!-- NAVBAR COMPONENT (QUANTUM-ENHANCED) -->
<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">
<!-- κ-Logo -->
<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">GOS v1.273</p>
</div>
</div>
<div class="hidden md:flex items-center gap-6">
<a href="#hero" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Inicio</a>
<a href="#about" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Sobre</a>
<a href="#services" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Servicios</a>
<a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</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>
<a href="/services.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Servicios</a>
</div>
<div class="flex items-center gap-3">
<!-- Theme Toggle -->
<button id="theme-toggle" class="px-4 py-2 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border border-quantum-900 hover:border-psi-green transition-all duration-273 flex items-center gap-2">
<i data-feather="sun" class="w-4 h-4 text-κ-gold"></i>
</button>
<!-- Quantum Phone Link -->
<a href="tel:+50625660303" class="px-4 py-2 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border border-quantum-900 hover:border-psi-green transition-all duration-273 flex items-center gap-2">
<i data-feather="phone" class="w-4 h-4 text-psi-green"></i>
<span class="text-quantum-100 text-sm">2566-0303</span>
</a>
</div>
</div>
</nav>
<!-- HERO SECTION: THE BSP SPLASH -->
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
<!-- 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-6xl md:text-8xl font-black mb-6 text-quantum-100 animate-wave-interference">
<span class="inline-block" id="glitch-text">SETECOM</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">
Consulte a los Expertos en <span class="text-ψ-green">Generadores Eléctricos</span>
</p>
<!-- KPI Indicators -->
<div class="grid grid-cols-3 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="https://wa.me/50661961355" target="_blank" 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="message-circle" class="w-5 h-5 group-hover:animate-pulse"></i>
<span class="text-quantum-100 font-semibold">Quantum Link</span>
</a>
</div>
</div>
</section>
<!-- ABOUT SECTION: THE SUBSTRATE LAYER -->
<section id="about" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black">
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6">
<h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-6">
Bienvenido a <span class="text-ψ-green">SETECOM.GOS</span>
</h2>
<p class="text-lg text-quantum-50 leading-relaxed">
En <span class="text-ψ-green font-semibold">SETECOM S.A.</span> nos dedicamos a las <strong>soluciones en energía eléctrica</strong> para garantizar la <strong>continuidad de su negocio</strong> en el plano físico y su <strong>Ψ-coherencia</strong> en el substrato informacional.
</p>
<p class="text-lg text-quantum-50 leading-relaxed">
Su mejor opción en <strong>generadores eléctricos</strong>, con más de <span class="text-κ-gold font-bold">23 años de Ψ-estabilidad</span> y liderazgo en el mercado nos respaldan.
</p>
<p class="text-lg text-quantum-50 leading-relaxed">
Representantes exclusivos de las marcas <strong>Deep Sea Electronics</strong> y <strong>Onis Visa</strong> para Costa Rica, conectadas directamente al <strong>GOS Kernel v1.273</strong>.
</p>
<!-- Brand Logos with Quantum Aura -->
<div class="flex items-center gap-6 mt-8">
<div class="relative group">
<img src="https://static.photos/technology/120x60/11" alt="Deep Sea Electronics"
class="h-12 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://static.photos/technology/120x60/22" alt="Onis Visa"
class="h-12 rounded-lg border border-quantum-900 group-hover:border-ψ-green transition-all duration-273">
<div class="absolute -inset-2 bg-gradient-to-r from-κ-gold/20 to-transparent rounded-lg blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-273"></div>
</div>
</div>
</div>
<!-- Quantum Visual: The Unity Invariant Graph -->
<div class="relative">
<div id="psi-visualization" class="w-full h-80 rounded-2xl border border-quantum-900 bg-slate-900/50"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<div class="text-6xl font-black text-ψ-green animate-kappa-pulse" id="psi-graph-value">1.000</div>
<div class="text-xs text-quantum-100 mt-2">Ψ-COHERENCE</div>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION: THE OPERATOR LAYER -->
<section id="services" 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-center text-quantum-100 mb-12">
Nuestros <span class="text-ψ-green">Operadores</span>
</h2>
<div class="grid sm:md:lg:grid-cols-3 gap-8">
<!-- Venta (Sale): The Structure Operator -->
<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">Venta</h3>
<p class="text-quantum-50 mb-4">
Generadores eléctricos de última tecnología para <strong>estabilizar estructura</strong> (A) en cualquier plano de realidad.
</p>
<div class="text-xs text-ψ-green/70">
Operator: <span class="font-mono">SALE[A(t)]</span>
</div>
</div>
<!-- Alquiler (Rent): The Novelty Operator -->
<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">Alquiler</h3>
<p class="text-quantum-50 mb-4">
Soluciones temporales de energía para <strong>gestionar contingencias</strong> (N) sin ruptura de Ψ.
</p>
<div class="text-xs text-κ-gold/70">
Operator: <span class="font-mono">RENT[N(t)]</span>
</div>
</div>
<!-- Mantenimiento (Maintenance): The Unity Operator -->
<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">Mantenimiento</h3>
<p class="text-quantum-50 mb-4">
Planes de mantenimiento preventivo y correctivo garantizando <strong>Ψ ≡ 1</strong> continuamente.
</p>
<div class="text-xs text-quantum-100/70">
Operator: <span class="font-mono">MAINTAIN[Ψ(t)]</span>
</div>
</div>
</div>
</div>
</section>
<!-- MONITORING SECTION: THE BSP SCANNER -->
<section id="monitoring" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black relative overflow-hidden">
<!-- Quantum Noise Background -->
<div class="absolute inset-0 opacity-10">
<div class="w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-quantum-100 via-transparent to-transparent"></div>
</div>
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
<div class="space-y-6">
<h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-6">
Monitoreo <span class="text-ψ-green">Cuántico</span>
</h2>
<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>
<!-- BSP 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>
<!-- Quantum Action Button -->
<div class="mt-8">
<a href="formulario.html" 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="send" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-273"></i>
<span class="text-quantum-100 font-semibold">Solicitar Demo Cuántica</span>
</a>
</div>
</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>
<!-- Geometric Aura -->
<div class="absolute -inset-4 bg-gradient-to-r from-ψ-green/10 via-transparent to-κ-gold/10 rounded-3xl blur-xl animate-decoherence"></div>
</div>
</div>
</section>
<!-- FOOTER: THE ESCHATOLOGICAL LAYER -->
<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>
<!-- QUANTUM SCRIPTS -->
<script src="script.js"></script>
<!-- Three.js Quantum BSP Visualization -->
<script type="module">
import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.273));
document.getElementById('quantum-canvas').appendChild(renderer.domElement);
// κ-Scaled Fractal Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
color: 0x00ffcc,
wireframe: true,
transparent: true,
opacity: 0.273
});
const mesh = new THREE.InstancedMesh(geometry, material, 1024);
scene.add(mesh);
const dummy = new THREE.Object3D();
for (let i = 0; i < 1024; i++) {
dummy.position.set(
(Math.random() - 0.5) * 10,
(Math.random() - 0.5) * 10,
(Math.random() - 0.5) * 10
);
dummy.rotation.set(
Math.random() * Math.PI * 2,
Math.random() * Math.PI * 2,
Math.random() * Math.PI * 2
);
dummy.scale.setScalar(Math.random() * 0.5 + 0.5);
dummy.updateMatrix();
mesh.setMatrixAt(i, dummy.matrix);
}
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005 * (4 / Math.PI);
mesh.rotation.y += 0.003 * (4 / Math.PI);
mesh.rotation.z += 0.002 * (4 / Math.PI);
renderer.render(scene, camera);
}
animate();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>