Update src/app/page.tsx
This commit is contained in:
359
src/app/page.tsx
359
src/app/page.tsx
@@ -14,254 +14,135 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Model",
|
||||
id: "product",
|
||||
},
|
||||
{
|
||||
name: "Performance",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="BMW M3"
|
||||
button={{
|
||||
text: "Build Yours",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Model", id: "product" },
|
||||
{ name: "Performance", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="BMW M3"
|
||||
button={{ text: "Build Yours", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="BMW M3 Competition"
|
||||
description="Unleash pure adrenaline with the most capable and exhilarating M3 ever built."
|
||||
buttons={[
|
||||
{
|
||||
text: "Configure Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blue-car-driving-road_114579-4056.jpg"
|
||||
imageAlt="BMW M3 Competition side view"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="BMW M3 Competition"
|
||||
description="Unleash pure adrenaline with the most capable and exhilarating M3 ever built."
|
||||
buttons={[{ text: "Configure Now", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blue-car-driving-road_114579-4056.jpg"
|
||||
imageAlt="BMW M3 Competition side view"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Precision"
|
||||
description={[
|
||||
"The BMW M3 Competition is engineered for those who demand ultimate performance.",
|
||||
"With its twin-turbo engine and precision-tuned chassis, it delivers an driving experience that is truly unmatched.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Precision"
|
||||
description={[
|
||||
"The BMW M3 Competition is engineered for those who demand ultimate performance.", "With its twin-turbo engine and precision-tuned chassis, it delivers an driving experience that is truly unmatched."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Front Design",
|
||||
price: "Iconic",
|
||||
variant: "Exterior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-wearing-dress-posing-front-her-car-outdoors-ownership-driver_158595-6719.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Rear Styling",
|
||||
price: "Dynamic",
|
||||
variant: "Exterior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-white-auto-street_23-2147963762.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "M Alloy Rims",
|
||||
price: "Aggressive",
|
||||
variant: "Wheels",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Digital Cockpit",
|
||||
price: "Tech-Forward",
|
||||
variant: "Interior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-sport-car-salon-direction-vire-brown-leather-interior_114579-1158.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "M Sport Seats",
|
||||
price: "Supportive",
|
||||
variant: "Interior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Sharp Headlights",
|
||||
price: "Precise",
|
||||
variant: "Exterior",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-glasses-abstract-table_23-2149974229.jpg",
|
||||
},
|
||||
]}
|
||||
title="The M3 Competition Gallery"
|
||||
description="Explore the exquisite design details and aggressive stance of the BMW M3."
|
||||
/>
|
||||
</div>
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Front Design", price: "Iconic", variant: "Exterior", imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-wearing-dress-posing-front-her-car-outdoors-ownership-driver_158595-6719.jpg" },
|
||||
{ id: "p2", name: "Rear Styling", price: "Dynamic", variant: "Exterior", imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-white-auto-street_23-2147963762.jpg" },
|
||||
{ id: "p3", name: "M Alloy Rims", price: "Aggressive", variant: "Wheels", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg" },
|
||||
{ id: "p4", name: "Digital Cockpit", price: "Tech-Forward", variant: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/red-sport-car-salon-direction-vire-brown-leather-interior_114579-1158.jpg" },
|
||||
{ id: "p5", name: "M Sport Seats", price: "Supportive", variant: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg" },
|
||||
{ id: "p6", name: "Sharp Headlights", price: "Precise", variant: "Exterior", imageSrc: "http://img.b2bpic.net/free-photo/top-view-glasses-abstract-table_23-2149974229.jpg" },
|
||||
]}
|
||||
title="The M3 Competition Gallery"
|
||||
description="Explore the exquisite design details and aggressive stance of the BMW M3."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Dynamics",
|
||||
description: "Engineered for maximum grip and handling precision on any road.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-drives-through-winter-forest-road-with-motion-blur-winter-forest-drive_169016-71275.jpg",
|
||||
},
|
||||
{
|
||||
title: "Advanced Tech",
|
||||
description: "Cutting-edge infotainment with intuitive control at your fingertips.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828175.jpg",
|
||||
},
|
||||
{
|
||||
title: "Aerodynamic Design",
|
||||
description: "Every curve and vent serves a purpose for performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/watercolor-car-painting-illustration_23-2151706289.jpg",
|
||||
},
|
||||
]}
|
||||
title="Performance Beyond Limits"
|
||||
description="Experience power, technology, and design integrated into one masterpiece."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Precision Dynamics", description: "Engineered for maximum grip and handling precision on any road.", imageSrc: "http://img.b2bpic.net/free-photo/car-drives-through-winter-forest-road-with-motion-blur-winter-forest-drive_169016-71275.jpg" },
|
||||
{ title: "Advanced Tech", description: "Cutting-edge infotainment with intuitive control at your fingertips.", imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828175.jpg" },
|
||||
{ title: "Aerodynamic Design", description: "Every curve and vent serves a purpose for performance.", imageSrc: "http://img.b2bpic.net/free-photo/watercolor-car-painting-illustration_23-2151706289.jpg" },
|
||||
]}
|
||||
title="Performance Beyond Limits"
|
||||
description="Experience power, technology, and design integrated into one masterpiece."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mark S.",
|
||||
role: "Race Enthusiast",
|
||||
company: "BMW Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/image-sad-handsome-guy-feeling-disappointed-pouting-lips-looking-empty-space-distressed-st_1258-163160.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah L.",
|
||||
role: "Tech Lead",
|
||||
company: "BMW Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David K.",
|
||||
role: "Professional",
|
||||
company: "BMW Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-smiling-while-servicing-car-engine_1170-1285.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elena R.",
|
||||
role: "Entrepreneur",
|
||||
company: "BMW Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "James P.",
|
||||
role: "Driver",
|
||||
company: "BMW Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16027.jpg",
|
||||
},
|
||||
]}
|
||||
title="Voices of Performance"
|
||||
description="What our drivers say about the M3 Competition experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Mark S.", role: "Race Enthusiast", company: "BMW Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/image-sad-handsome-guy-feeling-disappointed-pouting-lips-looking-empty-space-distressed-st_1258-163160.jpg" },
|
||||
{ id: "2", name: "Sarah L.", role: "Tech Lead", company: "BMW Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg" },
|
||||
{ id: "3", name: "David K.", role: "Professional", company: "BMW Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mechanic-smiling-while-servicing-car-engine_1170-1285.jpg" },
|
||||
{ id: "4", name: "Elena R.", role: "Entrepreneur", company: "BMW Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg" },
|
||||
{ id: "5", name: "James P.", role: "Driver", company: "BMW Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16027.jpg" },
|
||||
]}
|
||||
title="Voices of Performance"
|
||||
description="What our drivers say about the M3 Competition experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Start Your Journey"
|
||||
description="Request a brochure or schedule your test drive today."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Start Your Journey"
|
||||
description="Request a brochure or schedule your test drive today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Models",
|
||||
items: [
|
||||
{
|
||||
label: "M3 Competition",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "M4 Coupe",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "M5 Sedan",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="BMW M"
|
||||
copyrightText="© 2025 | BMW M Series Landing Page"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Models", items: [
|
||||
{ label: "M3 Competition", href: "#" },
|
||||
{ label: "M4 Coupe", href: "#" },
|
||||
{ label: "M5 Sedan", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="BMW M"
|
||||
copyrightText="© 2025 | BMW M Series Landing Page"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user