[react component="HeaderHero" title="San Diego's Premier Roofing Contractors - Licensed & Insured" subtitle="Free Estimates • 10+ Years Experience • Financing Available • A+ BBB Rating" bg_image="/public/content/images/san_diego_roofing_remodeling-scaled-1-1.webp" cta_text="Get Your Free Roofing Estimate" social_proof_text="Satisfied Customers This Year" transparent_header="true" scroll_behavior="true"]

React Sections Showcase

Modular, self-contained React components that replicate the exact design of the original site

🏠

HeaderHero Section

Complete header navigation + hero section in one modular component. Features transparent header that changes on scroll, full-screen hero with background image, and mobile-responsive design.

✅ HEADER FEATURES

  • Transparent → white on scroll
  • Logo color switching
  • Mobile hamburger menu
  • Smooth transitions

✅ HERO FEATURES

  • Full-screen background
  • Social proof badges
  • Gradient CTA button
  • Responsive typography

🎯 SCROLL TO TEST:

Notice how the header changes from transparent to white background as you scroll down this page.

📋 Usage Examples

// Basic usage with defaults:
[react_header_hero]
// With custom props:
[react component="HeaderHero" title="Custom Title" bg_image="/path/to/image.jpg"]

⚙️ Available Props:

• title
• subtitle
• bg_image
• cta_text
• phone_number
• transparent_header

🏗️ Modular Architecture Benefits

🎯

Zero Dependencies

No external CSS frameworks, completely self-contained styling

⚡

CSS-in-JS

Component-scoped styles with React Native patterns

🚀

Next.js Ready

Easy migration path to modern React frameworks

📱

Mobile First

Responsive design with touch-optimized interactions

🚧 Coming Soon: More Sections

🛠️

Services Section

👥

About Section

🏆

Trust Badges

📞

Contact Section

🏠

Footer Section

🎯 Each section will be built as a modular, self-contained React component following the same architecture pattern