Oktet

About This Template

Oktet sells networking hardware — managed switches, routers, access points, fiber and PoE — the way precision equipment should be sold: as a datasheet, not as "tech". Fifteen routes cover a filterable product catalog with detail pages, solution segments, support docs, an insights blog with author profiles, a three-way compare tool, a five-step quote builder, about, contact, legal and an in-character LINK DOWN 404. The dark-neon-circuit reflex is deliberately banned; a single charged signal orange carries the whole system across cool concrete, gunmetal and cyanotype skins. The hero draws its own network topology on load, packets travel the live edges via MotionPathPlugin, and a pinned Spec Rail scrolls an exploded OS-2400 teardown sideways with octet-numbered port callouts.

Signature

The hero boots a network in front of you. Eight nodes pop in with a back.out overshoot, ten hairline edges draw themselves along their own path length via stroke-dashoffset, and a mono readout ticks from LINK ··· to NEGOTIATING to LINK ESTABLISHED · 10GbE as each edge and node flips to the signal-orange live state. Accent packets then loop endlessly along three of the real SVG edges using GSAP MotionPathPlugin. Further down, the Spec Rail pins and scrolls an exploded OS-2400 teardown sideways, calling out each port group by octet.

Features

• 15 routes — Home, Products, Product detail, Solutions, Solution detail, Support, Doc article, Insights, Insight post, About, Compare, Quote, Contact, Legal, 404
• Self-drawing topology hero — 8 nodes and 10 hairline edges draw themselves via stroke-dashoffset, then flip live one by one
• Accent packets loop along the live edges using GSAP MotionPathPlugin aligned to the real SVG paths
• Mono status readout ticks LINK ··· → NEGOTIATING → LINK ESTABLISHED · 10GbE in sync with the hero timeline
• Pinned OS-2400 Spec Rail — an exploded teardown scrolls sideways with octet-numbered port callouts on desktop, stacked list on touch
• Compare tool — select up to 3 products and read them spec by spec, then send the selection to the quote form as a bill of materials
• 5-step quote builder — Segment, Scale, Hardware, Contact, Review — with per-step validation and a 01 / 04 progress indicator
• Product catalog with category filters, a deep-linkable ?cat= query param and a live SHOWING nn / nn UNITS counter
• 6 Zod-typed content collections — products (8), solutions (4), docs (5), posts (4), authors (2), legal (3)
• 3 runtime skins — Anodized #EAE8E2, Graphite #16181B, Blueprint #0F2438 — switched from the nav and persisted in localStorage
• Astro 6 native Fonts API — Saira, Hanken Grotesk and Geist Mono self-hosted via the Fontsource provider and preloaded
• Spotlight cards that track the pointer with a radial accent gradient driven by --mx / --my custom properties
• Count-up stat rows via data-counter attributes, revealed by an island-safe IntersectionObserver hook
• Standards ribbon marquee — the one marquee site-wide, paused on hover and frozen under prefers-reduced-motion
• AVIF + WebP build pipeline over astro:assets with a small optimize() helper and 29 photographed sources
• AA accessibility — skip link, focus-visible rings, AA-checked orange-on-light --accent-2, sitemap, robots.txt and llms.txt

Deployment