✦ StealThis .dev
Pages Medium

DIY — Electronics Platform Landing

A corporate open-hardware landing page for the fictional CIRCUITO platform, built in crisp teal and amber. It pairs a sticky header with a hover mega-menu of board families, a hero split between headline copy and an SVG microcontroller with pulsing pin headers, four hover-reveal ecosystem tiles, a snap-scrolling board carousel whose compare checkboxes feed a docked compare bar, level-badged tutorial cards, a blueprint-grid community band with counters that animate on scroll, and a classroom section with a quote card.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Electronics Platform Landing

CIRCUITO is a fictional open-hardware platform, and this page is its front door. The sticky header carries a wordmark, a five-item nav and a full-width mega-menu that drops on hover (and on click or keyboard focus) to list three board families plus a promoted starter kit. Below it, the hero splits into headline copy with dual CTAs on the left and a hand-drawn SVG board on the right — gold pin headers pulse on staggered delays, and a single amber LED blinks on a steps() timing function.

The line-up is a horizontal snap carousel of six board cards, each with a CSS-drawn PCB render, a price, mono spec chips for clock, flash and GPIO, and a compare checkbox. Ticking a box slides a compare bar up from the bottom of the viewport with a removable pill per board; the limit is three, and exceeding it fires a toast instead of silently failing. Arrow buttons and left/right keys scroll the track by two cards at a time.

Around that sit four ecosystem tiles that expand a row of mono detail chips on hover or focus, six tutorial cards with beginner/intermediate/advanced badges, a dark community band whose four counters count up with a cubic ease when they scroll into view, and a classroom section with a checklist and an amber-ruled testimonial card.

How this look is built

The information architecture is in the spirit of corporate open-hardware sites like Arduino’s, but everything here is original. Modern CSS carries most of it: position: sticky for the header, CSS grid for every section band, scroll-snap-type: x mandatory plus scroll-padding on the track so the carousel needs no JS layout math, and layered repeating-linear-gradient for the blueprint grid on the community band instead of a tiled background image. Tile detail rows animate open with a max-height + opacity transition driven purely by :hover/:focus-within, so they stay usable by keyboard with zero script. JS only handles what CSS cannot: an IntersectionObserver drives both the reveal transitions and the counter animations one time each, which beats the old scroll-listener approach because it never runs on the main thread during scroll and unobserves as soon as an element has fired.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.