bender/ffac4c20-ee15-4fc3-ac1b-480f62f400b7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4_1782168896329 into main #3

Merged
bender merged 1 commits from version_4_1782168896329 into main 2026-06-22 22:56:19 +00:00
Conversation 0 Commits 1 Files Changed 9 +414 -254
9 changed files with 414 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/pages/HomePage.tsx
View File

@@ -1,267 +1,37 @@
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// 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 React from 'react';
import HeroSection from './HomePage/sections/Hero';
import SocialProofSection from './HomePage/sections/SocialProof';
import ServicesAutoSection from './HomePage/sections/ServicesAuto';
import WhyUsSection from './HomePage/sections/WhyUs';
import ReviewsSection from './HomePage/sections/Reviews';
import GallerySection from './HomePage/sections/Gallery';
import HowItWorksSection from './HomePage/sections/HowItWorks';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroOverlay
tag="Serving Maryland & Surrounding Areas"
title="Maryland’s Trusted Mobile Auto Detailing & Cleaning Experts"
description="Professional auto detailing, ceramic coatings, pressure washing, and upholstery cleaning. We come to you and deliver showroom-quality results."
primaryButton={{
text: "Get Free Quote",
href: "#contact",
}}
secondaryButton={{
text: "Call (443) 467-4363",
href: "tel:4434674363",
}}
imageSrc="http://img.b2bpic.net/free-photo/woman-washing-her-car-outdoors_23-2148958772.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
title="Trusted by Over 100+ Happy Maryland Customers"
names={[
"Howard County",
"Baltimore",
"Towson",
"Clarksville",
"Ellicott City",
"Burtonsville",
"Washington DC",
]}
tag="Our reach"
description="Serving communities across the state with pride."
/>
</SectionErrorBoundary>
</div>
<SocialProofSection />
<div id="services-auto" data-section="services-auto">
<SectionErrorBoundary name="services-auto">
<FeaturesDetailedSteps
tag="Auto Detailing"
title="Complete Automotive Restoration"
description="From basic washes to deep interior shampooing, we make your vehicle look brand new again."
steps={[
{
tag: "Exterior",
title: "Full Exterior Wash",
subtitle: "Deep clean for your bodywork",
description: "Hand wash, clay bar, and hand dry to ensure a perfect paint finish.",
imageSrc: "http://img.b2bpic.net/free-photo/garage-engineers-replace-vehicle-oil_482257-115297.jpg",
},
{
tag: "Interior",
title: "Carpet & Upholstery Extraction",
subtitle: "Deep clean for your vehicle's interior",
description: "Intensive shampooing and hot water extraction for car carpets and upholstery to remove deep stains and odors.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-interior-clean-up-service_23-2149212258.jpg",
},
{
tag: "Protection",
title: "Ceramic Coating",
subtitle: "Mirror-like shine and protection",
description: "UV protection and long-term shine that makes maintenance easier.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212227.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ServicesAutoSection />
<div id="why-us" data-section="why-us">
<SectionErrorBoundary name="why-us">
<AboutTextSplit
title="Why Maryland Trusts Dream Detailing"
descriptions={[
"We offer professional mobile service that comes straight to you. No waiting rooms, no wasted weekends.",
"Our attention to detail is our identity. Every service is performed with precision, care, and pride.",
"We maintain clear communication, reliable arrival times, and prompt scheduling for every single project.",
"Our customers consistently describe our results as 'Brand New' and 'Spotless'—that is the Dream guarantee.",
]}
/>
</SectionErrorBoundary>
</div>
<WhyUsSection />
<div id="reviews" data-section="reviews">
<SectionErrorBoundary name="reviews">
<TestimonialQuoteCards
tag="Customer Reviews"
title="What Our Clients Are Saying"
description="See why locals trust us with their most valuable assets."
testimonials={[
{
name: "Tracy Roski",
role: "Client",
quote: "Incredible experience. The reflection is like a mirror, and the paint looks deeper and glossier than we ever imagined.",
imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg",
},
{
name: "Lindsay Klaff",
role: "Client",
quote: "They showed up on time, were incredibly professional, and made my car look brand new.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
},
{
name: "D.Z.",
role: "Client",
quote: "Antonio did an amazing job. He went above and beyond and made the process incredibly convenient.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-close-up_1139-650.jpg",
},
{
name: "Amanda Clark",
role: "Client",
quote: "I didn’t think my car could ever look this good again.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
},
{
name: "Elizabeth Waltman",
role: "Client",
quote: "Our dog practically lived in the vehicle. Now it looks like a dog was never there.",
imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ReviewsSection />
<div id="gallery" data-section="gallery">
<SectionErrorBoundary name="gallery">
<FeaturesImageBento
tag="Gallery"
title="See The Difference"
description="Before & After transformations across our service categories."
items={[
{
title: "Ceramic Coating",
description: "Mirror-like finish",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193568.jpg",
},
{
title: "Interior Detail",
description: "Total refreshment",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-drives-car-young-man-drives-car-talks-phone_169016-65045.jpg",
},
{
title: "Pressure Washing",
description: "Curb appeal restored",
imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-15344.jpg",
},
{
title: "Headlights",
description: "Crystal clear sight",
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-1933.jpg",
},
{
title: "Carpet Cleaning",
description: "Deep textile cleaning",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-vacuuming-carpet_329181-636.jpg",
},
{
title: "Tile & Grout",
description: "Restored flooring",
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-professional-home-cleaning-service_23-2150358958.jpg",
},
{
title: "Pet Hair Removal",
description: "Flawless finish",
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<GallerySection />
<div id="how-it-works" data-section="how-it-works">
<SectionErrorBoundary name="how-it-works">
<PricingSplitCards
tag="Our Simple Process"
title="Three Steps to a Fresher Property"
description="Fast local service tailored to your busy schedule."
plans={[
{
tag: "Step 1",
price: "Quote",
period: "Free",
description: "Request your quote via phone or form.",
primaryButton: {
text: "Contact Us",
href: "#contact",
},
featuresTitle: "Quick & Easy",
features: [
"Personalized quote",
"No hidden fees",
"Fast response",
],
},
{
tag: "Step 2",
price: "Schedule",
period: "Flexible",
description: "Pick a date that works best for your life.",
primaryButton: {
text: "Call Now",
href: "tel:4434674363",
},
featuresTitle: "We Work Around You",
features: [
"Convenient scheduling",
"Reliable arrival",
"Professional updates",
],
},
{
tag: "Step 3",
price: "Enjoy",
period: "The Result",
description: "Relax while we restore your asset.",
primaryButton: {
text: "Get Started",
href: "#contact",
},
featuresTitle: "Total Satisfaction",
features: [
"Showroom quality",
"Pride of service",
"Customer focus",
],
},
]}
/>
</SectionErrorBoundary>
</div>
<HowItWorksSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready to get started?"
text="Call us now at (443) 467-4363 or request your free quote today."
primaryButton={{
text: "Call (443) 467-4363",
href: "tel:4434674363",
}}
secondaryButton={{
text: "Request Quote",
href: "mailto:dreamautodetailing@example.com",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

27
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,27 @@
// 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 ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready to get started?"
text="Call us now at (443) 467-4363 or request your free quote today."
primaryButton={{
text: "Call (443) 467-4363",
href: "tel:4434674363",
}}
secondaryButton={{
text: "Request Quote",
href: "mailto:dreamautodetailing@example.com",
}}
/>
</SectionErrorBoundary>
</div>
);
}

57
src/pages/HomePage/sections/Gallery.tsx Normal file
View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "gallery" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function GallerySection(): React.JSX.Element {
return (
<div id="gallery" data-section="gallery">
<SectionErrorBoundary name="gallery">
<FeaturesImageBento
tag="Gallery"
title="See The Difference"
description="Before & After transformations across our service categories."
items={[
{
title: "Ceramic Coating",
description: "Mirror-like finish",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193568.jpg",
},
{
title: "Interior Detail",
description: "Total refreshment",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-drives-car-young-man-drives-car-talks-phone_169016-65045.jpg",
},
{
title: "Pressure Washing",
description: "Curb appeal restored",
imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-15344.jpg",
},
{
title: "Headlights",
description: "Crystal clear sight",
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-1933.jpg",
},
{
title: "Carpet Cleaning",
description: "Deep textile cleaning",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-vacuuming-carpet_329181-636.jpg",
},
{
title: "Tile & Grout",
description: "Restored flooring",
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-professional-home-cleaning-service_23-2150358958.jpg",
},
{
title: "Pet Hair Removal",
description: "Flawless finish",
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

29
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,29 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroOverlay
tag="Serving Maryland & Surrounding Areas"
title="Maryland’s Trusted Mobile Auto Detailing & Cleaning Experts"
description="Professional auto detailing, ceramic coatings, pressure washing, and upholstery cleaning. We come to you and deliver showroom-quality results."
primaryButton={{
text: "Get Free Quote",
href: "#contact",
}}
secondaryButton={{
text: "Call (443) 467-4363",
href: "tel:4434674363",
}}
imageSrc="http://img.b2bpic.net/free-photo/woman-washing-her-car-outdoors_23-2148958772.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

70
src/pages/HomePage/sections/HowItWorks.tsx Normal file
View File

@@ -0,0 +1,70 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "how-it-works" section.
import React from 'react';
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HowItWorksSection(): React.JSX.Element {
return (
<div id="how-it-works" data-section="how-it-works">
<SectionErrorBoundary name="how-it-works">
<PricingSplitCards
tag="Our Simple Process"
title="Three Steps to a Fresher Property"
description="Fast local service tailored to your busy schedule."
plans={[
{
tag: "Step 1",
price: "Quote",
period: "Free",
description: "Request your quote via phone or form.",
primaryButton: {
text: "Contact Us",
href: "#contact",
},
featuresTitle: "Quick & Easy",
features: [
"Personalized quote",
"No hidden fees",
"Fast response",
],
},
{
tag: "Step 2",
price: "Schedule",
period: "Flexible",
description: "Pick a date that works best for your life.",
primaryButton: {
text: "Call Now",
href: "tel:4434674363",
},
featuresTitle: "We Work Around You",
features: [
"Convenient scheduling",
"Reliable arrival",
"Professional updates",
],
},
{
tag: "Step 3",
price: "Enjoy",
period: "The Result",
description: "Relax while we restore your asset.",
primaryButton: {
text: "Get Started",
href: "#contact",
},
featuresTitle: "Total Satisfaction",
features: [
"Showroom quality",
"Pride of service",
"Customer focus",
],
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

111
src/pages/HomePage/sections/Reviews.tsx Normal file
View File

@@ -0,0 +1,111 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
const testimonials = [
{
name: "Tracy Roski",
role: "Client",
quote: "Incredible experience. The reflection is like a mirror, and the paint looks deeper and glossier than we ever imagined.",
imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg"
},
{
name: "Lindsay Klaff",
role: "Client",
quote: "They showed up on time, were incredibly professional, and made my car look brand new.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg"
},
{
name: "D.Z.",
role: "Client",
quote: "Antonio did an amazing job. He went above and beyond and made the process incredibly convenient.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-close-up_1139-650.jpg"
},
{
name: "Amanda Clark",
role: "Client",
quote: "I didn’t think my car could ever look this good again.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg"
},
{
name: "Elizabeth Waltman",
role: "Client",
quote: "Our dog practically lived in the vehicle. Now it looks like a dog was never there.",
imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg"
}
];
type Testimonial = {
name: string;
role: string;
quote: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const ReviewsInline = () => (
<section aria-label="Testimonials section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{"Customer Reviews"}</p>
</div>
<TextAnimation
text={"What Our Clients Are Saying"}
variant="slide-up"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={"See why locals trust us with their most valuable assets."}
variant="slide-up"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(undefined || undefined) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<ScrollReveal variant="slide-up">
<GridOrCarousel >
{testimonials.map((testimonial) => (
<div key={testimonial.name} className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 card rounded">
<div
className="relative size-22 xl:size-24 2xl:size-26 overflow-hidden rounded-full flex items-center justify-center text-4xl font-bold"
style={{ backgroundColor: 'var(--primary-cta)', color: 'var(--primary-cta-text)' }}
>
{testimonial.name.charAt(0)}
</div>
<div className="flex flex-col">
<span className="text-2xl font-semibold leading-snug truncate">{testimonial.name}</span>
<span className="text-base leading-snug opacity-75 truncate">{testimonial.role}</span>
</div>
<p className="text-lg leading-snug">{testimonial.quote}</p>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default function ReviewsSection() {
return (
<div data-webild-section="reviews" id="reviews">
<ReviewsInline />
</div>
);
}

43
src/pages/HomePage/sections/ServicesAuto.tsx Normal file
View File

@@ -0,0 +1,43 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "services-auto" section.
import React from 'react';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ServicesAutoSection(): React.JSX.Element {
return (
<div id="services-auto" data-section="services-auto">
<SectionErrorBoundary name="services-auto">
<FeaturesDetailedSteps
tag="Auto Detailing"
title="Complete Automotive Restoration"
description="From basic washes to deep interior shampooing, we make your vehicle look brand new again."
steps={[
{
tag: "Exterior",
title: "Full Exterior Wash",
subtitle: "Deep clean for your bodywork",
description: "Hand wash, clay bar, and hand dry to ensure a perfect paint finish.",
imageSrc: "http://img.b2bpic.net/free-photo/garage-engineers-replace-vehicle-oil_482257-115297.jpg",
},
{
tag: "Interior",
title: "Carpet & Upholstery Extraction",
subtitle: "Deep clean for your vehicle's interior",
description: "Intensive shampooing and hot water extraction for car carpets and upholstery to remove deep stains and odors.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-interior-clean-up-service_23-2149212258.jpg",
},
{
tag: "Protection",
title: "Ceramic Coating",
subtitle: "Mirror-like shine and protection",
description: "UV protection and long-term shine that makes maintenance easier.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212227.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

29
src/pages/HomePage/sections/SocialProof.tsx Normal file
View File

@@ -0,0 +1,29 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "social-proof" section.
import React from 'react';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function SocialProofSection(): React.JSX.Element {
return (
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
title="Trusted by Over 100+ Happy Maryland Customers"
names={[
"Howard County",
"Baltimore",
"Towson",
"Clarksville",
"Ellicott City",
"Burtonsville",
"Washington DC",
]}
tag="Our reach"
description="Serving communities across the state with pride."
/>
</SectionErrorBoundary>
</div>
);
}

24
src/pages/HomePage/sections/WhyUs.tsx Normal file
View File

@@ -0,0 +1,24 @@
// 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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function WhyUsSection(): React.JSX.Element {
return (
<div id="why-us" data-section="why-us">
<SectionErrorBoundary name="why-us">
<AboutTextSplit
title="Why Maryland Trusts Dream Detailing"
descriptions={[
"We offer professional mobile service that comes straight to you. No waiting rooms, no wasted weekends.",
"Our attention to detail is our identity. Every service is performed with precision, care, and pride.",
"We maintain clear communication, reliable arrival times, and prompt scheduling for every single project.",
"Our customers consistently describe our results as 'Brand New' and 'Spotless'—that is the Dream guarantee.",
]}
/>
</SectionErrorBoundary>
</div>
);
}