diff --git a/src/app/brands/[slug]/page.tsx b/src/app/brands/[slug]/page.tsx index 99f48a6..e1fc574 100644 --- a/src/app/brands/[slug]/page.tsx +++ b/src/app/brands/[slug]/page.tsx @@ -1,3 +1,310 @@ -export default function BrandPage() { - return
Brand Page
; -} +"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 ( + + + +
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +} \ No newline at end of file diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx new file mode 100644 index 0000000..cc41ca3 --- /dev/null +++ b/src/app/brands/page.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; + +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 BrandsPage() { + return ( + + + +
+
+

Car Brands

+

Browse all car brands in our database

+
+
+ + ); +} diff --git a/src/app/browse/page.tsx b/src/app/browse/page.tsx index 98c9062..2597c6c 100644 --- a/src/app/browse/page.tsx +++ b/src/app/browse/page.tsx @@ -1,9 +1,46 @@ "use client"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; + +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 BrowsePage() { return ( -
-

Browse Page

-
+ + + +
+
+

Browse Cars

+

Explore our complete vehicle catalog

+
+
+ ); } diff --git a/src/app/cars/[id]/page.tsx b/src/app/cars/[id]/page.tsx new file mode 100644 index 0000000..ab44cde --- /dev/null +++ b/src/app/cars/[id]/page.tsx @@ -0,0 +1,385 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; + +interface Car { + id: string; + make: string; + model: string; + year: number; + price: number; + image: string; + transmission: string; + fuel: string; + mileage: number; + bodyType?: string; + color?: string; + vin?: string; + engineSize?: number; + horsepower?: number; + torque?: number; + topSpeed?: number; + acceleration?: number; + mpg?: number; + seating?: number; + luggage?: number; + wheelbase?: number; + length?: number; + width?: number; + height?: number; + weight?: number; + fuelCapacity?: number; + safetyRating?: number; + features?: string[]; +} + +const carsDatabase: Record = { + '1': { + id: '1', + make: 'Toyota', + model: 'Camry', + year: 2024, + price: 32000, + image: '/car-camry.jpg', + transmission: 'Automatic', + fuel: 'Hybrid', + mileage: 0, + bodyType: 'Sedan', + color: 'Pearl White', + vin: 'T123456789ABC', + engineSize: 2.5, + horsepower: 208, + torque: 180, + topSpeed: 112, + acceleration: 8.2, + mpg: 52, + seating: 5, + luggage: 15.1, + wheelbase: 112.2, + length: 191.1, + width: 71.7, + height: 57.5, + weight: 3415, + fuelCapacity: 14.5, + safetyRating: 5, + features: [ + 'Hybrid Engine', + 'Toyota Safety Sense', + 'Adaptive Cruise Control', + 'Lane Departure Alert', + 'Bluetooth Connectivity', + 'Touchscreen Display', + 'Heated Seats', + 'Power Windows', + ], + }, + '2': { + id: '2', + make: 'Honda', + model: 'Civic', + year: 2024, + price: 28000, + image: '/car-civic.jpg', + transmission: 'Manual', + fuel: 'Gasoline', + mileage: 0, + bodyType: 'Sedan', + color: 'Sonic Gray', + vin: 'H987654321DEF', + engineSize: 2.0, + horsepower: 158, + torque: 138, + topSpeed: 125, + acceleration: 8.5, + mpg: 32, + seating: 5, + luggage: 12.3, + wheelbase: 106.3, + length: 182.2, + width: 70.8, + height: 56.0, + weight: 3040, + fuelCapacity: 12.3, + safetyRating: 5, + features: [ + 'Honda Sensing', + 'Collision Mitigation Braking', + 'Road Departure Mitigation', + 'Apple CarPlay', + 'Android Auto', + 'Rearview Camera', + 'Sunroof', + 'Alloy Wheels', + ], + }, + '3': { + id: '3', + make: 'BMW', + model: '3 Series', + year: 2024, + price: 45000, + image: '/car-bmw.jpg', + transmission: 'Automatic', + fuel: 'Diesel', + mileage: 0, + bodyType: 'Sedan', + color: 'Jet Black', + vin: 'B456789012GHI', + engineSize: 2.0, + horsepower: 190, + torque: 295, + topSpeed: 130, + acceleration: 7.2, + mpg: 45, + seating: 5, + luggage: 13.6, + wheelbase: 112.8, + length: 184.4, + width: 71.7, + height: 56.3, + weight: 3550, + fuelCapacity: 13.2, + safetyRating: 5, + features: [ + 'BMW iDrive', + 'Adaptive Headlights', + 'Premium Sound System', + 'Panoramic Sunroof', + 'Power Seats', + 'Climate Control', + 'Gesture Control', + 'Head-Up Display', + ], + }, +}; + +export default function CarDetailPage() { + const params = useParams(); + const [car, setCar] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const id = params.id as string; + const carData = carsDatabase[id]; + if (carData) { + setCar(carData); + } + setLoading(false); + }, [params.id]); + + if (loading) { + return ( +
+
Loading...
+
+ ); + } + + if (!car) { + return ( +
+
+

Car Not Found

+

The car you're looking for doesn't exist.

+ + + +
+
+ ); + } + + return ( +
+
+ {/* Header */} +
+ + + +

+ {car.year} {car.make} {car.model} +

+
+ + {/* Main Content */} +
+ {/* Image and Price Section */} +
+
+
+
+
Car Image
+
Main View
+
+
+
+
+

+ ${car.price.toLocaleString()} +

+

Starting Price

+ + +
+
+
+
+ + {/* Details Section */} +
+ {/* Quick Facts */} +
+

Quick Facts

+
+
+

Body Type

+

{car.bodyType || 'N/A'}

+
+
+

Transmission

+

{car.transmission}

+
+
+

Fuel Type

+

{car.fuel}

+
+
+

Seating

+

{car.seating || 'N/A'} Seats

+
+
+

Color

+

{car.color || 'N/A'}

+
+
+

Safety Rating

+

+ {car.safetyRating ? `${car.safetyRating}/5 ⭐` : 'N/A'} +

+
+
+
+ + {/* Engine Specifications */} +
+

Engine Specifications

+
+
+

Engine Size

+

{car.engineSize || 'N/A'} L

+
+
+

Horsepower

+

{car.horsepower || 'N/A'} hp

+
+
+

Torque

+

{car.torque || 'N/A'} lb-ft

+
+
+

Top Speed

+

{car.topSpeed || 'N/A'} mph

+
+
+

0-60 Acceleration

+

{car.acceleration || 'N/A'} sec

+
+
+

Fuel Efficiency

+

{car.mpg || 'N/A'} MPG

+
+
+
+
+
+ + {/* Dimensions and Capacity */} +
+
+

Dimensions

+
+
+

Length

+

{car.length || 'N/A'} in

+
+
+

Width

+

{car.width || 'N/A'} in

+
+
+

Height

+

{car.height || 'N/A'} in

+
+
+

Wheelbase

+

{car.wheelbase || 'N/A'} in

+
+
+

Weight

+

{car.weight || 'N/A'} lbs

+
+
+
+ +
+

Capacity

+
+
+

Luggage Space

+

{car.luggage || 'N/A'} cu ft

+
+
+

Fuel Tank

+

{car.fuelCapacity || 'N/A'} gal

+
+
+

VIN

+

{car.vin || 'N/A'}

+
+
+
+
+ + {/* Features */} + {car.features && car.features.length > 0 && ( +
+

Features & Amenities

+
+ {car.features.map((feature, index) => ( +
+ ✓ +

{feature}

+
+ ))} +
+
+ )} + + {/* CTA Section */} +
+

Interested in this vehicle?

+

Contact our sales team to schedule a test drive or request more information.

+
+ + +
+
+
+
+ ); +} diff --git a/src/app/cars/[slug]/page.tsx b/src/app/cars/[slug]/page.tsx index 23c0864..9ca1cc1 100644 --- a/src/app/cars/[slug]/page.tsx +++ b/src/app/cars/[slug]/page.tsx @@ -1,3 +1,341 @@ -export default function CarPage() { - return
Car Page
; -} +"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 ( + + + +
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +} \ No newline at end of file diff --git a/src/app/cars/page.tsx b/src/app/cars/page.tsx new file mode 100644 index 0000000..adb311b --- /dev/null +++ b/src/app/cars/page.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; + +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 CarsPage() { + return ( + + + +
+
+

Cars

+

Detailed car information and specifications

+
+
+ + ); +} diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx index 3154e17..8fb2e56 100644 --- a/src/app/compare/page.tsx +++ b/src/app/compare/page.tsx @@ -1,129 +1,50 @@ "use client"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen"; -import BlogCardThree from "@/components/sections/blog/BlogCardThree"; -import MetricCardThree from "@/components/sections/metrics/MetricCardThree"; -import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; -import Link from "next/link"; -import { Building2, Car, History, Globe } from "lucide-react"; +import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; +import { Scale } from 'lucide-react'; + +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 ComparePage() { - const navItems = [ - { name: "Search", id: "/" }, - { name: "Browse", id: "/browse" }, - { name: "Compare", id: "/compare" }, - { name: "Timeline", id: "/" }, - { name: "About", id: "/" }, - ]; - - const footerColumns = [ - { - items: [ - { label: "Search Database", href: "/" }, - { label: "Browse Vehicles", href: "/browse" }, - { label: "Compare Cars", href: "/compare" }, - { label: "Timeline Explorer", href: "/" }, - ], - }, - { - items: [ - { label: "Brand Directory", href: "/" }, - { label: "Model Guide", href: "/" }, - { label: "Specifications", href: "/" }, - { label: "Production Data", href: "/" }, - ], - }, - { - items: [ - { label: "About Us", href: "/" }, - { label: "Help & Support", href: "/" }, - { label: "Contact", href: "/" }, - { label: "Contribute Data", href: "/" }, - ], - }, - { - items: [ - { label: "Privacy Policy", href: "/" }, - { label: "Terms of Service", href: "/" }, - { label: "Data Attribution", href: "/" }, - { label: "Sitemap", href: "/" }, - ], - }, - ]; - return ( - -
-
-
- -
- -