Update src/app/database/page.tsx
This commit is contained in:
@@ -1,160 +1,46 @@
|
||||
'use client';
|
||||
"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';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
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' },
|
||||
],
|
||||
},
|
||||
const testCarImages = [
|
||||
'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
|
||||
];
|
||||
|
||||
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"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleApple navItems={navItems} brandName="CarDB" />
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Car Database</h1>
|
||||
<p className="text-lg text-gray-600">Complete vehicle database with advanced search</p>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user