bender/fc56726c-3e3f-41e4-a921-51ecfa3c8806
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update src/app/cars/[slug]/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-06 19:07:03 +00:00
parent b921fbdc26
commit db78908c1c
1 changed files with 240 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
src/app/cars/[slug]/page.tsx
View File

@@ -3,55 +3,28 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Car, Zap, Gauge, Award } from "lucide-react";
import Link from "next/link";
import {
Car,
Zap,
Award,
Sparkles,
Building2,
History,
Globe,
Mail,
} from "lucide-react";
export default function CarDetailPage() {
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -67,117 +40,257 @@ export default function CarDetailPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
navItems={[
{ name: "Search", id: "/search" },
{ name: "Browse", id: "/browse" },
{ name: "Compare", id: "/compare" },
{ name: "Timeline", id: "/timeline" },
{ name: "About", id: "/about" },
]}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</div>
<div id="car-hero" data-section="car-hero">
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Porsche 911: The Iconic Sports Car"
description="From its 1963 debut to today, the Porsche 911 stands as the world's most enduring sports car. Explore 60+ years of continuous production, evolution, and legendary performance."
tag="Automotive Icon"
title="Vehicle Details"
description="Complete information about this iconic vehicle including specifications, production data, and historical context."
tag="Vehicle Profile"
tagIcon={Car}
tagAnimation="entrance-slide"
background={{ variant: "aurora" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772823291321-59c5e153.png?_wi=4"
imageAlt="Porsche 911 Classic Profile"
mediaAnimation="entrance-slide"
tagAnimation="slide-up"
background={{ variant: "plain" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772823292340-23f02fb5.png"
imageAlt="Vehicle Overview"
mediaAnimation="slide-up"
imagePosition="right"
testimonials={[
{
name: "Automotive Journalist",
handle: "Car Magazine Editor",
testimonial: "The 911 is not just a car, it's a phenomenon. Over 1 million produced and still evolving.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png",
},
{
name: "Racing Driver",
handle: "Performance Expert",
testimonial: "The 911's handling balance and engineering are unmatched. It's the benchmark for sports cars.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290751-a93bf9d8.png",
},
{
name: "Design Historian",
handle: "Automotive Design Expert",
testimonial: "The 911's silhouette is timeless. Every generation respects the original while pushing design forward.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png?_wi=2",
},
name: "Enthusiast", handle: "Collector", testimonial:
"Perfect detailed information about this legendary vehicle and its specifications.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png"},
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "Explore Models", href: "/browse" },
{ text: "View Specifications", href: "/specs" },
{ text: "View Similar", href: "/browse" },
{ text: "Compare Models", href: "/compare" },
]}
buttonAnimation="entrance-slide"
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="car-details" data-section="car-details">
<TextSplitAbout
title="Porsche 911 Legacy"
description={[
"The Porsche 911 debuted at the 1963 Frankfurt International Motor Show as the successor to the 356. With its rear-mounted, air-cooled flat-six engine, it established a formula that has endured for over 60 years.",
"Every generation—from the original 2.0L (130 hp) to today's turbocharged variants producing over 600 horsepower—has maintained the fundamental 911 characteristics: rear-wheel drive, exceptional handling, and pure driver engagement.",
"With 1 million+ vehicles produced across 11 generations (1963-2024), the 911 represents Porsche's commitment to continuous improvement while preserving the core engineering principles that made it an automotive legend.",
]}
showBorder={true}
<div id="popular-brands" data-section="popular-brands">
<SocialProofOne
title="Related Vehicles"
description="Other vehicles from the same era and manufacturer"
tag="Similar Models"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Compare Generations", href: "/compare" },
{ text: "Browse All Models", href: "/browse" },
]}
buttonAnimation="entrance-slide"
names=[
"Model A", "Model B", "Model C", "Model D", "Model E"]
speed={40}
showCard={true}
/>
</div>
<div id="car-specs" data-section="car-specs">
<MetricCardThree
metrics={[
{
id: "1",
icon: Award,
title: "Production Years",
value: "1963-2024",
},
{
id: "2",
icon: Car,
title: "Units Produced",
value: "1M+",
},
{
id: "3",
icon: Zap,
title: "Peak Horsepower",
value: "630 hp",
},
{
id: "4",
icon: Gauge,
title: "Top Speed",
value: "211 mph",
},
]}
title="Porsche 911 by the Numbers"
description="Spanning six decades of continuous production and evolution"
tag="Performance Data"
tagAnimation="entrance-slide"
<div id="featured-vehicles" data-section="featured-vehicles">
<ProductCardTwo
title="Vehicle Variants"
description="Different generations and variants of this model"
tag="Model Lineup"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
gridVariant="four-items-2x2-equal-grid"
products={[
{
id: "1", brand: "Brand", name: "Variant 1", price: "1960s", rating: 5,
reviewCount: "Classic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772823293817-62111fec.png?_wi=1", imageAlt: "Variant 1"},
{
id: "2", brand: "Brand", name: "Variant 2", price: "1970s", rating: 5,
reviewCount: "Iconic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772823291321-59c5e153.png?_wi=1", imageAlt: "Variant 2"},
{
id: "3", brand: "Brand", name: "Variant 3", price: "1980s", rating: 5,
reviewCount: "Historic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772823292102-305f7185.png?_wi=1", imageAlt: "Variant 3"},
{
id: "4", brand: "Brand", name: "Variant 4", price: "1990s", rating: 5,
reviewCount: "Modern", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772823292733-3909ad83.png?_wi=1", imageAlt: "Variant 4"},
]}
/>
</div>
<div id="car-footer" data-section="car-footer">
<FooterLogoEmphasis columns={footerColumns} logoText="AutoArchive" />
<div id="browse-decade" data-section="browse-decade">
<FeatureCardTwentyFive
title="Specifications"
description="Detailed technical specifications across different model generations"
tag="Technical Data"
tagAnimation="slide-up"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Engine & Performance", description: "Power, torque, acceleration, and top speed specifications", icon: Zap,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/early-1900s-automobiles-brass-and-iron-c-1772823291918-1a562875.png?_wi=1", imageAlt: "Engine Specifications"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png?_wi=1", imageAlt: "Performance Data"},
],
},
{
title: "Design & Dimensions", description: "Body style, length, width, weight, and design elements", icon: Award,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1930s-1950s-classic-cars-showcasing-art--1772823292276-01b2e0ec.png?_wi=1", imageAlt: "Design Elements"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png?_wi=1", imageAlt: "Dimensions"},
],
},
]}
/>
</div>
<div id="legendary-cars" data-section="legendary-cars">
<BlogCardThree
title="Vehicle History"
description="Learn about this vehicle's impact and legacy"
tag="Heritage"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="opacity"
carouselMode="buttons"
blogs={[
{
id: "1", category: "History", title: "The Legacy of This Vehicle", excerpt: "How this car shaped the automotive industry", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/ferrari-250-gto-iconic-red-racing-car-in-1772823292116-a7e77200.png?_wi=1", imageAlt: "Vehicle History", authorName: "Historian", authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290144-6017089c.png", date: "Featured"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="Key Statistics"
description="Important numbers in this vehicle's history"
tag="By The Numbers"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
metrics={[
{
id: "1", icon: Building2,
title: "Production Start", value: "1960"},
{
id: "2", icon: Car,
title: "Units Produced", value: "1000+"},
{
id: "3", icon: History,
title: "Production Years", value: "15"},
{
id: "4", icon: Globe,
title: "Export Countries", value: "30+"},
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About This Vehicle"
description={[
"This legendary vehicle represents a pinnacle of automotive engineering and design.", "From its introduction to the present day, it has remained an icon in the automotive world.", "Our comprehensive database documents every aspect of this vehicle's evolution and significance."]}
showBorder={true}
useInvertedBackground={false}
buttons={[
{ text: "View Variants", href: "/browse" },
{ text: "Compare Models", href: "/compare" },
]}
buttonAnimation="opacity"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked"
description="Common questions about this vehicle"
tag="Help"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
faqsAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-customer-support-and-help-resourc-1772823291668-afcab7fc.png"
imageAlt="Vehicle FAQs"
mediaPosition="left"
faqs={[
{
id: "1", title: "What are the main specifications?", content: "This vehicle features comprehensive specifications documented in our database, including engine, dimensions, and performance data."},
{
id: "2", title: "How many were produced?", content: "Production numbers vary by generation and variant. Check our detailed specifications for exact production figures."},
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Explore More"
tagIcon={Zap}
tagAnimation="slide-up"
title="Want to Compare or Find Similar Vehicles?"
description="Use our tools to compare specifications, find similar models, and explore the complete automotive database."
buttons={[
{ text: "Compare Vehicles", href: "/compare" },
{ text: "Browse Similar", href: "/browse" },
]}
buttonAnimation="opacity"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={[
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
],
},
{
items: [
{ label: "About Us", href: "/" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Sitemap", href: "/sitemap" },
],
},
]}
/>
</div>
</ThemeProvider>
);
}
}