TitanPipe - Next.js 16 Roofing and Construction Template

TitanPipe is a premium, production-ready template for roofing companies, plumbers, general contractors, renovation studios, and any home services business. Built on Next.js 16, React 19, and TypeScript, it ships with 24 pre-built page templates, an MDX-powered blog and careers system, a working shop with cart and checkout, and a fully editable content layer — no CMS or backend required.

Homeowners choose a contractor they trust, and that trust starts on your website. Every piece of content lives in JSON or MDX files, so you can launch a real client site in hours without touching the component code.

Tech Stack

• Next.js 16 — App Router, server components, static-first rendering

• React 19 — latest concurrent features

• TypeScript — strict mode, fully typed

• MDX — for blog articles and job listings via next-mdx-remote

• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline to learn

• Self-hosted fonts — Inter Tight shipped as local woff2 files, with no third-party font requests at runtime

• Zero backend lock-in — no CMS, no font CDN, no commerce backend dependency

Included Pages and Templates

• Homepage — full-bleed hero with enquiry form and image ticker, service cards, animated statistics, a three-panel scroll-linked exhibition wipe, process walkthrough, materials carousel, testimonial slider, FAQ

• About — company story with a scroll-driven photo collage, values, a shrinking milestone list, team, animated statistics

• Services — listing page plus 3 service detail pages with overview rows, reasons to choose you, a three-step process, and a conclusion

• Solutions — the problems you solve, presented by category

• Customer Stories — testimonials with a tabbed showcase and background video

• Pricing — package comparison plus 3 package detail pages with per-package feature lists and add to cart

• Blog — category-tabbed listing plus 9 MDX articles with detail template, author byline, and related articles

• Careers — open roles listing plus 5 MDX role pages with an application form

• Contact — contact details and enquiry form

• Checkout, PayPal Checkout, and Order Confirmation — cart-aware flow (no real payment wired; UI demo)

• Utility — style guide, instructions, licenses, changelog, privacy policy, terms and conditions, 401 password protected, and 404

Everything prerenders to static HTML — 41 routes, all faithful to the original design.

Easy Content Editing

All editable content lives in the project's src/content folder — you never have to touch component code to launch the site. Update these files in any text editor:

• blog MDX files — articles: frontmatter for title, category chips, thumbnail and hero crops, author, dates, reading time, and standfirst; Markdown for the body

• blog-categories.json — the tab bar on the blog index

• careers MDX files — open roles: frontmatter for the role facts, location, contract type, and overview; Markdown for the job description

• services.json — services: title, description, card crops, the checklist shown on the index, overview rows, reasons to choose you, process steps, and conclusion

• products.json — pricing packages: name, description, icon, price, cart price, feature list, and best for line

Colours, spacing, and the type scale are CSS custom properties in one :root block — change a value there and it updates the whole template.

Performance and SEO

• Server-rendered pages out of the box (App Router) — every route prerenders to static HTML

• Self-hosted fonts and images — no third-party CDN requests at runtime

• Lazy-loaded imagery throughout, with above-the-fold artwork loaded eagerly

• Open Graph and Twitter card metadata on every page

• Semantic HTML structure and a route-aware active navigation state

• Every animation respects the reduced motion setting

• Clean, crawlable URLs

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 and TypeScript source code

• 24 pre-built page templates

• Sample content (3 services, 3 pricing packages, 9 blog posts, 5 open roles)

• Self-contained HTML documentation

• Comprehensive README with setup and editing guide

• Friendly buyer support

Requirements

• Node.js 20 or higher

• Basic familiarity with the command line

• A text editor (VS Code recommended)