First Prompt :
Act as a senior full-stack React developer and UI/UX expert specialized in high-converting US home services websites.
Build a complete, production-ready, and fully responsive single-page web application for “Apex Shield Roofing & Exteriors” using React and Vite.js.
Do not use random Lorem Ipsum or generic placeholders. Use the exact data, copy, components, and color codes provided below so this build is 100% deterministic, reproducible, and ready for real US/UK client pitch demos.
=== BRANDING & DESIGN SPECIFICATIONS ===
- Business Name: Apex Shield Roofing & Exteriors
- Location / Service Area: Dallas-Fort Worth Metroplex, TX (Licensed & Insured)
- Phone Number: (800) 555-ROOF / (214) 555-0198
- Tagline: “Texas’ Most Trusted Storm Restoration & Roofing Specialists”
- Design Theme: High-trust contractor aesthetic, bold modern typography, zero fluff, clean cards with rounded-xl corners.
- Color Palette:
- Primary Navy: #0B1B3D (Navbar, primary headers, footer)
- Action Orange / Gold: #F59E0B (CTA buttons, highlight badges, phone links)
- Dark Slate Text: #1E293B
- Soft Background: #F8FAFC
- Card Background: #FFFFFF with subtle borders (#E2E8F0)
=== SECTIONS & COMPONENT STRUCTURE ===
- TOP ANNOUNCEMENT BAR:
- Text: “⚡ 24/7 Emergency Storm Damage Response | Free Drone Roof Inspections This Week”
- Right Side: Direct Call Link: “📞 Call Now: (214) 555-0198”
- STICKY NAVBAR:
- Left: Brand Logo text “APEX SHIELD” with a clean roof/shield badge icon.
- Middle Navigation Links: Services, Why Us, Our Process, Past Projects, Reviews, FAQs.
- Right CTA Button: “Get Instant Quote” (smooth scrolls to the lead form).
- HERO SECTION (Split Two-Column High-Converting Layout):
- Left Column:
- Trust Pill: “★ Rated 4.9/5 by 450+ Texas Homeowners”
- Main H1: “Protect Your Home With Precision Storm & Hail Roofing”
- Subheadline: “Owens Corning Platinum Preferred Contractor. 25-Year Workmanship Warranty, zero-down financing options, and 100% insurance claim assistance.”
- Trust Badges Row: “Licensed & Insured”, “GAF Master Elite”, “BBB A+ Rating”, “0% Financing Available”.
- Right Column: A prominent “Instant Estimate Request” form card right in the hero fold.
- Left Column:
- DYNAMIC LEAD CAPTURE FORM (Primary Backend Wiring Form):
- Card Title: “Request a Free Roof Inspection & Estimate”
- Form Fields (all controlled React inputs):
- Full Name (text, required)
- Property Address / Zip Code (text, required)
- Email Address (email, required)
- Phone Number (tel, required)
- Service Needed (dropdown: [Residential Roof Replacement, Storm/Hail Damage Inspection, Emergency Leak Repair, Commercial Flat Roof, Gutter Installation])
- Insurance Claim Status (radio/dropdown: [Filing New Claim, Already Approved, Self-Pay / Cash, Need Consultation])
- Notes / Damage Details (textarea)
- Submit Button: “Claim My Free Inspection ($350 Value)”
- Success State: Shows an interactive confirmation card: “Thank you! Our local Texas project manager will contact you within 15 minutes.”
- SERVICES GRID (4 Interactive Cards):
- Card 1: “Residential Roof Replacement” | Architectural shingles, metal roofs, and lifetime warranty installations.
- Card 2: “Storm & Hail Damage Restoration” | Free drone roof scans, complete photographic reports, and direct insurance negotiation.
- Card 3: “Commercial Roofing Systems” | TPO, EPDM, flat roof coatings, and scheduled preventive maintenance.
- Card 4: “Gutters & Siding Upgrades” | Seamless aluminum gutters, leaf guards, and James Hardie siding repairs.
- Each card includes a list of 3 bullet points and a “Schedule Inspection” button that presets the service dropdown in the quote form.
- 3-STEP HASSLE-FREE PROCESS SECTION:
- Step 1: “Digital Drone Inspection” — Comprehensive 4K camera scan of missing shingles, hail dents, and leak zones.
- Step 2: “Transparent Quote & Insurance Approval” — Itemized estimate with $0 out-of-pocket assistance for verified storm claims.
- Step 3: “1-Day Clean Installation” — Certified installation team, magnetic yard nail sweep, and 25-year warranty certificate.
- SOCIAL PROOF & TESTIMONIALS (3 US Homeowner Reviews):
- Review 1: “Marcus Sterling (Plano, TX) – Apex handled our entire insurance claim after the March hail storms. New roof installed in literally 8 hours. Flawless work.” (★★★★★)
- Review 2: “Sarah Jenkins (Frisco, TX) – Best contractor experience ever. Zero sales pressure, transparent drone photos, and clean cleanup.” (★★★★★)
- Review 3: “Robert Kowalski (Fort Worth, TX) – Replaced our aging asphalt roof with standing seam metal. Lowered our energy bills and looks incredible.” (★★★★★)
- TRUST & FINANCING BANNER:
- “Need a new roof now? Don’t wait for interior leaks.”
- Highlights: Flexible monthly payments from $99/month, zero penalty for early payoff, all credit profiles considered.
- FAQ ACCORDION (4 Key Questions):
- “How do I know if my roof has hail damage?”
- “Will my homeowners insurance cover roof replacement?”
- “How long does a full roof replacement take?”
- “Are your contractors licensed and background-checked?”
- FOOTER:
- Company info, full Texas address (e.g., 4514 LBJ Freeway, Suite 300, Dallas, TX 75244), 24/7 Emergency Line, copyright, and disclaimers.
=== TECHNICAL & COMPONENT SPECIFICATIONS ===
- Framework: React with Vite.js.
- Modular component structure in
src/components/:Navbar.jsxHero.jsxQuoteForm.jsxServices.jsxProcess.jsxTestimonials.jsxFAQ.jsxFooter.jsx
- Fully responsive across desktop, tablet, and mobile.
- Form inputs must be cleanly controlled with React state (
formData) so they directly map to a Supabase database table (roofing_leads) with columns:name,address,email,phone,service_needed,insurance_status,notes.
