344 lines
18 KiB
TypeScript
344 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardCarouselSplit from "@/components/sections/hero/HeroBillboardCarouselSplit";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import FeatureCardEleven from "@/components/sections/feature/FeatureCardEleven";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import MetricCardEight from "@/components/sections/metrics/MetricCardEight";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { CreditCard, HelpCircle, Heart, Send, Star, Trophy, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="layered-depth"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="911"
|
|
navItems={[
|
|
{
|
|
name: "Models", id: "models"
|
|
},
|
|
{
|
|
name: "Performance", id: "performance"
|
|
},
|
|
{
|
|
name: "Heritage", id: "heritage"
|
|
},
|
|
{
|
|
name: "Ownership", id: "faq"
|
|
},
|
|
{
|
|
name: "Contact", id: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarouselSplit
|
|
title="Drive the Legend"
|
|
buttons={[
|
|
{
|
|
text: "Explore the 911 today", href: "models"
|
|
},
|
|
{
|
|
text: "Experience Now", href: "contact"
|
|
}
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 front view"
|
|
},
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 side profile"
|
|
},
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 interior cockpit"
|
|
},
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 on track"
|
|
},
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 design detail"
|
|
},
|
|
{
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 driving experience"
|
|
}
|
|
]}
|
|
ariaLabel="Porsche 911 hero section with carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="heritage" data-section="heritage">
|
|
<TextSplitAbout
|
|
title="Six Decades of Legend"
|
|
description={[
|
|
"For over 60 years, the Porsche 911 has redefined what a sports car can be. Born in 1963, it evolved from a revolutionary vision into an icon that defines performance, heritage, and engineering excellence.", "Every generation of the 911 carries forward an uncompromising commitment to precision, innovation, and the pure driving experience. From the iconic air-cooled engines to today's hybrid-electric powertrains, the 911 continues to set the standard for sports car design and performance worldwide.", "More than just a car, the 911 is a masterpiece of engineering that combines timeless design with cutting-edge technology. It's a machine that respects its past while boldly shaping the future of automotive excellence."
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
buttons={[
|
|
{
|
|
text: "Discover the History", href: "performance"
|
|
}
|
|
]}
|
|
showBorder={true}
|
|
ariaLabel="Porsche 911 heritage and history"
|
|
/>
|
|
</div>
|
|
|
|
<div id="performance" data-section="performance">
|
|
<FeatureCardEleven
|
|
title="Performance Mastery"
|
|
description="Experience engineering excellence through every dimension of the 911"
|
|
tag="Engineering"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Turbocharged Power", description: "Experience heart-pounding acceleration with advanced turbo technology delivering up to 640 horsepower. Engineered for both track dominance and everyday thrills.", imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Aerodynamic Design", description: "Every curve and surface optimized for speed and stability. Pioneering aerodynamic innovations reduce drag while maximizing downforce for precision handling.", imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Advanced Technology", description: "Intuitive digital interfaces and AI-assisted driving systems. Porsche's latest tech keeps you connected, informed, and in control of every moment.", imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Precision Handling", description: "Race-proven suspension and world-class brakes deliver unmatched control. Feel the road like never before with responsive, razor-sharp handling on any surface.", imageSrc: "/placeholders/placeholder1.webp"
|
|
}
|
|
]}
|
|
animationType="reveal-blur"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertCard"
|
|
usePrimaryButtonImage={false}
|
|
ariaLabel="Porsche 911 performance features"
|
|
/>
|
|
</div>
|
|
|
|
<div id="models" data-section="models">
|
|
<ProductCardFour
|
|
title="The 911 Lineup"
|
|
description="Choose your perfect 911. Each model combines heritage with innovation."
|
|
tag="Models"
|
|
products={[
|
|
{
|
|
id: "carrera", name: "911 Carrera", price: "Starting at $120,000", variant: "Legendary Performance | RWD & AWD", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 Carrera", isFavorited: false
|
|
},
|
|
{
|
|
id: "turbo", name: "911 Turbo", price: "Starting at $195,000", variant: "Ultimate Power | 640 HP | AWD", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 Turbo"
|
|
},
|
|
{
|
|
id: "gt", name: "911 GT3", price: "Starting at $215,000", variant: "Track Focus | Racing Heritage | 510 HP", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 GT3"
|
|
},
|
|
{
|
|
id: "cabriolet", name: "911 Cabriolet", price: "Starting at $135,000", variant: "Open Air Driving | Convertible | 3.0L Engine", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Porsche 911 Cabriolet"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground="invertDefault"
|
|
carouselMode="buttons"
|
|
ariaLabel="Porsche 911 models showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Choose Your 911"
|
|
description="Select the perfect model to match your driving ambitions"
|
|
tag="Pricing"
|
|
tagIcon={CreditCard}
|
|
plans={[
|
|
{
|
|
id: "carrera", badge: "Most Popular", badgeIcon: Star,
|
|
price: "$120,000", buttons: [
|
|
{
|
|
text: "Configure", href: "contact"
|
|
}
|
|
],
|
|
features: [
|
|
"3.0L Twin-Turbo Engine", "385 HP base performance", "RWD or AWD options", "Adaptive suspension", "Porsche connect infotainment", "10-year corrosion warranty"
|
|
]
|
|
},
|
|
{
|
|
id: "turbo", badge: "Maximum Power", badgeIcon: Zap,
|
|
price: "$195,000", buttons: [
|
|
{
|
|
text: "Configure", href: "contact"
|
|
}
|
|
],
|
|
features: [
|
|
"3.8L Twin-Turbo Engine", "640 HP, 0-60 in 2.7 seconds", "All-Wheel Drive", "Enhanced aerodynamics", "Advanced thermal management", "Exclusive Turbo S trim available"
|
|
]
|
|
},
|
|
{
|
|
id: "gt3", badge: "Track Certified", badgeIcon: Trophy,
|
|
price: "$215,000", buttons: [
|
|
{
|
|
text: "Configure", href: "contact"
|
|
}
|
|
],
|
|
features: [
|
|
"4.0L Naturally Aspirated Engine", "510 HP pure performance", "Track-focused suspension", "Carbon ceramic brakes", "Motorsport heritage engineering", "GT racing-inspired design"
|
|
]
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertCard"
|
|
ariaLabel="Porsche 911 pricing and options"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEight
|
|
title="The Legacy by Numbers"
|
|
imageSrc="/placeholders/placeholder1.webp"
|
|
imageAlt="Porsche 911 heritage"
|
|
metrics={[
|
|
{
|
|
id: "years", value: "60+", title: "Years of Excellence"
|
|
},
|
|
{
|
|
id: "horsepower", value: "640", title: "Max Horsepower"
|
|
},
|
|
{
|
|
id: "0to60", value: "2.7s", title: "0-60 Acceleration"
|
|
},
|
|
{
|
|
id: "owners", value: "1M+", title: "Satisfied Owners"
|
|
}
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
ariaLabel="Porsche 911 performance metrics"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What 911 Owners Say"
|
|
description="Experience the 911 through the voices of passionate enthusiasts and collectors"
|
|
tag="Community"
|
|
tagIcon={Heart}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Sterling", role: "Collector & Enthusiast", company: "Classic Automotive", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Marcus Sterling"
|
|
},
|
|
{
|
|
id: "2", name: "Jessica Chen", role: "Track Driver", company: "Performance Racing", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Jessica Chen"
|
|
},
|
|
{
|
|
id: "3", name: "David Richardson", role: "Motorsport Executive", company: "Racing Innovation", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "David Richardson"
|
|
},
|
|
{
|
|
id: "4", name: "Elena Rossi", role: "Brand Ambassador", company: "Luxury Motors", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Elena Rossi"
|
|
},
|
|
{
|
|
id: "5", name: "James MacKenzie", role: "Long-time Owner", company: "Heritage Collection", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "James MacKenzie"
|
|
},
|
|
{
|
|
id: "6", name: "Sophie Laurent", role: "Performance Enthusiast", company: "Speed Innovation", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sophie Laurent"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground="invertCard"
|
|
carouselMode="buttons"
|
|
ariaLabel="Porsche 911 owner testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about the legendary Porsche 911"
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's the difference between Carrera, Turbo, and GT3?", content: "The Carrera is the quintessential 911 with balanced performance and everyday usability. The Turbo delivers maximum horsepower (640 HP) and acceleration (0-60 in 2.7s) for ultimate power seekers. The GT3 focuses on track performance with a naturally aspirated engine, advanced aerodynamics, and racing-derived engineering."
|
|
},
|
|
{
|
|
id: "2", title: "What's the fuel efficiency of the 911?", content: "Modern 911 models achieve approximately 18-22 MPG city and 24-28 MPG highway depending on the model and driving conditions. The hybrid 911 variants offer improved efficiency with combined power systems."
|
|
},
|
|
{
|
|
id: "3", title: "Is the 911 good for daily driving?", content: "Absolutely. While the 911 is a high-performance sports car, it offers surprising practicality with a functional rear seat, modern infotainment systems, and adaptive suspension that smooths out road imperfections for daily comfort."
|
|
},
|
|
{
|
|
id: "4", title: "What warranty does the 911 come with?", content: "All new 911 models come with a 3-year/36,000-mile limited warranty. Extended warranties up to 10 years are available. Porsche also offers complimentary scheduled maintenance for the first 3 years."
|
|
},
|
|
{
|
|
id: "5", title: "Can I customize my 911?", content: "Yes, Porsche offers extensive customization options. From exterior paint colors and interior materials to performance upgrades and technology packages, you can configure your 911 to match your exact preferences."
|
|
},
|
|
{
|
|
id: "6", title: "What's the resale value of a 911?", content: "911s hold their value exceptionally well. Historically, they retain 50-60% of their value after 5 years, and classic models often appreciate. Factors include condition, mileage, and market demand."
|
|
},
|
|
{
|
|
id: "7", title: "How often does the 911 need maintenance?", content: "The 911 requires service every 10,000 miles or annually, whichever comes first. Regular maintenance includes oil changes, filter replacements, and system inspections. Porsche's advanced diagnostics help identify issues early."
|
|
},
|
|
{
|
|
id: "8", title: "Is there a hybrid 911?", content: "Yes, Porsche offers the 911 Hybrid variant combining a traditional engine with electric power. This provides improved efficiency while maintaining the thrilling performance the 911 is known for."
|
|
}
|
|
]}
|
|
ariaLabel="Porsche 911 frequently asked questions"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Connect"
|
|
title="Live the 911"
|
|
description="Join our community of passionate 911 enthusiasts. Get exclusive updates on new models, performance events, and special offers tailored to your driving ambitions."
|
|
useInvertedBackground="invertCard"
|
|
imageSrc="/placeholders/placeholder1.webp"
|
|
imageAlt="Porsche 911 driving experience"
|
|
mediaPosition="right"
|
|
tagIcon={Send}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Stay Connected"
|
|
termsText="We respect your privacy and will only share updates about the 911 experience with you."
|
|
ariaLabel="Porsche 911 contact and newsletter"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="911"
|
|
copyrightText="© 2025 Porsche 911 | Engineering Excellence Since 1963"
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |