Merge version_5_1782151253467 into main #4
@@ -1,174 +1,31 @@
|
||||
// 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.
|
||||
|
||||
import React from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import GridOrCarousel from '@/components/ui/GridOrCarousel';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Textarea from '@/components/ui/Textarea';
|
||||
import Label from '@/components/ui/Label';
|
||||
import AvatarAuthor from '@/components/ui/AvatarAuthor';
|
||||
import RatingStars from '@/components/ui/RatingStars';
|
||||
import HeroSectionSection from './HomePage/sections/HeroSection';
|
||||
import GallerySectionSection from './HomePage/sections/GallerySection';
|
||||
import GallerySection from './HomePage/sections/Gallery';
|
||||
import TestimonialsSectionSection from './HomePage/sections/TestimonialsSection';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSectionSection from './HomePage/sections/ContactSection';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<div data-webild-section="HeroSection">
|
||||
<section className="bg-background relative overflow-hidden">
|
||||
<div className="w-content-width mx-auto flex flex-col items-center text-center gap-6 relative z-10">
|
||||
<div className="px-3 py-1 text-sm card rounded w-fit">
|
||||
<p>Welcome to BCZ Motors</p>
|
||||
</div>
|
||||
<TextAnimation
|
||||
text="Premium Vehicles, Exceptional Service"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-balance"
|
||||
/>
|
||||
<TextAnimation
|
||||
text="Discover our curated selection of high-quality vehicles. At BCZ Motors, we deliver excellence, reliability, and a seamless buying experience."
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl text-accent max-w-content-width text-balance"
|
||||
/>
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-4">
|
||||
<Button text="View Inventory" href="#gallery" variant="primary" />
|
||||
<Button text="Contact Us" href="#contact" variant="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</section>
|
||||
</div>
|
||||
<HeroSectionSection />
|
||||
|
||||
{/* Gallery Section */}
|
||||
<div data-webild-section="GallerySection">
|
||||
<section id="gallery" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="Our Showroom"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-content-width">
|
||||
Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
|
||||
</p>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1503376713246-73ad4f0d4e04?auto=format&fit=crop&w=800&q=80" alt="Luxury sports car in modern showroom" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=800&q=80" alt="Premium SUV parked outside dealership" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?auto=format&fit=crop&w=800&q=80" alt="Sleek black sedan interior with leather seats" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<GallerySectionSection />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div data-webild-section="TestimonialsSection">
|
||||
<section id="testimonials" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="What Our Customers Say"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
|
||||
</p>
|
||||
<AvatarAuthor name="Michael T." role="Customer" imageSrc="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&q=80" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
|
||||
</p>
|
||||
<AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
|
||||
</p>
|
||||
<AvatarAuthor name="David R." role="Customer" imageSrc="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80" />
|
||||
</Card>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<TestimonialsSectionSection />
|
||||
|
||||
{/* Contact Section */}
|
||||
<div data-webild-section="ContactSection">
|
||||
<section id="contact" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col md:flex-row">
|
||||
<div className="flex-1 flex flex-col gap-6">
|
||||
<TextAnimation
|
||||
text="Get in Touch"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent">
|
||||
Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 mt-4">
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Address</span>
|
||||
<span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Phone</span>
|
||||
<span className="text-accent">(555) 123-4567</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Email</span>
|
||||
<span className="text-accent">sales@bczmotors.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 md:p-8 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" placeholder="Your name" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="Your email address" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<ContactSectionSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,26 +2,59 @@
|
||||
// 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";
|
||||
import Button from '@/components/ui/Button';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Textarea from '@/components/ui/Textarea';
|
||||
import Label from '@/components/ui/Label';
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="READY TO TRANSFORM?"
|
||||
text="Get a professional consultation and quote for your vehicle project today."
|
||||
primaryButton={{
|
||||
text: "Get Quote",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<section id="contact" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col md:flex-row">
|
||||
<div className="flex-1 flex flex-col gap-6">
|
||||
<TextAnimation
|
||||
text="Get in Touch"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent">
|
||||
Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 mt-4">
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Address</span>
|
||||
<span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Phone</span>
|
||||
<span className="text-accent">(555) 123-4567</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Email</span>
|
||||
<span className="text-accent">sales@bczmotors.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 md:p-8 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" placeholder="Your name" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="Your email address" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
62
src/pages/HomePage/sections/ContactSection.tsx
Normal file
62
src/pages/HomePage/sections/ContactSection.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "ContactSection" section.
|
||||
|
||||
import React from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Textarea from '@/components/ui/Textarea';
|
||||
import Label from '@/components/ui/Label';
|
||||
|
||||
export default function ContactSectionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="ContactSection">
|
||||
<section id="contact" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col md:flex-row">
|
||||
<div className="flex-1 flex flex-col gap-6">
|
||||
<TextAnimation
|
||||
text="Get in Touch"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent">
|
||||
Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 mt-4">
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Address</span>
|
||||
<span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Phone</span>
|
||||
<span className="text-accent">(555) 123-4567</span>
|
||||
</div>
|
||||
<div className="card p-4 rounded flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground">Email</span>
|
||||
<span className="text-accent">sales@bczmotors.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 md:p-8 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" placeholder="Your name" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="Your email address" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +1,44 @@
|
||||
/* 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 ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "gallery" section.
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Metallic Crimson",
|
||||
description: "High-end luxury finish.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3043.jpg"
|
||||
},
|
||||
{
|
||||
title: "Satin Black Stealth",
|
||||
description: "Aggressive, textured aesthetics.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/abstract-background-with-x-top_125964-4135.jpg"
|
||||
},
|
||||
{
|
||||
title: "Custom Racing Livery",
|
||||
description: "Precision performance design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/abstract-geometric-background_779267-2914.jpg"
|
||||
},
|
||||
{
|
||||
title: "Interior Carbon Wrap",
|
||||
description: "Refined cockpit details.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746623.jpg"
|
||||
},
|
||||
{
|
||||
title: "Chrome Night Finish",
|
||||
description: "Reflective urban artistry.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/curved-blue-sports-car-hood-showing-abstract-reflection_8353-8393.jpg"
|
||||
},
|
||||
{
|
||||
title: "Chameleon Iridescent",
|
||||
description: "Dynamic, color-shifting finish.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-iguana-nature_23-2151718784.jpg"
|
||||
},
|
||||
{
|
||||
title: "Modern Matte White",
|
||||
description: "Clean, minimalist excellence.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=v8le8s"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
href?: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesImageBentoProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
|
||||
}
|
||||
|
||||
const GalleryInline = () => {
|
||||
const gridClasses = [
|
||||
"md:col-span-2",
|
||||
"md:col-span-4",
|
||||
"md:col-span-3",
|
||||
"md:col-span-3",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
];
|
||||
|
||||
const staggerDelays = [
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0.2,
|
||||
];
|
||||
import React from 'react';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import GridOrCarousel from '@/components/ui/GridOrCarousel';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
|
||||
export default function GallerySection(): React.JSX.Element {
|
||||
return (
|
||||
<section aria-label="Features image bento section" className="py-20 bg-background">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"SHOWCASE"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Featured Transformations"}
|
||||
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={"Discover a selection of our most iconic custom car wraps and high-performance vehicle transformations."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance text-accent"
|
||||
/>
|
||||
|
||||
{(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>
|
||||
|
||||
<div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
|
||||
{items.map((item, index) => {
|
||||
const content = (
|
||||
<div className="relative h-80 xl:h-100 2xl:h-120 overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
className="rounded group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-5 bottom-5 xl:inset-x-6 xl:bottom-6 2xl:inset-x-7 2xl:bottom-7 flex flex-col text-foreground">
|
||||
<span className="text-2xl font-semibold leading-snug truncate">{item.title}</span>
|
||||
<span className="text-base leading-snug truncate text-accent">{item.description}</span>
|
||||
<section id="gallery" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="Our Showroom"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-content-width">
|
||||
Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
|
||||
</p>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAGHpfGGCaEsptnAuWXZsXjw1Y64FVTdWKtvdgrZtuVaKtsHwXnKjBWciPeDhbFadQXfxITBEjK0FxpZZMF22AoBK56pJanM-pAjYKJARa3FVbbLK4CtvGCeIDNgiHHCat4xO18i=s800" alt="BCZ Motors Garage" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAHfrsWvfS_ZbKpJGNJRMc8eRYV1yeMC63ugDmXZs8yexSQb_N3ELpFAM8fVqriKalhxrtG2R96FYSAQhqaNpZd9cDLfknJks4zLBx0-KyOJs-7IVnqdWME9H9wRptp-uaHFJUHt_A=s800" alt="BCZ Motors Service" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAGjDTlPoLSTc-1h34SMrd8PdSlVoGFgUCNw78W_fPu0lANIvj7qsYkNU-Csw6_nfg06iDo6UPowDq5qkiEconXDd-8Y9hLEi5lCjGK5MogCLNSDryPam8qQpujqckhDJsU9sBuk=s800" alt="BCZ Motors Workshop" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<ScrollReveal key={index} variant="fade-blur" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
|
||||
{item.href ? (
|
||||
<a href={item.href} className="block overflow-hidden rounded">
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded">
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function GallerySection() {
|
||||
return (
|
||||
<div data-webild-section="gallery" id="gallery">
|
||||
<GalleryInline />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
46
src/pages/HomePage/sections/GallerySection.tsx
Normal file
46
src/pages/HomePage/sections/GallerySection.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "GallerySection" section.
|
||||
|
||||
import React from 'react';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import GridOrCarousel from '@/components/ui/GridOrCarousel';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
|
||||
export default function GallerySectionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="GallerySection">
|
||||
<section id="gallery" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="Our Showroom"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-content-width">
|
||||
Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
|
||||
</p>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1503376713246-73ad4f0d4e04?auto=format&fit=crop&w=800&q=80" alt="Luxury sports car in modern showroom" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=800&q=80" alt="Premium SUV parked outside dealership" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?auto=format&fit=crop&w=800&q=80" alt="Sleek black sedan interior with leather seats" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="card rounded overflow-hidden aspect-video relative">
|
||||
<img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/HeroSection.tsx
Normal file
39
src/pages/HomePage/sections/HeroSection.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 "HeroSection" section.
|
||||
|
||||
import React from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
|
||||
export default function HeroSectionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="HeroSection">
|
||||
<section className="bg-background relative overflow-hidden">
|
||||
<div className="w-content-width mx-auto flex flex-col items-center text-center gap-6 relative z-10">
|
||||
<div className="px-3 py-1 text-sm card rounded w-fit">
|
||||
<p>Welcome to BCZ Motors</p>
|
||||
</div>
|
||||
<TextAnimation
|
||||
text="Premium Vehicles, Exceptional Service"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-balance"
|
||||
/>
|
||||
<TextAnimation
|
||||
text="Discover our curated selection of high-quality vehicles. At BCZ Motors, we deliver excellence, reliability, and a seamless buying experience."
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl text-accent max-w-content-width text-balance"
|
||||
/>
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-4">
|
||||
<Button text="View Inventory" href="#gallery" variant="primary" />
|
||||
<Button text="Contact Us" href="#contact" variant="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,51 +2,52 @@
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import GridOrCarousel from '@/components/ui/GridOrCarousel';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import Card from '@/components/ui/Card';
|
||||
import AvatarAuthor from '@/components/ui/AvatarAuthor';
|
||||
import RatingStars from '@/components/ui/RatingStars';
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="TESTIMONIALS"
|
||||
title="Trusted by Enthusiasts"
|
||||
description="Hear from drivers who entrusted their vehicles to the experts at BCZ Motors."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
role: "Sports Car Owner",
|
||||
quote: "The precision is unbelievable. My car looks factory-new but better. Worth every penny.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah T.",
|
||||
role: "Luxury Sedan Enthusiast",
|
||||
quote: "BCZ transformed my ride entirely. The service, the professionalism, and the finish are top tier.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-businessman-working-cafe_1157-28464.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael L.",
|
||||
role: "Supercar Collector",
|
||||
quote: "I won't trust anyone else with my fleet. Their attention to detail on edge-wrapping is unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-leaning-car_1170-1438.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena V.",
|
||||
role: "Custom Design Client",
|
||||
quote: "Absolutely thrilled with the custom livery. They captured exactly what I envisioned.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-with-little-son-car-salon_1157-21748.jpg",
|
||||
},
|
||||
{
|
||||
name: "David H.",
|
||||
role: "Professional Racer",
|
||||
quote: "Durable, high-quality, and fast turnaround. BCZ is the gold standard for vinyl work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<section id="testimonials" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="What Our Customers Say"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
|
||||
</p>
|
||||
<AvatarAuthor name="Michael T." role="Customer" imageSrc="https://picsum.photos/seed/1108550957/1200/800" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
|
||||
</p>
|
||||
<AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://picsum.photos/seed/1804608412/1200/800" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
|
||||
</p>
|
||||
<AvatarAuthor name="David R." role="Customer" imageSrc="https://picsum.photos/seed/662571592/1200/800" />
|
||||
</Card>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
55
src/pages/HomePage/sections/TestimonialsSection.tsx
Normal file
55
src/pages/HomePage/sections/TestimonialsSection.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "TestimonialsSection" section.
|
||||
|
||||
import React from 'react';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import GridOrCarousel from '@/components/ui/GridOrCarousel';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import Card from '@/components/ui/Card';
|
||||
import AvatarAuthor from '@/components/ui/AvatarAuthor';
|
||||
import RatingStars from '@/components/ui/RatingStars';
|
||||
|
||||
export default function TestimonialsSectionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="TestimonialsSection">
|
||||
<section id="testimonials" className="bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<TextAnimation
|
||||
text="What Our Customers Say"
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold"
|
||||
/>
|
||||
</div>
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
|
||||
</p>
|
||||
<AvatarAuthor name="Michael T." role="Customer" imageSrc="https://picsum.photos/seed/1108550957/1200/800" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
|
||||
</p>
|
||||
<AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://picsum.photos/seed/1804608412/1200/800" />
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-4">
|
||||
<RatingStars rating={5} />
|
||||
<p className="text-base text-foreground flex-grow">
|
||||
"Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
|
||||
</p>
|
||||
<AvatarAuthor name="David R." role="Customer" imageSrc="https://picsum.photos/seed/662571592/1200/800" />
|
||||
</Card>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user