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

Compare commits

base: bender:version_3
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_1 bender:version_2
..
compare: bender:version_1
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_1 bender:version_2

7 Commits
version_3 ... version_1

Author SHA1 Message Date
bender
00d663f166 Update src/app/cars/[slug]/page.tsx 2026-03-06 19:08:06 +00:00
bender
48f271b34f Update src/app/brands/[slug]/page.tsx 2026-03-06 19:08:06 +00:00
bender
761ae2ea9c Update src/app/cars/[slug]/page.tsx 2026-03-06 19:06:55 +00:00
bender
49b424c3f1 Update src/app/brands/[slug]/page.tsx 2026-03-06 19:06:54 +00:00
bender
4df5c8fead Update src/app/page.tsx 2026-03-06 19:03:21 +00:00
bender
a17d7d683b Update src/app/compare/page.tsx 2026-03-06 19:03:20 +00:00
bender
fa5ff56fa5 Update src/app/browse/page.tsx 2026-03-06 19:03:20 +00:00
6 changed files with 2714 additions and 110 deletions
Expand all files Collapse all files

313
src/app/brands/[slug]/page.tsx
View File

@@ -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>
);
}

158
src/app/browse/page.tsx
View File

@@ -1,9 +1,159 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Zap, Award, Sparkles, Car } from "lucide-react";
export default function BrowsePage() {
const navItems = [
{ name: "Search", id: "/" },
{ name: "Browse", id: "/browse" },
{ name: "Compare", id: "/compare" },
{ name: "Timeline", id: "/" },
{ name: "About", id: "/" },
];
const footerColumns = [
{
items: [
{ label: "Search Database", href: "/" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/" },
],
},
{
items: [
{ label: "Brand Directory", href: "/" },
{ label: "Model Guide", href: "/" },
{ label: "Specifications", href: "/" },
{ label: "Production Data", href: "/" },
],
},
{
items: [
{ label: "About Us", href: "/" },
{ label: "Help & Support", href: "/" },
{ label: "Contact", href: "/" },
{ label: "Contribute Data", href: "/" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
{ label: "Data Attribution", href: "/" },
{ label: "Sitemap", href: "/" },
],
},
];
return (
<div>
<h1>Browse Page</h1>
</div>
<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="browse-decade" data-section="browse-decade">
<FeatureCardTwentyFive
title="Browse by Era"
description="Explore vehicles organized by historical decade with complete production timelines"
tag="Timeline Explorer"
tagAnimation="blur-reveal"
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "The Golden Age (1900-1920s)", description: "Early automobiles, pioneering manufacturers, and the birth of motoring", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/early-1900s-automobiles-brass-and-iron-c-1772823291918-1a562875.png", imageAlt: "Early 1900s vehicles"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png", imageAlt: "Classic automobiles vintage"},
],
},
{
title: "The Classics Era (1930-1950s)", description: "Art deco styling, post-war innovation, and the golden age of design", icon: Award,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1930s-1950s-classic-cars-showcasing-art--1772823292276-01b2e0ec.png", imageAlt: "1930s-1950s classic cars"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png", imageAlt: "Post-war automobile design"},
],
},
{
title: "The Modern Era (1960-1980s)", description: "Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png", imageAlt: "1960s muscle cars"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png", imageAlt: "1980s performance vehicles"},
],
},
{
title: "Contemporary (1990-2024)", description: "Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png", imageAlt: "1990s modern cars"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png", imageAlt: "Electric and autonomous vehicles"},
],
},
]}
/>
</div>
<div id="featured-vehicles" data-section="featured-vehicles">
<ProductCardTwo
title="Featured Legendary Vehicles"
description="Iconic cars that shaped automotive history"
tag="Heritage Collection"
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
products={[
{
id: "1", brand: "Ferrari", name: "Ferrari 250 GTO", price: "1962-1964", rating: 5,
reviewCount: "Legendary", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-pristine-ferrari-250-gto-from-1962-196-1772823293817-62111fec.png", imageAlt: "Ferrari 250 GTO 1962"},
{
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", rating: 5,
reviewCount: "Iconic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772823291321-59c5e153.png", imageAlt: "Porsche 911 Classic"},
{
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", rating: 5,
reviewCount: "Historic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772823292102-305f7185.png", imageAlt: "Jaguar E-Type"},
{
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
reviewCount: "Classic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772823292733-3909ad83.png", imageAlt: "BMW 2002"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis logoText="AutoArchive" columns={footerColumns} />
</div>
</ThemeProvider>
);
}
}

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

@@ -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>
);
}

182
src/app/compare/page.tsx
View File

@@ -2,14 +2,56 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
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 { Car, Zap } from "lucide-react";
import { Building2, Car, History, Globe } from "lucide-react";
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"
@@ -25,123 +67,63 @@ export default function ComparePage() {
>
<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" },
]}
navItems={navItems}
brandName="AutoArchive"
bottomLeftText="Explore Automotive History"
bottomRightText="1886 to Present"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Compare Vehicles Side by Side"
description="Select up to 4 vehicles and compare their specifications, performance, and features in detail."
tag="Comparison Tool"
tagIcon={Car}
tagAnimation="slide-up"
background={{ variant: "plain" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772823292340-23f02fb5.png"
imageAlt="Compare Vehicles"
mediaAnimation="slide-up"
imagePosition="right"
testimonials={[
{
name: "Buyer", handle: "Comparison User", testimonial: "The comparison tool makes it easy to see differences between vehicles at a glance.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png"},
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "Start Comparing", href: "/compare" },
{ text: "Browse Vehicles", href: "/browse" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="featured-vehicles" data-section="featured-vehicles">
<ProductCardTwo
title="Popular Comparisons"
description="Commonly compared vehicles in our database"
tag="Featured"
tagAnimation="slide-up"
<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="blur-reveal"
gridVariant="four-items-2x2-equal-grid"
products={[
animationType="scale-rotate"
metrics={[
{
id: "1", brand: "Ferrari", name: "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"},
id: "1", icon: Building2,
title: "Manufacturers", value: "2,000+"},
{
id: "2", brand: "Porsche", name: "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"},
id: "2", icon: Car,
title: "Vehicle Models", value: "50,000+"},
{
id: "3", brand: "Jaguar", name: "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: "3", icon: History,
title: "Years Covered", value: "138 Years"},
{
id: "4", brand: "BMW", name: "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"},
id: "4", icon: Globe,
title: "Countries", value: "195"},
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Get Started"
tagIcon={Zap}
tagAnimation="slide-up"
title="Ready to Compare?"
description="Browse our database and select vehicles to compare. View detailed specifications and make informed decisions."
buttons={[
{ text: "Browse Vehicles", href: "/browse" },
{ text: "View All Brands", href: "/brands" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "plain" }}
<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={[
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
],
},
{
items: [
{ label: "About Us", href: "/" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Sitemap", href: "/sitemap" },
],
},
]}
/>
<FooterLogoEmphasis logoText="AutoArchive" columns={footerColumns} />
</div>
</ThemeProvider>
);
}
}

1441
src/app/layout.tsx
View File

File diff suppressed because it is too large Load Diff

386
src/app/page.tsx
View File

@@ -0,0 +1,386 @@
"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 HomePage() {
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="aurora"
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"
imageAlt="AutoArchive Database Interface"
mediaAnimation="blur-reveal"
imagePosition="right"
testimonials={[
{
name: "Racing Historian", handle: "Classic Car Enthusiast", testimonial:
"The most comprehensive car database I've ever seen. Finally, one place for all automotive history.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-knowledgeable-automotive-h-1772823290619-648d0b48.png"},
{
name: "Automotive Designer", handle: "Classic Car Enthusiast", testimonial:
"Perfect for researching design evolution and model lineages across decades.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-creative-automotive-design-1772823292200-f0afd2ae.png"},
{
name: "Car Collector", handle: "Vintage Vehicle Curator", testimonial:
"An invaluable resource for understanding specifications and production years.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-a-passionate-car-collector-r-1772823290895-3d866aea.png"},
{
name: "Automotive Journalist", handle: "Car Magazine Editor", testimonial:
"Research has never been easier. Every fact, spec, and timeline at my fingertips.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/portrait-of-an-automotive-journalist-con-1772823290598-44ed854b.png"},
]}
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", imageAlt: "Ferrari 250 GTO 1962"},
{
id: "2", brand: "Porsche", name: "Porsche 911", price: "1963-Present", rating: 5,
reviewCount: "Iconic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-timeless-porsche-911-silver-or-charcoa-1772823291321-59c5e153.png", imageAlt: "Porsche 911 Classic"},
{
id: "3", brand: "Jaguar", name: "Jaguar E-Type", price: "1961-1974", rating: 5,
reviewCount: "Historic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-beautiful-jaguar-e-type-from-1961-1974-1772823292102-305f7185.png", imageAlt: "Jaguar E-Type"},
{
id: "4", brand: "BMW", name: "BMW 2002", price: "1968-1976", rating: 5,
reviewCount: "Classic", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-classic-bmw-2002-from-1968-1976-bright-1772823292733-3909ad83.png", imageAlt: "BMW 2002"},
]}
/>
</div>
<div id="browse-decade" data-section="browse-decade">
<FeatureCardTwentyFive
title="Browse by Era"
description="Explore vehicles organized by historical decade with complete production timelines"
tag="Timeline Explorer"
tagAnimation="blur-reveal"
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "The Golden Age (1900-1920s)", description:
"Early automobiles, pioneering manufacturers, and the birth of motoring", icon: Zap,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/early-1900s-automobiles-brass-and-iron-c-1772823291918-1a562875.png", imageAlt: "Early 1900s vehicles"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/collection-of-classic-automobiles-from-1-1772823292369-d23ee272.png", imageAlt: "Classic automobiles vintage"},
],
},
{
title: "The Classics Era (1930-1950s)", description:
"Art deco styling, post-war innovation, and the golden age of design", icon: Award,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1930s-1950s-classic-cars-showcasing-art--1772823292276-01b2e0ec.png", imageAlt: "1930s-1950s classic cars"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/post-world-war-ii-automobiles-from-1945--1772823292672-0ffd3a1d.png", imageAlt: "Post-war automobile design"},
],
},
{
title: "The Modern Era (1960-1980s)", description:
"Performance revolution, muscle cars, and engineering breakthroughs", icon: Sparkles,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1960s-muscle-cars-and-performance-vehicl-1772823292410-79b6e429.png", imageAlt: "1960s muscle cars"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1980s-performance-vehicles-and-supercars-1772823291859-2f85f5af.png", imageAlt: "1980s performance vehicles"},
],
},
{
title: "Contemporary (1990-2024)", description:
"Digital age, electric vehicles, autonomous technology, and modern innovation", icon: Zap,
mediaItems: [
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/1990s-modern-cars-featuring-sleek-sports-1772823291648-3191a1df.png", imageAlt: "1990s modern cars"},
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-2020s-electric-and-autonomous-veh-1772823292629-c57b318c.png", imageAlt: "Electric and autonomous vehicles"},
],
},
]}
/>
</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"},
{
id: "4", category: "Engineering", title: "BMW 2002: The Birth of the Sports Sedan", excerpt: "How a small car changed everything about performance motoring", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/bmw-2002-sports-sedan-representing-the-b-1772823292072-11f22c8a.png", imageAlt: "BMW 2002 Legacy", authorName: "Technical Expert", authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-a-tech-1772823290751-a93bf9d8.png", date: "Featured Article"},
{
id: "5", category: "Modern Era", title: "Tesla Model S: The Electric Revolution", excerpt: "How one car reshaped the entire automotive industry", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/tesla-model-s-or-modern-tesla-electric-v-1772823291685-64082b06.png", imageAlt: "Tesla Model S Modern", authorName: "Tech Analyst", authorAvatar:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292611-51911370.png", date: "Featured Article"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="AutoArchive by the Numbers"
description="The world's most comprehensive automotive database at your fingertips"
tag="Database Statistics"
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
metrics={[
{
id: "1", icon: Building2,
title: "Manufacturers", value: "2,000+"},
{
id: "2", icon: Car,
title: "Vehicle Models", value: "50,000+"},
{
id: "3", icon: History,
title: "Years Covered", value: "138 Years"},
{
id: "4", icon: Globe,
title: "Countries", value: "195"},
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About AutoArchive"
description={[
"AutoArchive is the world's most comprehensive online car encyclopedia and search engine. Our mission is to preserve and share automotive history, from the earliest automobiles of 1886 to the latest models of today.", "We've compiled extensive data on every major manufacturer, model generation, variant, and specification. Whether you're a collector, historian, designer, or enthusiast, AutoArchive provides the definitive source for automotive knowledge.", "Our database spans 138 years of automotive innovation, featuring technical specifications, performance metrics, production years, engine options, transmission data, and historical context for vehicles from around the world."]}
showBorder={true}
useInvertedBackground={false}
buttons={[
{ text: "Explore Database", href: "/search" },
{ text: "Browse Collections", href: "/browse" },
]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about AutoArchive and our automotive database"
tag="Help & Support"
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
faqsAnimation="blur-reveal"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/modern-customer-support-and-help-resourc-1772823291668-afcab7fc.png"
imageAlt="AutoArchive Support Resources"
mediaPosition="left"
faqs={[
{
id: "1", title: "What years does AutoArchive cover?", content:
"AutoArchive covers automotive history from 1886 (the earliest automobiles) to the present day (2024). We continuously update our database with new models and generations as they are released."},
{
id: "2", title: "How many manufacturers are included in the database?", content:
"We currently feature over 2,000 manufacturers worldwide, including both current and historical brands. This includes major global manufacturers as well as regional and boutique automakers throughout history."},
{
id: "3", title: "Can I search by specific criteria?", content:
"Yes! You can search and filter by brand, model, year, country of origin, engine type, body style, horsepower range, production years, drivetrain, and more. Our advanced search engine includes autocomplete suggestions for quick discovery."},
{
id: "4", title: "How do I compare vehicles?", content:
"Use our Compare Tool to select up to 4 vehicles and view their specifications side-by-side. Compare engine options, performance metrics, transmission options, body styles, and other key specifications."},
{
id: "5", title: "Is there pricing information available?", content:
"AutoArchive focuses on technical specifications, production data, and historical information. We do not provide pricing information, which varies greatly by condition, market, and time period. Our goal is to be the definitive technical resource."},
{
id: "6", title: "Can I view individual car specifications?", content:
"Absolutely. Each vehicle has its own dedicated detail page featuring high-quality images, technical specifications, production years, engine options, performance data, transmission options, body styles, historical notes, and information about successor/predecessor models."},
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Start Exploring"
tagIcon={Zap}
tagAnimation="blur-reveal"
title="Ready to Discover Automotive History?"
description="Join thousands of enthusiasts, collectors, historians, and professionals using AutoArchive. Search millions of vehicles, compare specifications, and explore the complete history of automobiles."
buttons={[
{ text: "Begin Your Search", href: "/search" },
{ text: "Browse All Brands", href: "/browse" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="AutoArchive"
columns={[
{
items: [
{ label: "Search Database", href: "/search" },
{ label: "Browse Vehicles", href: "/browse" },
{ label: "Compare Cars", href: "/compare" },
{ label: "Timeline Explorer", href: "/timeline" },
],
},
{
items: [
{ label: "Brand Directory", href: "/brands" },
{ label: "Model Guide", href: "/models" },
{ label: "Specifications", href: "/specs" },
{ label: "Production Data", href: "/production" },
],
},
{
items: [
{ label: "About Us", href: "/" },
{ label: "Help & Support", href: "/help" },
{ label: "Contact", href: "/contact" },
{ label: "Contribute Data", href: "/contribute" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Data Attribution", href: "/attribution" },
{ label: "Sitemap", href: "/sitemap" },
],
},
]}
/>
</div>
</ThemeProvider>
);
}