244 lines
12 KiB
TypeScript
244 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Award, CheckCircle, Clock, Crown, Gauge, Fuel, HelpCircle, Hammer, Sliders, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmall"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Prestige Motors"
|
|
navItems={[
|
|
{ name: "Models", id: "models" },
|
|
{ name: "Performance", id: "performance" },
|
|
{ name: "Craftsmanship", id: "craftsmanship" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Reserve Today", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="The Art of Automotive Excellence"
|
|
description="Experience the pinnacle of luxury, performance, and timeless design. Every curve, every detail, crafted to perfection for the discerning driver."
|
|
background={{ variant: "aurora" }}
|
|
tag="Premium Luxury"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "#models" },
|
|
{ text: "Schedule Test Drive", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/happy-groom-near-car_8353-61.jpg?_wi=1"
|
|
imageAlt="Luxury sports car sleek design"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="models" data-section="models">
|
|
<ProductCardThree
|
|
title="Our Collection"
|
|
description="Handpicked masterpieces designed for those who demand nothing but the best. Each model represents decades of engineering precision and aesthetic brilliance."
|
|
tag="Premium Lineup"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View All Models", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "sedan", name: "Grand Sedan", price: "$185,000", imageSrc: "http://img.b2bpic.net/free-photo/front-seat-car-with-seat-belt_181624-26340.jpg", imageAlt: "luxury sedan premium automotive", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "sports", name: "Performance GT", price: "$325,000", imageSrc: "http://img.b2bpic.net/free-photo/sport-car-with-black-white-autotuning_114579-4075.jpg", imageAlt: "luxury sports car performance", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "coupe", name: "Elite Coupe", price: "$275,000", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-choosing-car-car-showroom_1303-17457.jpg", imageAlt: "luxury coupe elegant design", initialQuantity: 1
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="performance" data-section="performance">
|
|
<FeatureBento
|
|
title="Engineering Perfection"
|
|
description="Advanced technology meets timeless elegance. Our vehicles showcase cutting-edge innovation in every system, delivering uncompromised performance and reliability."
|
|
tag="Advanced Technology"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
title: "Twin-Turbo Engine", description: "Precision-engineered powerplant delivering 600+ horsepower with unmatched efficiency and responsiveness.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Zap, label: "Horsepower", value: "600+" },
|
|
{ icon: Gauge, label: "0-60 mph", value: "3.2s" },
|
|
{ icon: Fuel, label: "Efficiency", value: "Class Leading" }
|
|
]
|
|
},
|
|
{
|
|
title: "Adaptive Suspension", description: "Real-time suspension adjustment for optimal comfort and handling in every driving condition.", bentoComponent: "reveal-icon", icon: Sliders
|
|
},
|
|
{
|
|
title: "Carbon Fiber Frame", description: "Lightweight yet incredibly rigid construction using aerospace-grade carbon fiber composites.", bentoComponent: "reveal-icon", icon: CheckCircle
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="craftsmanship" data-section="craftsmanship">
|
|
<MediaAbout
|
|
title="Handcrafted Luxury"
|
|
description="Every vehicle is meticulously assembled by master craftspeople with an average of 25 years of experience. We believe in the marriage of traditional craftsmanship and modern innovation, creating automobiles that transcend mere transportation."
|
|
tag="Heritage & Innovation"
|
|
tagIcon={Crown}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Learn More", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/terrace-with-trees-forest-cozy-outdoor-relaxation-space_169016-69565.jpg"
|
|
imageAlt="luxury car interior detail"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Prestige Motors delivered an experience that transcended all expectations. The attention to detail, the performance, and the sheer presence of this vehicle is unparalleled. It's not just a car—it's a statement."
|
|
rating={5}
|
|
author="Michael Chen"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202435.jpg", alt: "Michael Chen" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Legacy of Excellence"
|
|
description="Trusted by discerning automotive enthusiasts worldwide. These numbers reflect our commitment to perfection."
|
|
tag="Industry Leadership"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "years", value: "65+", title: "Years of Heritage", description: "Decades of automotive excellence and innovation", icon: Clock
|
|
},
|
|
{
|
|
id: "owners", value: "45K+", title: "Satisfied Owners", description: "Driving our vehicles worldwide with pride", icon: Users
|
|
},
|
|
{
|
|
id: "awards", value: "150+", title: "Industry Awards", description: "Recognition for design, performance, and innovation", icon: Award
|
|
},
|
|
{
|
|
id: "craftsmen", value: "1,200+", title: "Master Craftsmen", description: "Dedicated artisans ensuring perfection", icon: Hammer
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about our luxury vehicles and services."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "warranty", title: "What warranty coverage is included?", content: "All Prestige Motors vehicles come with a comprehensive 7-year/100,000-mile warranty covering all mechanical components, plus additional corrosion and roadside assistance coverage for ultimate peace of mind."
|
|
},
|
|
{
|
|
id: "customization", title: "Can I customize my vehicle?", content: "Absolutely. We offer extensive customization options including bespoke paint colors, interior trim selections, performance upgrades, and personalized detailing. Our concierge team will guide you through every option."
|
|
},
|
|
{
|
|
id: "maintenance", title: "What are the maintenance requirements?", content: "Our vehicles require minimal maintenance. We recommend service every 12,000 miles or annually, whichever comes first. All service centers worldwide are equipped with genuine Prestige Motors parts and certified technicians."
|
|
},
|
|
{
|
|
id: "financing", title: "What financing options are available?", content: "We partner with premier financial institutions to offer competitive financing rates, lease programs, and flexible payment plans tailored to your needs. Our finance specialists can discuss options that work best for you."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/happy-groom-near-car_8353-61.jpg?_wi=2"
|
|
imageAlt="Prestige Motors showcase"
|
|
logoText="Prestige Motors"
|
|
copyrightText="© 2025 Prestige Motors. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Models", items: [
|
|
{ label: "Grand Sedan", href: "#models" },
|
|
{ label: "Performance GT", href: "#models" },
|
|
{ label: "Elite Coupe", href: "#models" }
|
|
]
|
|
},
|
|
{
|
|
title: "Experience", items: [
|
|
{ label: "Test Drive", href: "#contact" },
|
|
{ label: "Showrooms", href: "#" },
|
|
{ label: "Service Centers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#craftsmanship" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |