Compare commits
57 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4a28aca907 | |||
| e423d74271 | |||
| 346b2494aa | |||
| 10530bfe89 | |||
| 4571ab2ff3 | |||
| 31dde22e6a | |||
| 0bb514905b | |||
| e84f493b32 | |||
| ad868e8761 | |||
| 90d83e78cb | |||
| 23768596ec | |||
| 119b736e2a | |||
| 1f5d0ec197 | |||
| bf93f289a5 | |||
| 6d76974845 | |||
| 7646bc558c | |||
| e39ffe65ee | |||
| a956d631ca | |||
| 5a95b5b7f2 | |||
| e2a9cd3b2e | |||
| 949107d70d | |||
| 2a7ee409d3 | |||
| 6991559bcb | |||
| ea939af7cf | |||
| 97e0bcc840 | |||
| fe03e0affd | |||
| 621fa0db66 | |||
| cb53718516 | |||
| e0de7804c3 | |||
| ca74a09521 | |||
| 1f370f55e7 | |||
| f9cf2b3161 | |||
| f7d26e6fe2 | |||
| f35eab9d2a | |||
| 87a6c4eb8c | |||
| 49f1e5f5f0 | |||
| 43a694b09c | |||
| 19d66af855 | |||
| 26589b89ae | |||
| a856e1d095 | |||
| b8ebec5bbe | |||
| 84e04a021c | |||
| f767aca7b4 | |||
| c4a1befe4f | |||
| 7654764260 | |||
| b075ceee3b | |||
| 4c499007fc | |||
| 1827497685 | |||
| c1ff6f5357 | |||
| fe9aeb820c | |||
| 00d663f166 | |||
| 48f271b34f | |||
| a9a3dc03a8 | |||
| 761ae2ea9c | |||
| 49b424c3f1 | |||
| fb3978a89d | |||
| 56fe4bdf01 |
@@ -3,53 +3,34 @@
|
||||
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, Award, Zap } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Car,
|
||||
Zap,
|
||||
Award,
|
||||
Sparkles,
|
||||
Building2,
|
||||
History,
|
||||
Globe,
|
||||
Mail,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function BrandDetailPage() {
|
||||
export default function BrandPage({ params }: { params: { slug: string } }) {
|
||||
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" },
|
||||
],
|
||||
},
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -59,7 +40,7 @@ export default function BrandDetailPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
@@ -67,152 +48,262 @@ export default function BrandDetailPage() {
|
||||
>
|
||||
<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="brand-hero" data-section="brand-hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Ferrari: The Prancing Horse Legacy"
|
||||
description="Discover the complete history of Ferrari, from Enzo's vision in 1947 to today's hybrid hypercars. Explore every model, generation, and legendary achievement."
|
||||
tag="Brand Heritage"
|
||||
title="Explore Every Car Ever Made"
|
||||
description="The world's most complete automotive database. Search, compare, and discover vehicles from 1886 to today across every brand, model, generation, and variant."
|
||||
tag="Automotive Encyclopedia"
|
||||
tagIcon={Car}
|
||||
tagAnimation="entrance-slide"
|
||||
background={{ variant: "aurora" }}
|
||||
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=3"
|
||||
imageAlt="Ferrari 250 GTO Classic"
|
||||
mediaAnimation="entrance-slide"
|
||||
tagAnimation="blur-reveal"
|
||||
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?_wi=1"
|
||||
imageAlt="AutoArchive Database Interface"
|
||||
mediaAnimation="blur-reveal"
|
||||
imagePosition="right"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Racing Historian",
|
||||
handle: "Classic Car Enthusiast",
|
||||
testimonial: "Ferrari's design language has remained unmistakable for over 75 years. A true automotive icon.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290144-6017089c.png",
|
||||
},
|
||||
name: "Racing Historian", handle: "Classic Car Enthusiast", testimonial:
|
||||
"The most comprehensive car database I've ever seen. Finally, one place for all automotive history.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png?_wi=1"},
|
||||
{
|
||||
name: "Automotive Designer",
|
||||
handle: "Design Expert",
|
||||
testimonial: "Every Ferrari represents the pinnacle of automotive design and engineering excellence.",
|
||||
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=1",
|
||||
},
|
||||
name: "Automotive Designer", handle: "Classic Car Enthusiast", testimonial:
|
||||
"Perfect for researching design evolution and model lineages across decades.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-creative-automotive-design-1772823292200-f0afd2ae.png?_wi=1"},
|
||||
{
|
||||
name: "Collector",
|
||||
handle: "Vintage Vehicle Curator",
|
||||
testimonial: "Ferrari's heritage and performance records make it the world's most coveted brand.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772823290751-a93bf9d8.png",
|
||||
},
|
||||
name: "Car Collector", handle: "Vintage Vehicle Curator", testimonial:
|
||||
"An invaluable resource for understanding specifications and production years.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-passionate-car-collector-r-1772823290895-3d866aea.png?_wi=1"},
|
||||
{
|
||||
name: "Automotive Journalist", handle: "Car Magazine Editor", testimonial:
|
||||
"Research has never been easier. Every fact, spec, and timeline at my fingertips.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-an-automotive-journalist-con-1772823290598-44ed854b.png?_wi=1"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
buttons={[
|
||||
{ text: "View All Models", href: "/browse" },
|
||||
{ text: "Compare Ferraris", href: "/compare" },
|
||||
{ text: "Start Searching", href: "/search" },
|
||||
{ text: "Browse Database", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="entrance-slide"
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brand-about" data-section="brand-about">
|
||||
<TextSplitAbout
|
||||
title="The Ferrari Story"
|
||||
description={[
|
||||
"Founded in 1947 by Enzo Ferrari, the company began as a race team before producing street-legal vehicles. Enzo's philosophy—'Competition is necessary for the creation of efficient vehicles'—still guides Ferrari today.",
|
||||
"From the legendary 125 S to the groundbreaking SF90 Stradale, Ferrari has consistently pushed the boundaries of automotive engineering and design. Every model represents years of racing experience translated into production vehicles.",
|
||||
"With over 13,000 vehicles built across 75 years, Ferrari remains the most exclusive and sought-after supercar manufacturer in the world. The prancing horse emblem symbolizes speed, performance, and uncompromising excellence.",
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Browse All Models", href: "/browse" },
|
||||
{ text: "View Timeline", href: "/timeline" },
|
||||
]}
|
||||
buttonAnimation="entrance-slide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brand-models" data-section="brand-models">
|
||||
<FeatureCardTwentyFive
|
||||
features={[
|
||||
{
|
||||
title: "Classic Era (1947-1970)",
|
||||
description: "The foundation of Ferrari excellence with hand-built race cars and early road vehicles.",
|
||||
icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
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=4",
|
||||
imageAlt: "Ferrari 250 GTO",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1930s-1950s-classic-cars-showcasing-art--1772823292276-01b2e0ec.png?_wi=3",
|
||||
imageAlt: "Classic Ferrari Models",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Golden Age (1970-1990)",
|
||||
description: "Revolutionary designs like the Daytona and Testarossa defined an era of automotive excellence.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png?_wi=3",
|
||||
imageAlt: "1980s Ferrari Models",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-ferrari-250-gto-1772823292116-a7e77200.png",
|
||||
imageAlt: "Ferrari Heritage",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Modern Era (1990-2010)",
|
||||
description: "V12 masterpieces and modern engineering merged traditional values with cutting-edge technology.",
|
||||
icon: Car,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png?_wi=3",
|
||||
imageAlt: "1990s Ferrari Models",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772823291321-59c5e153.png?_wi=3",
|
||||
imageAlt: "Modern Performance Era",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hybrid Revolution (2010-Present)",
|
||||
description: "Advanced hybrid systems combine electric power with twin-turbo engines for unprecedented performance.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png?_wi=3",
|
||||
imageAlt: "Modern Ferrari Hybrid",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-tesla-revolution-1772823291685-64082b06.png",
|
||||
imageAlt: "Future of Ferrari",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="depth-3d"
|
||||
title="Ferrari Model Evolution"
|
||||
description="Explore the iconic lineages and generations that shaped Ferrari's legendary heritage"
|
||||
tag="Heritage Collection"
|
||||
tagAnimation="entrance-slide"
|
||||
<div id="popular-brands" data-section="popular-brands">
|
||||
<SocialProofOne
|
||||
title="Trusted by Automotive Enthusiasts Worldwide"
|
||||
description="Access the largest collection of verified automotive data featuring every major manufacturer and brand"
|
||||
tag="Featured Brands"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Ferrari", "Porsche", "BMW", "Mercedes-Benz", "Lamborghini", "Bugatti", "Rolls-Royce", "Aston Martin", "McLaren", "Tesla"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brand-footer" data-section="brand-footer">
|
||||
<FooterLogoEmphasis columns={footerColumns} logoText="AutoArchive" />
|
||||
<div id="featured-vehicles" data-section="featured-vehicles">
|
||||
<ProductCardTwo
|
||||
title="Featured Legendary Vehicles"
|
||||
description="Iconic cars that shaped automotive history"
|
||||
tag="Heritage Collection"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Ferrari", name: "Ferrari 250 GTO", price: "1962-1964", rating: 5,
|
||||
reviewCount: "Legendary", 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: "Ferrari 250 GTO 1962"},
|
||||
{
|
||||
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", 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: "Porsche 911 Classic"},
|
||||
{
|
||||
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", 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: "Jaguar E-Type"},
|
||||
{
|
||||
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
|
||||
reviewCount: "Classic", 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: "BMW 2002"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="browse-decade" data-section="browse-decade">
|
||||
<FeatureCardTwentyFive
|
||||
title="Browse by Era"
|
||||
description="Explore vehicles organized by historical decade with complete production timelines"
|
||||
tag="Timeline Explorer"
|
||||
tagAnimation="blur-reveal"
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "The Golden Age (1900-1920s)", description:
|
||||
"Early automobiles, pioneering manufacturers, and the birth of motoring", 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: "Early 1900s vehicles"},
|
||||
{
|
||||
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: "Classic automobiles vintage"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Classics Era (1930-1950s)", description:
|
||||
"Art deco styling, post-war innovation, and the golden age of design", 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: "1930s-1950s classic cars"},
|
||||
{
|
||||
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: "Post-war automobile design"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Modern Era (1960-1980s)", description:
|
||||
"Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png?_wi=1", imageAlt: "1960s muscle cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png?_wi=1", imageAlt: "1980s performance vehicles"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contemporary (1990-2024)", description:
|
||||
"Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png?_wi=1", imageAlt: "1990s modern cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png?_wi=1", imageAlt: "Electric and autonomous vehicles"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legendary-cars" data-section="legendary-cars">
|
||||
<BlogCardThree
|
||||
title="Legendary Automotive Stories"
|
||||
description="Discover the history, engineering, and cultural impact of the world's most iconic vehicles"
|
||||
tag="Automotive Heritage"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Performance History", title: "The Ferrari 250 GTO: The Car That Won Le Mans", excerpt: "Explore how this race car became the most valuable car in the world", 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: "Ferrari 250 GTO", authorName: "Automotive 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 Article"},
|
||||
{
|
||||
id: "2", category: "Design Evolution", title: "The Porsche 911: 60 Years of Iconic Design", excerpt: "How one sports car shaped the future of automotive design", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/porsche-911-models-across-different-gene-1772823292219-b0857470.png?_wi=1", imageAlt: "Porsche 911 Through Decades", authorName: "Design Expert", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png", date: "Featured Article"},
|
||||
{
|
||||
id: "3", category: "Innovation", title: "The Jaguar E-Type: Beauty and Performance", excerpt: "Why Enzo Ferrari called it the most beautiful car ever made", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/jaguar-e-type-in-stunning-profile-emphas-1772823290729-6dd39021.png?_wi=1", imageAlt: "Jaguar E-Type Design", authorName: "Automotive Journalist", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png", date: "Featured Article"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="AutoArchive by the Numbers"
|
||||
description="The world's most comprehensive automotive database at your fingertips"
|
||||
tag="Database Statistics"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="scale-rotate"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Building2,
|
||||
title: "Manufacturers", value: "2,000+"},
|
||||
{
|
||||
id: "2", icon: Car,
|
||||
title: "Vehicle Models", value: "50,000+"},
|
||||
{
|
||||
id: "3", icon: History,
|
||||
title: "Years Covered", value: "138 Years"},
|
||||
{
|
||||
id: "4", icon: Globe,
|
||||
title: "Countries", value: "195"},
|
||||
]}
|
||||
/>
|
||||
</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" },
|
||||
{ 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: "/" },
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
46
src/app/brands/page.tsx
Normal file
46
src/app/brands/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function BrandsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Car Brands</h1>
|
||||
<p className="text-lg text-gray-600">Browse all car brands in our database</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,159 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Zap, Award, Sparkles, Car } from "lucide-react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function BrowsePage() {
|
||||
const navItems = [
|
||||
{ name: "Search", id: "/" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Search Database", href: "/" },
|
||||
{ label: "Browse Vehicles", href: "/browse" },
|
||||
{ label: "Compare Cars", href: "/compare" },
|
||||
{ label: "Timeline Explorer", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Brand Directory", href: "/" },
|
||||
{ label: "Model Guide", href: "/" },
|
||||
{ label: "Specifications", href: "/" },
|
||||
{ label: "Production Data", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Help & Support", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Contribute Data", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
{ label: "Data Attribution", href: "/" },
|
||||
{ label: "Sitemap", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="AutoArchive"
|
||||
bottomLeftText="Explore Automotive History"
|
||||
bottomRightText="1886 to Present"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="browse-decade" data-section="browse-decade">
|
||||
<FeatureCardTwentyFive
|
||||
title="Browse by Era"
|
||||
description="Explore vehicles organized by historical decade with complete production timelines"
|
||||
tag="Timeline Explorer"
|
||||
tagAnimation="blur-reveal"
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "The Golden Age (1900-1920s)", description: "Early automobiles, pioneering manufacturers, and the birth of motoring", 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", imageAlt: "Early 1900s vehicles"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png", imageAlt: "Classic automobiles vintage"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Classics Era (1930-1950s)", description: "Art deco styling, post-war innovation, and the golden age of design", 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", imageAlt: "1930s-1950s classic cars"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png", imageAlt: "Post-war automobile design"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Modern Era (1960-1980s)", description: "Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png", imageAlt: "1960s muscle cars"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png", imageAlt: "1980s performance vehicles"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contemporary (1990-2024)", description: "Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png", imageAlt: "1990s modern cars"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png", imageAlt: "Electric and autonomous vehicles"},
|
||||
],
|
||||
},
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="featured-vehicles" data-section="featured-vehicles">
|
||||
<ProductCardTwo
|
||||
title="Featured Legendary Vehicles"
|
||||
description="Iconic cars that shaped automotive history"
|
||||
tag="Heritage Collection"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Ferrari", name: "Ferrari 250 GTO", price: "1962-1964", rating: 5,
|
||||
reviewCount: "Legendary", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772823293817-62111fec.png", imageAlt: "Ferrari 250 GTO 1962"},
|
||||
{
|
||||
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", 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", imageAlt: "Porsche 911 Classic"},
|
||||
{
|
||||
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", 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", imageAlt: "Jaguar E-Type"},
|
||||
{
|
||||
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
|
||||
reviewCount: "Classic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772823292733-3909ad83.png", imageAlt: "BMW 2002"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="AutoArchive" columns={footerColumns} />
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Browse Cars</h1>
|
||||
<p className="text-lg text-gray-600">Explore our complete vehicle catalog</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
385
src/app/cars/[id]/page.tsx
Normal file
385
src/app/cars/[id]/page.tsx
Normal file
@@ -0,0 +1,385 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
interface Car {
|
||||
id: string;
|
||||
make: string;
|
||||
model: string;
|
||||
year: number;
|
||||
price: number;
|
||||
image: string;
|
||||
transmission: string;
|
||||
fuel: string;
|
||||
mileage: number;
|
||||
bodyType?: string;
|
||||
color?: string;
|
||||
vin?: string;
|
||||
engineSize?: number;
|
||||
horsepower?: number;
|
||||
torque?: number;
|
||||
topSpeed?: number;
|
||||
acceleration?: number;
|
||||
mpg?: number;
|
||||
seating?: number;
|
||||
luggage?: number;
|
||||
wheelbase?: number;
|
||||
length?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
weight?: number;
|
||||
fuelCapacity?: number;
|
||||
safetyRating?: number;
|
||||
features?: string[];
|
||||
}
|
||||
|
||||
const carsDatabase: Record<string, Car> = {
|
||||
'1': {
|
||||
id: '1',
|
||||
make: 'Toyota',
|
||||
model: 'Camry',
|
||||
year: 2024,
|
||||
price: 32000,
|
||||
image: '/car-camry.jpg',
|
||||
transmission: 'Automatic',
|
||||
fuel: 'Hybrid',
|
||||
mileage: 0,
|
||||
bodyType: 'Sedan',
|
||||
color: 'Pearl White',
|
||||
vin: 'T123456789ABC',
|
||||
engineSize: 2.5,
|
||||
horsepower: 208,
|
||||
torque: 180,
|
||||
topSpeed: 112,
|
||||
acceleration: 8.2,
|
||||
mpg: 52,
|
||||
seating: 5,
|
||||
luggage: 15.1,
|
||||
wheelbase: 112.2,
|
||||
length: 191.1,
|
||||
width: 71.7,
|
||||
height: 57.5,
|
||||
weight: 3415,
|
||||
fuelCapacity: 14.5,
|
||||
safetyRating: 5,
|
||||
features: [
|
||||
'Hybrid Engine',
|
||||
'Toyota Safety Sense',
|
||||
'Adaptive Cruise Control',
|
||||
'Lane Departure Alert',
|
||||
'Bluetooth Connectivity',
|
||||
'Touchscreen Display',
|
||||
'Heated Seats',
|
||||
'Power Windows',
|
||||
],
|
||||
},
|
||||
'2': {
|
||||
id: '2',
|
||||
make: 'Honda',
|
||||
model: 'Civic',
|
||||
year: 2024,
|
||||
price: 28000,
|
||||
image: '/car-civic.jpg',
|
||||
transmission: 'Manual',
|
||||
fuel: 'Gasoline',
|
||||
mileage: 0,
|
||||
bodyType: 'Sedan',
|
||||
color: 'Sonic Gray',
|
||||
vin: 'H987654321DEF',
|
||||
engineSize: 2.0,
|
||||
horsepower: 158,
|
||||
torque: 138,
|
||||
topSpeed: 125,
|
||||
acceleration: 8.5,
|
||||
mpg: 32,
|
||||
seating: 5,
|
||||
luggage: 12.3,
|
||||
wheelbase: 106.3,
|
||||
length: 182.2,
|
||||
width: 70.8,
|
||||
height: 56.0,
|
||||
weight: 3040,
|
||||
fuelCapacity: 12.3,
|
||||
safetyRating: 5,
|
||||
features: [
|
||||
'Honda Sensing',
|
||||
'Collision Mitigation Braking',
|
||||
'Road Departure Mitigation',
|
||||
'Apple CarPlay',
|
||||
'Android Auto',
|
||||
'Rearview Camera',
|
||||
'Sunroof',
|
||||
'Alloy Wheels',
|
||||
],
|
||||
},
|
||||
'3': {
|
||||
id: '3',
|
||||
make: 'BMW',
|
||||
model: '3 Series',
|
||||
year: 2024,
|
||||
price: 45000,
|
||||
image: '/car-bmw.jpg',
|
||||
transmission: 'Automatic',
|
||||
fuel: 'Diesel',
|
||||
mileage: 0,
|
||||
bodyType: 'Sedan',
|
||||
color: 'Jet Black',
|
||||
vin: 'B456789012GHI',
|
||||
engineSize: 2.0,
|
||||
horsepower: 190,
|
||||
torque: 295,
|
||||
topSpeed: 130,
|
||||
acceleration: 7.2,
|
||||
mpg: 45,
|
||||
seating: 5,
|
||||
luggage: 13.6,
|
||||
wheelbase: 112.8,
|
||||
length: 184.4,
|
||||
width: 71.7,
|
||||
height: 56.3,
|
||||
weight: 3550,
|
||||
fuelCapacity: 13.2,
|
||||
safetyRating: 5,
|
||||
features: [
|
||||
'BMW iDrive',
|
||||
'Adaptive Headlights',
|
||||
'Premium Sound System',
|
||||
'Panoramic Sunroof',
|
||||
'Power Seats',
|
||||
'Climate Control',
|
||||
'Gesture Control',
|
||||
'Head-Up Display',
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function CarDetailPage() {
|
||||
const params = useParams();
|
||||
const [car, setCar] = useState<Car | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const id = params.id as string;
|
||||
const carData = carsDatabase[id];
|
||||
if (carData) {
|
||||
setCar(carData);
|
||||
}
|
||||
setLoading(false);
|
||||
}, [params.id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
|
||||
<div className="text-2xl text-gray-600">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!car) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
|
||||
<div className="max-w-7xl mx-auto text-center py-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">Car Not Found</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">The car you're looking for doesn't exist.</p>
|
||||
<Link href="/">
|
||||
<button className="bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-700 transition-colors duration-200">
|
||||
Back to Cars
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Link href="/">
|
||||
<button className="text-blue-600 hover:text-blue-700 font-semibold mb-4">
|
||||
← Back to Cars
|
||||
</button>
|
||||
</Link>
|
||||
<h1 className="text-5xl font-bold text-gray-900">
|
||||
{car.year} {car.make} {car.model}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
|
||||
{/* Image and Price Section */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden sticky top-8">
|
||||
<div className="h-64 bg-gray-200 flex items-center justify-center">
|
||||
<div className="text-gray-500 text-center">
|
||||
<div className="text-sm">Car Image</div>
|
||||
<div className="text-xs text-gray-400">Main View</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<p className="text-3xl font-bold text-gray-900 mb-2">
|
||||
${car.price.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mb-4">Starting Price</p>
|
||||
<button className="w-full bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-200 mb-2">
|
||||
Get Quote
|
||||
</button>
|
||||
<button className="w-full bg-gray-200 text-gray-900 font-semibold py-3 px-4 rounded-lg hover:bg-gray-300 transition-colors duration-200">
|
||||
Schedule Test Drive
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details Section */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Quick Facts */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Quick Facts</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Body Type</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.bodyType || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Transmission</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.transmission}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Fuel Type</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.fuel}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Seating</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.seating || 'N/A'} Seats</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Color</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.color || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Safety Rating</p>
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{car.safetyRating ? `${car.safetyRating}/5 ⭐` : 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Engine Specifications */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Engine Specifications</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Engine Size</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.engineSize || 'N/A'} L</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Horsepower</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.horsepower || 'N/A'} hp</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Torque</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.torque || 'N/A'} lb-ft</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Top Speed</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.topSpeed || 'N/A'} mph</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">0-60 Acceleration</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.acceleration || 'N/A'} sec</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Fuel Efficiency</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.mpg || 'N/A'} MPG</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dimensions and Capacity */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Dimensions</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Length</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.length || 'N/A'} in</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Width</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.width || 'N/A'} in</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Height</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.height || 'N/A'} in</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Wheelbase</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.wheelbase || 'N/A'} in</p>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<p className="text-sm text-gray-600 mb-1">Weight</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.weight || 'N/A'} lbs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Capacity</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Luggage Space</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.luggage || 'N/A'} cu ft</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Fuel Tank</p>
|
||||
<p className="text-lg font-semibold text-gray-900">{car.fuelCapacity || 'N/A'} gal</p>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<p className="text-sm text-gray-600 mb-1">VIN</p>
|
||||
<p className="text-lg font-semibold text-gray-900 break-all">{car.vin || 'N/A'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
{car.features && car.features.length > 0 && (
|
||||
<div className="bg-white rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Features & Amenities</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{car.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center p-3 bg-blue-50 rounded-lg">
|
||||
<span className="text-blue-600 mr-3">✓</span>
|
||||
<p className="text-gray-900 font-medium">{feature}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg shadow-lg p-8 text-white text-center mb-8">
|
||||
<h3 className="text-2xl font-bold mb-2">Interested in this vehicle?</h3>
|
||||
<p className="text-blue-100 mb-6">Contact our sales team to schedule a test drive or request more information.</p>
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-blue-600 font-semibold py-3 px-8 rounded-lg hover:bg-blue-50 transition-colors duration-200">
|
||||
Contact Sales
|
||||
</button>
|
||||
<button className="bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg hover:bg-blue-900 transition-colors duration-200 border border-blue-400">
|
||||
View Similar Models
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,53 +3,33 @@
|
||||
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 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() {
|
||||
export default function CarPage({ params }: { params: { slug: string } }) {
|
||||
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" },
|
||||
],
|
||||
},
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -59,7 +39,7 @@ export default function CarDetailPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
@@ -67,116 +47,294 @@ 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="Explore Every Car Ever Made"
|
||||
description="The world's most complete automotive database. Search, compare, and discover vehicles from 1886 to today across every brand, model, generation, and variant."
|
||||
tag="Automotive Encyclopedia"
|
||||
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="blur-reveal"
|
||||
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?_wi=2"
|
||||
imageAlt="AutoArchive Database Interface"
|
||||
mediaAnimation="blur-reveal"
|
||||
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 Historian", handle: "Classic Car Enthusiast", testimonial:
|
||||
"The most comprehensive car database I've ever seen. Finally, one place for all automotive history.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png?_wi=2"},
|
||||
{
|
||||
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: "Automotive Designer", handle: "Classic Car Enthusiast", testimonial:
|
||||
"Perfect for researching design evolution and model lineages across decades.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-creative-automotive-design-1772823292200-f0afd2ae.png?_wi=2"},
|
||||
{
|
||||
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: "Car Collector", handle: "Vintage Vehicle Curator", testimonial:
|
||||
"An invaluable resource for understanding specifications and production years.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-passionate-car-collector-r-1772823290895-3d866aea.png?_wi=2"},
|
||||
{
|
||||
name: "Automotive Journalist", handle: "Car Magazine Editor", testimonial:
|
||||
"Research has never been easier. Every fact, spec, and timeline at my fingertips.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-an-automotive-journalist-con-1772823290598-44ed854b.png?_wi=2"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
buttons={[
|
||||
{ text: "Explore Models", href: "/browse" },
|
||||
{ text: "View Specifications", href: "/specs" },
|
||||
{ text: "Start Searching", href: "/search" },
|
||||
{ text: "Browse Database", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="entrance-slide"
|
||||
buttonAnimation="blur-reveal"
|
||||
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="Trusted by Automotive Enthusiasts Worldwide"
|
||||
description="Access the largest collection of verified automotive data featuring every major manufacturer and brand"
|
||||
tag="Featured Brands"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Compare Generations", href: "/compare" },
|
||||
{ text: "Browse All Models", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="entrance-slide"
|
||||
names={[
|
||||
"Ferrari", "Porsche", "BMW", "Mercedes-Benz", "Lamborghini", "Bugatti", "Rolls-Royce", "Aston Martin", "McLaren", "Tesla"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="car-specs" data-section="car-specs">
|
||||
<div id="featured-vehicles" data-section="featured-vehicles">
|
||||
<ProductCardTwo
|
||||
title="Featured Legendary Vehicles"
|
||||
description="Iconic cars that shaped automotive history"
|
||||
tag="Heritage Collection"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Ferrari", name: "Ferrari 250 GTO", price: "1962-1964", rating: 5,
|
||||
reviewCount: "Legendary", 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=2", imageAlt: "Ferrari 250 GTO 1962"},
|
||||
{
|
||||
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", 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=2", imageAlt: "Porsche 911 Classic"},
|
||||
{
|
||||
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", 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=2", imageAlt: "Jaguar E-Type"},
|
||||
{
|
||||
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
|
||||
reviewCount: "Classic", 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=2", imageAlt: "BMW 2002"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="browse-decade" data-section="browse-decade">
|
||||
<FeatureCardTwentyFive
|
||||
title="Browse by Era"
|
||||
description="Explore vehicles organized by historical decade with complete production timelines"
|
||||
tag="Timeline Explorer"
|
||||
tagAnimation="blur-reveal"
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "The Golden Age (1900-1920s)", description:
|
||||
"Early automobiles, pioneering manufacturers, and the birth of motoring", 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=2", imageAlt: "Early 1900s vehicles"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png?_wi=2", imageAlt: "Classic automobiles vintage"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Classics Era (1930-1950s)", description:
|
||||
"Art deco styling, post-war innovation, and the golden age of design", 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=2", imageAlt: "1930s-1950s classic cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png?_wi=2", imageAlt: "Post-war automobile design"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "The Modern Era (1960-1980s)", description:
|
||||
"Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png?_wi=2", imageAlt: "1960s muscle cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png?_wi=2", imageAlt: "1980s performance vehicles"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contemporary (1990-2024)", description:
|
||||
"Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png?_wi=2", imageAlt: "1990s modern cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png?_wi=2", imageAlt: "Electric and autonomous vehicles"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legendary-cars" data-section="legendary-cars">
|
||||
<BlogCardThree
|
||||
title="Legendary Automotive Stories"
|
||||
description="Discover the history, engineering, and cultural impact of the world's most iconic vehicles"
|
||||
tag="Automotive Heritage"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Performance History", title: "The Ferrari 250 GTO: The Car That Won Le Mans", excerpt: "Explore how this race car became the most valuable car in the world", 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=2", imageAlt: "Ferrari 250 GTO", authorName: "Automotive 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 Article"},
|
||||
{
|
||||
id: "2", category: "Design Evolution", title: "The Porsche 911: 60 Years of Iconic Design", excerpt: "How one sports car shaped the future of automotive design", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/porsche-911-models-across-different-gene-1772823292219-b0857470.png?_wi=2", imageAlt: "Porsche 911 Through Decades", authorName: "Design Expert", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png", date: "Featured Article"},
|
||||
{
|
||||
id: "3", category: "Innovation", title: "The Jaguar E-Type: Beauty and Performance", excerpt: "Why Enzo Ferrari called it the most beautiful car ever made", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/jaguar-e-type-in-stunning-profile-emphas-1772823290729-6dd39021.png?_wi=2", imageAlt: "Jaguar E-Type Design", authorName: "Automotive Journalist", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png", date: "Featured Article"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<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"
|
||||
title="AutoArchive by the Numbers"
|
||||
description="The world's most comprehensive automotive database at your fingertips"
|
||||
tag="Database Statistics"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="scale-rotate"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Building2,
|
||||
title: "Manufacturers", value: "2,000+"},
|
||||
{
|
||||
id: "2", icon: Car,
|
||||
title: "Vehicle Models", value: "50,000+"},
|
||||
{
|
||||
id: "3", icon: History,
|
||||
title: "Years Covered", value: "138 Years"},
|
||||
{
|
||||
id: "4", icon: Globe,
|
||||
title: "Countries", value: "195"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="car-footer" data-section="car-footer">
|
||||
<FooterLogoEmphasis columns={footerColumns} logoText="AutoArchive" />
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About AutoArchive"
|
||||
description={[
|
||||
"AutoArchive is the world's most comprehensive online car encyclopedia and search engine. Our mission is to preserve and share automotive history, from the earliest automobiles of 1886 to the latest models of today.", "We've compiled extensive data on every major manufacturer, model generation, variant, and specification. Whether you're a collector, historian, designer, or enthusiast, AutoArchive provides the definitive source for automotive knowledge.", "Our database spans 138 years of automotive innovation, featuring technical specifications, performance metrics, production years, engine options, transmission data, and historical context for vehicles from around the world."]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Explore Database", href: "/search" },
|
||||
{ text: "Browse Collections", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
tag="Start Exploring"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="blur-reveal"
|
||||
title="Ready to Discover Automotive History?"
|
||||
description="Join thousands of enthusiasts, collectors, historians, and professionals using AutoArchive. Search millions of vehicles, compare specifications, and explore the complete history of automobiles."
|
||||
buttons={[
|
||||
{ text: "Begin Your Search", href: "/search" },
|
||||
{ text: "Browse All Brands", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
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" },
|
||||
{ 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: "/" },
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
46
src/app/cars/page.tsx
Normal file
46
src/app/cars/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function CarsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Cars</h1>
|
||||
<p className="text-lg text-gray-600">Detailed car information and specifications</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Building2, Car, History, Globe } from "lucide-react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { Scale } from 'lucide-react';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function ComparePage() {
|
||||
const navItems = [
|
||||
{ name: "Search", id: "/" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Search Database", href: "/" },
|
||||
{ label: "Browse Vehicles", href: "/browse" },
|
||||
{ label: "Compare Cars", href: "/compare" },
|
||||
{ label: "Timeline Explorer", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Brand Directory", href: "/" },
|
||||
{ label: "Model Guide", href: "/" },
|
||||
{ label: "Specifications", href: "/" },
|
||||
{ label: "Production Data", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Help & Support", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Contribute Data", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
{ label: "Data Attribution", href: "/" },
|
||||
{ label: "Sitemap", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="AutoArchive"
|
||||
bottomLeftText="Explore Automotive History"
|
||||
bottomRightText="1886 to Present"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="AutoArchive by the Numbers"
|
||||
description="The world's most comprehensive automotive database at your fingertips"
|
||||
tag="Database Statistics"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="scale-rotate"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Building2,
|
||||
title: "Manufacturers", value: "2,000+"},
|
||||
{
|
||||
id: "2", icon: Car,
|
||||
title: "Vehicle Models", value: "50,000+"},
|
||||
{
|
||||
id: "3", icon: History,
|
||||
title: "Years Covered", value: "138 Years"},
|
||||
{
|
||||
id: "4", icon: Globe,
|
||||
title: "Countries", value: "195"},
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legendary-cars" data-section="legendary-cars">
|
||||
<BlogCardThree
|
||||
title="Legendary Automotive Stories"
|
||||
description="Discover the history, engineering, and cultural impact of the world's most iconic vehicles"
|
||||
tag="Automotive Heritage"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Performance History", title: "The Ferrari 250 GTO: The Car That Won Le Mans", excerpt: "Explore how this race car became the most valuable car in the world", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/ferrari-250-gto-iconic-red-racing-car-in-1772823292116-a7e77200.png", imageAlt: "Ferrari 250 GTO", authorName: "Automotive 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 Article"},
|
||||
{
|
||||
id: "2", category: "Design Evolution", title: "The Porsche 911: 60 Years of Iconic Design", excerpt: "How one sports car shaped the future of automotive design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/porsche-911-models-across-different-gene-1772823292219-b0857470.png", imageAlt: "Porsche 911 Through Decades", authorName: "Design Expert", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png", date: "Featured Article"},
|
||||
{
|
||||
id: "3", category: "Innovation", title: "The Jaguar E-Type: Beauty and Performance", excerpt: "Why Enzo Ferrari called it the most beautiful car ever made", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/jaguar-e-type-in-stunning-profile-emphas-1772823290729-6dd39021.png", imageAlt: "Jaguar E-Type Design", authorName: "Automotive Journalist", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png", date: "Featured Article"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="AutoArchive" columns={footerColumns} />
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 flex items-center justify-center gap-2">
|
||||
<Scale className="w-8 h-8" />
|
||||
Compare Cars
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">Side-by-side vehicle comparison tool</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
46
src/app/database/page.tsx
Normal file
46
src/app/database/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function DatabasePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Car Database</h1>
|
||||
<p className="text-lg text-gray-600">Complete vehicle database with advanced search</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Lato } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const lato = Lato({
|
||||
variable: "--font-lato",
|
||||
subsets: ["latin"],
|
||||
weight: ["100", "300", "400", "700", "900"],
|
||||
});
|
||||
import "./styles/globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "AutoArchive - Complete Car Database & Automotive Encyclopedia",
|
||||
description: "Search and explore every car ever made from 1886 to present. Access 2000+ manufacturers, 50,000+ models, technical specs, and automotive history.",
|
||||
keywords: "car database, automotive encyclopedia, vehicle search, car specifications, manufacturer database, automotive history, vintage cars, modern vehicles",
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: "AutoArchive - The World's Most Complete Car Database",
|
||||
description: "Explore every car ever made. Search across 2000+ manufacturers and 50,000+ models. The ultimate automotive encyclopedia.",
|
||||
url: "https://autoarchive.example.com",
|
||||
siteName: "AutoArchive",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772823292340-23f02fb5.png",
|
||||
alt: "AutoArchive Database Interface",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "AutoArchive - Complete Car Database",
|
||||
description: "Search 50,000+ cars from 1886 to today. The world's most comprehensive automotive encyclopedia.",
|
||||
images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772823292340-23f02fb5.png",
|
||||
],
|
||||
},
|
||||
};
|
||||
title: "Webild - Car Database & Comparison Platform", description: "Comprehensive car database with detailed specifications, pricing, and comparison tools."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${lato.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1435,7 +1379,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
419
src/app/page.tsx
419
src/app/page.tsx
@@ -1,386 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
||||
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 Link from "next/link";
|
||||
import {
|
||||
Car,
|
||||
Zap,
|
||||
Award,
|
||||
Sparkles,
|
||||
Building2,
|
||||
History,
|
||||
Globe,
|
||||
Mail,
|
||||
} from "lucide-react";
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { Heart } from 'lucide-react';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
];
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="AutoArchive"
|
||||
bottomLeftText="Explore Automotive History"
|
||||
bottomRightText="1886 to Present"
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Explore Every Car Ever Made"
|
||||
description="The world's most complete automotive database. Search, compare, and discover vehicles from 1886 to today across every brand, model, generation, and variant."
|
||||
tag="Automotive Encyclopedia"
|
||||
tagIcon={Car}
|
||||
tagAnimation="blur-reveal"
|
||||
title="Find Your Perfect Car"
|
||||
description="Explore our comprehensive database of vehicles with detailed specifications, pricing, and real owner testimonials."
|
||||
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="AutoArchive Database Interface"
|
||||
mediaAnimation="blur-reveal"
|
||||
imagePosition="right"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Racing Historian", handle: "Classic Car Enthusiast", testimonial:
|
||||
"The most comprehensive car database I've ever seen. Finally, one place for all automotive history.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png"},
|
||||
name: "Alex Johnson", handle: "@alexj", testimonial: "The database is incredibly comprehensive. Found exactly what I was looking for!", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
},
|
||||
{
|
||||
name: "Automotive Designer", handle: "Classic Car Enthusiast", testimonial:
|
||||
"Perfect for researching design evolution and model lineages across decades.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-creative-automotive-design-1772823292200-f0afd2ae.png"},
|
||||
name: "Sarah Chen", handle: "@sarahchen", testimonial: "Best car comparison tool I've used. Made my purchase decision so much easier.", rating: 5,
|
||||
imageSrc: testCarImages[1],
|
||||
},
|
||||
{
|
||||
name: "Car Collector", handle: "Vintage Vehicle Curator", testimonial:
|
||||
"An invaluable resource for understanding specifications and production years.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-passionate-car-collector-r-1772823290895-3d866aea.png"},
|
||||
{
|
||||
name: "Automotive Journalist", handle: "Car Magazine Editor", testimonial:
|
||||
"Research has never been easier. Every fact, spec, and timeline at my fingertips.", rating: 5,
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-an-automotive-journalist-con-1772823290598-44ed854b.png"},
|
||||
name: "Mike Rodriguez", handle: "@mikerod", testimonial: "The specifications are detailed and accurate. Highly recommended for car shoppers.", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
avatars={[
|
||||
{ src: testCarImages[0], alt: "User 1" },
|
||||
{ src: testCarImages[1], alt: "User 2" },
|
||||
{ src: testCarImages[2], alt: "User 3" },
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ car shoppers"
|
||||
buttons={[
|
||||
{ text: "Start Searching", href: "/search" },
|
||||
{ text: "Browse Database", href: "/browse" },
|
||||
{ text: "Browse Cars", href: "browse" },
|
||||
{ text: "Compare Now", href: "compare" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc={testCarImages[0]}
|
||||
imageAlt="Premium sedan showcase"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="popular-brands" data-section="popular-brands">
|
||||
<SocialProofOne
|
||||
title="Trusted by Automotive Enthusiasts Worldwide"
|
||||
description="Access the largest collection of verified automotive data featuring every major manufacturer and brand"
|
||||
tag="Featured Brands"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Ferrari", "Porsche", "BMW", "Mercedes-Benz", "Lamborghini", "Bugatti", "Rolls-Royce", "Aston Martin", "McLaren", "Tesla"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="featured-vehicles" data-section="featured-vehicles">
|
||||
<ProductCardTwo
|
||||
title="Featured Legendary Vehicles"
|
||||
description="Iconic cars that shaped automotive history"
|
||||
tag="Heritage Collection"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Ferrari", name: "Ferrari 250 GTO", price: "1962-1964", rating: 5,
|
||||
reviewCount: "Legendary", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772823293817-62111fec.png", imageAlt: "Ferrari 250 GTO 1962"},
|
||||
{
|
||||
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", 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", imageAlt: "Porsche 911 Classic"},
|
||||
{
|
||||
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", 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", imageAlt: "Jaguar E-Type"},
|
||||
{
|
||||
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
|
||||
reviewCount: "Classic", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772823292733-3909ad83.png", imageAlt: "BMW 2002"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="browse-decade" data-section="browse-decade">
|
||||
<FeatureCardTwentyFive
|
||||
title="Browse by Era"
|
||||
description="Explore vehicles organized by historical decade with complete production timelines"
|
||||
tag="Timeline Explorer"
|
||||
tagAnimation="blur-reveal"
|
||||
animationType="depth-3d"
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
title="Why Choose Webild?"
|
||||
description="Comprehensive tools for car shopping and comparison"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "The Golden Age (1900-1920s)", description:
|
||||
"Early automobiles, pioneering manufacturers, and the birth of motoring", 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", imageAlt: "Early 1900s vehicles"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png", imageAlt: "Classic automobiles vintage"},
|
||||
],
|
||||
},
|
||||
id: 1,
|
||||
title: "Detailed Specifications", description: "Complete technical specs for every vehicle in our database", imageSrc: testCarImages[0],
|
||||
imageAlt: "Specifications icon"},
|
||||
{
|
||||
title: "The Classics Era (1930-1950s)", description:
|
||||
"Art deco styling, post-war innovation, and the golden age of design", 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", imageAlt: "1930s-1950s classic cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png", imageAlt: "Post-war automobile design"},
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
title: "Price Tracking", description: "Monitor price changes and find the best deals", imageSrc: testCarImages[1],
|
||||
imageAlt: "Price tracking icon"},
|
||||
{
|
||||
title: "The Modern Era (1960-1980s)", description:
|
||||
"Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png", imageAlt: "1960s muscle cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png", imageAlt: "1980s performance vehicles"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contemporary (1990-2024)", description:
|
||||
"Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png", imageAlt: "1990s modern cars"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png", imageAlt: "Electric and autonomous vehicles"},
|
||||
],
|
||||
},
|
||||
id: 3,
|
||||
title: "Side-by-Side Comparison", description: "Compare multiple vehicles with detailed analytics", imageSrc: testCarImages[2],
|
||||
imageAlt: "Comparison icon"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore More", href: "database" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legendary-cars" data-section="legendary-cars">
|
||||
<BlogCardThree
|
||||
title="Legendary Automotive Stories"
|
||||
description="Discover the history, engineering, and cultural impact of the world's most iconic vehicles"
|
||||
tag="Automotive Heritage"
|
||||
tagAnimation="blur-reveal"
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Customer Reviews"
|
||||
description="Real testimonials from car shoppers who found their perfect vehicle"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", category: "Performance History", title: "The Ferrari 250 GTO: The Car That Won Le Mans", excerpt: "Explore how this race car became the most valuable car in the world", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/ferrari-250-gto-iconic-red-racing-car-in-1772823292116-a7e77200.png", imageAlt: "Ferrari 250 GTO", authorName: "Automotive 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 Article"},
|
||||
id: "1", name: "Jessica Martinez", role: "First-time Buyer", company: "Tech Startup", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
imageAlt: "Jessica Martinez"},
|
||||
{
|
||||
id: "2", category: "Design Evolution", title: "The Porsche 911: 60 Years of Iconic Design", excerpt: "How one sports car shaped the future of automotive design", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/porsche-911-models-across-different-gene-1772823292219-b0857470.png", imageAlt: "Porsche 911 Through Decades", authorName: "Design Expert", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png", date: "Featured Article"},
|
||||
id: "2", name: "David Wong", role: "Car Enthusiast", company: "Automotive Blog", rating: 5,
|
||||
imageSrc: testCarImages[1],
|
||||
imageAlt: "David Wong"},
|
||||
{
|
||||
id: "3", category: "Innovation", title: "The Jaguar E-Type: Beauty and Performance", excerpt: "Why Enzo Ferrari called it the most beautiful car ever made", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/jaguar-e-type-in-stunning-profile-emphas-1772823290729-6dd39021.png", imageAlt: "Jaguar E-Type Design", authorName: "Automotive Journalist", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png", date: "Featured Article"},
|
||||
{
|
||||
id: "4", category: "Engineering", title: "BMW 2002: The Birth of the Sports Sedan", excerpt: "How a small car changed everything about performance motoring", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/bmw-2002-sports-sedan-representing-the-b-1772823292072-11f22c8a.png", imageAlt: "BMW 2002 Legacy", authorName: "Technical Expert", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772823290751-a93bf9d8.png", date: "Featured Article"},
|
||||
{
|
||||
id: "5", category: "Modern Era", title: "Tesla Model S: The Electric Revolution", excerpt: "How one car reshaped the entire automotive industry", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/tesla-model-s-or-modern-tesla-electric-v-1772823291685-64082b06.png", imageAlt: "Tesla Model S Modern", authorName: "Tech Analyst", authorAvatar:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292611-51911370.png", date: "Featured Article"},
|
||||
id: "3", name: "Emma Thompson", role: "Fleet Manager", company: "Logistics Corp", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
imageAlt: "Emma Thompson"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="AutoArchive by the Numbers"
|
||||
description="The world's most comprehensive automotive database at your fingertips"
|
||||
tag="Database Statistics"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="scale-rotate"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Building2,
|
||||
title: "Manufacturers", value: "2,000+"},
|
||||
{
|
||||
id: "2", icon: Car,
|
||||
title: "Vehicle Models", value: "50,000+"},
|
||||
{
|
||||
id: "3", icon: History,
|
||||
title: "Years Covered", value: "138 Years"},
|
||||
{
|
||||
id: "4", icon: Globe,
|
||||
title: "Countries", value: "195"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About AutoArchive"
|
||||
description={[
|
||||
"AutoArchive is the world's most comprehensive online car encyclopedia and search engine. Our mission is to preserve and share automotive history, from the earliest automobiles of 1886 to the latest models of today.", "We've compiled extensive data on every major manufacturer, model generation, variant, and specification. Whether you're a collector, historian, designer, or enthusiast, AutoArchive provides the definitive source for automotive knowledge.", "Our database spans 138 years of automotive innovation, featuring technical specifications, performance metrics, production years, engine options, transmission data, and historical context for vehicles from around the world."]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Explore Database", href: "/search" },
|
||||
{ text: "Browse Collections", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about AutoArchive and our automotive database"
|
||||
tag="Help & Support"
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="blur-reveal"
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-customer-support-and-help-resourc-1772823291668-afcab7fc.png"
|
||||
imageAlt="AutoArchive Support Resources"
|
||||
mediaPosition="left"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What years does AutoArchive cover?", content:
|
||||
"AutoArchive covers automotive history from 1886 (the earliest automobiles) to the present day (2024). We continuously update our database with new models and generations as they are released."},
|
||||
{
|
||||
id: "2", title: "How many manufacturers are included in the database?", content:
|
||||
"We currently feature over 2,000 manufacturers worldwide, including both current and historical brands. This includes major global manufacturers as well as regional and boutique automakers throughout history."},
|
||||
{
|
||||
id: "3", title: "Can I search by specific criteria?", content:
|
||||
"Yes! You can search and filter by brand, model, year, country of origin, engine type, body style, horsepower range, production years, drivetrain, and more. Our advanced search engine includes autocomplete suggestions for quick discovery."},
|
||||
{
|
||||
id: "4", title: "How do I compare vehicles?", content:
|
||||
"Use our Compare Tool to select up to 4 vehicles and view their specifications side-by-side. Compare engine options, performance metrics, transmission options, body styles, and other key specifications."},
|
||||
{
|
||||
id: "5", title: "Is there pricing information available?", content:
|
||||
"AutoArchive focuses on technical specifications, production data, and historical information. We do not provide pricing information, which varies greatly by condition, market, and time period. Our goal is to be the definitive technical resource."},
|
||||
{
|
||||
id: "6", title: "Can I view individual car specifications?", content:
|
||||
"Absolutely. Each vehicle has its own dedicated detail page featuring high-quality images, technical specifications, production years, engine options, performance data, transmission options, body styles, historical notes, and information about successor/predecessor models."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
tag="Start Exploring"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="blur-reveal"
|
||||
title="Ready to Discover Automotive History?"
|
||||
description="Join thousands of enthusiasts, collectors, historians, and professionals using AutoArchive. Search millions of vehicles, compare specifications, and explore the complete history of automobiles."
|
||||
buttons={[
|
||||
{ text: "Begin Your Search", href: "/search" },
|
||||
{ text: "Browse All Brands", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
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" },
|
||||
{ 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: "/" },
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
kpiItems={[
|
||||
{ value: "10K+", label: "Active Users" },
|
||||
{ value: "50K+", label: "Vehicles Listed" },
|
||||
{ value: "100K+", label: "Comparisons Made" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
56
src/app/privacy/page.tsx
Normal file
56
src/app/privacy/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen p-4">
|
||||
<div className="max-w-2xl mx-auto pt-24">
|
||||
<h1 className="text-4xl font-bold mb-4">Privacy Policy</h1>
|
||||
<p className="text-gray-600 mb-8">Last updated: January 2025</p>
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-3">1. Information We Collect</h2>
|
||||
<p className="text-gray-700">We collect information you provide directly to us when using our car database and comparison tools.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-3">2. How We Use Your Information</h2>
|
||||
<p className="text-gray-700">We use the information we collect to provide, maintain, and improve our services.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,221 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { useState } from 'react';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function SearchPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="AutoArchive"
|
||||
bottomLeftText="Explore Automotive History"
|
||||
bottomRightText="1886 to Present"
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex flex-col items-center justify-center px-4 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-extrabold mb-6">
|
||||
Advanced Vehicle Search
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 mb-12">
|
||||
Search across our complete database of 50,000+ vehicles from 2,000+ manufacturers.
|
||||
Filter by brand, model, year, specifications, and more.
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 mb-12">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-left mb-2">
|
||||
Search by Brand or Model
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="E.g., Ferrari, Porsche 911, BMW M3..."
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-burgundy-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-left mb-2">
|
||||
Year Range
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="From"
|
||||
min="1886"
|
||||
max="2024"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="To"
|
||||
min="1886"
|
||||
max="2024"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-left mb-2">
|
||||
Body Type
|
||||
</label>
|
||||
<select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
|
||||
<option>All Types</option>
|
||||
<option>Sedan</option>
|
||||
<option>SUV</option>
|
||||
<option>Coupe</option>
|
||||
<option>Convertible</option>
|
||||
<option>Wagon</option>
|
||||
<option>Truck</option>
|
||||
<option>Sports Car</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-left mb-2">
|
||||
Engine Type
|
||||
</label>
|
||||
<select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
|
||||
<option>All Engines</option>
|
||||
<option>Gasoline</option>
|
||||
<option>Diesel</option>
|
||||
<option>Electric</option>
|
||||
<option>Hybrid</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-left mb-2">
|
||||
Country of Origin
|
||||
</label>
|
||||
<select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
|
||||
<option>All Countries</option>
|
||||
<option>Germany</option>
|
||||
<option>Italy</option>
|
||||
<option>Japan</option>
|
||||
<option>USA</option>
|
||||
<option>UK</option>
|
||||
<option>France</option>
|
||||
<option>Sweden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-burgundy-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-burgundy-700 transition-colors">
|
||||
Search Vehicles
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||
<div className="bg-gray-50 rounded-lg p-6">
|
||||
<div className="text-3xl font-bold text-burgundy-600 mb-2">
|
||||
50,000+
|
||||
</div>
|
||||
<p className="text-gray-600">Models in Database</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-6">
|
||||
<div className="text-3xl font-bold text-burgundy-600 mb-2">
|
||||
2,000+
|
||||
</div>
|
||||
<p className="text-gray-600">Manufacturers</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-6">
|
||||
<div className="text-3xl font-bold text-burgundy-600 mb-2">
|
||||
138
|
||||
</div>
|
||||
<p className="text-gray-600">Years of History</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-gray-600">
|
||||
<p className="mb-4">
|
||||
Can't find what you're looking for? Try browsing by era or brand instead.
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<a
|
||||
href="/browse"
|
||||
className="text-burgundy-600 font-semibold hover:underline"
|
||||
>
|
||||
Browse by Era
|
||||
</a>
|
||||
<span>•</span>
|
||||
<a
|
||||
href="/brands"
|
||||
className="text-burgundy-600 font-semibold hover:underline"
|
||||
>
|
||||
Browse by Brand
|
||||
</a>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-2xl">
|
||||
<h1 className="text-4xl font-bold mb-8 text-center">Search Cars</h1>
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by make, model, or year..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="flex-1 px-4 py-2 rounded border border-gray-300 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<button className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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" },
|
||||
{ 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: "/" },
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
46
src/app/specifications/page.tsx
Normal file
46
src/app/specifications/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function SpecificationsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Car Specifications</h1>
|
||||
<p className="text-lg text-gray-600">Detailed technical specifications for vehicles</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #511f1f;
|
||||
--background: #0f172a;
|
||||
--card: #1e293b;
|
||||
--foreground: #f1f5f9;
|
||||
--primary-cta: #3b82f6;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #64748b;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #e63946;
|
||||
--background-accent: #e8a8b6;
|
||||
--accent: #06b6d4;
|
||||
--background-accent: #1e293b;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
56
src/app/terms/page.tsx
Normal file
56
src/app/terms/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function TermsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen p-4">
|
||||
<div className="max-w-2xl mx-auto pt-24">
|
||||
<h1 className="text-4xl font-bold mb-4">Terms of Service</h1>
|
||||
<p className="text-gray-600 mb-8">Last updated: January 2025</p>
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-3">1. Acceptance of Terms</h2>
|
||||
<p className="text-gray-700">By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-3">2. Use License</h2>
|
||||
<p className="text-gray-700">Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
46
src/app/timeline/page.tsx
Normal file
46
src/app/timeline/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
export default function TimelinePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Vehicle Timeline</h1>
|
||||
<p className="text-lg text-gray-600">Historical vehicle data and model evolution</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
333
src/lib/database/carDatabase.ts
Normal file
333
src/lib/database/carDatabase.ts
Normal file
@@ -0,0 +1,333 @@
|
||||
/**
|
||||
* Car Database Service
|
||||
* Handles all car data operations and queries
|
||||
*/
|
||||
|
||||
import { Car, CarFilter, CarComparison, CarInventory } from './carTypes';
|
||||
|
||||
export class CarDatabase {
|
||||
private cars: Car[] = [];
|
||||
|
||||
/**
|
||||
* Initialize database with sample data
|
||||
*/
|
||||
initialize(cars: Car[]): void {
|
||||
this.cars = cars;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all cars
|
||||
*/
|
||||
getAllCars(): Car[] {
|
||||
return this.cars;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get car by ID
|
||||
*/
|
||||
getCarById(id: string): Car | undefined {
|
||||
return this.cars.find((car) => car.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search cars by filter criteria
|
||||
*/
|
||||
filterCars(filter: CarFilter): Car[] {
|
||||
return this.cars.filter((car) => {
|
||||
// Make filter
|
||||
if (filter.make && !filter.make.includes(car.make)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Model filter
|
||||
if (filter.model && !filter.model.includes(car.model)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Year range filter
|
||||
if (filter.yearRange) {
|
||||
const [minYear, maxYear] = filter.yearRange;
|
||||
if (car.year < minYear || car.year > maxYear) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Price range filter
|
||||
if (filter.priceRange) {
|
||||
const [minPrice, maxPrice] = filter.priceRange;
|
||||
if (car.price < minPrice || car.price > maxPrice) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Transmission filter
|
||||
if (filter.transmission && !filter.transmission.includes(car.transmission)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Fuel filter
|
||||
if (filter.fuel && !filter.fuel.includes(car.fuel)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Body type filter
|
||||
if (filter.bodyType && !filter.bodyType.includes(car.bodyType || '')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Drive type filter
|
||||
if (filter.driveType && !filter.driveType.includes(car.driveType || '')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Seating filter
|
||||
if (filter.seatCount && car.seating) {
|
||||
const [minSeats, maxSeats] = filter.seatCount;
|
||||
if (car.seating < minSeats || car.seating > maxSeats) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Safety rating filter
|
||||
if (filter.safetyRating && car.safetyRating && car.safetyRating < filter.safetyRating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Keyword search
|
||||
if (filter.keyword) {
|
||||
const keyword = filter.keyword.toLowerCase();
|
||||
const searchableFields = [
|
||||
car.make,
|
||||
car.model,
|
||||
car.bodyType,
|
||||
car.color,
|
||||
car.description,
|
||||
].filter(Boolean);
|
||||
|
||||
const matches = searchableFields.some(
|
||||
(field) => field && field.toString().toLowerCase().includes(keyword)
|
||||
);
|
||||
|
||||
if (!matches) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Search cars by keyword
|
||||
*/
|
||||
searchCars(keyword: string): Car[] {
|
||||
return this.filterCars({ keyword });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cars by make
|
||||
*/
|
||||
getCarsByMake(make: string): Car[] {
|
||||
return this.cars.filter((car) => car.make.toLowerCase() === make.toLowerCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cars by fuel type
|
||||
*/
|
||||
getCarsByFuel(fuel: string): Car[] {
|
||||
return this.cars.filter((car) => car.fuel === fuel);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cars by body type
|
||||
*/
|
||||
getCarsByBodyType(bodyType: string): Car[] {
|
||||
return this.cars.filter((car) => car.bodyType === bodyType);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cars within price range
|
||||
*/
|
||||
getCarsByPriceRange(minPrice: number, maxPrice: number): Car[] {
|
||||
return this.cars.filter((car) => car.price >= minPrice && car.price <= maxPrice);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sort cars by field
|
||||
*/
|
||||
sortCars(cars: Car[], sortBy: keyof Car, ascending: boolean = true): Car[] {
|
||||
const sorted = [...cars].sort((a, b) => {
|
||||
const aValue = a[sortBy];
|
||||
const bValue = b[sortBy];
|
||||
|
||||
if (typeof aValue === 'number' && typeof bValue === 'number') {
|
||||
return ascending ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
if (typeof aValue === 'string' && typeof bValue === 'string') {
|
||||
return ascending ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return sorted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique makes
|
||||
*/
|
||||
getUniqueMakes(): string[] {
|
||||
const makes = new Set(this.cars.map((car) => car.make));
|
||||
return Array.from(makes).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique models for a make
|
||||
*/
|
||||
getUniqueModels(make: string): string[] {
|
||||
const models = new Set(
|
||||
this.cars.filter((car) => car.make === make).map((car) => car.model)
|
||||
);
|
||||
return Array.from(models).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique fuel types
|
||||
*/
|
||||
getUniqueFuelTypes(): string[] {
|
||||
const fuels = new Set(this.cars.map((car) => car.fuel));
|
||||
return Array.from(fuels).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique body types
|
||||
*/
|
||||
getUniqueBodyTypes(): string[] {
|
||||
const bodyTypes = new Set(this.cars.filter((car) => car.bodyType).map((car) => car.bodyType));
|
||||
return Array.from(bodyTypes).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Compare two or more cars
|
||||
*/
|
||||
compareCars(carIds: string[]): Car[] {
|
||||
return carIds
|
||||
.map((id) => this.getCarById(id))
|
||||
.filter((car) => car !== undefined) as Car[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get similar cars based on specifications
|
||||
*/
|
||||
getSimilarCars(carId: string, count: number = 3): Car[] {
|
||||
const car = this.getCarById(carId);
|
||||
if (!car) return [];
|
||||
|
||||
const similar = this.cars
|
||||
.filter((c) => c.id !== carId && c.make === car.make)
|
||||
.slice(0, count);
|
||||
|
||||
return similar.length >= count
|
||||
? similar
|
||||
: this.cars.filter((c) => c.id !== carId && c.bodyType === car.bodyType).slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get top rated cars
|
||||
*/
|
||||
getTopRatedCars(count: number = 5): Car[] {
|
||||
return [...this.cars]
|
||||
.sort((a, b) => (b.userRating || 0) - (a.userRating || 0))
|
||||
.slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get most viewed cars
|
||||
*/
|
||||
getMostViewedCars(count: number = 5): Car[] {
|
||||
return [...this.cars]
|
||||
.sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
|
||||
.slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get featured cars
|
||||
*/
|
||||
getFeaturedCars(count: number = 5): Car[] {
|
||||
return this.cars.filter((car) => car.isFavorite).slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate average specifications for a make or body type
|
||||
*/
|
||||
calculateAverageSpecs(
|
||||
cars: Car[]
|
||||
): Partial<Car> {
|
||||
if (cars.length === 0) return {};
|
||||
|
||||
const specs: Partial<Car> = {
|
||||
price:
|
||||
cars.reduce((sum, car) => sum + car.price, 0) / cars.length,
|
||||
horsepower:
|
||||
cars.reduce((sum, car) => sum + (car.horsepower || 0), 0) / cars.length,
|
||||
mpg: cars.reduce((sum, car) => sum + (car.mpg || 0), 0) / cars.length,
|
||||
seating:
|
||||
Math.round(cars.reduce((sum, car) => sum + (car.seating || 0), 0) / cars.length),
|
||||
};
|
||||
|
||||
return specs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new car to database
|
||||
*/
|
||||
addCar(car: Car): void {
|
||||
this.cars.push(car);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a car
|
||||
*/
|
||||
updateCar(id: string, updates: Partial<Car>): Car | undefined {
|
||||
const index = this.cars.findIndex((car) => car.id === id);
|
||||
if (index !== -1) {
|
||||
this.cars[index] = { ...this.cars[index], ...updates, updatedAt: new Date() };
|
||||
return this.cars[index];
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a car
|
||||
*/
|
||||
deleteCar(id: string): boolean {
|
||||
const index = this.cars.findIndex((car) => car.id === id);
|
||||
if (index !== -1) {
|
||||
this.cars.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get database statistics
|
||||
*/
|
||||
getStatistics() {
|
||||
return {
|
||||
totalCars: this.cars.length,
|
||||
averagePrice: this.cars.reduce((sum, car) => sum + car.price, 0) / this.cars.length,
|
||||
makes: this.getUniqueMakes().length,
|
||||
models: this.cars.length,
|
||||
fuelTypes: this.getUniqueFuelTypes().length,
|
||||
bodyTypes: this.getUniqueBodyTypes().length,
|
||||
averageHorsepower:
|
||||
this.cars.reduce((sum, car) => sum + (car.horsepower || 0), 0) / this.cars.length,
|
||||
averageMpg:
|
||||
this.cars.reduce((sum, car) => sum + (car.mpg || 0), 0) / this.cars.length,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton instance
|
||||
export const carDatabase = new CarDatabase();
|
||||
249
src/lib/database/carTypes.ts
Normal file
249
src/lib/database/carTypes.ts
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* Universal Car Database Types
|
||||
* Defines all fields and structures for car data management
|
||||
*/
|
||||
|
||||
export interface Car {
|
||||
// Basic Information
|
||||
id: string;
|
||||
make: string; // Manufacturer (e.g., Toyota, Honda, BMW)
|
||||
model: string; // Model name (e.g., Camry, Civic, 3 Series)
|
||||
year: number; // Model year
|
||||
vin?: string; // Vehicle Identification Number
|
||||
generation?: string; // Generation/body style
|
||||
|
||||
// Pricing
|
||||
price: number; // Base price in USD
|
||||
msrp?: number; // Manufacturer Suggested Retail Price
|
||||
depreciation?: number; // Annual depreciation percentage
|
||||
|
||||
// Transmission & Drivetrain
|
||||
transmission: 'Manual' | 'Automatic' | 'CVT' | 'Semi-Automatic';
|
||||
driveType?: 'FWD' | 'RWD' | 'AWD' | 'RWD/AWD';
|
||||
gears?: number; // Number of gears
|
||||
|
||||
// Fuel & Environmental
|
||||
fuel: 'Gasoline' | 'Diesel' | 'Hybrid' | 'Electric' | 'Plug-in Hybrid';
|
||||
mpg?: number; // Miles per gallon (combined)
|
||||
mpgCity?: number; // City MPG
|
||||
mpgHighway?: number; // Highway MPG
|
||||
fuelCapacity?: number; // In gallons
|
||||
co2Emissions?: number; // Grams per mile
|
||||
|
||||
// Engine Specifications
|
||||
engineSize?: number; // Engine displacement in liters
|
||||
cylinders?: number; // Number of cylinders
|
||||
horsepower?: number; // Power output in HP
|
||||
torque?: number; // Torque in lb-ft
|
||||
topSpeed?: number; // Maximum speed in mph
|
||||
acceleration?: number; // 0-60 time in seconds
|
||||
powerDelivery?: string; // Direct injection, turbocharged, etc.
|
||||
|
||||
// Dimensions & Weight
|
||||
length?: number; // In inches
|
||||
width?: number; // In inches
|
||||
height?: number; // In inches
|
||||
wheelbase?: number; // Distance between front and rear axles in inches
|
||||
weight?: number; // Curb weight in lbs
|
||||
groundClearance?: number; // In inches
|
||||
trackWidth?: number; // Front and rear track width
|
||||
overhang?: number; // Front and rear overhang
|
||||
|
||||
// Capacity
|
||||
seating?: number; // Number of passengers
|
||||
luggage?: number; // Cargo space in cubic feet
|
||||
maxLoad?: number; // Maximum payload in lbs
|
||||
towingCapacity?: number; // Towing capacity in lbs
|
||||
|
||||
// Exterior
|
||||
bodyType?: 'Sedan' | 'SUV' | 'Truck' | 'Coupe' | 'Hatchback' | 'Wagon' | 'Minivan' | 'Crossover';
|
||||
color?: string;
|
||||
doorsCount?: number; // Number of doors
|
||||
roofType?: 'Fixed' | 'Panoramic' | 'Sunroof' | 'Convertible';
|
||||
wheelSize?: string; // e.g., "18 inch"
|
||||
wheelStyle?: string; // Design description
|
||||
|
||||
// Interior
|
||||
upholstery?: string; // Material (Cloth, Leather, Suede, etc.)
|
||||
seatMaterial?: 'Cloth' | 'Leather' | 'Suede' | 'Synthetic';
|
||||
interiorColor?: string;
|
||||
interiorTrim?: string; // Premium, sport, luxury, etc.
|
||||
steeringWheelMaterial?: string;
|
||||
dashboardMaterial?: string;
|
||||
|
||||
// Safety Features
|
||||
safetyRating?: number; // NHTSA/IIHS rating (1-5)
|
||||
airbags?: number; // Number of airbags
|
||||
crashTestScore?: number;
|
||||
rolloverRating?: number;
|
||||
safetyFeatures?: string[]; // Array of safety features
|
||||
adas?: string[]; // Advanced Driver Assistance Systems
|
||||
|
||||
// Technology & Infotainment
|
||||
infotainmentSystem?: string; // System name (Apple CarPlay, Android Auto, etc.)
|
||||
displaySize?: number; // Screen size in inches
|
||||
displayType?: 'LCD' | 'OLED' | 'Touchscreen';
|
||||
navigationSystem?: boolean;
|
||||
soundSystem?: string; // Brand and configuration
|
||||
speakers?: number; // Number of speakers
|
||||
bluetooth?: boolean;
|
||||
wifi?: boolean;
|
||||
phoneIntegration?: string[]; // iOS CarPlay, Android Auto, etc.
|
||||
voiceControl?: boolean;
|
||||
|
||||
// Climate Control
|
||||
airConditioning?: 'Manual' | 'Automatic' | 'Dual-zone' | 'Multi-zone';
|
||||
heatedSeats?: boolean;
|
||||
ventilatedSeats?: boolean;
|
||||
heatedSteeringWheel?: boolean;
|
||||
heatedWindshield?: boolean;
|
||||
climateZones?: number;
|
||||
|
||||
// Lights & Visibility
|
||||
headlightType?: 'Halogen' | 'LED' | 'HID' | 'Adaptive LED';
|
||||
adapativeHeadlights?: boolean;
|
||||
ledDaytimeRunningLights?: boolean;
|
||||
rearLights?: 'LED' | 'Halogen';
|
||||
wiper?: 'Manual' | 'Rain-sensing automatic';
|
||||
wiperSpeed?: string;
|
||||
rearWiper?: boolean;
|
||||
washerFluid?: boolean;
|
||||
parkingLights?: boolean;
|
||||
automaticLights?: boolean;
|
||||
|
||||
// Suspension & Handling
|
||||
suspensionType?: string; // MacPherson, multi-link, etc.
|
||||
steeringType?: string; // Rack and pinion, etc.
|
||||
steeringRatio?: string; // e.g., "15.6:1"
|
||||
brakesType?: string; // Disc/drum configuration
|
||||
abs?: boolean; // Anti-lock braking system
|
||||
ebd?: boolean; // Electronic brakeforce distribution
|
||||
stabilityControl?: boolean;
|
||||
tractionControl?: boolean;
|
||||
hillStartAssist?: boolean;
|
||||
adaptiveSuspension?: boolean;
|
||||
|
||||
// Storage & Organization
|
||||
armrests?: number;
|
||||
cupholders?: number;
|
||||
storageCompartments?: number;
|
||||
doorPockets?: number;
|
||||
underfloorStorage?: boolean;
|
||||
ceilingStorage?: boolean;
|
||||
|
||||
// Convenience Features
|
||||
powerWindows?: boolean;
|
||||
powerDoors?: boolean;
|
||||
powerTrunk?: boolean;
|
||||
powerSteeringWheel?: boolean;
|
||||
powerSeats?: boolean;
|
||||
memorySeats?: boolean;
|
||||
keylessEntry?: boolean;
|
||||
pushButtonStart?: boolean;
|
||||
remoteStart?: boolean;
|
||||
automaticParking?: boolean;
|
||||
handsFreeParking?: boolean;
|
||||
|
||||
// Warranty
|
||||
warrantyBasic?: string; // e.g., "3 years/36,000 miles"
|
||||
warrantyPowertrain?: string;
|
||||
warrantyRust?: string;
|
||||
warrantyRoadsideAssistance?: string;
|
||||
|
||||
// Maintenance
|
||||
oilChangeInterval?: number; // In miles
|
||||
maintenanceCost?: number; // Estimated annual cost
|
||||
commonIssues?: string[];
|
||||
|
||||
// Performance
|
||||
fuelEconomy?: 'Poor' | 'Average' | 'Good' | 'Excellent';
|
||||
handling?: 'Soft' | 'Balanced' | 'Sporty' | 'Very Sporty';
|
||||
comfort?: 'Firm' | 'Balanced' | 'Soft' | 'Very Soft';
|
||||
noiseLevels?: 'High' | 'Medium' | 'Low' | 'Very Low';
|
||||
reliabilityRating?: number; // 1-10 scale
|
||||
resaleValue?: number; // Percentage after 3 years
|
||||
|
||||
// Availability & Production
|
||||
productionStart?: Date;
|
||||
productionEnd?: Date;
|
||||
productionCountries?: string[];
|
||||
availableMarkets?: string[];
|
||||
discontinuedYear?: number;
|
||||
|
||||
// Media & Marketing
|
||||
imageUrls?: string[];
|
||||
videoUrl?: string;
|
||||
brochureUrl?: string;
|
||||
description?: string; // Marketing description
|
||||
|
||||
// Additional Features
|
||||
features?: string[]; // Array of key features
|
||||
highlights?: string[];
|
||||
competitors?: string[]; // Competing models
|
||||
|
||||
// Metadata
|
||||
createdAt?: Date;
|
||||
updatedAt?: Date;
|
||||
lastViewed?: Date;
|
||||
viewCount?: number;
|
||||
isFavorite?: boolean;
|
||||
userRating?: number;
|
||||
reviews?: Review[];
|
||||
}
|
||||
|
||||
export interface Review {
|
||||
id: string;
|
||||
carId: string;
|
||||
userId: string;
|
||||
userName: string;
|
||||
rating: number; // 1-5
|
||||
title: string;
|
||||
comment: string;
|
||||
pros?: string[];
|
||||
cons?: string[];
|
||||
createdAt: Date;
|
||||
helpful?: number; // Number of helpful votes
|
||||
}
|
||||
|
||||
export interface CarFilter {
|
||||
make?: string[];
|
||||
model?: string[];
|
||||
yearRange?: [number, number];
|
||||
priceRange?: [number, number];
|
||||
transmission?: string[];
|
||||
fuel?: string[];
|
||||
bodyType?: string[];
|
||||
driveType?: string[];
|
||||
seatCount?: [number, number];
|
||||
fuelEconomy?: 'Poor' | 'Average' | 'Good' | 'Excellent';
|
||||
safetyRating?: number; // Minimum rating
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
export interface CarComparison {
|
||||
carIds: string[];
|
||||
compareFields: (keyof Car)[];
|
||||
}
|
||||
|
||||
export interface CarInventory {
|
||||
carId: string;
|
||||
dealershipId: string;
|
||||
stockNumber: string;
|
||||
condition: 'New' | 'Used' | 'Certified Pre-Owned';
|
||||
mileage: number;
|
||||
inStock: boolean;
|
||||
quantity?: number;
|
||||
dateAdded: Date;
|
||||
lastUpdated: Date;
|
||||
}
|
||||
|
||||
export interface DealershipListing {
|
||||
id: string;
|
||||
dealershipName: string;
|
||||
dealershipLocation: string;
|
||||
dealershipPhone: string;
|
||||
dealershipEmail: string;
|
||||
cars: CarInventory[];
|
||||
rating?: number;
|
||||
reviewCount?: number;
|
||||
}
|
||||
Reference in New Issue
Block a user