# Integrity Roofing — Homepage Concept Review

Three high-fidelity homepage prototypes for **Integrity Roofing, LLC** (Hickory, NC). The client picks one direction, and we rebuild the winner as a WordPress site.

```
.
├── index.html                  ← chooser page (open this first)
├── proposal-1-trust/           ← "Trust & Authority"
├── proposal-2-conversion/      ← "Direct Response / High-Conversion"
├── proposal-3-premium/         ← "Premium / Modern Editorial"
├── research/                   ← brand reference + downloaded assets
│   ├── BRAND_GUIDELINES.md
│   ├── CONTENT.md
│   └── assets/images/          ← logos, drone shots, real roof photos
├── _archive/                   ← previous concept round
├── docker-compose.yml
├── nginx.conf
└── README.md                   ← you are here
```

## Run locally with Docker

```bash
docker compose up -d
```

Then open one of:

- **http://localhost:8086/** — chooser landing page (compare all three)
- **http://localhost:8086/proposal-1-trust/** — Trust & Authority
- **http://localhost:8086/proposal-2-conversion/** — Direct Response
- **http://localhost:8086/proposal-3-premium/** — Premium Editorial

Edits to any HTML/CSS/JS show up on browser refresh — folders are mounted as read-only volumes into nginx. No rebuild needed.

### Stop

```bash
docker compose down
```

### Logs

```bash
docker compose logs -f web
```

## The three directions, in one line each

| # | Name | Strategy | Best for |
|---|---|---|---|
| 1 | **Trust & Authority** | Look established, licensed, family-run. Conservative + credentialed. | Organic search, insurance-claim customers, older homeowners. |
| 2 | **Direct Response** | Aggressive lead capture. Form above the fold. Urgency triggers. | Paid traffic (Google Ads, Meta), storm-season campaigns. |
| 3 | **Premium Editorial** | Position as the premium choice. Quiet, design-forward, restrained. | Higher-ticket replacements, Charlotte metro, architecture-conscious. |

## What's the same across all three

Every proposal includes:

- Real NAP — `1614 Tate Blvd. SE, Hickory, NC 28602 · (828) 448-0855 · office@integrityroofingnc.com`
- Sticky header nav with phone + Get Quote CTA
- **Accessible quote modal** (focus-trap, ARIA, Esc + backdrop close, inline validation, confirmation state) — soft-triggered at 40% scroll + exit-intent on desktop
- Quote form fields: Name · Phone · Email · Service · Message
- **Embedded Google Map** to the Hickory office
- 6 services overview (Residential, Commercial, Storm, Insurance, Inspections, Gutters, Repairs)
- Testimonials grid — fresh, roofing-specific copy with name + neighborhood + 5★
- Partners / certifications strip (GAF, Owens Corning, CertainTeed, BBB A+, Angi, HomeAdvisor)
- Service area list (counties + cities + zips from the real footprint)
- Mobile sticky bottom bar — Call + Quote
- Footer with full NAP, hours, license # placeholder, social links
- Schema.org `RoofingContractor` JSON-LD with real NAP
- Semantic HTML5, lazy-loaded media, all sections commented `<!-- HERO -->`, `<!-- TESTIMONIALS -->`, etc., for WordPress block mapping
- No build tools — vanilla HTML/CSS/JS + Tailwind via CDN + Google Fonts + Lucide icons

## What's different

That's the point. Visit each `/proposal-N-*/` URL and compare hero treatment, lead-capture moment, color confidence, tone, type voice. The README at root + chooser at `/` summarize each direction's pitch.

## After the client picks

The winning direction becomes the spec for the WordPress build:
- Convert section comments into Gutenberg block patterns or a block theme
- Add Services subpages (Residential / Commercial / Storm / Insurance Claims / Inspections / Gutters / Repairs)
- Add Gallery (full before/after library), Reviews (live Google import), Financing, Blog, Contact
- Replace inline modal form with WPForms or Gravity Forms + reCAPTCHA + email notifications
- Sitewide schema markup, Yoast SEO, page-speed pass

## Notes

- Asset paths inside proposals use `../research/assets/images/` — nginx serves the whole project root so these resolve at `/research/assets/images/...`.
- The Docker port `8086` can be changed by editing `docker-compose.yml` (port 8080 is commonly used by other local projects, so we default to 8086).
- The `_archive/` folder contains an earlier concept round — kept for reference, not served.

Built 2026.