ray
95 lines
4.7 KiB
Markdown
95 lines
4.7 KiB
Markdown
# AirRepairTeam — Worked Blueprint Example
|
|
|
|
Full blueprint at: `/mnt/seagate8tb/Websites/AirRepairTeam/BLUEPRINT.md`
|
|
|
|
## What This Example Demonstrates
|
|
|
|
A 6-page static website for a multi-trade contractor (HVAC + Handyman/Yardwork) serving 6 Knoxville-area cities. The blueprint covers every page section-by-section with copy psychology, CTA placement, mobile behavior, and local SEO integration.
|
|
|
|
## Key Patterns Illustrated
|
|
|
|
### Dual-Service Routing (Homepage Section 3)
|
|
When a business has two distinct service lines with different customer psychologies (urgent vs. comparison-shopping), the homepage hero routes traffic with two equal-weight CTAs, and Section 3 presents them as side-by-side cards with visual differentiation (cool blue for HVAC, warm green for handyman).
|
|
|
|
### Emergency Landing Page (`/hvac/emergency`)
|
|
Stripped-down page for Google Ads traffic. No nav links. One goal: phone call. The phone number appears twice (hero + sticky bottom bar). Red/urgent accent. Must load in under 1 second — no images, no frameworks, inline CSS only if needed.
|
|
|
|
### Psychology-Driven Service Pages
|
|
|
|
**HVAC page** (high-urgency, high-ticket):
|
|
- Hero leads with emergency language and "no after-hours fees"
|
|
- Pricing table builds trust (most HVAC companies hide pricing)
|
|
- "What to do in an HVAC emergency" section provides SEO content + conversion nudge
|
|
- Phone is always the primary CTA
|
|
|
|
**Handyman page** (comparison shoppers):
|
|
- Hero is a photo of completed work
|
|
- Before/after gallery is THE conversion driver — juxtoposition proves competence
|
|
- 3-step "How It Works" removes friction for first-time customers
|
|
- Lighter, friendlier tone throughout
|
|
|
|
### Local SEO Integration (6 Cities)
|
|
|
|
Cities appear exactly 5 ways across the site:
|
|
1. H1 on homepage: "Knoxville & Surrounding Areas"
|
|
2. H2 on HVAC page: "HVAC Repair in Knoxville, Powell, Halls & Beyond"
|
|
3. Body bullets on HVAC page with fake "response times" per city (makes it useful, not spammy)
|
|
4. Footer on every page: "📍 Proudly serving: Knoxville · Powell · Halls · Corryton · Fountain City · Karns"
|
|
5. Image alt text: "Fence installation in Powell TN"
|
|
|
|
No separate city pages. No city-page links. One consistent signal.
|
|
|
|
### Quote Form Design
|
|
- 6 fields: Name*, Phone*, Email (optional), Service (dropdown)*, Project description*, Lead source
|
|
- No calendar, no file upload, no address, no CAPTCHA (initially)
|
|
- Success state still shows phone number (for emergency callers who used the form)
|
|
- Posts to Formspree/Web3Forms — no backend
|
|
|
|
### Web3Forms Form Pattern
|
|
|
|
Used on the contact page. Key implementation details:
|
|
|
|
**Form handler:** POST to `https://api.web3forms.com/submit` with an access key. The access key is configured in Web3Forms dashboard (free tier available). Form data is emailed directly to the address configured there.
|
|
|
|
**Client-side validation pattern:**
|
|
```js
|
|
function validate() {
|
|
var valid = true;
|
|
function showErr(name) {
|
|
document.getElementById('field-' + name).classList.add('error');
|
|
document.getElementById('error-' + name).classList.add('visible');
|
|
}
|
|
if (!nameField.value.trim()) { showErr('name'); valid = false; }
|
|
if (!phoneField.value.trim()) { showErr('phone'); valid = false; }
|
|
if (!detailsField.value.trim()) { showErr('details'); valid = false; }
|
|
if (!serviceSelect.value) { showErr('service'); valid = false; }
|
|
return valid;
|
|
}
|
|
```
|
|
|
|
**Error clearing on input:** Each input gets an `input` event listener that removes `.error` from itself and `.visible` from its error span — gives instant feedback as the user types.
|
|
|
|
**Loading state:** Button gets `disabled` + `.loading` class. CSS swaps button text for a CSS-only spinner.
|
|
|
|
**Success state:** Form `display: none`, success div gets `.visible`. Message includes the customer's first name (extracted from the name field) and a prominent "if this is an emergency, call now" note with phone number.
|
|
|
|
**Error state:** Red banner at top of form card with "Something went wrong" message. Button re-enables for retry.
|
|
|
|
**CORS note:** Fetch to Web3Forms will be blocked on `file://` origins (browser security). Works correctly on any real domain. Test form behavior locally by manually toggling success/error state classes.
|
|
|
|
### Mobile-Specific Decisions
|
|
- Sticky tap-to-call bar below header on all pages (hidden on desktop)
|
|
- Both the nav bar AND callbar remain sticky — combined ~100px height, acceptable tradeoff
|
|
- Buttons full-width on mobile
|
|
- Phone numbers always `<a href="tel:...">`
|
|
- Touch targets minimum 44px
|
|
|
|
### Implementation Phases
|
|
1. Global shell (header, footer, CSS, JS, mobile nav, callbar)
|
|
2. Emergency HVAC landing page
|
|
3. Contact/quote page
|
|
4. Homepage (all 7 sections)
|
|
5. HVAC service page
|
|
6. Handyman service page
|
|
7. Polish (schema, meta, images, performance)
|