Merge version_5 into main #11
@@ -1,3 +1,310 @@
|
||||
export default function BrandPage() {
|
||||
return <div>Brand Page</div>;
|
||||
}
|
||||
"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";
|
||||
|
||||
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" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
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="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"
|
||||
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:
|
||||
"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: "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: "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: "Start Searching", href: "/search" },
|
||||
{ text: "Browse Database", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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?_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,9 +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 BrowsePage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Browse Page</h1>
|
||||
</div>
|
||||
<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">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>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,341 @@
|
||||
export default function CarPage() {
|
||||
return <div>Car Page</div>;
|
||||
}
|
||||
"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 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";
|
||||
|
||||
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" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
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="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"
|
||||
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: "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: "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: "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: "Start Searching", href: "/search" },
|
||||
{ text: "Browse Database", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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?_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
|
||||
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="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>
|
||||
);
|
||||
}
|
||||
1384
src/app/layout.tsx
1384
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
135
src/app/page.tsx
135
src/app/page.tsx
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
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';
|
||||
|
||||
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="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
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 id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Find Your Perfect Car"
|
||||
description="Explore our comprehensive database of vehicles with detailed specifications, pricing, and real owner testimonials."
|
||||
background={{ variant: "plain" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Johnson", handle: "@alexj", testimonial: "The database is incredibly comprehensive. Found exactly what I was looking for!", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
},
|
||||
{
|
||||
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: "Mike Rodriguez", handle: "@mikerod", testimonial: "The specifications are detailed and accurate. Highly recommended for car shoppers.", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
},
|
||||
]}
|
||||
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: "Browse Cars", href: "browse" },
|
||||
{ text: "Compare Now", href: "compare" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc={testCarImages[0]}
|
||||
imageAlt="Premium sedan showcase"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
title="Why Choose Webild?"
|
||||
description="Comprehensive tools for car shopping and comparison"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Detailed Specifications", description: "Complete technical specs for every vehicle in our database", imageSrc: testCarImages[0],
|
||||
imageAlt: "Specifications icon"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Price Tracking", description: "Monitor price changes and find the best deals", imageSrc: testCarImages[1],
|
||||
imageAlt: "Price tracking icon"},
|
||||
{
|
||||
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="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"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Jessica Martinez", role: "First-time Buyer", company: "Tech Startup", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
imageAlt: "Jessica Martinez"},
|
||||
{
|
||||
id: "2", name: "David Wong", role: "Car Enthusiast", company: "Automotive Blog", rating: 5,
|
||||
imageSrc: testCarImages[1],
|
||||
imageAlt: "David Wong"},
|
||||
{
|
||||
id: "3", name: "Emma Thompson", role: "Fleet Manager", company: "Logistics Corp", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
imageAlt: "Emma Thompson"},
|
||||
]}
|
||||
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