Merge version_3_1782147692180 into main #2
@@ -8,71 +8,56 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
|
||||
export default function Layout() {
|
||||
const navItems = [
|
||||
{
|
||||
"name": "Services",
|
||||
"href": "#services"
|
||||
},
|
||||
{
|
||||
"name": "Gallery",
|
||||
"href": "#gallery"
|
||||
},
|
||||
{
|
||||
"name": "Testimonials",
|
||||
"href": "#testimonials"
|
||||
},
|
||||
{
|
||||
"name": "FAQ",
|
||||
"href": "#faq"
|
||||
},
|
||||
{
|
||||
"name": "Hero",
|
||||
"href": "#hero"
|
||||
},
|
||||
{
|
||||
"name": "Metrics",
|
||||
"href": "#metrics"
|
||||
},
|
||||
{
|
||||
"name": "Contact",
|
||||
"href": "#contact"
|
||||
}
|
||||
];
|
||||
{
|
||||
"name": "Gallery",
|
||||
"href": "#gallery"
|
||||
},
|
||||
{
|
||||
"name": "Testimonials",
|
||||
"href": "#testimonials"
|
||||
},
|
||||
{
|
||||
"name": "Contact",
|
||||
"href": "#contact"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StyleProvider buttonVariant="default" siteBackground="noise" heroBackground="lightRaysCenter">
|
||||
<SiteBackgroundSlot />
|
||||
<SectionErrorBoundary name="navbar">
|
||||
<NavbarInline
|
||||
logo="BCZ Motors"
|
||||
ctaButton={{
|
||||
text: "Get A Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
navItems={navItems} />
|
||||
logo="BCZ Motors"
|
||||
ctaButton={{
|
||||
text: "Get A Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
<main className="flex-grow">
|
||||
<Outlet />
|
||||
</main>
|
||||
<SectionErrorBoundary name="footer">
|
||||
<FooterMinimal
|
||||
brand="BCZ Motors"
|
||||
copyright="© 2024 BCZ Motors. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
brand="BCZ Motors"
|
||||
copyright="© 2024 BCZ Motors. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</StyleProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,33 +1,174 @@
|
||||
// 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 HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import GallerySection from './HomePage/sections/Gallery';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
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';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<>
|
||||
{/* 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>
|
||||
|
||||
<ServicesSection />
|
||||
{/* 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="" 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="" 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="" 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="" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
|
||||
</div>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<GallerySection />
|
||||
{/* 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="" />
|
||||
</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="" />
|
||||
</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="" />
|
||||
</Card>
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<MetricsSection />
|
||||
|
||||
<TestimonialsSection />
|
||||
|
||||
<FaqSection />
|
||||
|
||||
<ContactSection />
|
||||
{/* 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user