✦ StealThis .dev
Pages Medium

DIY — Repair Manual Landing

A dense, utilitarian landing page for FIXWELL, a fictional repair-manual community, built in the spirit of device-first repair wikis. It pairs a prominent live-filtering search field with device category tiles, colour-coded repairability score chips, a nine-step featured guide strip, a dark right-to-repair advocacy band with scroll-triggered stat counters, and a parts-store cross-sell row wired to an add-to-cart toast. Clean white surfaces, teal-blue primary, fix-it green accents, thin borders instead of heavy shadows.

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

Code

Repair Manual Landing

FIXWELL is a fictional community of fixers, and this page is its front door. A sticky translucent header carries the wordmark, four nav links and a cart chip that counts up as you shop. The hero puts one thing first: a big bordered search field. Type into it and a dropdown of matching devices appears live, filtered from a fictional catalogue of sixteen products, with the matched substring highlighted, the device category and guide count underneath, and a repairability chip on the right. It is a real combobox — arrow keys move the selection, Enter picks it, Escape closes it, and pressing / anywhere on the page jumps focus into the field.

Below the fold the information architecture goes device-first: six category tiles with hand-drawn SVG line-art icons and guide counts, then a “most-fixed devices this month” row where each card carries a 1–10 repairability score chip coloured green, amber or red. A featured guide splits into a metadata column (time, difficulty, steps, success rate) and a nine-thumbnail step strip; each thumbnail is a keyboard-operable button that selects the step and fires a toast.

The dark advocacy band is the emotional centre — “Repair is freedom” over a fine blueprint grid, with three stat counters that ease from zero to their final value the first time they scroll into view. The parts row closes with price chips and add-to-cart buttons that increment the header cart, pop its badge and stack a toast in the corner. Everything is CSS or inline SVG; no images, no libraries, no network calls.

How this look is built

The archetype here is the iFixit-style repair wiki — search-led, dense, score-driven — but the construction is entirely modern. CSS Grid carries every row (repeat(6,1fr) tiles, repeat(4,1fr) device and product cards) and collapses through three breakpoints down to a single column at 360px, so no float clearfixes or percentage-width columns are needed. The blueprint texture on the dark band is two repeating-linear-gradient layers stacked under a translucent overlay instead of a tiled PNG, which means it stays crisp at any DPI and costs zero requests. position: sticky on the header replaces the old scroll-listener-plus-fixed-clone trick; the only scroll handler left is a passive one-liner that toggles a shadow class. Reveal animations and the stat counters share one IntersectionObserver rather than polling getBoundingClientRect() in a scroll loop, so the counters fire exactly once, at the right moment, and unobserve themselves — and a prefers-reduced-motion branch snaps them straight to the final number.

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