250 lines
13 KiB
TypeScript
250 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Zap, Gauge, Fuel, TrendingUp, Cpu, Shield, Wifi, Battery, Crown } from 'lucide-react';
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Audi SQ5 9B"
|
|
navItems={[
|
|
{ name: "Performance", id: "performance" },
|
|
{ name: "Design", id: "design" },
|
|
{ name: "Technology", id: "technology" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Reserve", id: "reserve" }
|
|
]}
|
|
bottomLeftText="Precision Engineering"
|
|
bottomRightText="reserve@audi-sq5.com"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero" className="min-h-screen">
|
|
<HeroCentered
|
|
title="Audi SQ5 9B: Performance Refined"
|
|
description="Experience the pinnacle of automotive engineering. The Audi SQ5 9B combines breathtaking performance with refined luxury, delivering an uncompromising driving experience."
|
|
background={{ variant: "downward-rays-static" }}
|
|
avatars={[
|
|
{ src: "https://img.b2bpic.net/free-photo/grey-crossover-wet-autumn-road-rainy-motion_169016-70274.jpg?id=423475605", alt: "Audi SQ5 9B Front View" }
|
|
]}
|
|
avatarText="The Ultimate Performance SUV"
|
|
buttons={[
|
|
{ text: "Reserve Now", href: "reserve" },
|
|
{ text: "Explore Features", href: "design" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Performance Metrics */}
|
|
<div id="performance" data-section="performance" className="py-20 md:py-32">
|
|
<MetricCardOne
|
|
title="Engineering Excellence"
|
|
description="Discover the raw power and precision that define the SQ5 9B experience"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "507", title: "hp", description: "Peak Horsepower", icon: Zap
|
|
},
|
|
{
|
|
id: "2", value: "3.8", title: "sec", description: "0-60 mph Acceleration", icon: Gauge
|
|
},
|
|
{
|
|
id: "3", value: "479", title: "lb-ft", description: "Maximum Torque", icon: Fuel
|
|
},
|
|
{
|
|
id: "4", value: "155", title: "mph", description: "Top Speed", icon: TrendingUp
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Design Features */}
|
|
<div id="design" data-section="design" className="py-20 md:py-32">
|
|
<FeatureCardTwentyFour
|
|
title="Iconic Design Language"
|
|
description="Every curve, every line tells a story of precision and performance"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "1", title: "Signature LED Matrix Headlights", author: "Audi Design Studio", description: "Innovative LED technology provides superior illumination while creating a distinctive signature on the road. Each light signature is precisely engineered for both aesthetics and functionality.", tags: ["Innovation", "Safety"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-rain-with-wipers-motion-style_169016-69929.jpg?id=423028479"
|
|
},
|
|
{
|
|
id: "2", title: "Aerodynamic Performance Package", author: "Engineering Division", description: "Sculpted bodywork reduces drag while enhancing stability at high speeds. The aggressive stance and muscular proportions convey power while maintaining elegant proportions.", tags: ["Performance", "Efficiency"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/black-mini-coupe-road_114579-5056.jpg?id=6159517"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Technology */}
|
|
<div id="technology" data-section="technology" className="py-20 md:py-32">
|
|
<AboutMetric
|
|
title="Advanced Technology Integration: Where Precision Meets Innovation"
|
|
metrics={[
|
|
{
|
|
icon: Cpu,
|
|
label: "AI-Powered Infotainment", value: "Next-Gen"
|
|
},
|
|
{
|
|
icon: Shield,
|
|
label: "Safety Systems", value: "Premier"
|
|
},
|
|
{
|
|
icon: Wifi,
|
|
label: "Connectivity", value: "5G Ready"
|
|
},
|
|
{
|
|
icon: Battery,
|
|
label: "Efficiency", value: "Optimized"
|
|
}
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials */}
|
|
<div id="testimonials" data-section="testimonials" className="py-20 md:py-32">
|
|
<TestimonialCardTen
|
|
title="Owner Experiences"
|
|
description="Hear from those who have experienced the SQ5 9B difference"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Pure Driving Excellence", quote: "The SQ5 9B transformed my driving experience. The performance is exhilarating, the handling is precise, and the luxury touches make every journey special. It's not just a car; it's a statement.", name: "James Mitchell", role: "CEO, Automotive Enthusiast", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Mitchell"
|
|
},
|
|
{
|
|
id: "2", title: "Engineering Perfection", quote: "I've owned luxury vehicles before, but nothing compares to the engineering sophistication of the SQ5 9B. Every detail has been thoughtfully executed. It's a masterpiece.", name: "Sarah Chen", role: "Executive Director, Tech Industry", imageSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Uncompromising Quality", quote: "The attention to detail is extraordinary. From the whisper-quiet cabin to the responsive handling, everything feels intentional and refined. This is premium automotive excellence.", name: "Michael Rodriguez", role: "Investment Professional", imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Michael Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "The Ultimate Performance SUV", quote: "I needed performance without compromising comfort. The SQ5 9B delivers on both fronts magnificently. It's the perfect blend of power and elegance.", name: "Alexandra Williams", role: "Luxury Automotive Collector", imageSrc: "https://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg", imageAlt: "Alexandra Williams"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Specifications */}
|
|
<div id="specifications" data-section="specifications" className="py-20 md:py-32">
|
|
<PricingCardEight
|
|
title="Performance Specifications"
|
|
description="Complete technical details of the Audi SQ5 9B"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "base", badge: "Standard Performance", badgeIcon: Zap,
|
|
price: "SQ5 9B", subtitle: "Premium Performance SUV", buttons: [
|
|
{ text: "Configure", href: "reserve" }
|
|
],
|
|
features: [
|
|
"507 hp Twin-Turbo V6 Engine", "3.8 Second 0-60 Acceleration", "All-Wheel Drive with Quattro", "Dynamic Air Suspension", "Panoramic Sunroof", "Bang & Olufsen Premium Audio"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", badge: "Exclusive Edition", badgeIcon: Crown,
|
|
price: "Limited", subtitle: "The Ultimate Specification", buttons: [
|
|
{ text: "Reserve Exclusive", href: "reserve" }
|
|
],
|
|
features: [
|
|
"All Standard Features Plus", "Carbon Fiber Interior Trim", "Leather Nappa Sport Seats", "Adaptive Matrix LED Headlights", "Night Vision Assist", "Exclusive Paint Options"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact */}
|
|
<div id="contact" data-section="contact" className="py-20 md:py-32">
|
|
<ContactSplitForm
|
|
title="Reserve Your SQ5 9B"
|
|
description="Experience the future of performance. Schedule a private viewing or reserve your exclusive allocation today."
|
|
useInvertedBackground={false}
|
|
imageSrc="https://img.b2bpic.net/free-photo/black-sedan-rain-with-wipers-motion-style_169016-69929.jpg"
|
|
imageAlt="Audi SQ5 9B Interior"
|
|
mediaPosition="right"
|
|
inputs={[
|
|
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "preferredTime", type: "text", placeholder: "Preferred Viewing Time", required: false }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your interest in the SQ5 9B...", rows: 5,
|
|
required: false
|
|
}}
|
|
buttonText="Reserve Now"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer" className="py-16 md:py-24">
|
|
<FooterBase
|
|
logoText="Audi SQ5 9B"
|
|
copyrightText="© 2025 Audi SQ5 9B. All rights reserved. Engineering excellence since 2024."
|
|
columns={[
|
|
{
|
|
title: "Experience", items: [
|
|
{ label: "Performance", href: "performance" },
|
|
{ label: "Design", href: "design" },
|
|
{ label: "Technology", href: "technology" },
|
|
{ label: "Testimonials", href: "testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Information", items: [
|
|
{ label: "Specifications", href: "specifications" },
|
|
{ label: "Warranty", href: "https://www.audi.com" },
|
|
{ label: "Service", href: "https://www.audi.com" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Support", href: "reserve" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |