Waida Studio
Steelcrest - Astro 7 Theme for Roofing and Construction Companies
A contractor's site with a real materials storefront, and not one byte of framework JavaScript. Steelcrest is a complete roofing and construction theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script.
Live demo: https://steelcrest-astro.vercel.app
WHAT'S INSIDE
22 page templates — 43 static pages per build: home, about, services, service detail, projects, project detail, blog, blog post, materials catalogue, material detail, catalogue category, pricing, plan detail, contact, checkout, PayPal checkout, order confirmation, style guide, licenses, changelog, password (401) and 404
Blog — 7 articles as Markdown, with a featured article pulled out above a six-tab category strip, and a three-card "Explore more" row at the foot of every article
Projects — 6 case studies as Markdown, each with a sheet of facts beside the title, a three-picture gallery, a scope-of-work block and a solutions block; two of them also carry the longer card the home page prints, roof area and all
Services — 5 service pages as Markdown, each two labelled blocks of copy with two rows of three photographs set between and after them
Materials — 6 roofing materials priced by the square metre, each with a hero shot, a gauge and coverage sheet, a working add-to-cart form and its own six-row FAQ
Service plans — 2 plans as Markdown, each with a monthly and a project price behind a sliding tab, a feature list and a full detail page
Commerce pages — a cart drawer in the navigation bar, checkout, PayPal checkout and order confirmation, with quantity editing, line totals, subtotals and validation that only tests fields a visitor can actually see (localStorage-based; wire up Stripe or Lemon Squeezy when you're ready to sell)
Motion that earns its keep — 781 scroll reveals at the design's own offsets and delays, six scroll-linked sections, twelve slot-machine counters, two logo marquees, a scrubbed character fade, a row of cards that widen on hover, two background films with a play/pause control, five tab sets and nine pages of FAQ disclosures — all in one vanilla script, all respecting prefers-reduced-motion
Edit content, not code — add a Markdown file with an order, and the listing, its card and its detail page all follow
Design-token system — the whole palette and type scale are 97 CSS custom properties in one :root block; change them there and every page follows
Self-hosted fonts — Inter, two variable woff2 files covering weights 100–900, no CDN requests
Responsive imagery — 187 srcset attributes across the build, so every picture ships at the size the slot actually needs
TypeScript throughout, zod-validated content schema
TECH STACK
Astro 7 · Markdown content collections · TypeScript · the template's own CSS — no utility framework, no build-time CSS pipeline
REQUIREMENTS
Node 22.12 or newer. npm ships with it. Nothing else to install.
LICENSE
One end product per license. You may modify the source freely; you may not resell, sublicense or redistribute it, in whole or in substantial part.
SUPPORT