Steelcrest is a Next.js 16 template for roofing contractors, cladding specialists, building envelope firms and construction companies — the trades whose work is judged from the ground and specified on numbers. It ships 22 page templates covering 43 routes: six project case studies, five service pages, a seven-article blog with category tabs, a six-material shop with a working basket and a three-page checkout, two service plans with monthly and yearly pricing, and every utility page a real site needs. Built on the App Router with React 19 and TypeScript in strict mode, and every page prerenders to static HTML. No CMS or backend required.

If you fit residential roofs, install commercial systems, supply panels and tiles by the square metre or handle storm damage at short notice, this is the site with the pages already in it. Content lives in JSON or MDX files — add a case study and it appears in the grid and at its own URL with no component to touch — so you can launch in hours rather than weeks.

Tech Stack

• Next.js 16 — App Router, static prerendering for every route
• React 19 — server components by default, client components only where state actually lives
• TypeScript — strict mode, no any in the content layer
• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties. No utility framework, no CSS-in-JS, no build step beyond Next's own
• Self-hosted Inter — two WOFF2 subsets covering weights 100 to 900. No third-party font request at runtime
• No animation library — the scroll reveals, the mega-menu, the tab sets, the counters, the marquee and the scroll-linked sections are one TypeScript file that moves classes and custom properties; the CSS does the rest
• gray-matter — the only runtime dependency beyond React and Next

Included Pages and Templates

Marketing

• Home — full-bleed hero, slot-machine counters, a three-step process row that widens on hover, a before-and-after comparison row, a materials grid, a stacking service scrub, a scroll-driven testimonial rail with a background film, and an FAQ
• About — the firm, its numbers and its people
• Contact — an enquiry form and three departments

Work and services

• Project grid, plus 6 case study pages with type, location, year and material
• Service list, plus 5 service pages with their own scope and inclusions

Shop

• Materials catalogue, plus 6 material pages with specifications and a buy box
• A catalogue category page
• Slide-out basket, checkout, PayPal checkout and order confirmation

Content and pricing

• Blog with keyboard-navigable category tabs, plus 7 full-length articles
• Pricing grid with monthly and yearly billing, plus 2 service plan pages

Utility

• Style guide, licences, changelog, password-protected 401 and 404

22 page templates covering 43 routes, every one prerendered as static HTML.

Easy Content Editing

Everything a page prints lives in src/content/. Add a file and it publishes:

• blog/*.mdx — the 7 articles: author, date, category, card and hero photographs, and the body
• projects/*.mdx — the 6 case studies: the sheet of facts beside the title, and three labelled regions of body copy
• services/*.mdx — the 5 service pages
• plans/*.mdx — the 2 service plans
• products.json — the 6 materials: photograph, price range, two specifications and the values the basket stores
• plan-cards.json — the 4 pricing cards, two plans across two billing periods
• categories.json, blog-categories.json, featured-posts.json, plates.json — the catalogue category, the blog's tab strip, the articles featured under every post, and the photographs a whole family shares

Bodies are plain Markdown — ### headings, paragraphs and - lists — placed inside the design's own markup, so the words are yours and the layout stays exact. Each file states its own order, so the arrangement lives with the content.

Re-theming is one file. Every colour, type size, spacing step and radius is a CSS custom property in the :root block at the top of public/assets/css/styles.css.

Performance and SEO

• Every route prerenders to static HTML — nothing is rendered on demand
• No third-party requests at runtime: no font CDN, no icon CDN, no analytics, no video embed
• Lazy-loaded imagery with responsive srcset rungs; above-the-fold artwork eager
• The background film is preload="none" behind a poster frame, so 2.9 MB is never fetched until someone scrolls to it
• Per-page title, description and Open Graph and Twitter cards, generated from one shared helper
• Semantic HTML with a single <h1> per page and a heading outline with no gaps
• Skip link, landmarks, ARIA patterns on the tab sets, accordions, mega-menu and basket drawer, and every control keyboard reachable and screen-reader named
• prefers-reduced-motion respected throughout, and the site is fully readable with JavaScript switched off

Deployment

npm run build produces a fully static site. Deploy it to Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or any static host — or run npm run start behind Node 20. No database, no API keys, no environment variables.

What You Get

• The complete Next.js 16 project, source included and commented throughout
• 22 page templates, 43 static routes
• A content layer of 20 MDX files and 5 JSON files
• A working basket and a three-page checkout in localStorage
• Full HTML documentation, a README, a changelog and a third-party licence file
• Self-hosted fonts and every image and video the demo uses

Requirements

• Node.js 20 or newer
• npm 10 or newer (pnpm, yarn and bun also work)
• Basic React and TypeScript familiarity to customise components; none needed to edit content