Continuity

Sobre Este Template

Continuity es una plantilla B2B para proveedores de infraestructura de red y hardware de seguridad — cableado estructurado, fibra, conectores, racks, switching gestionado, CCTV y control de acceso. Catorce plantillas de página cubren un catálogo de 20 productos con filtros por categoría y fichas técnicas completas, cuatro verticales de soluciones, casos de éxito, insights, nosotros, contacto y un formulario de solicitud de ficha técnica. La firma es el Live Signal Pulse: una cabeza de brasa recorre un cable SVG vertical por el borde izquierdo mientras haces scroll, energizando cada nodo de sección que atraviesa y funcionando a la vez como índice de secciones. Una secuencia fijada con ScrollTrigger despieza un cable Cat6A en sus cuatro capas constructivas etiquetadas, un campo de señal en canvas enlaza nodos a la deriva hacia el cursor, y un carrito de cotización en localStorage permite acumular SKUs y enviar un mensaje de WhatsApp prellenado — sin checkout ni pasarela de pago. Papel blueprint cálido por defecto, con un contra-registro oscuro Equipment Room para la sección de campo.

Firma

Un único pulso de brasa recorre un cable SVG vertical por el borde izquierdo de la página, impulsado directamente por la posición de scroll en un loop de requestAnimationFrame. Cada nodo de sección que alcanza pasa de piedra a rojo de señal con un glow de drop-shadow, y el índice etiquetado a su lado se pone en bold al mismo ritmo — así el rail es a la vez la animación firma y navegación de secciones real. Se oculta en punteros coarse y con reduced motion, aterrizando en un estado estático totalmente energizado.

Características

• 14 plantillas de página — Inicio, Catálogo, Ficha técnica (PDP), Soluciones, Detalle de Solución, Casos, Caso, Insights, Post, Nosotros, Contacto, Solicitud, Style Guide, 404
• Rail Live Signal Pulse — una cabeza de brasa recorre un cable SVG vertical según tu posición de scroll y enciende cada nodo en rojo al pasar; el mismo rail funciona como nav de secciones con Lenis scrollTo
• Sección transversal de cable fijada — un timeline de ScrollTrigger con scrub separa un cable Cat6A en 4 capas etiquetadas (cubierta LSZH, foil aluminio-mylar, cobre sólido 23 AWG, núcleo conductor) con callouts escalonados
• Carrito de cotización por WhatsApp — drawer con localStorage y control de cantidades que arma un mensaje de WhatsApp prellenado; sin checkout ni pasarela que configurar
• Catálogo de 20 productos con filtros de categoría client-side — Cabling, Connectors, Fiber, Switching, Surveillance, Access, Networking
• Fichas técnicas de producto con tabla de especificaciones tabulada y un cajetín de plano (SKU / CATEGORY / STANDARD / SHEET / SCALE / REV)
• 4 colecciones de contenido tipadas con Zod — products (20 entradas), solutions (4), case studies (2), insights (2)
• Campo de señal interactivo en canvas — nodos de red a la deriva con enlaces por proximidad que se iluminan hacia el cursor, consciente del DPR y pausado fuera de pantalla
• Panel de switch Backbone — los LEDs de puerto se encienden en rojo uno a uno con un stagger ligado a scrub mientras la sección atraviesa el viewport
• Sección Equipment Room en contra-registro oscuro (data-skin="dark") sobre una foto WebP de datacenter, con una retícula SVG rotando en loop de 24s
• Primitivas de atmósfera blueprint — overlay de cuadrícula, grano SVG fractalNoise, marcas de registro en esquinas, reglas de calibre y tipografía de fondo sobredimensionada
• Formulario de solicitud de ficha técnica con validación por campo, honeypot y estado de éxito diseñado — conéctalo a Formspree, Resend o una Astro Action
• Andamiaje i18n ya cableado — config i18n de Astro (en/es), diccionario de chrome EN+ES completo, helpers getLangFromUrl/useTranslations y un componente LangToggle listo para montar
• Todas las imágenes locales y optimizadas a WebP con getImage() — 14 fotos de producto más 6 fotografías de escena, cero requests externos de imagen
• Smooth scroll con Lenis + Astro View Transitions con nav y footer persistentes vía transition:persist
• prefers-reduced-motion y punteros coarse respetados en todo el sitio — el rail de pulso cae a un estado estático totalmente energizado y se omiten los pins

Despliegue