Merge version_2_1782104023444 into main #1

Merged
bender merged 1 commits from version_2_1782104023444 into main 2026-06-22 04:54:49 +00:00
10 changed files with 350 additions and 249 deletions

View File

@@ -1,19 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import "tailwindcss";
@import "./styles/masks.css";
@import "./styles/animations.css";
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #000000;
--card: #481f1f;
--foreground: #ffffff;
--primary-cta: #ffffff;
--primary-cta-text: #280101;
--secondary-cta: #361311;
--secondary-cta-text: #f6d4d4;
--accent: #51000b;
--background-accent: #ff2231;
--background: #0f0f11;
--card: #1a1a1e;
--foreground: #f4f4f5;
--primary-cta: #8b5cf6;
--primary-cta-text: #ffffff;
--secondary-cta: #27272a;
--secondary-cta-text: #e4e4e7;
--accent: #a78bfa;
--background-accent: #6d28d9;
/* @layout/border-radius/rounded */
--radius: 0.5rem;
@@ -88,7 +88,7 @@
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: 'Figtree', sans-serif;
--font-sans: 'Outfit', sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;

View File

@@ -1,250 +1,36 @@
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
import { Award, Shield, Star } from "lucide-react";
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 AboutSection from './HomePage/sections/About';
import ServicesSection from './HomePage/sections/Services';
import WorkSection from './HomePage/sections/Work';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroTiltedCards
tag="PREMIUM AUTOMOTIVE CARE"
title="Mastering the Art of Perfection"
description="Exquisite detailing services for the discerning owner. We turn every vehicle into a masterpiece of light and reflection."
primaryButton={{
text: "View Portfolio",
href: "#work",
}}
secondaryButton={{
text: "Inquire Now",
href: "#contact",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498630.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-1176.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/auto-service-salon-doign-car-wrapping_23-2149593856.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/details-car-standing-car-showroom_1303-29468.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-5433.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="Our Philosophy"
title="Precision in Every Detail"
description="We believe that true beauty lies in the hidden details. Our methodology combines artisanal craftsmanship with cutting-edge paint correction technology to deliver results that exceed manufacturer standards."
imageSrc="http://img.b2bpic.net/free-photo/illuminated-exhibition-stage_23-2151986964.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesRevealCards
tag="Our Expertise"
title="Unmatched Detailing Services"
description="From paint protection to interior restoration, our services are tailored to preserve and enhance your vehicle's value."
items={[
{
title: "Paint Correction",
description: "Cutting-edge polishing to remove micro-scratches and restore clarity.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-artist-brushes-collection_23-2148575563.jpg",
},
{
title: "Ceramic Coating",
description: "Long-lasting protection against environmental contaminants.",
imageSrc: "http://img.b2bpic.net/free-photo/hand-using-phone-lock-car_23-2148994228.jpg",
},
{
title: "Interior Restoration",
description: "Deep cleaning and leather rejuvenation for an showroom fresh experience.",
imageSrc: "http://img.b2bpic.net/free-photo/painter-is-working-furniture-painting-process-using-scrub-machine_1150-6590.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ServicesSection />
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="The Collection"
title="Refined Transformations"
description="Browse our recent detailing projects and witness the transformation of elite automobiles."
items={[
{
title: "Porsche 911",
description: "Ceramic glass finish",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shiny-headlight-black-luxury-car-isolated-white-background_181624-25404.jpg",
},
{
title: "Ferrari F8",
description: "Paint correction",
imageSrc: "http://img.b2bpic.net/free-photo/red-sports-tuned-car-rear-view-wheel-close-up_78492-3674.jpg",
},
{
title: "Aston Martin DB11",
description: "Interior deep clean",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-lady-sitting-car-with-opened-door-fashion-girl-driving-car-suit-posh-girl-sportcar_574295-8.jpg",
},
{
title: "Lamborghini Revuelto",
description: "Paint film protection",
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-with-latex-gloves-holding-water-spray-razor-blade_23-2148985746.jpg",
},
{
title: "Mercedes AMG G63",
description: "Full paint restoration",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283236.jpg",
},
{
title: "Audi RS6",
description: "Full exterior detail",
imageSrc: "http://img.b2bpic.net/free-photo/assortment-painting-items-with-green-paint_23-2149579985.jpg",
},
{
title: "Bentley Continental",
description: "Luxury leather care",
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342630.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<WorkSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Our Impact"
title="By The Numbers"
description="Reliability and passion reflected in every project we complete."
metrics={[
{
icon: Award,
title: "Vehicles Handled",
value: "1,200+",
},
{
icon: Shield,
title: "Protection Layers",
value: "5,000+",
},
{
icon: Star,
title: "Perfect Ratings",
value: "99%",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialMarqueeCards
tag="Social Proof"
title="Stories from Clients"
description="What our exclusive clientele says about our precision craftsmanship."
testimonials={[
{
name: "James L.",
role: "Collector",
quote: "The finish is simply unreal. My car has never looked this good.",
imageSrc: "http://img.b2bpic.net/free-photo/puzzled-mixed-race-young-man-bites-lips-has-crisp-hair-keeps-hands-together-looks-confusingly-aside-dressed-fashionable-shirt-poses-against-white-wall_273609-15529.jpg",
},
{
name: "Sarah W.",
role: "Entrepreneur",
quote: "Exceptional attention to detail. Worth every penny for the result.",
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3802.jpg",
},
{
name: "Michael R.",
role: "Automotive Enthusiast",
quote: "I trust them exclusively with all my vehicles.",
imageSrc: "http://img.b2bpic.net/free-photo/young-lady-checked-shirt-showing-ok-gesture-eye-looking-curious-front-view_176474-54326.jpg",
},
{
name: "Elena V.",
role: "Collector",
quote: "Refined and professional. A true masterpiece.",
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-middle-aged-caucasian-female-with-blue-eyes-charming-smile-having-lunch-cafe-wearing-white-shirt-stylish-accessories-people-age-modern-lifestyle-lesiure_344912-1960.jpg",
},
{
name: "Robert B.",
role: "CEO",
quote: "Stunning clarity. I am genuinely impressed by their work.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-walking-outdoors_171337-19895.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Support"
title="Common Questions"
description="Answers to help you understand our professional detailing workflow."
items={[
{
question: "How long does a detailing session last?",
answer: "Most premium services take 1-2 days depending on the vehicle size.",
},
{
question: "Do you use mobile service?",
answer: "We currently operate in our climate-controlled studio facility.",
},
{
question: "What products do you use?",
answer: "Only the finest industry-grade materials for optimal performance.",
},
{
question: "How often should I detail?",
answer: "We recommend a maintenance wash monthly and full correction annually.",
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Inquire"
text="Ready to transform your automotive masterpiece?"
primaryButton={{
text: "Book Consultation",
href: "/book",
}}
secondaryButton={{
text: "Contact Support",
href: "/help",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,21 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="Our Philosophy"
title="Precision in Every Detail"
description="We believe that true beauty lies in the hidden details. Our methodology combines artisanal craftsmanship with cutting-edge paint correction technology to deliver results that exceed manufacturer standards."
imageSrc="http://img.b2bpic.net/free-photo/illuminated-exhibition-stage_23-2151986964.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

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="Inquire"
text="Ready to transform your automotive masterpiece?"
primaryButton={{
text: "Book Consultation",
href: "/book",
}}
secondaryButton={{
text: "Contact Support",
href: "/help",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// 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 FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Support"
title="Common Questions"
description="Answers to help you understand our professional detailing workflow."
items={[
{
question: "How long does a detailing session last?",
answer: "Most premium services take 1-2 days depending on the vehicle size.",
},
{
question: "Do you use mobile service?",
answer: "We currently operate in our climate-controlled studio facility.",
},
{
question: "What products do you use?",
answer: "Only the finest industry-grade materials for optimal performance.",
},
{
question: "How often should I detail?",
answer: "We recommend a maintenance wash monthly and full correction annually.",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,45 @@
// 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 HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroTiltedCards
tag="PREMIUM AUTOMOTIVE CARE"
title="Mastering the Art of Perfection"
description="Exquisite detailing services for the discerning owner. We turn every vehicle into a masterpiece of light and reflection."
primaryButton={{
text: "View Portfolio",
href: "#work",
}}
secondaryButton={{
text: "Inquire Now",
href: "#contact",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498630.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-1176.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/auto-service-salon-doign-car-wrapping_23-2149593856.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/details-car-standing-car-showroom_1303-29468.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-5433.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import { Award, Shield, Star } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Our Impact"
title="By The Numbers"
description="Reliability and passion reflected in every project we complete."
metrics={[
{
icon: Award,
title: "Vehicles Handled",
value: "1,200+",
},
{
icon: Shield,
title: "Protection Layers",
value: "5,000+",
},
{
icon: Star,
title: "Perfect Ratings",
value: "99%",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View 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 FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ServicesSection(): React.JSX.Element {
return (
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesRevealCards
tag="Our Expertise"
title="Unmatched Detailing Services"
description="From paint protection to interior restoration, our services are tailored to preserve and enhance your vehicle's value."
items={[
{
title: "Paint Correction",
description: "Cutting-edge polishing to remove micro-scratches and restore clarity.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-artist-brushes-collection_23-2148575563.jpg",
},
{
title: "Ceramic Coating",
description: "Long-lasting protection against environmental contaminants.",
imageSrc: "http://img.b2bpic.net/free-photo/hand-using-phone-lock-car_23-2148994228.jpg",
},
{
title: "Interior Restoration",
description: "Deep cleaning and leather rejuvenation for an showroom fresh experience.",
imageSrc: "http://img.b2bpic.net/free-photo/painter-is-working-furniture-painting-process-using-scrub-machine_1150-6590.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,52 @@
// 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 TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialMarqueeCards
tag="Social Proof"
title="Stories from Clients"
description="What our exclusive clientele says about our precision craftsmanship."
testimonials={[
{
name: "James L.",
role: "Collector",
quote: "The finish is simply unreal. My car has never looked this good.",
imageSrc: "http://img.b2bpic.net/free-photo/puzzled-mixed-race-young-man-bites-lips-has-crisp-hair-keeps-hands-together-looks-confusingly-aside-dressed-fashionable-shirt-poses-against-white-wall_273609-15529.jpg",
},
{
name: "Sarah W.",
role: "Entrepreneur",
quote: "Exceptional attention to detail. Worth every penny for the result.",
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3802.jpg",
},
{
name: "Michael R.",
role: "Automotive Enthusiast",
quote: "I trust them exclusively with all my vehicles.",
imageSrc: "http://img.b2bpic.net/free-photo/young-lady-checked-shirt-showing-ok-gesture-eye-looking-curious-front-view_176474-54326.jpg",
},
{
name: "Elena V.",
role: "Collector",
quote: "Refined and professional. A true masterpiece.",
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-middle-aged-caucasian-female-with-blue-eyes-charming-smile-having-lunch-cafe-wearing-white-shirt-stylish-accessories-people-age-modern-lifestyle-lesiure_344912-1960.jpg",
},
{
name: "Robert B.",
role: "CEO",
quote: "Stunning clarity. I am genuinely impressed by their work.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-walking-outdoors_171337-19895.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

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 "work" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function WorkSection(): React.JSX.Element {
return (
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="The Collection"
title="Refined Transformations"
description="Browse our recent detailing projects and witness the transformation of elite automobiles."
items={[
{
title: "Porsche 911",
description: "Ceramic glass finish",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shiny-headlight-black-luxury-car-isolated-white-background_181624-25404.jpg",
},
{
title: "Ferrari F8",
description: "Paint correction",
imageSrc: "http://img.b2bpic.net/free-photo/red-sports-tuned-car-rear-view-wheel-close-up_78492-3674.jpg",
},
{
title: "Aston Martin DB11",
description: "Interior deep clean",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-lady-sitting-car-with-opened-door-fashion-girl-driving-car-suit-posh-girl-sportcar_574295-8.jpg",
},
{
title: "Lamborghini Revuelto",
description: "Paint film protection",
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-with-latex-gloves-holding-water-spray-razor-blade_23-2148985746.jpg",
},
{
title: "Mercedes AMG G63",
description: "Full paint restoration",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283236.jpg",
},
{
title: "Audi RS6",
description: "Full exterior detail",
imageSrc: "http://img.b2bpic.net/free-photo/assortment-painting-items-with-green-paint_23-2149579985.jpg",
},
{
title: "Bentley Continental",
description: "Luxury leather care",
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342630.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}