Product Landing Page
Demo brand: MYRSTAD · Wireless hi-fi / multi-room audio · 10 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this product landing page
A complete site for a hardware product: ten built routes covering the speakers, rooms, an about page, a two-post journal, an order-and-contact route and real terms and privacy.
Cold luxury on a mid-graphite field, in Geist against Red Hat Mono. Imagery is the loud channel, and the one cold key-light blue only ever fills — it never carries text. That restraint is what stops a consumer-electronics page turning into a gradient.
The signature move is the hand-over. Multi-room audio passes one stream from room to room with an overlap, and each room plate is uncovered as it reaches the reading line while an accent rail fills across the group. The control ships with it: one room is not in the group, so it is never handed the stream, and its plate ships ungraded.
The 10 pages you get
- Home
/ - The hand-over set-piece, the product claim and the order close.
- Speakers
/speakers/ - The range with its specification groups — the page a considering buyer reads twice.
- Rooms
/rooms/ - What the system does across a house. The page that turns one speaker into three.
- About
/about/ - Who makes it. In audio, provenance and engineering credibility are part of the product.
- Order and contact
/contact/ - A working form plus live tel: and mailto: paths.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - What a room does to the bottom two octaves, and why the cabinet is sealed. Engineering arguments that double as sales copy.
- Terms and privacy
/terms/ - A real legal route covering both.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A scroll-driven hand-over where one stream passes room to room with a real overlap, plates uncovering at the reading line and an accent rail filling across the group
- A declared control: a room outside the group that is never handed the stream, shipped ungraded
- An accent colour that only ever fills and never carries text — a rule, enforced through the build
- A rooms route as well as a products route, which is how multi-room hardware is actually upsold
- Speakers, specification groups and rooms as typed data in
src/data - Cooled highlights with neutral mids across nine images, so product photography reads as one shoot
- Geist with Red Hat Mono, both self-hosted; a working order form plus tel: and mailto:
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.
- The world
- Cold luxury on a mid graphite field. Imagery is loud; one cold key-light blue that only ever fills, never carries text.
- The mechanic
- "The Stream Hands Over": multi-room audio passes one stream room to room with an overlap, each plate uncovered as it reaches the reading line, an accent rail filling across the group.
- Loud channel
- Imagery
- Imagery. Highlights cooled, mids neutral
- Type & palette
- Geist · Red Hat Mono
-
#646874#f7f8fb#a9c8f2 - The control case
- One room is not in the group, so it is never handed the stream and its plate ships ungraded.
Who it is for
Built for hardware and consumer-electronics brands with a small, considered range — audio, lighting, instruments, tools. It suits a product sold on engineering rather than on features-per-dollar. For a single object with a deep story, the watch build goes narrower; for a full catalogue with checkout, ecommerce.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Is there a cart?
No. Ordering runs through a working form and live tel: and mailto: paths. For a small hardware range with a considered purchase, that is usually right — and if you need checkout and inventory, the ecommerce build has the machinery.
Can I use it for something other than audio?
Yes. The hand-over set-piece models something passing between units with an overlap — which fits lighting, sensors, cameras, or anything sold as a system rather than as a single box. The rest is a clean hardware product structure.
Why does the accent never carry text?
Because a cold key-light blue at that saturation will not hold body-copy contrast, and the honest fix is to use it as light rather than as ink. It is the kind of rule that separates a designed page from a themed one.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More retail & product templates
ORRISHAW
Perfumer / fragrance house
Loud
Display type
OSMUND
Watchmaker
Loud
Texture
WILDROOT
Florist
Loud
Palette
KILNMARSH ENAMELWARE
Enamelware homeware store
Loud
Palette