Oktet

Sobre Este Template

Oktet vende hardware de networking — switches gestionables, routers, access points, fibra y PoE — como se debe vender el equipamiento de precisión: como un datasheet, no como "tech". Quince rutas cubren un catálogo de producto filtrable con páginas de detalle, segmentos de solución, documentación de soporte, un blog de insights con perfiles de autor, un comparador de hasta tres equipos, un configurador de presupuesto en cinco pasos, about, contacto, legal y un 404 en personaje con LINK DOWN. El reflejo dark + neón + trazas de circuito está prohibido a propósito; un único naranja signal carga todo el sistema sobre skins de hormigón frío, gunmetal y cianotipo. El hero dibuja su propia topología de red al cargar, los paquetes recorren las aristas activas con MotionPathPlugin, y un Spec Rail pinned desplaza en horizontal el despiece del OS-2400 con callouts de puertos numerados por octetos.

Firma

El hero arranca una red delante de ti. Ocho nodos entran con un overshoot back.out, diez aristas hairline se dibujan solas siguiendo su propia longitud de path vía stroke-dashoffset, y un readout mono avanza de LINK ··· a NEGOTIATING y a LINK ESTABLISHED · 10GbE mientras cada arista y nodo pasa al estado live en naranja signal. Después, los paquetes recorren en bucle tres de las aristas SVG reales con GSAP MotionPathPlugin. Más abajo, el Spec Rail se queda pinned y desplaza en horizontal el despiece del OS-2400, señalando cada grupo de puertos por octeto.

Características

• 15 rutas — Inicio, Productos, Detalle de producto, Soluciones, Detalle de solución, Soporte, Artículo de doc, Insights, Post, About, Comparador, Presupuesto, Contacto, Legal, 404
• Hero de topología autodibujada — 8 nodos y 10 aristas hairline se dibujan solas vía stroke-dashoffset y luego pasan a live una a una
• Paquetes de color recorren en bucle las aristas activas con GSAP MotionPathPlugin alineado a los paths SVG reales
• Readout mono que avanza LINK ··· → NEGOTIATING → LINK ESTABLISHED · 10GbE sincronizado con la timeline del hero
• Spec Rail OS-2400 pinned — un despiece se desplaza en horizontal con callouts de puertos numerados por octetos en desktop, y lista apilada en táctil
• Comparador — selecciona hasta 3 productos y léelos spec a spec, luego manda la selección al formulario de presupuesto como bill of materials
• Configurador de presupuesto en 5 pasos — Segmento, Escala, Hardware, Contacto, Revisión — con validación por paso e indicador de progreso 01 / 04
• Catálogo de producto con filtros por categoría, query param ?cat= enlazable y contador en vivo SHOWING nn / nn UNITS
• 6 colecciones de contenido tipadas con Zod — products (8), solutions (4), docs (5), posts (4), authors (2), legal (3)
• 3 skins conmutables en runtime — Anodized #EAE8E2, Graphite #16181B, Blueprint #0F2438 — se cambian desde la nav y se guardan en localStorage
• Fonts API nativa de Astro 6 — Saira, Hanken Grotesk y Geist Mono self-hosted vía el provider de Fontsource y con preload
• Cards con spotlight que siguen el puntero mediante un gradiente radial de acento controlado por las custom properties --mx / --my
• Filas de estadísticas con count-up vía atributos data-counter, reveladas por un hook IntersectionObserver seguro dentro de islas
• Marquee de estándares — el único marquee de todo el sitio, se pausa en hover y se congela con prefers-reduced-motion
• Pipeline AVIF + WebP en build sobre astro:assets con un helper optimize() y 29 fotografías de origen
• Accesibilidad AA — skip link, anillos focus-visible, --accent-2 naranja verificado AA sobre claro, sitemap, robots.txt y llms.txt

Despliegue