Merge version_5_1781410026599 into main #4
@@ -1,186 +1,34 @@
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import HeroBillboardFeatures from "@/components/sections/hero/HeroBillboardFeatures";
|
||||
import FeaturesStickyCards from "@/components/sections/features/FeaturesStickyCards";
|
||||
import TestimonialMarqueeOverlayCards from "@/components/sections/testimonial/TestimonialMarqueeOverlayCards";
|
||||
import FeaturesComparison from "@/components/sections/features/FeaturesComparison";
|
||||
import FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import WhyUsSection from './HomePage/sections/WhyUs';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<StyleProvider siteBackground="none" heroBackground="lightRaysCenter" buttonVariant="expand">
|
||||
|
||||
|
||||
<HeroBillboardFeatures
|
||||
badge="Now Booking"
|
||||
title="Your Car Deserves the Best"
|
||||
description="Professional detailing services that restore your vehicle's showroom finish. We use premium products and proven techniques to protect and enhance every surface."
|
||||
primaryButton={{ text: "Book Now", href: "#contact" }}
|
||||
secondaryButton={{ text: "Our Services", href: "#services" }}
|
||||
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
|
||||
features={[
|
||||
{
|
||||
icon: "Shield",
|
||||
title: "Paint Protection",
|
||||
description: "Industry-leading sealant with 5-year warranty",
|
||||
},
|
||||
{
|
||||
icon: "Star",
|
||||
title: "5-Star Rated",
|
||||
description: "Trusted by 500+ happy customers",
|
||||
},
|
||||
{
|
||||
icon: "Award",
|
||||
title: "Certified Detailers",
|
||||
description: "IDA certified professionals on every job",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<HeroSection />
|
||||
|
||||
<div id="services">
|
||||
<FeaturesStickyCards
|
||||
items={[
|
||||
{
|
||||
title: "Interior Detail",
|
||||
description: "Deep cleaning of seats, carpets, dashboard, and all interior surfaces. Leather conditioning and fabric protection included.",
|
||||
primaryButton: { text: "Book Interior", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/feature1.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-1.webp",
|
||||
},
|
||||
{
|
||||
title: "Exterior Detail",
|
||||
description: "Hand wash, clay bar treatment, and premium wax application for a mirror-like finish that lasts.",
|
||||
primaryButton: { text: "Book Exterior", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-2.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
|
||||
},
|
||||
{
|
||||
title: "Paint Protection",
|
||||
description: "Long-lasting protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
|
||||
primaryButton: { text: "Book Protection", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features3.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-3.webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
|
||||
<div id="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Testimonials"
|
||||
title="Hear It From Our Clients"
|
||||
description="Real results from real customers who trust us with their vehicles"
|
||||
primaryButton={{ text: "Book Now", href: "#contact" }}
|
||||
secondaryButton={{ text: "View Gallery", href: "#services" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "James Wilson",
|
||||
role: "BMW Owner",
|
||||
company: "Miami, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp",
|
||||
},
|
||||
{
|
||||
name: "Maria Santos",
|
||||
role: "Tesla Owner",
|
||||
company: "Coral Gables, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial2.webp",
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: "Porsche Owner",
|
||||
company: "Brickell, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
|
||||
},
|
||||
{
|
||||
name: "Sarah Thompson",
|
||||
role: "Mercedes Owner",
|
||||
company: "South Beach, FL",
|
||||
rating: 4,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
|
||||
},
|
||||
{
|
||||
name: "Michael Johnson",
|
||||
role: "Audi Owner",
|
||||
company: "Coconut Grove, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial5.webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="why-us">
|
||||
<FeaturesComparison
|
||||
tag="Why Us"
|
||||
title="The Detailing Difference"
|
||||
description="See why professional detailing is worth the investment"
|
||||
primaryButton={{ text: "Get Started", href: "#contact" }}
|
||||
negativeItems={[
|
||||
"Automatic car washes scratch paint",
|
||||
"DIY products leave swirl marks",
|
||||
"No protection against UV damage",
|
||||
"Interior stains and odors linger",
|
||||
"Resale value drops over time",
|
||||
]}
|
||||
positiveItems={[
|
||||
"Hand wash and paint correction",
|
||||
"Flawless, swirl-free finish",
|
||||
"Ceramic coating blocks UV rays",
|
||||
"Deep interior sanitization",
|
||||
"Maintains and boosts resale value",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<WhyUsSection />
|
||||
|
||||
|
||||
<div id="faq">
|
||||
<FaqSimple
|
||||
tag="FAQ"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our detailing services"
|
||||
items={[
|
||||
{
|
||||
question: "How long does a full detail take?",
|
||||
answer: "A full interior and exterior detail typically takes 4-6 hours depending on the size and condition of your vehicle. Ceramic coating applications may require an additional day for proper curing.",
|
||||
},
|
||||
{
|
||||
question: "How often should I get my car detailed?",
|
||||
answer: "We recommend a full detail every 3-4 months to maintain your vehicle's appearance and protect its surfaces. Ceramic coated vehicles can go longer between details.",
|
||||
},
|
||||
{
|
||||
question: "What is ceramic coating and how long does it last?",
|
||||
answer: "Ceramic coating is a liquid polymer applied to your vehicle's exterior that creates a permanent bond with the paint. It provides superior protection against UV rays, chemicals, and minor scratches, lasting 2-5 years depending on the package.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer mobile detailing services?",
|
||||
answer: "Yes, we offer mobile detailing for your convenience. Our fully equipped team can come to your home or office. Mobile service availability depends on your location and the package selected.",
|
||||
},
|
||||
{
|
||||
question: "What products do you use?",
|
||||
answer: "We exclusively use premium, professional-grade products that are safe for all vehicle surfaces. Our ceramic coatings are sourced from industry-leading manufacturers with proven durability and performance.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact">
|
||||
<ContactSplitForm
|
||||
tag="Contact"
|
||||
title="Get Your Free Estimate"
|
||||
description="Tell us about your project and we'll get back to you within 24 hours."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your vehicle...", rows: 4, required: true }}
|
||||
buttonText="Send Message"
|
||||
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/contact/cta-video.mp4"
|
||||
/>
|
||||
</div>
|
||||
<ContactSection />
|
||||
|
||||
|
||||
</StyleProvider>
|
||||
|
||||
25
src/pages/HomePage/sections/Contact.tsx
Normal file
25
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact">
|
||||
<ContactSplitForm
|
||||
tag="Contact"
|
||||
title="Get Your Free Estimate"
|
||||
description="Tell us about your project and we'll get back to you within 24 hours."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your vehicle...", rows: 4, required: true }}
|
||||
buttonText="Send Message"
|
||||
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/contact/cta-video.mp4"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/Faq.tsx
Normal file
39
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq">
|
||||
<FaqSimple
|
||||
tag="FAQ"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our detailing services"
|
||||
items={[
|
||||
{
|
||||
question: "How long does a full detail take?",
|
||||
answer: "A full interior and exterior detail typically takes 4-6 hours depending on the size and condition of your vehicle. Ceramic coating applications may require an additional day for proper curing.",
|
||||
},
|
||||
{
|
||||
question: "How often should I get my car detailed?",
|
||||
answer: "We recommend a full detail every 3-4 months to maintain your vehicle's appearance and protect its surfaces. Ceramic coated vehicles can go longer between details.",
|
||||
},
|
||||
{
|
||||
question: "What is ceramic coating and how long does it last?",
|
||||
answer: "Ceramic coating is a liquid polymer applied to your vehicle's exterior that creates a permanent bond with the paint. It provides superior protection against UV rays, chemicals, and minor scratches, lasting 2-5 years depending on the package.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer mobile detailing services?",
|
||||
answer: "Yes, we offer mobile detailing for your convenience. Our fully equipped team can come to your home or office. Mobile service availability depends on your location and the package selected.",
|
||||
},
|
||||
{
|
||||
question: "What products do you use?",
|
||||
answer: "We exclusively use premium, professional-grade products that are safe for all vehicle surfaces. Our ceramic coatings are sourced from industry-leading manufacturers with proven durability and performance.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
src/pages/HomePage/sections/Hero.tsx
Normal file
19
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
// Created by add_section_from_catalog (HeroBillboard).
|
||||
|
||||
import React from 'react';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroBillboard
|
||||
tag="Now Booking"
|
||||
description="Professional detailing services that restore your vehicle's showroom finish. We use premium products and proven techniques to protect and enhance every surface."
|
||||
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
|
||||
title="Your Car Deserves the Best"
|
||||
primaryButton={{"href":"#contact","text":"Book Now"}}
|
||||
secondaryButton={{"text":"Our Services","href":"#services"}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Services.tsx
Normal file
37
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesStickyCards from "@/components/sections/features/FeaturesStickyCards";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services">
|
||||
<FeaturesStickyCards
|
||||
items={[
|
||||
{
|
||||
title: "Interior Detail",
|
||||
description: "Deep cleaning of seats, carpets, dashboard, and all interior surfaces. Leather conditioning and fabric protection included.",
|
||||
primaryButton: { text: "Book Interior", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/feature1.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-1.webp",
|
||||
},
|
||||
{
|
||||
title: "Exterior Detail",
|
||||
description: "Hand wash, clay bar treatment, and premium wax application for a mirror-like finish that lasts.",
|
||||
primaryButton: { text: "Book Exterior", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-2.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
|
||||
},
|
||||
{
|
||||
title: "Paint Protection",
|
||||
description: "Long-lasting protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
|
||||
primaryButton: { text: "Book Protection", href: "#contact" },
|
||||
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features3.webp",
|
||||
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-3.webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
src/pages/HomePage/sections/Testimonials.tsx
Normal file
56
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialMarqueeOverlayCards from "@/components/sections/testimonial/TestimonialMarqueeOverlayCards";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Testimonials"
|
||||
title="Hear It From Our Clients"
|
||||
description="Real results from real customers who trust us with their vehicles"
|
||||
primaryButton={{ text: "Book Now", href: "#contact" }}
|
||||
secondaryButton={{ text: "View Gallery", href: "#services" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "James Wilson",
|
||||
role: "BMW Owner",
|
||||
company: "Miami, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp",
|
||||
},
|
||||
{
|
||||
name: "Maria Santos",
|
||||
role: "Tesla Owner",
|
||||
company: "Coral Gables, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial2.webp",
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: "Porsche Owner",
|
||||
company: "Brickell, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
|
||||
},
|
||||
{
|
||||
name: "Sarah Thompson",
|
||||
role: "Mercedes Owner",
|
||||
company: "South Beach, FL",
|
||||
rating: 4,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
|
||||
},
|
||||
{
|
||||
name: "Michael Johnson",
|
||||
role: "Audi Owner",
|
||||
company: "Coconut Grove, FL",
|
||||
rating: 5,
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial5.webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/pages/HomePage/sections/WhyUs.tsx
Normal file
32
src/pages/HomePage/sections/WhyUs.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "why-us" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesComparison from "@/components/sections/features/FeaturesComparison";
|
||||
|
||||
export default function WhyUsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="why-us">
|
||||
<FeaturesComparison
|
||||
tag="Why Us"
|
||||
title="The Detailing Difference"
|
||||
description="See why professional detailing is worth the investment"
|
||||
primaryButton={{ text: "Get Started", href: "#contact" }}
|
||||
negativeItems={[
|
||||
"Automatic car washes scratch paint",
|
||||
"DIY products leave swirl marks",
|
||||
"No protection against UV damage",
|
||||
"Interior stains and odors linger",
|
||||
"Resale value drops over time",
|
||||
]}
|
||||
positiveItems={[
|
||||
"Hand wash and paint correction",
|
||||
"Flawless, swirl-free finish",
|
||||
"Ceramic coating blocks UV rays",
|
||||
"Deep interior sanitization",
|
||||
"Maintains and boosts resale value",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user