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

Merge version_1 into main #3

Merged
bender merged 7 commits from version_1 into main 2026-03-06 18:48:07 +00:00
Conversation 0 Commits 7 Files Changed 7 +1417 -170
7 changed files with 1417 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
src/app/brands/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,286 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Zap, Award, Sparkles } from "lucide-react";
import { useParams } from "next/navigation";
export default function BrandDetailPage() {
const params = useParams();
const slug = params.slug as string;
// Mock brand data based on slug
const brandData: Record<string, any> = {
"ferrari": {
name: "Ferrari",
title: "Ferrari: The Prancing Horse Legacy",
yearFounded: 1947,
description: [
"Ferrari stands as the epitome of Italian automotive excellence and racing heritage. Founded by Enzo Ferrari in 1947, the company has built legendary supercars that define performance and beauty.",
"From the iconic 250 GTO to the revolutionary SF90 Stradale, Ferrari represents the perfect marriage of engineering excellence and artistic design. Every Ferrari is a masterpiece of engineering.",
"With decades of Formula 1 dominance and countless road car innovations, Ferrari continues to push the boundaries of what's possible in automotive performance and design."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772822809535-01fc3104.png",
features: [
{
title: "Racing Heritage (1947-1960s)",
description: "Ferrari's foundation was built on racing success. The iconic 250 GTO was the most successful race car of its era, winning countless races and establishing Ferrari as a racing powerhouse.",
icon: Zap,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772822809535-01fc3104.png?_wi=3", imageAlt: "Ferrari 250 GTO" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/ferrari-250-gto-iconic-red-racing-car-in-1772822811155-b601880f.png?_wi=3", imageAlt: "Ferrari racing heritage" }
]
},
{
title: "Modern Era (1970s-2000s)",
description: "Ferrari evolved from purely racing machines to high-performance road cars. The Testarossa, F40, and F50 defined generations of supercars with cutting-edge technology.",
icon: Award,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772822813669-81cfe9e5.png?_wi=3", imageAlt: "Ferrari Testarossa" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-ferrari-250-gto-1772822811155-b601880f.png", imageAlt: "Ferrari F40" }
]
},
{
title: "Contemporary Innovation (2010s-Present)",
description: "Ferrari continues to lead with hybrid technology and electric innovations. The SF90 Stradale and new hybrid models represent the future of high-performance motoring.",
icon: Sparkles,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772822810626-e40aa002.png?_wi=3", imageAlt: "Modern Ferrari hybrid" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-tesla-revolution-1772822811114-76af15f7.png", imageAlt: "Future of performance" }
]
}
]
},
"porsche": {
name: "Porsche",
title: "Porsche: Six Decades of Excellence",
yearFounded: 1948,
description: [
"Porsche represents relentless pursuit of performance and engineering perfection. Founded in 1948, Porsche has created some of the world's most iconic sports cars.",
"The 911 is the most successful sports car in history, with an unbroken lineage spanning over 60 years. Each generation has refined the perfect balance of performance, luxury, and daily usability.",
"From the legendary 356 to the cutting-edge 911 Turbo, Porsche embodies the German commitment to engineering excellence and timeless design."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772822809876-b85e4815.png",
features: [
{
title: "Foundation Era (1948-1970s)",
description: "Porsche began with the 356, a lightweight sports car that established the brand's philosophy of performance through weight reduction and engineering innovation.",
icon: Award,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/era-1950s-1-1772822811278-10e2ad8c.png?_wi=1", imageAlt: "Porsche 356" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/era-1960s-1-1772822811207-68338969.png", imageAlt: "Porsche racing heritage" }
]
},
{
title: "911 Dynasty (1963-Present)",
description: "The Porsche 911 revolutionized sports car design with its iconic silhouette and rear-mounted air-cooled engine. Continuously evolved, the 911 remains the benchmark for performance.",
icon: Zap,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772822809876-b85e4815.png?_wi=3", imageAlt: "Porsche 911 classic" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-porsche-911-history-1772822811063-1540338a.png", imageAlt: "911 evolution" }
]
},
{
title: "Modern Performance (2000s-Today)",
description: "Modern Porsches combine hybrid technology, electric innovation, and advanced electronics with the brand's core performance philosophy.",
icon: Sparkles,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772822810626-e40aa002.png?_wi=4", imageAlt: "Porsche Taycan electric" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772822811193-c06d80bb.png?_wi=3", imageAlt: "Modern Porsche lineup" }
]
}
]
},
"jaguar": {
name: "Jaguar",
title: "Jaguar: Grace, Pace, and Space",
yearFounded: 1922,
description: [
"Jaguar epitomizes British automotive elegance and performance. From its origins as the Swallow Sidecar Company to becoming a legendary luxury sports car manufacturer, Jaguar has always pursued beauty and performance.",
"The iconic E-Type defined automotive design for a generation, while models like the XK and XJ established Jaguar as a purveyor of refined performance.",
"Jaguar's racing legacy and commitment to engineering excellence have made it one of the most respected names in automotive history."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772822809686-0047bcde.png",
features: [
{
title: "Classic Heritage (1922-1960)",
description: "Jaguar began as a motorcycle sidecar manufacturer before transitioning to luxury sports cars. The SS Jaguar established the brand's commitment to style and performance.",
icon: Award,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/era-1930s-1-1772822810917-8aeeebe9.png", imageAlt: "Jaguar classic era" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/era-1950s-1-1772822811278-10e2ad8c.png?_wi=2", imageAlt: "Jaguar heritage" }
]
},
{
title: "E-Type Revolution (1961-1974)",
description: "The Jaguar E-Type is widely regarded as one of the most beautiful cars ever made. Enzo Ferrari himself praised its design, making it a design icon.",
icon: Sparkles,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772822809686-0047bcde.png?_wi=3", imageAlt: "Jaguar E-Type beauty" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/blog-jaguar-etype-beauty-1772822811047-cffdec2a.png", imageAlt: "E-Type design" }
]
},
{
title: "Modern Luxury (1970s-Today)",
description: "Jaguar evolved into a luxury performance brand with the XJ sedan and refined sports cars. Recent innovations blend British elegance with modern technology.",
icon: Zap,
mediaItems: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772822811193-c06d80bb.png?_wi=4", imageAlt: "Jaguar modern" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772822810626-e40aa002.png?_wi=5", imageAlt: "Future Jaguar" }
]
}
]
}
};
const brand = brandData[slug] || brandData["ferrari"];
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title={brand.title}
description={`${brand.name} represents a pinnacle of automotive excellence with a legacy spanning decades of innovation, design, and performance.`}
tag="Brand Heritage"
tagAnimation="entrance-slide"
background={{ variant: "aurora" }}
imageSrc={brand.heroImage}
imageAlt={`${brand.name} legendary vehicle`}
mediaAnimation="entrance-slide"
imagePosition="right"
testimonials={[
{
name: "Automotive Historian",
handle: "Classic Car Enthusiast",
testimonial: `${brand.name} represents the pinnacle of automotive engineering and design excellence throughout history.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809397-e1e423ca.png?_wi=1",
},
{
name: "Design Expert",
handle: "Creative Professional",
testimonial: `The design language of ${brand.name} has consistently pushed boundaries and influenced the entire industry.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809462-2fc3774c.png?_wi=1",
},
{
name: "Performance Engineer",
handle: "Technical Expert",
testimonial: `${brand.name}'s engineering excellence is evident in every model they've produced over the decades.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772822810279-b1b97dc0.png",
},
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "Explore Models", href: "/browse" },
{ text: "View Specifications", href: "/search" },
]}
buttonAnimation="entrance-slide"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title={`About ${brand.name}`}
description={brand.description}
showBorder={true}
useInvertedBackground={false}
buttons={[
{ text: "Browse Models", href: "/browse" },
{ text: "Compare Vehicles", href: "/compare" },
]}
buttonAnimation="entrance-slide"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
features={brand.features}
animationType="depth-3d"
title={`${brand.name} Through the Decades`}
description="Explore the evolution of design, engineering, and innovation"
tag="Heritage Timeline"
tagAnimation="entrance-slide"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

214
src/app/browse/page.tsx Normal file
View File

@@ -0,0 +1,214 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Building2, Car, History, Globe, Award, Sparkles, Zap } from "lucide-react";
import Link from "next/link";
export default function BrowsePage() {
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</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="entrance-slide"
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-1772822809535-01fc3104.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-1772822809876-b85e4815.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-1772822809686-0047bcde.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-1772822810433-4b858ff4.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="entrance-slide"
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-1772822811139-e2a9ad4c.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-1772822811325-6926f29c.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--1772822810917-8aeeebe9.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--1772822811278-10e2ad8c.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-1772822811207-68338969.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-1772822813669-81cfe9e5.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-1772822811193-c06d80bb.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-1772822810626-e40aa002.png?_wi=2",
imageAlt: "Electric and autonomous vehicles",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

238
src/app/cars/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,238 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Building2, Car, History, Globe, Zap, Gauge, Fuel, Users } from "lucide-react";
import { useParams } from "next/navigation";
export default function CarDetailPage() {
const params = useParams();
const slug = params.slug as string;
// Mock car data based on slug
const carData: Record<string, any> = {
"ferrari-250-gto": {
name: "Ferrari 250 GTO",
brand: "Ferrari",
title: "The Ferrari 250 GTO: A Legend Defined",
year: "1962-1964",
description: [
"The Ferrari 250 GTO is widely considered the most valuable and legendary sports car ever built. Produced for only three years, this racing machine established Ferrari as the dominant force in motorsport.",
"With its stunning design by Giotto Bizzarrini and powerful V12 engine, the 250 GTO won every major racing championship of its era. Only 36 cars were produced, making it one of the rarest Ferraris.",
"Today, the 250 GTO commands prices exceeding $70 million, making it the most valuable car in the world. Its combination of beauty, performance, and historical significance makes it truly priceless."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772822809535-01fc3104.png",
metrics: [
{ id: "1", icon: Car, title: "Production Years", value: "1962-1964" },
{ id: "2", icon: Building2, title: "Units Built", value: "36" },
{ id: "3", icon: Gauge, title: "Horsepower", value: "300 HP" },
{ id: "4", icon: Zap, title: "0-60 MPH", value: "3.8s" },
]
},
"porsche-911": {
name: "Porsche 911",
brand: "Porsche",
title: "The Porsche 911: An Icon Endures",
year: "1963-Present",
description: [
"The Porsche 911 is the most successful sports car in automotive history. Since its debut in 1963, the 911 has continuously evolved while maintaining its iconic silhouette and rear-engine layout.",
"With over one million vehicles sold across multiple generations, the 911 has become a cultural icon. From everyday enthusiasts to racing professionals, the 911 serves every level of driving.",
"From the original 2.0L engine to today's hybrid powertrains, the 911 represents continuous innovation while honoring its legendary heritage. Each generation has raised the bar for performance and technology."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772822809876-b85e4815.png",
metrics: [
{ id: "1", icon: Car, title: "Production Years", value: "1963-Today" },
{ id: "2", icon: Building2, title: "Units Sold", value: "1M+" },
{ id: "3", icon: Gauge, title: "Max Horsepower", value: "640 HP" },
{ id: "4", icon: Zap, title: "Top Speed", value: "200+ MPH" },
]
},
"jaguar-etype": {
name: "Jaguar E-Type",
brand: "Jaguar",
title: "The Jaguar E-Type: Beauty Redefined",
year: "1961-1974",
description: [
"The Jaguar E-Type is widely acclaimed as one of the most beautiful cars ever created. When it debuted in 1961, even Enzo Ferrari praised its elegant design, calling it the most beautiful car ever made.",
"Designed by Malcolm Sayer, the E-Type combined stunning aesthetics with genuine performance. Its long hood, elegant curves, and timeless proportions established automotive design standards that remain influential today.",
"Available as a roadster or coupe, the E-Type offered genuine performance with its inline-6 engine. Over 72,000 units were produced across three series, making it one of the most successful British sports cars."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772822809686-0047bcde.png",
metrics: [
{ id: "1", icon: Car, title: "Production Years", value: "1961-1974" },
{ id: "2", icon: Building2, title: "Units Built", value: "72,507" },
{ id: "3", icon: Gauge, title: "Max Horsepower", value: "265 HP" },
{ id: "4", icon: Zap, title: "0-60 MPH", value: "6.4s" },
]
},
"bmw-2002": {
name: "BMW 2002",
brand: "BMW",
title: "The BMW 2002: Birth of the Sports Sedan",
year: "1968-1976",
description: [
"The BMW 2002 is widely credited with inventing the sports sedan segment. This compact, nimble car proved that performance and practicality could coexist in an affordable, everyday vehicle.",
"With its 2.0-liter engine, independent suspension, and lightweight construction, the 2002 offered genuine sports car excitement in a package that could carry passengers and luggage. It influenced generations of sports sedans.",
"The success of the 2002 established BMW's sports car credentials and led to the development of the 3 Series, which continues BMW's sports sedan legacy to this day."
],
heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772822810433-4b858ff4.png",
metrics: [
{ id: "1", icon: Car, title: "Production Years", value: "1968-1976" },
{ id: "2", icon: Building2, title: "Units Built", value: "387,099" },
{ id: "3", icon: Gauge, title: "Max Horsepower", value: "130 HP" },
{ id: "4", icon: Zap, title: "0-60 MPH", value: "8.0s" },
]
}
};
const car = carData[slug] || carData["ferrari-250-gto"];
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title={car.title}
description={`The ${car.name} is a landmark vehicle in automotive history. From ${car.year}, this car represents excellence in design, engineering, and performance.`}
tag="Legendary Vehicle"
tagAnimation="entrance-slide"
background={{ variant: "aurora" }}
imageSrc={car.heroImage}
imageAlt={car.name}
mediaAnimation="entrance-slide"
imagePosition="right"
testimonials={[
{
name: "Automotive Historian",
handle: "Expert Enthusiast",
testimonial: `The ${car.name} is a defining vehicle that shaped automotive history and influenced generations of engineers and designers.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809397-e1e423ca.png?_wi=2",
},
{
name: "Design Expert",
handle: "Creative Professional",
testimonial: `The proportions and design language of the ${car.name} remain timeless and influential to modern automotive design.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809462-2fc3774c.png?_wi=2",
},
{
name: "Collector",
handle: "Vintage Vehicle Curator",
testimonial: `Owning a ${car.name} is not just owning a car; it's owning a piece of automotive history and cultural significance.`,
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809954-4e02b0d3.png",
},
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "View Specifications", href: "/browse" },
{ text: "Compare Similar", href: "/compare" },
]}
buttonAnimation="entrance-slide"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title={`About the ${car.name}`}
description={car.description}
showBorder={true}
useInvertedBackground={false}
buttons={[
{ text: "Search Database", href: "/search" },
{ text: "Browse Vehicles", href: "/browse" },
]}
buttonAnimation="entrance-slide"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
metrics={car.metrics}
title={`${car.name} Specifications`}
description="Key performance and production data"
tag="Technical Data"
tagAnimation="entrance-slide"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

170
src/app/compare/page.tsx Normal file
View File

@@ -0,0 +1,170 @@
"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 { Building2, Car, History, Globe } from "lucide-react";
export default function ComparePage() {
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</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="entrance-slide"
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-1772822811155-b601880f.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-1772822809397-e1e423ca.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-1772822811063-1540338a.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-1772822809462-2fc3774c.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-1772822811047-cffdec2a.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-1772822809302-18dcc6eb.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="entrance-slide"
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={footerColumns}
/>
</div>
</ThemeProvider>
);
}

37
src/app/layout.tsx
View File

@@ -7,33 +7,52 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
variable: "--font-halant",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
variable: "--font-inter",
subsets: ["latin"],
});
const lato = Lato({
variable: "--font-lato", subsets: ["latin"],
variable: "--font-lato",
subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
});
export const metadata: Metadata = {
title: "AutoArchive - Complete Car Database & Automotive Encyclopedia", description: "Search and explore every car ever made from 1886 to present. Access 2000+ manufacturers, 50,000+ models, technical specs, and automotive history.", keywords: "car database, automotive encyclopedia, vehicle search, car specifications, manufacturer database, automotive history, vintage cars, modern vehicles", robots: {
title: "AutoArchive - Complete Car Database & Automotive Encyclopedia",
description: "Search and explore every car ever made from 1886 to present. Access 2000+ manufacturers, 50,000+ models, technical specs, and automotive history.",
keywords: "car database, automotive encyclopedia, vehicle search, car specifications, manufacturer database, automotive history, vintage cars, modern vehicles",
robots: {
index: true,
follow: true,
},
metadataBase: new URL("https://autoarchive.example.com"),
alternates: {
canonical: "https://autoarchive.example.com",
},
openGraph: {
title: "AutoArchive - The World's Most Complete Car Database", description: "Explore every car ever made. Search across 2000+ manufacturers and 50,000+ models. The ultimate automotive encyclopedia.", url: "https://autoarchive.example.com", siteName: "AutoArchive", type: "website", images: [
title: "AutoArchive - The World's Most Complete Car Database",
description: "Explore every car ever made. Search across 2000+ manufacturers and 50,000+ models. The ultimate automotive encyclopedia.",
url: "https://autoarchive.example.com",
siteName: "AutoArchive",
type: "website",
images: [
{
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822288768-9f4c08c9.png", alt: "AutoArchive Database Interface"},
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822811540-4e4a72cf.png",
alt: "AutoArchive Database Interface",
},
],
},
twitter: {
card: "summary_large_image", title: "AutoArchive - Complete Car Database", description: "Search 50,000+ cars from 1886 to today. The world's most comprehensive automotive encyclopedia.", images: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822288768-9f4c08c9.png"],
card: "summary_large_image",
title: "AutoArchive - Complete Car Database",
description: "Search 50,000+ cars from 1886 to today. The world's most comprehensive automotive encyclopedia.",
images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822811540-4e4a72cf.png"],
},
};
@@ -1421,4 +1440,4 @@ export default function RootLayout({
</ServiceWrapper>
</html>
);
}
}

467
src/app/page.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import Link from "next/link";
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";
@@ -12,27 +13,61 @@ 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 { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
Car,
Zap,
Award,
Sparkles,
Zap,
Building2,
History,
Globe,
Mail,
} from "lucide-react";
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
export default function HomePage() {
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/" },
{ label: "Browse Vehicles", href: "/search" },
{ label: "Compare Cars", href: "/" },
{ 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"
@@ -46,7 +81,6 @@ export default function HomePage() {
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
@@ -56,7 +90,6 @@ export default function HomePage() {
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Explore Every Car Ever Made"
@@ -65,45 +98,64 @@ export default function HomePage() {
tagIcon={Car}
tagAnimation="entrance-slide"
background={{ variant: "aurora" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822288768-9f4c08c9.png?_wi=1"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822811540-4e4a72cf.png?_wi=1"
imageAlt="AutoArchive Database Interface"
mediaAnimation="entrance-slide"
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,
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-1772822285095-bb948168.png?_wi=1"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772822810399-93ee89fd.png",
},
{
name: "Automotive Designer", handle: "Classic Car Enthusiast", testimonial:
"Perfect for researching design evolution and model lineages across decades.", rating: 5,
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-1772822286059-ee5cdd9e.png?_wi=1"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-creative-automotive-design-1772822810986-b9656c85.png",
},
{
name: "Car Collector", handle: "Vintage Vehicle Curator", testimonial:
"An invaluable resource for understanding specifications and production years.", rating: 5,
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-1772822286624-2443dfd3.png?_wi=1"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-passionate-car-collector-r-1772822811237-f39a61e1.png",
},
{
name: "Automotive Journalist", handle: "Car Magazine Editor", testimonial:
"Research has never been easier. Every fact, spec, and timeline at my fingertips.", rating: 5,
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-1772822285436-0b2f1c7a.png?_wi=1"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-an-automotive-journalist-con-1772822810052-23d053f0.png",
},
]}
testimonialRotationInterval={5000}
buttons={[
{
text: "Start Searching", href: "/search"},
text: "Start Searching",
href: "/search",
},
{
text: "Browse Database", href: "/browse"},
text: "Browse Database",
href: "/search",
},
]}
buttonAnimation="entrance-slide"
useInvertedBackground={false}
/>
</div>
{/* Popular Brands Section */}
<div id="popular-brands" data-section="popular-brands">
<SocialProofOne
title="Trusted by Automotive Enthusiasts Worldwide"
@@ -113,13 +165,22 @@ export default function HomePage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Ferrari", "Porsche", "BMW", "Mercedes-Benz", "Lamborghini", "Bugatti", "Rolls-Royce", "Aston Martin", "McLaren", "Tesla"]}
"Ferrari",
"Porsche",
"BMW",
"Mercedes-Benz",
"Lamborghini",
"Bugatti",
"Rolls-Royce",
"Aston Martin",
"McLaren",
"Tesla",
]}
speed={40}
showCard={true}
/>
</div>
{/* Featured Vehicles Section */}
<div id="featured-vehicles" data-section="featured-vehicles">
<ProductCardTwo
title="Featured Legendary Vehicles"
@@ -132,26 +193,53 @@ export default function HomePage() {
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-1772822285742-e8dc47a2.png?_wi=1", imageAlt: "Ferrari 250 GTO 1962"},
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-1772822809535-01fc3104.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-1772822287193-13598369.png?_wi=1", imageAlt: "Porsche 911 Classic"},
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-1772822809876-b85e4815.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-1772822289338-c1148bd5.png?_wi=1", imageAlt: "Jaguar E-Type"},
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-1772822809686-0047bcde.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-1772822286237-c4841f31.png?_wi=1", imageAlt: "BMW 2002"},
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-1772822810433-4b858ff4.png?_wi=1",
imageAlt: "BMW 2002",
},
]}
/>
</div>
{/* Browse by Decade Section */}
<div id="browse-decade" data-section="browse-decade">
<FeatureCardTwentyFive
title="Browse by Era"
@@ -163,58 +251,81 @@ export default function HomePage() {
useInvertedBackground={false}
features={[
{
title: "The Golden Age (1900-1920s)", description:
"Early automobiles, pioneering manufacturers, and the birth of motoring", icon: Zap,
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-1772822286476-d61a3e64.png?_wi=1", imageAlt: "Early 1900s vehicles"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/early-1900s-automobiles-brass-and-iron-c-1772822811139-e2a9ad4c.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-1772822293005-1cbf4ff3.png?_wi=1", imageAlt: "Classic automobiles vintage"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772822811325-6926f29c.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,
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--1772822286024-e1dc7635.png?_wi=1", imageAlt: "1930s-1950s classic cars"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1930s-1950s-classic-cars-showcasing-art--1772822810917-8aeeebe9.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--1772822286457-0e881f41.png?_wi=1", imageAlt: "Post-war automobile design"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772822811278-10e2ad8c.png?_wi=1",
imageAlt: "Post-war automobile design",
},
],
},
{
title: "The Modern Era (1960-1980s)", description:
"Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
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-1772822286810-370ce4b1.png?_wi=1", imageAlt: "1960s muscle cars"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772822811207-68338969.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-1772822286873-ee7a955b.png?_wi=1", imageAlt: "1980s performance vehicles"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772822813669-81cfe9e5.png?_wi=1",
imageAlt: "1980s performance vehicles",
},
],
},
{
title: "Contemporary (1990-2024)", description:
"Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
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-1772822286503-447f2efc.png?_wi=1", imageAlt: "1990s modern cars"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772822811193-c06d80bb.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-1772822286684-dc1b4ba4.png?_wi=1", imageAlt: "Electric and autonomous vehicles"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772822810626-e40aa002.png?_wi=1",
imageAlt: "Electric and autonomous vehicles",
},
],
},
]}
/>
</div>
{/* Legendary Cars Section */}
<div id="legendary-cars" data-section="legendary-cars">
<BlogCardThree
title="Legendary Automotive Stories"
@@ -227,37 +338,83 @@ export default function HomePage() {
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-1772822286258-a302627b.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-1772822284910-5b6c871f.png", date: "Featured Article"},
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-1772822811155-b601880f.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-1772822809397-e1e423ca.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-1772822286974-b10966de.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-1772822285792-d6b4c566.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-1772822811063-1540338a.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-1772822809462-2fc3774c.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-1772822286724-1e7db4be.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-1772822285410-3dd17ea4.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-1772822811047-cffdec2a.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-1772822809302-18dcc6eb.png",
date: "Featured Article",
},
{
id: "4", category: "Engineering", title: "BMW 2002: The Birth of the Sports Sedan", excerpt:
"How a small car changed everything about performance motoring", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/bmw-2002-sports-sedan-representing-the-b-1772822285486-34acc01f.png?_wi=1", imageAlt: "BMW 2002 Legacy", authorName: "Technical Expert", authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772822287665-d3561dc3.png", date: "Featured Article"},
id: "4",
category: "Engineering",
title: "BMW 2002: The Birth of the Sports Sedan",
excerpt:
"How a small car changed everything about performance motoring",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/bmw-2002-sports-sedan-representing-the-b-1772822810651-2610478e.png",
imageAlt: "BMW 2002 Legacy",
authorName: "Technical Expert",
authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772822810279-b1b97dc0.png",
date: "Featured Article",
},
{
id: "5", category: "Modern Era", title: "Tesla Model S: The Electric Revolution", excerpt: "How one car reshaped the entire automotive industry", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/tesla-model-s-or-modern-tesla-electric-v-1772822285622-e5b7ca84.png?_wi=1", imageAlt: "Tesla Model S Modern", authorName: "Tech Analyst", authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822285137-c3b4409c.png", date: "Featured Article"},
id: "5",
category: "Modern Era",
title: "Tesla Model S: The Electric Revolution",
excerpt:
"How one car reshaped the entire automotive industry",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/tesla-model-s-or-modern-tesla-electric-v-1772822811114-76af15f7.png",
imageAlt: "Tesla Model S Modern",
authorName: "Tech Analyst",
authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772822809954-4e02b0d3.png",
date: "Featured Article",
},
]}
/>
</div>
{/* Metrics Section */}
<div id="metrics" data-section="metrics">
<MetricCardThree
title="AutoArchive by the Numbers"
description="Trusted by automotive enthusiasts, historians, and professionals worldwide. The world's most comprehensive automotive database at your fingertips"
description="The world's most comprehensive automotive database at your fingertips"
tag="Database Statistics"
tagAnimation="entrance-slide"
textboxLayout="default"
@@ -265,40 +422,57 @@ export default function HomePage() {
animationType="scale-rotate"
metrics={[
{
id: "1", icon: Building2,
title: "Manufacturers", value: "2,000+"},
id: "1",
icon: Building2,
title: "Manufacturers",
value: "2,000+",
},
{
id: "2", icon: Car,
title: "Vehicle Models", value: "50,000+"},
id: "2",
icon: Car,
title: "Vehicle Models",
value: "50,000+",
},
{
id: "3", icon: History,
title: "Years Covered", value: "138 Years"},
id: "3",
icon: History,
title: "Years Covered",
value: "138 Years",
},
{
id: "4", icon: Globe,
title: "Countries", value: "195"},
id: "4",
icon: Globe,
title: "Countries",
value: "195",
},
]}
/>
</div>
{/* About Section */}
<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."]}
"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: "Explore Database",
href: "/search",
},
{
text: "Browse Collections", href: "/browse"},
text: "Browse Collections",
href: "/search",
},
]}
buttonAnimation="entrance-slide"
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
@@ -309,33 +483,50 @@ export default function HomePage() {
useInvertedBackground={false}
mediaAnimation="entrance-slide"
faqsAnimation="entrance-slide"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-customer-support-and-help-resourc-1772822286171-0bc7944b.png"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-customer-support-and-help-resourc-1772822810374-3a2ab2be.png"
imageAlt="AutoArchive Support Resources"
mediaPosition="left"
faqs={[
{
id: "1", title: "What years does AutoArchive cover?", content:
"AutoArchive covers automotive history from 1886 (the earliest automobiles) to the present day (2024). We continuously update our database with new models and generations as they are released."},
id: "1",
title: "What years does AutoArchive cover?",
content:
"AutoArchive covers automotive history from 1886 (the earliest automobiles) to the present day (2024). We continuously update our database with new models and generations as they are released.",
},
{
id: "2", title: "How many manufacturers are included in the database?", content:
"We currently feature over 2,000 manufacturers worldwide, including both current and historical brands. This includes major global manufacturers as well as regional and boutique automakers throughout history."},
id: "2",
title: "How many manufacturers are included in the database?",
content:
"We currently feature over 2,000 manufacturers worldwide, including both current and historical brands. This includes major global manufacturers as well as regional and boutique automakers throughout history.",
},
{
id: "3", title: "Can I search by specific criteria?", content:
"Yes! You can search and filter by brand, model, year, country of origin, engine type, body style, horsepower range, production years, drivetrain, and more. Our advanced search engine includes autocomplete suggestions for quick discovery."},
id: "3",
title: "Can I search by specific criteria?",
content:
"Yes! You can search and filter by brand, model, year, country of origin, engine type, body style, horsepower range, production years, drivetrain, and more. Our advanced search engine includes autocomplete suggestions for quick discovery.",
},
{
id: "4", title: "How do I compare vehicles?", content:
"Use our Compare Tool to select up to 4 vehicles and view their specifications side-by-side. Compare engine options, performance metrics, transmission options, body styles, and other key specifications."},
id: "4",
title: "How do I compare vehicles?",
content:
"Use our Compare Tool to select up to 4 vehicles and view their specifications side-by-side. Compare engine options, performance metrics, transmission options, body styles, and other key specifications.",
},
{
id: "5", title: "Is there pricing information available?", content:
"AutoArchive focuses on technical specifications, production data, and historical information. We do not provide pricing information, which varies greatly by condition, market, and time period. Our goal is to be the definitive technical resource."},
id: "5",
title: "Is there pricing information available?",
content:
"AutoArchive focuses on technical specifications, production data, and historical information. We do not provide pricing information, which varies greatly by condition, market, and time period. Our goal is to be the definitive technical resource.",
},
{
id: "6", title: "Can I view individual car specifications?", content:
"Absolutely. Each vehicle has its own dedicated detail page featuring high-quality images, technical specifications, production years, engine options, performance data, transmission options, body styles, historical notes, and information about successor/predecessor models."},
id: "6",
title: "Can I view individual car specifications?",
content:
"Absolutely. Each vehicle has its own dedicated detail page featuring high-quality images, technical specifications, production years, engine options, performance data, transmission options, body styles, historical notes, and information about successor/predecessor models.",
},
]}
/>
</div>
{/* CTA Section */}
<div id="cta" data-section="cta">
<ContactCTA
tag="Start Exploring"
@@ -345,9 +536,13 @@ export default function HomePage() {
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: "Begin Your Search",
href: "/search",
},
{
text: "Browse All Brands", href: "/browse"},
text: "Browse All Brands",
href: "/search",
},
]}
buttonAnimation="entrance-slide"
background={{ variant: "aurora" }}
@@ -355,62 +550,12 @@ export default function HomePage() {
/>
</div>
{/* Footer */}
<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: "/about"},
{
label: "Help & Support", href: "/help"},
{
label: "Contact", href: "/contact"},
{
label: "Contribute Data", href: "/contribute"},
],
},
{
items: [
{
label: "Privacy Policy", href: "/privacy"},
{
label: "Terms of Service", href: "/terms"},
{
label: "Data Attribution", href: "/attribution"},
{
label: "Sitemap", href: "/sitemap"},
],
},
]}
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}
}

175
src/app/search/page.tsx Normal file
View File

@@ -0,0 +1,175 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
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 { Zap, Search } from "lucide-react";
export default function SearchPage() {
const navItems = [
{ name: "Search", id: "search" },
{ name: "Browse", id: "browse" },
{ name: "Compare", id: "compare" },
{ name: "Timeline", id: "timeline" },
{ name: "About", id: "about" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/" },
{ label: "Browse Vehicles", href: "/search" },
{ label: "Compare Cars", href: "/" },
{ 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"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</div>
<div id="search-intro" data-section="search-intro">
<TextSplitAbout
title="Search Our Complete Database"
description={[
"Use our powerful search engine to explore over 50,000 vehicle models from across the entire history of automobiles. Filter by brand, year, specifications, and more.",
"Whether you're looking for a specific model, exploring a brand's history, or discovering vehicles by era, our advanced search tools make it easy to find exactly what you're looking for.",
"Every vehicle in our database includes detailed specifications, production timelines, engine options, performance data, and historical information to give you complete automotive knowledge.",
]}
showBorder={false}
useInvertedBackground={false}
buttons={[
{
text: "Back to Home",
href: "/",
},
{
text: "Browse by Brand",
href: "/search",
},
]}
buttonAnimation="entrance-slide"
/>
</div>
<div id="search-help" data-section="search-help">
<FaqSplitMedia
title="How to Search AutoArchive"
description="Learn how to use our search filters and tools to find vehicles quickly and efficiently"
tag="Search Tips"
tagAnimation="entrance-slide"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="entrance-slide"
faqsAnimation="entrance-slide"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772822811540-4e4a72cf.png?_wi=2"
imageAlt="AutoArchive Search Interface"
mediaPosition="right"
faqs={[
{
id: "1",
title: "How do I search by brand and model?",
content:
"Use the brand filter to select a manufacturer, then choose from available models. Each model shows all generations and variants with their production years and specifications.",
},
{
id: "2",
title: "Can I search by year or era?",
content:
"Yes, you can filter vehicles by production year or select entire eras (Golden Age 1900-1920s, Classics 1930-1950s, etc.). This makes it easy to explore vehicles from specific time periods.",
},
{
id: "3",
title: "What search filters are available?",
content:
"You can filter by brand, model, year, country of origin, engine type, body style, horsepower range, drivetrain, transmission type, and more. Combine multiple filters for precise results.",
},
{
id: "4",
title: "How do I find specifications?",
content:
"Click on any vehicle to view its dedicated detail page featuring complete technical specifications, engine options, performance metrics, production data, and historical information.",
},
]}
/>
</div>
<div id="search-cta" data-section="search-cta">
<ContactCTA
tag="Ready to Search?"
tagIcon={Search}
tagAnimation="entrance-slide"
title="Start Exploring the Database"
description="Access our complete automotive encyclopedia. Search through 2,000+ manufacturers and 50,000+ models. Find specifications, compare vehicles, and discover automotive history."
buttons={[
{
text: "Go to Search",
href: "/search",
},
{
text: "Return to Home",
href: "/",
},
]}
buttonAnimation="entrance-slide"
background={{ variant: "aurora" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}