# Website Blueprint Template

Use this format when designing a website before building. Write the blueprint first, then build from it.

---

## Business Context
- **Client:** [name]
- **Business:** [type — HVAC, handyman, plumbing, etc.]
- **USPs:** [2-4 unique selling propositions — 24/7, family-owned, flat-rate, fast response]
- **Service Areas:** [city list]

## URL Structure
```
/                         → Homepage
/service-a                → Service page A
/service-a/landing        → Standalone landing page (for ads)
/service-b                → Service page B
/contact                  → Contact / Quote Request
```

## Technology
- Static HTML/CSS/JS — no backend
- Form submissions via Web3Forms (free tier)
- No frameworks, no build step
- System font stack, CSS custom properties

---

## Per-Page Blueprint

For each page, list sections top-to-bottom with:
- Section name
- Visual elements (icons, photos, layout)
- Copy and headlines (with SEO keywords)
- CTAs (buttons, phone links)
- Psychology notes (what the visitor feels, what they need to see)

### Global Header
```
Layout: Logo | Nav links | Phone | CTA button
Mobile: Logo | Hamburger + sticky tap-to-call bar below
```

### Global Footer
```
Layout: Brand | Service links | Contact | Service areas
SEO: All service area cities in footer on every page
```

### Page: [Name]
#### Section 1: Hero
- Headline: [H1 with primary keyword + city]
- Subcopy: [1-2 lines]
- CTAs: [primary CTA, secondary CTA]
- Psychology: [what the visitor is thinking]

#### Section 2: [Name]
- ...

[Repeat for all sections]

---

## Color Palette

| Role | Color | Usage |
|------|-------|-------|
| Primary | hex | primary CTAs, brand elements |
| Secondary | hex | secondary CTAs |
| Emergency | hex | urgency CTAs if applicable |
| Dark | hex | body text, dark sections |
| Light | hex | page background |

## Implementation Priority
1. Global shell (header, footer, CSS, JS)
2. [Highest-conversion page]
3. [Contact form]
4. [Homepage]
5. [Remaining service pages]
6. Polish (schema, meta, images)