Merge version_1 into main #1
258
src/app/page.tsx
258
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Performance",
|
||||
id: "performance",
|
||||
},
|
||||
name: "Performance", id: "performance"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="BMW M4"
|
||||
/>
|
||||
@@ -55,108 +47,63 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="The Ultimate Driving Machine."
|
||||
description="Experience the perfect synergy of power, precision, and passion. The new BMW M4 redefines the limits of automotive performance."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/yellow-sport-car-render-3d-illustration_654080-1126.jpg",
|
||||
imageAlt: "BMW M4 Front 3D",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/yellow-sport-car-render-3d-illustration_654080-1126.jpg", imageAlt: "BMW M4 Front 3D"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138929.jpg",
|
||||
imageAlt: "BMW M4 Side Profile",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138929.jpg", imageAlt: "BMW M4 Side Profile"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500613.jpg",
|
||||
imageAlt: "BMW M4 Interior",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500613.jpg", imageAlt: "BMW M4 Interior"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/led-headlight-black-automobile_23-2147962996.jpg",
|
||||
imageAlt: "BMW M4 Bumper Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/led-headlight-black-automobile_23-2147962996.jpg", imageAlt: "BMW M4 Bumper Detail"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-car-garage_417767-36.jpg",
|
||||
imageAlt: "BMW M4 Rear Tail Lights",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-car-garage_417767-36.jpg", imageAlt: "BMW M4 Rear Tail Lights"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-girl-with-tool-hand-is-sitting-near-new-shiny-car-while-posing-photographer_613910-17074.jpg",
|
||||
imageAlt: "BMW M4 Sunset Road",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-girl-with-tool-hand-is-sitting-near-new-shiny-car-while-posing-photographer_613910-17074.jpg", imageAlt: "BMW M4 Sunset Road"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rear-light-new-dark-car_23-2147962990.jpg",
|
||||
imageAlt: "BMW M4 Rear Tail Lights",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rear-light-new-dark-car_23-2147962990.jpg", imageAlt: "BMW M4 Rear Tail Lights"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg",
|
||||
imageAlt: "BMW M4 Bumper Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg", imageAlt: "BMW M4 Bumper Detail"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-metallic-chair_23-2151113151.jpg",
|
||||
imageAlt: "BMW M4 Interior",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-metallic-chair_23-2151113151.jpg", imageAlt: "BMW M4 Interior"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001285.jpg",
|
||||
imageAlt: "BMW M4 Side Profile",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001285.jpg", imageAlt: "BMW M4 Side Profile"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Test Drive",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Test Drive", href: "#contact"},
|
||||
{
|
||||
text: "View Specs",
|
||||
href: "#performance",
|
||||
},
|
||||
text: "View Specs", href: "#performance"},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-laughing-man_158595-4245.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-laughing-man_158595-4245.jpg", alt: "User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-businesswoman-outdoors_23-2148142640.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-businesswoman-outdoors_23-2148142640.jpg", alt: "User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-happy-woman-standing-by-car_1303-27390.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-happy-woman-standing-by-car_1303-27390.jpg", alt: "User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serious-executive-with-short-hair-crossed-arms_1149-89.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/serious-executive-with-short-hair-crossed-arms_1149-89.jpg", alt: "User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg", alt: "User 5"},
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ Performance Enthusiasts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "PRECISION",
|
||||
},
|
||||
type: "text", text: "PRECISION"},
|
||||
{
|
||||
type: "text",
|
||||
text: "POWER",
|
||||
},
|
||||
type: "text", text: "POWER"},
|
||||
{
|
||||
type: "text",
|
||||
text: "SPEED",
|
||||
},
|
||||
type: "text", text: "SPEED"},
|
||||
{
|
||||
type: "text",
|
||||
text: "CONTROL",
|
||||
},
|
||||
type: "text", text: "CONTROL"},
|
||||
{
|
||||
type: "text",
|
||||
text: "INNOVATION",
|
||||
},
|
||||
type: "text", text: "INNOVATION"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -168,23 +115,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "Horsepower",
|
||||
value: "510 HP",
|
||||
},
|
||||
id: "m1", icon: Zap,
|
||||
title: "Horsepower", value: "510 HP"},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Timer,
|
||||
title: "0-100 km/h",
|
||||
value: "3.5s",
|
||||
},
|
||||
id: "m2", icon: Timer,
|
||||
title: "0-100 km/h", value: "3.5s"},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Gauge,
|
||||
title: "Top Speed",
|
||||
value: "290 km/h",
|
||||
},
|
||||
id: "m3", icon: Gauge,
|
||||
title: "Top Speed", value: "290 km/h"},
|
||||
]}
|
||||
title="Pure Performance"
|
||||
description="Raw numbers that translate into unforgettable driving experiences."
|
||||
@@ -193,30 +131,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "M TwinPower Turbo",
|
||||
subtitle: "High-revving engine for immediate power.",
|
||||
category: "Power",
|
||||
value: "510 HP",
|
||||
},
|
||||
id: "f1", title: "M TwinPower Turbo", subtitle: "High-revving engine for immediate power.", category: "Power", value: "510 HP"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Adaptive M Suspension",
|
||||
subtitle: "Seamless adjustment to road conditions.",
|
||||
category: "Control",
|
||||
value: "Adaptive",
|
||||
},
|
||||
id: "f2", title: "Adaptive M Suspension", subtitle: "Seamless adjustment to road conditions.", category: "Control", value: "Adaptive"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "M xDrive System",
|
||||
subtitle: "Maximum traction and driving stability.",
|
||||
category: "Drivetrain",
|
||||
value: "AWD",
|
||||
},
|
||||
id: "f3", title: "M xDrive System", subtitle: "Maximum traction and driving stability.", category: "Drivetrain", value: "AWD"},
|
||||
]}
|
||||
title="Precision Engineering"
|
||||
description="Every curve, every component, every line has been optimized for peak performance on track and road."
|
||||
@@ -231,41 +155,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Alpine White",
|
||||
price: "Standard",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlight-white-luxury-car-lights-against-grey-background_181624-25222.jpg",
|
||||
},
|
||||
id: "p1", name: "Alpine White", price: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlight-white-luxury-car-lights-against-grey-background_181624-25222.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Black Sapphire",
|
||||
price: "Metallic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-rain-with-wipers-motion-style_169016-69929.jpg",
|
||||
},
|
||||
id: "p2", name: "Black Sapphire", price: "Metallic", imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-rain-with-wipers-motion-style_169016-69929.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Brooklyn Grey",
|
||||
price: "Metallic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silver-luxury-sedan-parked-port_114579-5199.jpg",
|
||||
},
|
||||
id: "p3", name: "Brooklyn Grey", price: "Metallic", imageSrc: "http://img.b2bpic.net/free-photo/silver-luxury-sedan-parked-port_114579-5199.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Silver Stone",
|
||||
price: "Metallic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150861920.jpg",
|
||||
},
|
||||
id: "p4", name: "Silver Stone", price: "Metallic", imageSrc: "http://img.b2bpic.net/free-photo/abstract-store-with-futuristic-concept-architecture_23-2150861920.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Toronto Red",
|
||||
price: "Metallic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-red-auto_23-2147963017.jpg",
|
||||
},
|
||||
id: "p5", name: "Toronto Red", price: "Metallic", imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-red-auto_23-2147963017.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Isle of Man Green",
|
||||
price: "Metallic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-round-headlights-white-vintage-classic-car_181624-21161.jpg",
|
||||
},
|
||||
id: "p6", name: "Isle of Man Green", price: "Metallic", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-round-headlights-white-vintage-classic-car_181624-21161.jpg"},
|
||||
]}
|
||||
title="Discover Your Style"
|
||||
description="Choose the configuration that matches your personality."
|
||||
@@ -279,40 +179,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
testimonial: "The M4 handles like a dream.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-business-man-car-showrrom_1303-21194.jpg",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", role: "CEO", testimonial: "The M4 handles like a dream.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-business-man-car-showrrom_1303-21194.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "CTO",
|
||||
testimonial: "Tech integration is seamless.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-casual-businesswoman-coat-with-laptop-happily-looking-camera-outdoor_574295-2167.jpg",
|
||||
},
|
||||
id: "2", name: "Michael Chen", role: "CTO", testimonial: "Tech integration is seamless.", imageSrc: "http://img.b2bpic.net/free-photo/young-cheerful-casual-businesswoman-coat-with-laptop-happily-looking-camera-outdoor_574295-2167.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Marketing Director",
|
||||
testimonial: "Feels like a track day.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-confident-business-leader_1262-4808.jpg",
|
||||
},
|
||||
id: "3", name: "Emily Rodriguez", role: "Marketing Director", testimonial: "Feels like a track day.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-confident-business-leader_1262-4808.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Product Manager",
|
||||
testimonial: "Perfect balance of luxury.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/space-crew-member-responds-alien-hostile-presence-red-light-alert_482257-126286.jpg",
|
||||
},
|
||||
id: "4", name: "David Kim", role: "Product Manager", testimonial: "Perfect balance of luxury.", imageSrc: "http://img.b2bpic.net/free-photo/space-crew-member-responds-alien-hostile-presence-red-light-alert_482257-126286.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alex Smith",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "It's about the feeling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg",
|
||||
},
|
||||
id: "5", name: "Alex Smith", role: "Entrepreneur", testimonial: "It's about the feeling.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg"},
|
||||
]}
|
||||
title="Hear from Drivers"
|
||||
description="Why enthusiasts choose the M4."
|
||||
@@ -325,20 +200,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the M4 good for daily driving?",
|
||||
content: "Yes, with adaptive settings, it handles city traffic comfortably.",
|
||||
},
|
||||
id: "q1", title: "Is the M4 good for daily driving?", content: "Yes, with adaptive settings, it handles city traffic comfortably."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What's the service interval?",
|
||||
content: "Typically every 10,000 miles.",
|
||||
},
|
||||
id: "q2", title: "What's the service interval?", content: "Typically every 10,000 miles."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Does it have a warranty?",
|
||||
content: "Comes with standard BMW factory warranty.",
|
||||
},
|
||||
id: "q3", title: "Does it have a warranty?", content: "Comes with standard BMW factory warranty."},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Everything you need to know about the M4."
|
||||
@@ -353,20 +219,12 @@ export default function LandingPage() {
|
||||
description="Request your personalized configuration or book a test drive today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
name: "name", type: "text", placeholder: "Your Name"},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
name: "email", type: "email", placeholder: "Your Email"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Any specific requests?",
|
||||
}}
|
||||
name: "message", placeholder: "Any specific requests?"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-shot-empty-road-countryside-daytime_181624-1994.jpg"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
@@ -379,14 +237,10 @@ export default function LandingPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com/bmw",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "https://instagram.com/bmw", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/bmw",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
href: "https://twitter.com/bmw", ariaLabel: "Twitter"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user