Design a high-fidelity landing page for “OC Emergency Plumbing” (desktop-first, but responsive).
GOAL High-authority “rank & rent” lead-gen page optimized for calls + quote submissions. Should feel established, urgent, and trustworthy.
DESIGN STYLE (DO / DON’T)
- Aesthetic: Industrial Corporate (heavy, boxy, trade-service authority)
- Avoid “tech startup” styling: no big rounding, no pastels, no playful gradients
- Border radius: 0–4px max everywhere
- Shadows: hard shadows (not soft “material”)
- Icons: simple solid/mono icons (no duotone, no 3D)
COLOR PALETTE (use these exact hex values)
- Navy: #0F172A (primary dark backgrounds/hero overlay)
- White: #FFFFFF (primary light sections)
- Slate divider: #F1F5F9 (section dividers/background bands)
- Alert Red: #DC2626 (primary buttons + key accents)
- Warning Yellow: #FACC15 (stars/trust highlights only, sparingly)
TYPOGRAPHY
- Headings: condensed, heavy, uppercase (Oswald/Impact style). Tight tracking.
- Body: clean legible sans (Inter/Roboto). 16–18px.
- Buttons: uppercase, bold.
LAYOUT RULES
- Max width container: 1200px
- Grid: 12-col with consistent gutters
- Section padding: 64–96px desktop
- Card borders: 1px #E2E8F0 (or similar neutral)
- Avoid excessive whitespace; make it feel “dense but readable”
PAGE SECTIONS (in this exact order)
- TOP UTILITY BAR (slim, light gray)
- Left: “Emergency Dispatch Active”
- Right: “License #987654 • Bonded & Insured”
- NAVBAR (white)
- Left: bold logo (text logo ok)
- Middle: links (Services, Reviews, Service Area, Pricing, Contact)
- Right: large red button “CALL 24/7” + phone number (clickable)
- HERO (dark moody industrial pipes image w/ navy overlay)
- Layout split 55/45
- Left:
- H1: “EMERGENCY PLUMBING”
- Subhead: “Fast arrival • Upfront pricing • OC local dispatch”
- Trust bullets (3): “4.9★ 180+ reviews”, “Same-day available”, “Guaranteed work”
- Secondary CTA: “See Services”
- Right: Floating “Get a Fast Quote” card (white, hard shadow, boxy)
- Fields: Name, Phone, Zip, Issue dropdown, Optional notes
- CTA button: “GET HELP NOW”
- Microcopy: “We call back in ~5 minutes”
- Success state: “Request received — dispatch will call you shortly.”
- TRUST STRIP (slate band)
- 5 grayscale logos placeholders: BBB, HomeAdvisor, Angi, Yelp, Google
- Small text: “Trusted by homeowners across Orange County”
- SERVICES GRID (white)
- 6 services, 3 columns desktop, boxy cards w/ 1px border, red icons
- Each card: service name + 1-line benefit + “Get Quote” text link
- MID-PAGE CTA BAND (navy)
- Headline: “Don’t let a leak become a flood.”
- Subhead: “Call now or request a callback in minutes.”
- Buttons: ghost “See Pricing” + red “CALL 24/7”
- TESTIMONIALS (white)
- 3 testimonial cards in a row
- Yellow stars + “Verified Customer” badge
- Include city (e.g., Irvine, Anaheim, Costa Mesa)
- SERVICE AREA (slate band)
- Multi-column list of 12–20 OC cities + “and nearby”
- Small map placeholder block (optional)
- FOOTER (near-black)
- 4 columns: Company, Services, Service Area, Support
- Include phone number again + “24/7 Emergency Dispatch”
RESPONSIVE BEHAVIOR (important)
- On mobile: stack hero (form below headline), sticky bottom bar (Call / Quote)
- Keep CTAs always visible; keep typography large; no tiny tap targets
ASSET FALLBACKS
- If logos/images aren’t available, use tasteful placeholders (no broken images).
Deliver a complete landing page design with realistic copy and clear visual hierarchy.