# Blueprint-First Multi-Page Static Sites Pattern used for AirRepairTeam (HVAC + handyman business site). Reusable when a user provides a detailed specification document and wants a complete multi-page static site built incrementally. ## When This Pattern Fits - User provides a design blueprint / spec document (markdown, detailed wireframes) - Site is multi-page (5+ pages) with shared shell (header, footer, nav) - Pure static HTML/CSS/JS — no framework, no build step, no backend - Each page has distinct layout and conversion goals - Mobile-first responsive required - Local SEO considerations (schema.org, service areas, NAP consistency) ## Workflow ### 0. Create the Blueprint (if not provided) Write a BLUEPRINT.md that covers: URL structure, page-by-page section breakdowns, mobile rules, SEO checklist, color palette, typography, and build order. Get user signoff before coding. ### 1. Global Shell (Phase 1) - Directory structure: `css/`, `js/`, `images/`, subdirectories per page - `css/style.css`: CSS variables, reset, buttons, header, callbar, footer, responsive breakpoints. Mobile-first. - `js/main.js`: hamburger toggle, scroll shrink, active nav highlighting - `index.html`: header, mobile nav drawer, tap-to-call bar, footer — wired together - Verify: browser navigate + console check for JS errors ### 2-N. Build Pages in Priority Order Each phase produces a single deployable page. Priority order from the blueprint's implementation section. **Pattern per page:** 1. Write the HTML (extend the shell — copy header/footer from index.html if standalone) 2. Add page-specific CSS (appended to style.css, or inline for critical pages) 3. Add page-specific JS (inline `