[Contractor Name] · HVAC site

A trades marketing site. Built to convert homeowners with a leak, not to win a design award. Phone above the fold, service area visible, real photos, named technicians.

Source of truth

Vercel deploys from main. Content (services, service areas, gallery photos) lives in MDX in the repo for v0. Move to Sanity when the client wants to edit themselves.

Tech stack

Next.js 15 (App Router) + React + Tailwind v4. CallRail for the tracking phone number on the site. Resend API for the apply/quote form (emails + SMS to the owner). Cloudinary for real-photo galleries. Sanity (later) for content. Vercel hosting.

Deploy

git push origin main. Vercel auto-deploys. Phone number from CallRail is environment variable; swap when CallRail changes.

File map

• app/page.tsx home: hero with phone, services snapshot, service-area map, recent jobs, reviews
• app/services/[service]/page.tsx per-service pages (/services/ac-repair, /services/heat-pump-install)
• app/service-area/[city]/page.tsx per-city landing pages for local SEO
• app/quote/page.tsx lead form
• app/api/quote/route.ts POST -> Resend email + Twilio SMS to owner
• content/services.ts services list (price ranges, descriptions, FAQ)
• content/service-area.ts cities served (zip codes, drive times)
• content/gallery.ts real job photos (before/after pairs)
• components/PhoneCTA.tsx sticky phone CTA, mobile-prominent

.env keys

• NEXT_PUBLIC_PHONE CallRail tracking number (formatted (555) 555-1234)
• NEXT_PUBLIC_PHONE_TEL raw E.164 (+15555551234) for tel: links
• RESEND_API_KEY
• RESEND_NOTIFY_EMAIL owner's inbox
• TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER, TWILIO_NOTIFY_NUMBER (SMS alerts)
• CALLRAIL_FORM_TRACKING_ID (binds web leads to CallRail)
• GOOGLE_REVIEWS_PLACE_ID for the reviews embed

Hard rules

• Phone number is above the fold on every page. Click-to-call on mobile is the primary CTA.
• License + insurance numbers visible in the footer. Trade audiences look for these.
• Photos are REAL (the team, the trucks, actual jobs). No stock photos of "diverse team in hard hats" -- audience instantly distrusts.
• No em-dashes anywhere (Pangram flags them; owner WILL notice if his copy has them).
• Service-area pages are real local SEO pages: city name in H1, neighborhoods listed, distinct testimonial per city. Not duplicate content.
• Lead form notifies via BOTH email AND SMS. Owner is on a roof, not at a desk.
• Submit must be smoke-tested with real Resend + Twilio before launch. Lost leads = lost revenue.

Recent significant changes

• 2026-05-08: Scaffolded. Locked: phone-first design (homeowner mid-leak is not browsing), per-city pages for local SEO, real photos only, dual email + SMS alerts.

Next session: start here

1. Buy CallRail tracking number, set in .env.
2. Verify Resend domain. Verify Twilio messaging service.
3. Populate content/services.ts and content/service-area.ts with the client's actual scope.
4. Get 30-50 real job photos from the client. Compress + upload to Cloudinary.
5. Submit a real test lead. Confirm email AND SMS arrive within 30 seconds.
6. Run apex-seo before DNS attach.