Merge version_1 into main #2
453
src/app/page.tsx
453
src/app/page.tsx
@@ -28,343 +28,138 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Models",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="FERRARI 3D"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Models", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="FERRARI 3D"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Engineered for Intensity"
|
||||
description="Experience the pinnacle of automotive innovation. Interact with our latest models in stunning 3D detail."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-closing-trunk_23-2148321895.jpg?_wi=1",
|
||||
imageAlt: "SF90 Stradale",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001257.jpg?_wi=1",
|
||||
imageAlt: "Roma Twilight",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-beautiful-sitting-embrace-carlo_1304-2608.jpg",
|
||||
imageAlt: "812 Superfast",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-interior-brown-black-colors_181624-31177.jpg",
|
||||
imageAlt: "Interior Details",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139593.jpg",
|
||||
imageAlt: "F8 Tributo Rear",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-concept_23-2148882653.jpg",
|
||||
imageAlt: "V8 Engine",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Engineered for Intensity"
|
||||
description="Experience the pinnacle of automotive innovation. Interact with our latest models in stunning 3D detail."
|
||||
buttons={[{ text: "Explore Collection", href: "#products" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/young-man-closing-trunk_23-2148321895.jpg", imageAlt: "SF90 Stradale" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001257.jpg", imageAlt: "Roma Twilight" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/car-beautiful-sitting-embrace-carlo_1304-2608.jpg", imageAlt: "812 Superfast" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-interior-brown-black-colors_181624-31177.jpg", imageAlt: "Interior Details" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139593.jpg", imageAlt: "F8 Tributo Rear" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-concept_23-2148882653.jpg", imageAlt: "V8 Engine" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Legacy of Performance"
|
||||
metrics={[
|
||||
{
|
||||
label: "Years Racing",
|
||||
value: "75+",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
label: "Models Produced",
|
||||
value: "150+",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
label: "Global Victories",
|
||||
value: "5000+",
|
||||
icon: Trophy,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Legacy of Performance"
|
||||
metrics={[
|
||||
{ label: "Years Racing", value: "75+", icon: Award },
|
||||
{ label: "Models Produced", value: "150+", icon: Zap },
|
||||
{ label: "Global Victories", value: "5000+", icon: Trophy },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Steering",
|
||||
description: "Adaptive handling for every road surface.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Target,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-white-car_181624-22603.jpg",
|
||||
imageAlt: "Closeup shot of the headlights of a modern white car",
|
||||
},
|
||||
{
|
||||
title: "Aerodynamic Flow",
|
||||
description: "Mastering the wind for maximum velocity.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Wind,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-closing-trunk_23-2148321895.jpg?_wi=2",
|
||||
imageAlt: "Closeup shot of the headlights of a modern white car",
|
||||
},
|
||||
{
|
||||
title: "Hybrid Synergy",
|
||||
description: "Electric power meets roaring combustion.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001257.jpg?_wi=2",
|
||||
imageAlt: "Closeup shot of the headlights of a modern white car",
|
||||
},
|
||||
]}
|
||||
title="Innovation at Every Turn"
|
||||
description="State-of-the-art engineering combined with timeless design aesthetics."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Precision Steering", description: "Adaptive handling for every road surface.", bentoComponent: "reveal-icon", icon: Target },
|
||||
{ title: "Aerodynamic Flow", description: "Mastering the wind for maximum velocity.", bentoComponent: "reveal-icon", icon: Wind },
|
||||
{ title: "Hybrid Synergy", description: "Electric power meets roaring combustion.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
]}
|
||||
title="Innovation at Every Turn"
|
||||
description="State-of-the-art engineering combined with timeless design aesthetics."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "SF90 Stradale",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138936.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "296 GTB",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/f1-racing-24-hours-le-mans-render-3d-illustration_654080-397.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Roma",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9275.jpg",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "812 Superfast",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-sports-car-illuminated-by-bright-headlights-generative-ai_188544-46213.jpg",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
name: "F8 Tributo",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-concept-car_23-2151955601.jpg",
|
||||
},
|
||||
{
|
||||
id: "m6",
|
||||
name: "Purosangue",
|
||||
price: "POA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-suv-wet-road-power-safety-modern-design_169016-70068.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Current Lineup"
|
||||
description="Discover the latest Ferrari models available for custom configuration."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "m1", name: "SF90 Stradale", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138936.jpg" },
|
||||
{ id: "m2", name: "296 GTB", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/f1-racing-24-hours-le-mans-render-3d-illustration_654080-397.jpg" },
|
||||
{ id: "m3", name: "Roma", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9275.jpg" },
|
||||
{ id: "m4", name: "812 Superfast", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-sports-car-illuminated-by-bright-headlights-generative-ai_188544-46213.jpg" },
|
||||
{ id: "m5", name: "F8 Tributo", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-concept-car_23-2151955601.jpg" },
|
||||
{ id: "m6", name: "Purosangue", price: "POA", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-suv-wet-road-power-safety-modern-design_169016-70068.jpg" },
|
||||
]}
|
||||
title="The Current Lineup"
|
||||
description="Discover the latest Ferrari models available for custom configuration."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "1000 HP",
|
||||
title: "Peak Power",
|
||||
items: [
|
||||
"SF90 Hybrid Core",
|
||||
"Active Aero",
|
||||
"Dynamic Torque",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "2.5s",
|
||||
title: "0-100 km/h",
|
||||
items: [
|
||||
"Sub-3 acceleration",
|
||||
"Race-mode timing",
|
||||
"High-grip traction",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "340 km/h",
|
||||
title: "Top Velocity",
|
||||
items: [
|
||||
"Wind tunnel tested",
|
||||
"Downforce optimized",
|
||||
"Stability control",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Engineering Milestones"
|
||||
description="The technical specifications that set our performance apart."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "1000 HP", title: "Peak Power", items: ["SF90 Hybrid Core", "Active Aero", "Dynamic Torque"] },
|
||||
{ id: "2", value: "2.5s", title: "0-100 km/h", items: ["Sub-3 acceleration", "Race-mode timing", "High-grip traction"] },
|
||||
{ id: "3", value: "340 km/h", title: "Top Velocity", items: ["Wind tunnel tested", "Downforce optimized", "Stability control"] },
|
||||
]}
|
||||
title="Engineering Milestones"
|
||||
description="The technical specifications that set our performance apart."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
company: "TechCorp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Collector",
|
||||
company: "Global Assets",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-urban-lifestyle-body-language-concept-horizontal-im_343059-4141.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Expert",
|
||||
company: "Auto Review",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Entrepreneur",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Elena Rossi",
|
||||
role: "Designer",
|
||||
company: "Luxury Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-sucesful-buisnesswoman-glass-building-s-background_613910-21670.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Ferrari Experience"
|
||||
description="Voices from the community of passionate drivers."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" },
|
||||
{ id: "2", name: "Michael Chen", role: "Collector", company: "Global Assets", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-urban-lifestyle-body-language-concept-horizontal-im_343059-4141.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", role: "Expert", company: "Auto Review", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg" },
|
||||
{ id: "4", name: "David Kim", role: "Entrepreneur", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg" },
|
||||
{ id: "5", name: "Elena Rossi", role: "Designer", company: "Luxury Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-sucesful-buisnesswoman-glass-building-s-background_613910-21670.jpg" },
|
||||
]}
|
||||
title="The Ferrari Experience"
|
||||
description="Voices from the community of passionate drivers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Get Configurator Access"
|
||||
title="Configure Your Ferrari"
|
||||
description="Enter your email to receive our exclusive configurator access and latest model news."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Get Configurator Access"
|
||||
title="Configure Your Ferrari"
|
||||
description="Enter your email to receive our exclusive configurator access and latest model news."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bokeh-city-light_1203-6590.jpg"
|
||||
logoText="FERRARI 3D"
|
||||
columns={[
|
||||
{
|
||||
title: "Models",
|
||||
items: [
|
||||
{
|
||||
label: "SF90 Stradale",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Roma",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Events",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Collectors",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Configurator",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bokeh-city-light_1203-6590.jpg"
|
||||
logoText="FERRARI 3D"
|
||||
columns={[
|
||||
{ title: "Models", items: [{ label: "SF90 Stradale", href: "#" }, { label: "Roma", href: "#" }] },
|
||||
{ title: "Community", items: [{ label: "Events", href: "#" }, { label: "Collectors", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Configurator", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user