Add src/app/database/page.tsx

2026-03-06 19:31:35 +00:00
parent 87a6c4eb8c
commit f35eab9d2a
1 changed files with 160 additions and 0 deletions
--- a/src/app/database/page.tsx
+++ b/src/app/database/page.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+import Input from '@/components/form/Input';
+
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Browse Cars', id: '/cars' },
+  { name: 'Specifications', id: '/specifications' },
+  { name: 'Compare', id: '/compare' },
+  { name: 'Database', id: '/database' },
+];
+
+const databaseFeatures = [
+  {
+    id: '1',
+    title: 'Advanced Search Filters',
+    description: 'Search by make, model, year, engine type, fuel efficiency, price range, and hundreds of other parameters.',
+    tag: 'Search',
+    imageSrc: '/feature-search.jpg',
+  },
+  {
+    id: '2',
+    title: 'Detailed Specifications',
+    description: 'Access complete technical data including engine specs, dimensions, performance metrics, and safety ratings.',
+    tag: 'Details',
+    imageSrc: '/feature-specs.jpg',
+  },
+  {
+    id: '3',
+    title: 'Real-time Data',
+    description: 'Stay updated with the latest vehicle information, pricing, availability, and market trends.',
+    tag: 'Updated',
+    imageSrc: '/feature-realtime.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 DatabasePage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [make, setMake] = useState('');
+  const [year, setYear] = useState('');
+
+  const handleSearch = () => {
+    console.log('Search:', { searchQuery, make, year });
+  };
+
+  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="search-section" data-section="search" className="pt-24 pb-20">
+        <div className="max-w-4xl mx-auto px-4 md:px-6">
+          <h1 className="text-5xl md:text-6xl font-bold mb-6">Search Our Database</h1>
+          <p className="text-xl text-foreground/70 mb-12">Find the perfect vehicle with our comprehensive search tools and filters.</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+            <Input
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search by model or keyword"
+              type="text"
+            />
+            <Input
+              value={make}
+              onChange={setMake}
+              placeholder="Make (e.g., Tesla, BMW)"
+              type="text"
+            />
+            <Input
+              value={year}
+              onChange={setYear}
+              placeholder="Year"
+              type="number"
+            />
+          </div>
+          
+          <button
+            onClick={handleSearch}
+            className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
+          >
+            Search Database
+          </button>
+        </div>
+      </div>
+
+      <div id="database-features" data-section="database-features">
+        <FeatureCardMedia
+          features={databaseFeatures}
+          animationType="slide-up"
+          textboxLayout="default"
+          title="Database Capabilities"
+          description="Leverage our powerful search and filtering capabilities to find exactly what you're looking for."
+          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>
+  );
+}