Update src/app/layout.tsx

Merge version_1 into main

next.config.js

@@ -0,0 +1,72 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'webuild-dev.s3.eu-north-1.amazonaws.com',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: '*.cloudinary.com',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        pathname: '/**',
+      },
+    ],
+    unoptimized: false,
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [320, 420, 640, 768, 1024, 1280, 1536],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+  compress: true,
+  swcMinify: true,
+  reactStrictMode: true,
+  poweredByHeader: false,
+  productionBrowserSourceMaps: false,
+  experimental: {
+    optimizePackageImports: [
+      '@radix-ui/react-dialog',
+      '@radix-ui/react-dropdown-menu',
+      '@radix-ui/react-slider',
+      'lucide-react',
+    ],
+  },
+  headers: async () => [
+    {
+      source: '/:path*',
+      headers: [
+        {
+          key: 'X-DNS-Prefetch-Control',
+          value: 'on',
+        },
+        {
+          key: 'X-Frame-Options',
+          value: 'SAMEORIGIN',
+        },
+        {
+          key: 'X-Content-Type-Options',
+          value: 'nosniff',
+        },
+        {
+          key: 'X-XSS-Protection',
+          value: '1; mode=block',
+        },
+        {
+          key: 'Referrer-Policy',
+          value: 'strict-origin-when-cross-origin',
+        },
+        {
+          key: 'Permissions-Policy',
+          value: 'geolocation=(), microphone=(), camera=()',
+        },
+      ],
+    },
+  ],
+};
+
+module.exports = nextConfig;

src/app/about/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+
+const AboutPage = () => {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav" />
+      <div id="about-hero" data-section="about-hero">
+        <MediaAbout
+          title="Elevate Your Experience"
+          description="Discover a new way to connect, create, and inspire with our innovative solutions."
+          tag="About Us"
+          imageSrc="/about-hero.jpg"
+          imageAlt="Our team in action"
+          buttons={[{ text: "Shop Now", href: "/shop" }]}
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="features" data-section="features" />
+      <div id="testimonials" data-section="testimonials" />
+      <div id="contact" data-section="contact" />
+      <div id="footer" data-section="footer" />
+    </ThemeProvider>
+  );
+};
+
+export default AboutPage;

src/app/brands/[brand]/page.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { MapPin, Award, Users, TrendingUp } from "lucide-react";
+
+interface BrandModel {
+  id: string;
+  name: string;
+  year: string;
+  price: string;
+  image: string;
+}
+
+interface BrandInfo {
+  name: string;
+  founded: string;
+  headquarters: string;
+  description: string;
+  history: string;
+  stats: {
+    yearsInBusiness: string;
+    vehiclesSold: string;
+    countries: string;
+    awards: string;
+  };
+  models: BrandModel[];
+}
+
+const mockBrandData: { [key: string]: BrandInfo } = {
+  tesla: {
+    name: "Tesla",    founded: "2003",    headquarters: "Palo Alto, California",    description: "Leading electric vehicle manufacturer revolutionizing sustainable transportation.",    history:
+      "Tesla was founded in 2003 by Martin Eberhard and Marc Tarpenning. Named after inventor Nikola Tesla, the company was established to prove that electric vehicles can be both high-performance and desirable. In 2004, Elon Musk joined as chairman and led Series A funding. Tesla has since become the world's most valuable automaker, pioneering the mass production of electric vehicles and accelerating the global transition to sustainable energy.",    stats: {
+      yearsInBusiness: "21+",      vehiclesSold: "3.5M+",      countries: "100+",      awards: "150+"},
+    models: [
+      { id: "1", name: "Model S", year: "2024", price: "$89,990", image: "https://images.unsplash.com/photo-1560958089-b8a63dd8b50b?w=600" },
+      { id: "2", name: "Model 3", year: "2024", price: "$43,990", image: "https://images.unsplash.com/photo-1516814050195-3a03d82e059d?w=600" },
+      { id: "3", name: "Model X", year: "2024", price: "$104,990", image: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=600" },
+      { id: "4", name: "Model Y", year: "2024", price: "$52,990", image: "https://images.unsplash.com/photo-1560958089-fcbb3cce6c55?w=600" },
+    ],
+  },
+  bmw: {
+    name: "BMW",    founded: "1916",    headquarters: "Munich, Germany",    description: "Premium German automaker known for innovative design and performance.",    history:
+      "BMW (Bayerische Motoren Werke AG) was founded in 1916 as an aircraft engine manufacturer. The company transitioned to automobile production in 1929, establishing itself as a leader in luxury vehicles. BMW is renowned for its engineering excellence, innovative technology, and the iconic 'Ultimate Driving Machine' philosophy. Today, BMW stands as one of the world's leading premium automakers with a global presence.",    stats: {
+      yearsInBusiness: "108+",      vehiclesSold: "2.5M+",      countries: "140+",      awards: "200+"},
+    models: [
+      { id: "1", name: "M440i xDrive", year: "2024", price: "$67,500", image: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=600" },
+      { id: "2", name: "X5 M", year: "2024", price: "$115,900", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600" },
+      { id: "3", name: "i7", year: "2024", price: "$99,650", image: "https://images.unsplash.com/photo-1533473359331-35b3c3f0f038?w=600" },
+      { id: "4", name: "Z4 M440i", year: "2024", price: "$79,500", image: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=600" },
+    ],
+  },
+};
+
+export default function BrandPage() {
+  const params = useParams();
+  const brandKey = (params.brand as string)?.toLowerCase() || "";
+  const brand = mockBrandData[brandKey];
+
+  if (!brand) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Brand Not Found</h1>
+          <p className="text-gray-600 mb-8">The brand you're looking for doesn't exist.</p>
+          <a href="/" className="px-6 py-3 bg-accent text-white rounded-lg">Back to Home</a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Brand Header */}
+      <div className="bg-gradient-to-br from-card to-background py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <a href="/" className="text-accent hover:underline mb-6 inline-block">← Back</a>
+          <h1 className="text-5xl font-bold mb-4">{brand.name}</h1>
+          <p className="text-xl text-gray-600 mb-8">{brand.description}</p>
+          <div className="flex flex-wrap gap-6 text-sm">
+            <div className="flex items-center gap-2">
+              <Award size={20} className="text-accent" />
+              <span>Founded {brand.founded}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <MapPin size={20} className="text-accent" />
+              <span>{brand.headquarters}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 py-16">
+        {/* Brand History */}
+        <section className="mb-20">
+          <h2 className="text-4xl font-bold mb-8">Our Story</h2>
+          <div className="grid md:grid-cols-3 gap-8 mb-12">
+            <div className="md:col-span-2">
+              <p className="text-lg text-gray-700 leading-relaxed mb-6">{brand.history}</p>
+            </div>
+            <div className="bg-card p-8 rounded-lg h-fit">
+              <h3 className="text-2xl font-bold mb-6">By the Numbers</h3>
+              <div className="space-y-6">
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <TrendingUp size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Years in Business</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.yearsInBusiness}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Users size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Vehicles Sold</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.vehiclesSold}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <MapPin size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Countries Served</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.countries}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Award size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Awards Won</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.awards}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* All Models */}
+        <section>
+          <h2 className="text-4xl font-bold mb-12">All {brand.name} Models</h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {brand.models.map((model) => (
+              <div key={model.id} className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition group cursor-pointer">
+                <div className="aspect-video bg-gray-200 overflow-hidden mb-4">
+                  <img
+                    src={model.image}
+                    alt={model.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition"
+                  />
+                </div>
+                <div className="p-6">
+                  <p className="text-sm text-accent mb-1">{model.year}</p>
+                  <h3 className="text-xl font-bold mb-2">{model.name}</h3>
+                  <p className="text-lg font-semibold text-accent mb-4">{model.price}</p>
+                  <a
+                    href={`/cars/${model.id}`}
+                    className="block text-accent hover:underline font-semibold"
+                  >
+                    View Details →
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="mt-20 bg-card p-12 rounded-lg text-center">
+          <h3 className="text-3xl font-bold mb-4">Ready to Explore?</h3>
+          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
+            Discover the perfect {brand.name} vehicle for your lifestyle. Our expert team is ready to help you find the right model.
+          </p>
+          <button className="px-8 py-4 bg-accent text-white font-semibold rounded-lg hover:bg-accent/90 transition">
+            Schedule a Test Drive
+          </button>
+        </section>
+      </div>
+    </div>
+  );
+}

src/app/brands/[slug]/page.tsx

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

src/app/brands/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+const BrandsPage = () => {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav" />
+      <div id="brands" data-section="brands" />
+    </ThemeProvider>
+  );
+};
+
+export default BrandsPage;

src/app/browse/page.tsx

@@ -1,9 +1,25 @@
 "use client";
 
-export default function BrowsePage() {
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+const BrowsePage = () => {
   return (
-    <div>
-      <h1>Browse Page</h1>
-    </div>
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav" />
+      <div id="browse" data-section="browse" />
+    </ThemeProvider>
   );
-}
+};
+
+export default BrowsePage;

src/app/cars/[id]/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight, Heart, Share2, MapPin, Fuel, Gauge, Calendar } from "lucide-react";
+
+interface CarDetail {
+  id: string;
+  name: string;
+  price: string;
+  rating: number;
+  description: string;
+  images: Array<{ src: string; alt: string }>;
+  specs: {
+    year: string;
+    mileage: string;
+    transmission: string;
+    fuelType: string;
+    engine: string;
+    color: string;
+  };
+  features: string[];
+  variants?: Array<{
+    label: string;
+    options: string[];
+    selected: string;
+  }>;
+}
+
+const mockCarData: { [key: string]: CarDetail } = {
+  "1": {
+    id: "1",    name: "2024 Tesla Model S",    price: "$89,990",    rating: 5,
+    description: "Experience the future of electric vehicles with cutting-edge technology and exceptional performance.",    images: [
+      { src: "https://images.unsplash.com/photo-1560958089-b8a63dd8b50b?w=800", alt: "Tesla Model S Front" },
+      { src: "https://images.unsplash.com/photo-1516814050195-3a03d82e059d?w=800", alt: "Tesla Model S Side" },
+      { src: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=800", alt: "Tesla Model S Interior" },
+    ],
+    specs: {
+      year: "2024",      mileage: "5,200 miles",      transmission: "Automatic",      fuelType: "Electric",      engine: "Dual Motor",      color: "Solid Black"},
+    features: [
+      "Autopilot Advanced",      "Premium Audio System",      "Panoramic Sunroof",      "19-inch Wheel Set",      "Premium Interior",      "Over-the-Air Updates",      "Supercharger Access",      "Enhanced Autopilot"],
+  },
+  "2": {
+    id: "2",    name: "2024 BMW M440i xDrive",    price: "$67,500",    rating: 5,
+    description: "German engineering meets performance with the new M440i xDrive.",    images: [
+      { src: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800", alt: "BMW M440i Front" },
+      { src: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800", alt: "BMW M440i Side" },
+      { src: "https://images.unsplash.com/photo-1533473359331-35b3c3f0f038?w=800", alt: "BMW M440i Interior" },
+    ],
+    specs: {
+      year: "2024",      mileage: "8,100 miles",      transmission: "Automatic",      fuelType: "Gasoline",      engine: "3.0L Twin-Turbo",      color: "Alpine White"},
+    features: [
+      "M Sport Brake Package",      "Premium Sound System",      "Adaptive M Suspension",      "20-inch M Light Alloy Wheels",      "Harman Kardon Audio",      "Gesture Control",      "Head-Up Display",      "Premium Leather Interior"],
+  },
+};
+
+export default function CarDetailPage() {
+  const params = useParams();
+  const carId = params.id as string;
+  const car = mockCarData[carId];
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  if (!car) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Car Not Found</h1>
+          <p className="text-gray-600 mb-8">The car you're looking for doesn't exist.</p>
+          <a href="/" className="px-6 py-3 bg-accent text-white rounded-lg">Back to Home</a>
+        </div>
+      </div>
+    );
+  }
+
+  const nextImage = () => {
+    setCurrentImageIndex((prev) => (prev + 1) % car.images.length);
+  };
+
+  const prevImage = () => {
+    setCurrentImageIndex((prev) => (prev - 1 + car.images.length) % car.images.length);
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-6xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <a href="/" className="text-accent hover:underline mb-4 inline-block">← Back</a>
+          <h1 className="text-4xl font-bold mb-2">{car.name}</h1>
+          <p className="text-xl text-accent font-semibold">{car.price}</p>
+        </div>
+
+        {/* Image Gallery */}
+        <div className="mb-12">
+          <div className="relative bg-card rounded-lg overflow-hidden mb-6">
+            <div className="aspect-video flex items-center justify-center bg-gray-100 relative">
+              <img
+                src={car.images[currentImageIndex].src}
+                alt={car.images[currentImageIndex].alt}
+                className="w-full h-full object-cover"
+              />
+              <button
+                onClick={() => setIsFavorited(!isFavorited)}
+                className="absolute top-4 right-4 p-3 bg-white rounded-full shadow-lg hover:bg-gray-100 transition"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  size={24}
+                  className={isFavorited ? "fill-red-500 text-red-500" : "text-gray-600"}
+                />
+              </button>
+            </div>
+
+            {/* Navigation Buttons */}
+            {car.images.length > 1 && (
+              <>
+                <button
+                  onClick={prevImage}
+                  className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full transition"
+                  aria-label="Previous image"
+                >
+                  <ChevronLeft size={24} />
+                </button>
+                <button
+                  onClick={nextImage}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full transition"
+                  aria-label="Next image"
+                >
+                  <ChevronRight size={24} />
+                </button>
+              </>
+            )}
+
+            {/* Image Counter */}
+            <div className="absolute bottom-4 right-4 bg-black/60 text-white px-3 py-1 rounded-full text-sm">
+              {currentImageIndex + 1} / {car.images.length}
+            </div>
+          </div>
+
+          {/* Thumbnail Gallery */}
+          {car.images.length > 1 && (
+            <div className="flex gap-3 overflow-x-auto pb-2">
+              {car.images.map((image, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentImageIndex(index)}
+                  className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 transition ${
+                    index === currentImageIndex ? "border-accent" : "border-gray-200"
+                  }`}
+                >
+                  <img src={image.src} alt={image.alt} className="w-full h-full object-cover" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          {/* Left Column - Specs & Features */}
+          <div>
+            {/* Description */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-4">Overview</h2>
+              <p className="text-gray-600 mb-6">{car.description}</p>
+            </div>
+
+            {/* Key Specifications */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-6">Key Specifications</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Calendar size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Year</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.year}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Gauge size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Mileage</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.mileage}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Fuel size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Fuel Type</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.fuelType}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <MapPin size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Transmission</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.transmission}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Additional Specs */}
+            <div className="bg-card p-6 rounded-lg mb-8">
+              <h3 className="text-lg font-bold mb-4">Additional Details</h3>
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Engine:</span>
+                  <span className="font-semibold">{car.specs.engine}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Color:</span>
+                  <span className="font-semibold">{car.specs.color}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Features & CTA */}
+          <div>
+            {/* Features */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-6">Features & Amenities</h2>
+              <div className="grid grid-cols-2 gap-3">
+                {car.features.map((feature, index) => (
+                  <div key={index} className="flex items-center gap-2 p-3 bg-card rounded-lg">
+                    <div className="w-5 h-5 rounded-full bg-accent flex items-center justify-center flex-shrink-0">
+                      <span className="text-white text-sm">✓</span>
+                    </div>
+                    <span className="text-sm">{feature}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Call to Action */}
+            <div className="sticky bottom-0 md:static bg-background space-y-4 p-4 md:p-0 -mx-4 md:mx-0 md:bg-transparent">
+              <button className="w-full bg-accent text-white font-semibold py-4 rounded-lg hover:bg-accent/90 transition">
+                Request Information
+              </button>
+              <button className="w-full border-2 border-accent text-accent font-semibold py-4 rounded-lg hover:bg-accent/5 transition flex items-center justify-center gap-2">
+                <Share2 size={20} />
+                Share Vehicle
+              </button>
+              <button className="w-full bg-card text-foreground font-semibold py-4 rounded-lg hover:bg-gray-100 transition">
+                View Similar Vehicles
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Related Section */}
+        <div className="mt-16 pt-16 border-t">
+          <h2 className="text-3xl font-bold mb-8">Compare Similar Vehicles</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition">
+                <div className="aspect-video bg-gray-200"></div>
+                <div className="p-4">
+                  <h3 className="font-bold text-lg mb-2">Similar Model {i}</h3>
+                  <p className="text-accent font-semibold">$XX,XXX</p>
+                  <a href="#" className="mt-4 block text-accent hover:underline font-semibold">
+                    View Details →
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

src/app/compare/page.tsx

@@ -1,147 +1,25 @@
 "use client";
 
 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 FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import Link from "next/link";
-import { Car, Zap } from "lucide-react";
 
-export default function ComparePage() {
+const ComparePage = () => {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="compact"
-      sizing="largeSmallSizeMediumTitles"
-      background="aurora"
-      cardStyle="solid"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { 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="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"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="blur-reveal"
-          gridVariant="four-items-2x2-equal-grid"
-          products={[
-            {
-              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: "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: "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: "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"},
-          ]}
-        />
-      </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" }}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="AutoArchive"
-          columns={[
-            {
-              items: [
-                { label: "Search Database", href: "/search" },
-                { label: "Browse Vehicles", href: "/browse" },
-                { label: "Compare Cars", href: "/compare" },
-              ],
-            },
-            {
-              items: [
-                { label: "About Us", href: "/" },
-                { label: "Help & Support", href: "/help" },
-                { label: "Contact", href: "/contact" },
-              ],
-            },
-            {
-              items: [
-                { label: "Privacy Policy", href: "/privacy" },
-                { label: "Terms of Service", href: "/terms" },
-                { label: "Sitemap", href: "/sitemap" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <div id="nav" data-section="nav" />
+      <div id="compare" data-section="compare" />
     </ThemeProvider>
   );
-}
+};
+
+export default ComparePage;

src/app/details/[id]/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+const DetailsPage = () => {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav" />
+      <div id="details" data-section="details" />
+    </ThemeProvider>
+  );
+};
+
+export default DetailsPage;

src/app/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Welcome to Car Dealership</h1>
+      <p>Browse our collection of vehicles</p>
+    </div>
+  );
+}

src/app/robots.ts

@@ -0,0 +1,18 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = "https://autoarchive.example.com";
+
+  return {
+    rules: [
+      {
+        userAgent: "*",        allow: "/",        disallow: ["/admin", "/private", "/*.json$", "/*?*sort=", "/*?*order="],
+      },
+      {
+        userAgent: "Googlebot",        allow: "/",        crawlDelay: 0.5,
+      },
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl,
+  };
+}

src/app/search/page.tsx

@@ -1,221 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
-export default function SearchPage() {
+const SearchPage = () => {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="compact"
-      sizing="largeSmallSizeMediumTitles"
-      background="aurora"
-      cardStyle="solid"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { 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 className="min-h-screen flex flex-col items-center justify-center px-4 py-20">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-6xl font-extrabold mb-6">
-            Advanced Vehicle Search
-          </h1>
-          <p className="text-lg md:text-xl text-gray-600 mb-12">
-            Search across our complete database of 50,000+ vehicles from 2,000+ manufacturers.
-            Filter by brand, model, year, specifications, and more.
-          </p>
-
-          <div className="bg-white rounded-xl shadow-lg p-8 mb-12">
-            <div className="space-y-6">
-              <div>
-                <label className="block text-sm font-semibold text-left mb-2">
-                  Search by Brand or Model
-                </label>
-                <input
-                  type="text"
-                  placeholder="E.g., Ferrari, Porsche 911, BMW M3..."
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-burgundy-600"
-                />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-semibold text-left mb-2">
-                    Year Range
-                  </label>
-                  <div className="flex gap-2">
-                    <input
-                      type="number"
-                      placeholder="From"
-                      min="1886"
-                      max="2024"
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
-                    />
-                    <input
-                      type="number"
-                      placeholder="To"
-                      min="1886"
-                      max="2024"
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-semibold text-left mb-2">
-                    Body Type
-                  </label>
-                  <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
-                    <option>All Types</option>
-                    <option>Sedan</option>
-                    <option>SUV</option>
-                    <option>Coupe</option>
-                    <option>Convertible</option>
-                    <option>Wagon</option>
-                    <option>Truck</option>
-                    <option>Sports Car</option>
-                  </select>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-semibold text-left mb-2">
-                    Engine Type
-                  </label>
-                  <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
-                    <option>All Engines</option>
-                    <option>Gasoline</option>
-                    <option>Diesel</option>
-                    <option>Electric</option>
-                    <option>Hybrid</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-semibold text-left mb-2">
-                    Country of Origin
-                  </label>
-                  <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
-                    <option>All Countries</option>
-                    <option>Germany</option>
-                    <option>Italy</option>
-                    <option>Japan</option>
-                    <option>USA</option>
-                    <option>UK</option>
-                    <option>France</option>
-                    <option>Sweden</option>
-                  </select>
-                </div>
-              </div>
-
-              <button className="w-full bg-burgundy-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-burgundy-700 transition-colors">
-                Search Vehicles
-              </button>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-            <div className="bg-gray-50 rounded-lg p-6">
-              <div className="text-3xl font-bold text-burgundy-600 mb-2">
-                50,000+
-              </div>
-              <p className="text-gray-600">Models in Database</p>
-            </div>
-            <div className="bg-gray-50 rounded-lg p-6">
-              <div className="text-3xl font-bold text-burgundy-600 mb-2">
-                2,000+
-              </div>
-              <p className="text-gray-600">Manufacturers</p>
-            </div>
-            <div className="bg-gray-50 rounded-lg p-6">
-              <div className="text-3xl font-bold text-burgundy-600 mb-2">
-                138
-              </div>
-              <p className="text-gray-600">Years of History</p>
-            </div>
-          </div>
-
-          <div className="text-center text-gray-600">
-            <p className="mb-4">
-              Can't find what you're looking for? Try browsing by era or brand instead.
-            </p>
-            <div className="flex justify-center gap-4">
-              <a
-                href="/browse"
-                className="text-burgundy-600 font-semibold hover:underline"
-              >
-                Browse by Era
-              </a>
-              <span>•</span>
-              <a
-                href="/brands"
-                className="text-burgundy-600 font-semibold hover:underline"
-              >
-                Browse by Brand
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="AutoArchive"
-          columns={[
-            {
-              items: [
-                { label: "Search Database", href: "/search" },
-                { label: "Browse Vehicles", href: "/browse" },
-                { label: "Compare Cars", href: "/compare" },
-                { label: "Timeline Explorer", href: "/timeline" },
-              ],
-            },
-            {
-              items: [
-                { label: "Brand Directory", href: "/brands" },
-                { label: "Model Guide", href: "/models" },
-                { label: "Specifications", href: "/specs" },
-                { label: "Production Data", href: "/production" },
-              ],
-            },
-            {
-              items: [
-                { label: "About Us", href: "/" },
-                { label: "Help & Support", href: "/help" },
-                { label: "Contact", href: "/contact" },
-                { label: "Contribute Data", href: "/contribute" },
-              ],
-            },
-            {
-              items: [
-                { label: "Privacy Policy", href: "/privacy" },
-                { label: "Terms of Service", href: "/terms" },
-                { label: "Data Attribution", href: "/attribution" },
-                { label: "Sitemap", href: "/sitemap" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <div id="nav" data-section="nav" />
+      <div id="search" data-section="search" />
     </ThemeProvider>
   );
-}
+};
+
+export default SearchPage;

src/app/sitemap.ts

@@ -0,0 +1,59 @@
+import { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = "https://autoarchive.example.com";
+  const lastModified = new Date();
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: lastModified,
+      changeFrequency: "weekly",      priority: 1.0,
+    },
+    {
+      url: `${baseUrl}/search`,
+      lastModified: lastModified,
+      changeFrequency: "daily",      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/browse`,
+      lastModified: lastModified,
+      changeFrequency: "weekly",      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/compare`,
+      lastModified: lastModified,
+      changeFrequency: "weekly",      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/timeline`,
+      lastModified: lastModified,
+      changeFrequency: "monthly",      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/about`,
+      lastModified: lastModified,
+      changeFrequency: "monthly",      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/privacy`,
+      lastModified: lastModified,
+      changeFrequency: "yearly",      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/terms`,
+      lastModified: lastModified,
+      changeFrequency: "yearly",      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/help`,
+      lastModified: lastModified,
+      changeFrequency: "monthly",      priority: 0.6,
+    },
+    {
+      url: `${baseUrl}/contact`,
+      lastModified: lastModified,
+      changeFrequency: "monthly",      priority: 0.6,
+    },
+  ];
+}

src/app/timeline/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+const TimelinePage = () => {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav" />
+      <div id="timeline" data-section="timeline" />
+    </ThemeProvider>
+  );
+};
+
+export default TimelinePage;