# Duff's Towing — Homepage Project Summary

## Deliverable
`Duffs Towing Homepage.dc.html` — single-page homepage design.
Supporting files: `image-slot.js`, `support.js`, `assets/`, plus
`Duffs Towing Homepage (offline).html` (self-contained offline export, generated from
`Duffs Towing Homepage - standalone-src.dc.html`).

## Brand system (derived from the logo)
- Navy `#16255B`, deep navy `#0F1A3C`, blue `#1B5FA8`, near-black `#14171C`
- Red accent `#C2381E` (used only for high-priority CTAs: rates, quotes, form submit)
- Light gray fold background `#F4F5F7`, borders `#DDE1E8` / `#E3E7ED`
- Type: Oswald (uppercase headings, CTAs, numerals) + Barlow (body)
- Square-cornered, industrial containers; solid borders and bottom-border CTA bars
- Phone: 905-668-6866 (tel links throughout). Whitby, Ontario. 60+ years, family owned.

## Page structure (top to bottom)
1. Utility bar (24/7, Durham Region)
2. Sticky header: trimmed logo + Canadian-owned maple leaf badge, nav with Services and
   Service Areas dropdowns, phone CTA
3. Hero: full-bleed flatbed photo, headline, and a **two-step request wizard**
   (Step 1 = pick service from 8 icon tiles; Step 2 = name/phone/pickup location, with
   "Change" to go back; success state after submit)
4. Trust strip: 60+ Years / Drivers 100% Bonded / Under Contract with Durham Police /
   Insurance Preferred
5. Services fold: 6 cards, each with a 16:10 photo, on a light-gray fold
6. Rates CTA band (red button)
7. "A Towing Company Durham Region Has Trusted for Generations" — centred header,
   Google review carousel (8 real reviews, profile photos, READ MORE expansion,
   Google favicon), blue feature cards in a row below
8. "Serving Our Community for Over 60 Years" (blue fold) with photo cluster
9. "Extra Care for the Vehicles That Need It" — specialty/flatbed
10. "Been in an Accident?" (blue fold)
11. Service Areas: flat 4x2 grid of all 8 communities (no "also serving" tier),
    Ontario-wide long-distance band with red "Call for a Quote", plus a live Leaflet
    map with shaded Durham service area and labelled city pins (Whitby in red)
12. Final contact CTA + footer

## Decisions / conventions established
- No em dashes anywhere in the copy
- Roadside Assistance is a service card + wizard option, not its own fold
- Service-area dropdown has no "Primary/Also Serving" headings
- Map sits below the sticky header (z-index resolved)
- Maple leaf badge lives in the header, not in a content fold
- Google review avatars are real uploaded photos; letter avatars for the rest
- Placeholder `image-slot` remains for the Roadside Assistance card photo

## Open items
- Roadside Assistance service-card photo still a drop-in placeholder
- Map tiles load from the network, so they are blank in the fully offline export
- Service-area polygon is approximate; can be tightened to real coverage