Add src/app/cars/page.tsx

2026-03-06 19:31:33 +00:00
parent 43a694b09c
commit 49f1e5f5f0
1 changed files with 107 additions and 0 deletions
--- a/src/app/cars/page.tsx
+++ b/src/app/cars/page.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Browse Cars', id: '/cars' },
+  { name: 'Specifications', id: '/specifications' },
+  { name: 'Compare', id: '/compare' },
+  { name: 'Database', id: '/database' },
+];
+
+const allCars = [
+  { id: '1', brand: 'Tesla', name: 'Model S', price: 'From $73,990', rating: 5, reviewCount: '12.5k', imageSrc: '/car-1.jpg' },
+  { id: '2', brand: 'BMW', name: 'M440i xDrive', price: 'From $61,550', rating: 5, reviewCount: '8.3k', imageSrc: '/car-2.jpg' },
+  { id: '3', brand: 'Mercedes-Benz', name: 'C-Class', price: 'From $45,850', rating: 4, reviewCount: '15.2k', imageSrc: '/car-3.jpg' },
+  { id: '4', brand: 'Audi', name: 'A6 Sedan', price: 'From $56,200', rating: 5, reviewCount: '9.7k', imageSrc: '/car-4.jpg' },
+  { id: '5', brand: 'Porsche', name: '911 Carrera', price: 'From $101,200', rating: 5, reviewCount: '6.2k', imageSrc: '/car-5.jpg' },
+  { id: '6', brand: 'Lamborghini', name: 'Urus', price: 'From $218,000', rating: 5, reviewCount: '3.1k', imageSrc: '/car-6.jpg' },
+  { id: '7', brand: 'Ferrari', name: 'F8 Tributo', price: 'From $280,000', rating: 5, reviewCount: '2.8k', imageSrc: '/car-7.jpg' },
+  { id: '8', brand: 'Bugatti', name: 'Chiron', price: 'From $2,600,000', rating: 5, reviewCount: '1.5k', imageSrc: '/car-8.jpg' },
+];
+
+const footerColumns = [
+  {
+    title: 'Browse',
+    items: [
+      { label: 'All Cars', href: '/cars' },
+      { label: 'By Make', href: '/makes' },
+      { label: 'By Year', href: '/years' },
+      { label: 'New Releases', href: '/new' },
+    ],
+  },
+  {
+    title: 'Tools',
+    items: [
+      { label: 'Compare Vehicles', href: '/compare' },
+      { label: 'Search Database', href: '/database' },
+      { label: 'Specifications', href: '/specifications' },
+      { label: 'Reviews', href: '/reviews' },
+    ],
+  },
+  {
+    title: 'Company',
+    items: [
+      { label: 'About Us', href: '/about' },
+      { label: 'Contact', href: '/contact' },
+      { label: 'Blog', href: '/blog' },
+      { label: 'Careers', href: '/careers' },
+    ],
+  },
+  {
+    title: 'Legal',
+    items: [
+      { label: 'Privacy Policy', href: '/privacy' },
+      { label: 'Terms of Service', href: '/terms' },
+      { label: 'Cookie Policy', href: '/cookies' },
+      { label: 'Disclaimer', href: '/disclaimer' },
+    ],
+  },
+];
+
+export default function CarsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="large"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="CarDB" />
+
+      <div id="cars-grid" data-section="cars-grid" className="pt-24">
+        <ProductCardTwo
+          products={allCars.map(car => ({
+            ...car,
+            onProductClick: () => window.open(`/cars/${car.id}`, '_blank'),
+          }))}
+          title="Browse All Vehicles"
+          description="Explore our complete collection of vehicles with detailed specifications and information."
+          textboxLayout="default"
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2025 Universal Car Database. All rights reserved."
+          bottomRightText="Made with precision and passion"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}