# Gannon's Garage Doors — Site Build Summary (2026-08-13)

## Deliverable

Four-page lead-gen site for Gannon's Garage Doors, built to the project CLAUDE.md spec.
- `index.html` — Home
- `services.html` — Services & pricing
- `about.html` — Why Gannon
- `contact.html` — Contact + quote form
- `styles.css` — Shared stylesheet
- `script.js` — Shared behaviour (nav, reveal, form validation)
- `assets/` — Logos + original client flyers
- `gannons-garage-doors/single-file-for-ghl/` — Same 4 pages, CSS/JS/images inlined

## Design direction

Powder-coated steel and stamped metal, built off the client's existing orange/black gorilla-shield brand.
**Signature element: the flat-rate spec plate.** The pricing renders as a riveted steel equipment tag with the numbers stamped into it. That's not decoration — it's the argument. Most garage door companies refuse to quote until they're standing in your driveway. Gannon publishes his rates. Making the price list look like a permanent, bolted-on plate says "this number doesn't move" better than a paragraph about honesty would.

Type: Archivo Black (display), IBM Plex Sans (body), IBM Plex Mono (prices, labels, data). Mono for the prices reinforces the fixed-rate idea.

## Lead-gen mechanics

- **Click-to-call in four places per page** — header (desktop + mobile), hero CTA, in-body CTAs, sticky mobile bottom bar. All `tel:+1720xxx7011`.
- **Sticky mobile bar** — call + quote, fixed to bottom on any screen under 861px. Body has bottom padding so it never covers content.
- **Symptom-first Home page.** Organized around what the homeowner actually types into Google at 9pm: "won't open," "grinding," "hanging crooked," "feels heavy," "opener runs but door doesn't."
- **Pricing above the fold.** A panicked homeowner wants two answers: can you come, and what will it cost. Both answered before any scrolling.
- **4-field quote form** — name, phone, issue, optional details. Phone auto-formats. Service dropdown pre-fills from `?service=` links.
- **GHL chatbot slot** — `<!-- GHL CHATBOT EMBED -->` before `</body>` on all four pages.
- **Local SEO** — per-page title/meta with city + service, `HomeAndConstructionBusiness` schema on Home, consistent NAP across all pages and the footer.
- **Speed** — no framework, no build step, one small CSS file, one small JS file, SVG icons inline, fonts preconnected.

## Accessibility

Skip link, semantic landmarks, one h1 per page, labeled form fields, `aria-current` on nav, visible focus rings, `prefers-reduced-motion` honored, iframe titled, alt text on images.

## Before launch — needs Gannon's confirmation

1. **Licensed and insured status.** Left as a labeled placeholder in the hero and on About. Do not publish a claim here without confirmation.
2. **Warranty terms** on parts and labor. Placeholder card on Services.
3. **After-hours / emergency service.** MapQuest shows 8am–11:30pm Tue–Fri, and Facebook says "always open." Those conflict. The site currently claims extended hours, not 24/7 emergency service. If he does take emergency calls, that becomes a hero-level headline per the project spec.
4. **Years in business.** Site says 5+ years, taken from Gannon's own Facebook bio. Intake notes said 7. His own words won by default.

Also worth doing:
- **Google Business Profile.** He doesn't appear to have one. It's the single highest-value local SEO move available and it's free. Once live, swap the OpenStreetMap embed on Contact for a Google Maps embed and add a review link on Home.
- **Real job photos.** The site currently uses only logo art. Gannon has photos on Yelp (broken springs, doors). Real before/after shots would lift the Services page considerably.
- **Higher-resolution logo.** The supplied files are 206×206px, upscaled here. Fine at the sizes used, but request the original vector or a large PNG.
- **Domain.** `gannongaragedoors.com` is registered but serving nothing. Canonical tags and schema already point there.

## Deploying

**GHL hosted:** use `single-file-for-ghl/` — each page is fully self-contained, no asset paths to fix. Paste into a custom code element or upload as a page.

**Static hosting / handoff:** use the root build. Upload all files plus `assets/`, keeping the folder structure.

**Form wiring:** the form validates on the front end and shows a success state, but does not submit anywhere yet. Either point `<form>` at the GHL webhook endpoint, or replace the whole `<form>` block with GHL's embed iframe. Marked with a comment in `contact.html`.