Add src/app/brands/page.tsx

2026-03-06 19:20:19 +00:00
parent 0ae6a50237
commit 008b53d087
1 changed files with 69 additions and 0 deletions
--- a/src/app/brands/page.tsx
+++ b/src/app/brands/page.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import Link from 'next/link';
+
+const BRANDS = [
+  { id: 'toyota', name: 'Toyota', models: 15, description: 'Reliable and fuel-efficient vehicles' },
+  { id: 'honda', name: 'Honda', models: 12, description: 'Innovation and performance' },
+  { id: 'ford', name: 'Ford', models: 18, description: 'Trucks and SUVs for every need' },
+  { id: 'bmw', name: 'BMW', models: 10, description: 'Luxury and performance' },
+  { id: 'mercedes', name: 'Mercedes-Benz', models: 14, description: 'Premium luxury vehicles' },
+  { id: 'audi', name: 'Audi', models: 11, description: 'German engineering excellence' },
+  { id: 'tesla', name: 'Tesla', models: 5, description: 'Electric vehicles and innovation' },
+  { id: 'chevrolet', name: 'Chevrolet', models: 16, description: 'American-made quality' },
+];
+
+export default function 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="semibold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Browse', id: '/browse' },
+          { name: 'Brands', id: '/brands' },
+          { name: 'Compare', id: '/compare' },
+          { name: 'Contact', id: '#contact' },
+        ]}
+        button={{ text: 'Explore Now', href: '/browse' }}
+      />
+
+      <div className="min-h-screen py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-5xl font-bold mb-4 text-center">Car Brands</h1>
+          <p className="text-center text-foreground/70 mb-12 text-lg">Explore all available car brands and find your perfect match</p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {BRANDS.map((brand) => (
+              <Link key={brand.id} href={`/brands/${brand.id}`}>
+                <div className="bg-card rounded-lg border border-foreground/10 p-6 hover:shadow-lg hover:border-primary-cta/30 transition cursor-pointer h-full">
+                  <div className="flex items-center justify-center h-24 bg-foreground/5 rounded mb-4">
+                    <span className="text-3xl font-bold text-foreground/30">{brand.name.charAt(0)}</span>
+                  </div>
+                  <h3 className="font-bold text-xl mb-2">{brand.name}</h3>
+                  <p className="text-foreground/70 text-sm mb-4">{brand.description}</p>
+                  <div className="flex items-center justify-between pt-4 border-t border-foreground/10">
+                    <span className="text-foreground/60 text-sm">{brand.models} models</span>
+                    <span className="text-primary-cta font-semibold">→</span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}