Site Architecture
Service-Site Rebuild That Makes Each Offer Legible
Rebuild a vague service site into route-per-offer pages where every service has its own URL, scope, and CTA. Visitors stop guessing what you sell and self-select the right path.
HMX Zone
React 19
Verified HMX-owned case
Outcome signals
These are the real outcome statements attached to this HMX case study.
- 1 URL
- per offer, shareable and crawlable
- Self-select
- buyers pick the right service without a call
- Edit once
- offers change in one typed file, not many pages
- No orphans
- build gate blocks broken or unlinked offer pages
Case architecture
Service-Site Rebuild That Makes Each Architecture
6 nodes
Audit the existing site and
Model each offer as a typed
Next
React 19
Fallback Path
1 URL per offer
- 01Audit the existing site and
Rebuild a vague service site into route-per-offer pages where every service has its own URL, scope, and CTA.
- 02Model each offer as a typed
Model each offer as a typed object (slug, tagline, outcomes, scope tiers) in one source-of-truth module
- 03Next
Next.js 16 App Router supports the route, form, or data boundary for Service-Site Rebuild That Makes Each so public UX and backend state stay connected.
- 04React 19
Generate one App Router segment per offer plus a /services index that lists live offers from that data
- 05Fallback Path
When automation confidence is low, route the record to a manual owner with the source, stage, and last action attached.
- 061 URL per offer
1 URL per offer, shareable and crawlable; Self-select buyers pick the right service without a call; Edit once offers change in one typed file, not...
Problem
The operating gap
A single 'what we do' page bundles four or five offers into one scroll. Buyers cannot tell which service fits them, there is no URL to share for a specific offer, and search engines see one shallow page instead of distinct service intent.
Build
What gets built
Stand up a Next.js App Router hub-and-spoke: one /services index plus a typed route per offer driven from a single source-of-truth file. Each hub page gets its own tagline, outcomes, scope tiers, and a context-passing CTA, so the offer is legible to both humans and crawlers from a stable, shareable URL.
Build steps
Service-Site Rebuild That Makes Each Offer Legible uses a web app route, data, and conversion layer for Full-Stack Websites. Rebuild a vague service site into route-per-offer pages where every service has its own URL, scope, and CTA. The architecture connects audit the existing site and, next, react 19, and 1 url per offer with an explicit control path.
- 01Audit the existing site and list the real distinct offers, killing overlaps and renaming to buyer language
- 02Model each offer as a typed object (slug, tagline, outcomes, scope tiers) in one source-of-truth module
- 03Generate one App Router segment per offer plus a /services index that lists live offers from that data
- 04Build a reusable hub scaffold so every offer page is visually consistent and edited in one place
- 05Wire a context-aware primary CTA per page that carries the offer identity into the lead flow
- 06Run route-smoke, typecheck, and build gates so adding an offer cannot ship a broken or orphaned page
Stack
Tools and layers
- Next.js 16 App Router
- React 19
- TypeScript 6
- Tailwind CSS v4
- Typed content SSOT (lib/*.ts)
- Vercel
- Experience layer: Audit the existing site and list the real distinct offers, killing overlaps and renaming to buyer language
- Server layer: Model each offer as a typed object (slug, tagline, outcomes, scope tiers) in one source-of-truth module
- Database layer: Next.js 16 App Router supports the route, form, or data boundary for Service-Site Rebuild That Makes Each so public UX and backend state stay connected.
- Automation layer: React 19 handles routine steps while stand up a Next.js App Router hub-and-spoke: one /services index plus a typed route per offer driven from a single source-of-truth file.
- Measurement layer: 1 URL per offer, shareable and crawlable; Self-select buyers pick the right service without a call; Edit once offers change in one typed file, not...
Data flow
- 01Audit the existing site and list the real distinct offers, killing overlaps and renaming to buyer language
- 02Model each offer as a typed object (slug, tagline, outcomes, scope tiers) in one source-of-truth module
- 03Generate one App Router segment per offer plus a /services index that lists live offers from that data
- 04Build a reusable hub scaffold so every offer page is visually consistent and edited in one place
- 05Wire a context-aware primary CTA per page that carries the offer identity into the lead flow
- 06Run route-smoke, typecheck, and build gates so adding an offer cannot ship a broken or orphaned page
Controls
- A single 'what we do' page bundles four or five offers into one scroll.
- Stand up a Next.js App Router hub-and-spoke: one /services index plus a typed route per offer driven from a single source-of-truth file.
- When automation confidence is low, route the record to a manual owner with the source, stage, and last action attached.
Research basis
A route assembles through form, data, metadata, and deploy checks.
The same website operating path
Full-stack websites for service businesses and operators: route architecture, service pages, lead capture, metadata, proof boundaries, blog/database paths, analytics, and deployment checks.
Route map
Service architecture
Clear service routes
01active
Progress72%
Lead capture
Form and context flow
Lead capture that saves context
02active
Progress86%
Public metadata
SEO and schema layer
SEO and schema on public pages
03active
Progress64%
Launch QA
Analytics and deployment checks
Analytics events tied to CTAs
04active
Progress91%