Homepage
Homepage Service-Card Expansion With Live Counts
Replace a vague hero with a homepage service grid where each card links to its hub and reflects live counts of real systems, proof, and case studies — driven from the same data, never hand-edited.
HMX Zone
Service SSOT + selectors (lib/service-data.ts)
Verified HMX-owned case
Outcome signals
These are the real outcome statements attached to this HMX case study.
- Full range
- every service visible from the homepage
- Live counts
- numbers read from real data, not hard-coded
- One jump
- each card routes straight to its hub
- Self-updating
- cards track content as it grows
Case architecture
Homepage Service-Card Expansion With Architecture
6 nodes
Render one homepage card per
Compute live counts of
Next
Service SSOT + selectors
Fallback Path
Live Site
- 01Render one homepage card per
Replace a vague hero with a homepage service grid where each card links to its hub and reflects live counts of real systems, proof, and case studie...
- 02Compute live counts of
Compute live counts of systems, proof, and case studies via shared selectors
- 03Next
Next.js App Router (server components) supports the route, form, or data boundary for Homepage Service-Card Expansion With so public UX and backend state stay connected.
- 04Service SSOT + selectors
Link each card to its service hub with consistent labels
- 05Fallback Path
When automation confidence is low, route the record to a manual owner with the source, stage, and last action attached.
- 06Live Site
Full range every service visible from the homepage; Live counts numbers read from real data, not hard-coded; One jump each card routes straight to...
Problem
The operating gap
The homepage gestures at 'what we do' without showing the full range, and any numbers on it are hard-coded and quickly wrong. Visitors do not grasp the breadth of services and cannot jump straight to the one they need.
Build
What gets built
Build a homepage service grid where each card is generated from the service source-of-truth, links to its hub, and shows live counts pulled from the actual systems, proof, and case-study data. Because the cards and counts read from the same typed selectors the rest of the site uses, they stay accurate automatically as content grows.
Build steps
Homepage Service-Card Expansion With Live Counts uses a web app route, data, and conversion layer for Full-Stack Websites. Replace a vague hero with a homepage service grid where each card links to its hub and reflects live counts of real systems, proof, and case studie... The architecture connects render one homepage card per, next, service ssot + selectors, and live site with an explicit control path.
- 01Render one homepage card per service from the service source-of-truth
- 02Compute live counts of systems, proof, and case studies via shared selectors
- 03Link each card to its service hub with consistent labels
- 04Order and group cards to reflect the real offer range
- 05Keep counts server-computed so they never drift from the data
- 06Verify links and counts with a route and mapping check
Stack
Tools and layers
- Next.js App Router (server components)
- Service SSOT + selectors (lib/service-data.ts)
- React 19
- Tailwind CSS v4
- Typed content counts
- Vercel
- Experience layer: Render one homepage card per service from the service source-of-truth
- Server layer: Compute live counts of systems, proof, and case studies via shared selectors
- Database layer: Next.js App Router (server components) supports the route, form, or data boundary for Homepage Service-Card Expansion With so public UX and backend state stay connected.
- Automation layer: Service SSOT + selectors (lib/service-data.ts) handles routine steps while build a homepage service grid where each card is generated from the service source-of-truth, links to its hub, and shows live counts pulled from th...
- Measurement layer: Full range every service visible from the homepage; Live counts numbers read from real data, not hard-coded; One jump each card routes straight to...
Data flow
- 01Render one homepage card per service from the service source-of-truth
- 02Compute live counts of systems, proof, and case studies via shared selectors
- 03Link each card to its service hub with consistent labels
- 04Order and group cards to reflect the real offer range
- 05Keep counts server-computed so they never drift from the data
- 06Verify links and counts with a route and mapping check
Controls
- The homepage gestures at 'what we do' without showing the full range, and any numbers on it are hard-coded and quickly wrong.
- Build a homepage service grid where each card is generated from the service source-of-truth, links to its hub, and shows live counts pulled from th...
- 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%