## Overview
A high-trust, service-area-led HVAC landing page that clones the strongest sections of the two reference sites — `nexgenairandplumbing.com` (multi-vertical service company, big red-CTA hero, location grid, NEXGEN difference, financing) and `hvacmesa.net` (stats-forward trust signals, simple services grid, single testimonial). White canvas, deep navy chrome, and a single signal-red accent reserved for clickable affordances. All sections are hand-rolled in `_components/` — no `@repo/design-system/blocks`.
## Colors
- **`--background`** (white `#FFFFFF`): Page canvas and card surfaces.
- **`--foreground`** (deep navy `#0A1A2A`): Body text and headlines.
- **`--primary`** (signal red `#EA2335`): The "schedule service" red. Mapped from nexgen. Buttons, hover states, accent badges, and headline highlights. If it isn't clickable or eye-catching, it isn't red.
- **`--primary-foreground`** (white): Text on primary surfaces.
- **`--secondary`** (deep navy): Hero overlay, stats strip, footer, financing card.
- **`--secondary-foreground`** (white): Text on navy surfaces.
- **`--muted`** (light grey `#F5F5F5`): Why-us and reviews section backgrounds.
- **`--accent`** (golden `#F4B400`): Star ratings only.
- **`--border`** (`#E5E7EB`): Hairline separators on cards and footer divider.
## Typography
- **Headline Font**: Archivo Black (Google) — solid heavy display sans, uppercase, tight tracking. Single weight (400) but reads as 800–900. The "industrial signal" anchor of the home-services portfolio — locksmith uses Barlow Condensed, plumbing uses Fraunces, electrical uses Space Grotesk.
- **Body Font**: Plus Jakarta Sans (Google) — clean modern sans for everything else.
- **Label Font**: Plus Jakarta Sans (uppercase, wide tracking — section eyebrow labels).
Headlines use `font-heading font-extrabold uppercase` with inline `style={{ fontSize: "clamp(...)", lineHeight: 0.95, letterSpacing: "-0.02em" }}` for poster-scale typography. Section eyebrows use `font-bold uppercase` at 12px with `letterSpacing: "0.16em"`. Body text uses `Plus Jakarta Sans` at 14–17px with `lineHeight: 1.5–1.6`.
## Elevation
Mostly flat. Shadows only on the white feature cards in `WhyUs` and `Reviews` (`shadow-sm`) to lift them off the muted grey background. Cards everywhere else use `border border-border` or sit on contrasting backgrounds.
## Components
All hand-rolled in `_components/` — no `@repo/design-system/blocks`. Every section is a `"use client"` named export with local data arrays inside the file (matching the `comfort-cravers/v6` convention).
1. **Navbar** — sticky top bar with wordmark, six service nav links, phone number, and red "Schedule now" pill. Mobile collapses to a menu icon. Mirrors nexgen's persistent header.
2. **Hero** — full-bleed background image with navy gradient overlay, 4.9-star trust pill, two-line poster headline (`The heat is here. / Is your AC ready?`), red primary CTA + outlined call CTA. Cloned from nexgen's mainstage.
3. **ServiceAreas** — four image cards (North County, Central Metro, East Valley, South County) with title + blurb + "Service in [area]" red link. Cloned from nexgen's location grid.
4. **WhyUs** — three-column "the difference" features with icon tiles on white cards over the muted grey backdrop. Cloned from nexgen's NEXGEN difference section.
5. **Stats** — full-width navy strip with four red oversized stat numbers (150+, 15, 4.9, 24/7). Cloned from hvacmesa's stats section.
6. **Services** — six service category cards in a 3-column grid (AC, heating, IAQ, plumbing, drain & sewer, electrical) with icon tiles and red hover border. Replaces nexgen's services overview text blocks with a more scannable grid.
7. **Reviews** — three-column testimonial grid with 5-star ratings and customer attribution. Combines nexgen's review block with hvacmesa's testimonial.
8. **Financing** — two-column rounded card on white: navy panel with poster headline, three perks, and red CTA on the left; full-bleed photo on the right. Cloned from nexgen's "Get the comfort you need now" financing block.
9. **Footer** — multi-column footer with wordmark, social icons, two link columns (Services, Company), and a Locations column with addresses and phone numbers. Cloned from nexgen's footer.
## Do's and Don'ts
- Do hand-roll every section as a named export inside `_components/`.
- Do reserve `--primary` red exclusively for clickable affordances and eye-catching highlights.
- Do use inline `style={{ fontSize: ... }}` for typography sizes — never arbitrary Tailwind `[]` values.
- Do alternate sections between white and muted grey to create rhythm; navy sections are reserved for hero, stats, financing, and footer.
- Do use semantic tokens (`bg-background`, `text-foreground`, `bg-secondary`, etc.) — never hex values inline.
- Don't pull from `@repo/design-system/blocks` — this template is custom.
- Don't use thin or light font weights anywhere.
- Don't use `font-light` — use `font-medium`/`font-semibold`/`font-bold`/`font-extrabold` only.
- Don't add motion or animation libraries — the page is static and high-contrast on purpose.