Add src/app/products/page.tsx
This commit is contained in:
208
src/app/products/page.tsx
Normal file
208
src/app/products/page.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Phone, Sparkles } from 'lucide-react';
|
||||
import { useState, useMemo } from 'react';
|
||||
|
||||
interface TireProduct {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
variant: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
category: string;
|
||||
brand?: string;
|
||||
}
|
||||
|
||||
const TIRE_CATEGORIES = [
|
||||
"All", "Summer", "Winter", "All-Season", "Performance", "Off-Road"
|
||||
];
|
||||
|
||||
const TIRE_PRODUCTS: TireProduct[] = [
|
||||
{
|
||||
id: "1", name: "Summer Performance Pro", price: "$85", variant: "17 Inch • High Performance", imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-close-up_23-2149262938.jpg", imageAlt: "Summer Performance tire", category: "Summer", brand: "Velocity"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Winter Grip Elite", price: "$95", variant: "18 Inch • Winter Rated", imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-tire_23-2149262938.jpg", imageAlt: "Winter tire with grip", category: "Winter", brand: "FrostGuard"
|
||||
},
|
||||
{
|
||||
id: "3", name: "All-Season Comfort Plus", price: "$75", variant: "16 Inch • All-Season", imageSrc: "http://img.b2bpic.net/free-photo/wheel-tire-automotive_23-2149262938.jpg", imageAlt: "All-season tire", category: "All-Season", brand: "RoadMax"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Track Beast Sport", price: "$120", variant: "19 Inch • Racing", imageSrc: "http://img.b2bpic.net/free-photo/sports-car-wheel_23-2149262938.jpg", imageAlt: "Performance racing tire", category: "Performance", brand: "Apex Racing"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Terrain Conqueror X", price: "$110", variant: "20 Inch • Off-Road", imageSrc: "http://img.b2bpic.net/free-photo/jeep-wheel-mud_23-2149262938.jpg", imageAlt: "Off-road terrain tire", category: "Off-Road", brand: "TerraGrip"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Summer Eco Drive", price: "$65", variant: "15 Inch • Fuel Efficient", imageSrc: "http://img.b2bpic.net/free-photo/green-eco-tire_23-2149262938.jpg", imageAlt: "Eco-friendly summer tire", category: "Summer", brand: "EcoWheel"
|
||||
},
|
||||
{
|
||||
id: "7", name: "Winter Guardian Max", price: "$105", variant: "17 Inch • Studded Available", imageSrc: "http://img.b2bpic.net/free-photo/snowy-winter-tire_23-2149262938.jpg", imageAlt: "Winter studded tire", category: "Winter", brand: "FrostGuard"
|
||||
},
|
||||
{
|
||||
id: "8", name: "All-Season Durable Plus", price: "$72", variant: "16 Inch • Extended Life", imageSrc: "http://img.b2bpic.net/free-photo/durable-tire_23-2149262938.jpg", imageAlt: "Extended life tire", category: "All-Season", brand: "RoadMax"
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProductCatalogPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
if (selectedCategory === "All") {
|
||||
return TIRE_PRODUCTS;
|
||||
}
|
||||
return TIRE_PRODUCTS.filter(product => product.category === selectedCategory);
|
||||
}, [selectedCategory]);
|
||||
|
||||
const productCards = filteredProducts.map(product => ({
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
variant: product.variant,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt
|
||||
}));
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Nails Luxe"
|
||||
bottomLeftText="Available 7 Days a Week"
|
||||
bottomRightText="hello@nailsluxe.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="TIRE CATALOG"
|
||||
description="Browse our extensive selection of premium tires for every driving condition. Find the perfect fit for your vehicle."
|
||||
buttons={[
|
||||
{ text: "View Products", href: "#products" },
|
||||
{ text: "Contact Sales", href: "#contact" }
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-close-up_23-2149262938.jpg", imageAlt: "Premium tire selection"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sports-car-wheel_23-2149262938.jpg", imageAlt: "Performance tires"
|
||||
}
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<div className="w-full py-16 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">Shop Our Tire Catalog</h2>
|
||||
<p className="text-gray-600 mb-8">Filter by category to find the perfect tire for your needs</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-8">
|
||||
{TIRE_CATEGORIES.map(category => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-all ${
|
||||
selectedCategory === category
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-600 mb-6">
|
||||
Showing {filteredProducts.length} tire{filteredProducts.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProductCardFour
|
||||
title="Featured Tires"
|
||||
description={`Discover our ${selectedCategory === 'All' ? 'complete' : selectedCategory} tire selection`}
|
||||
tag="Catalog"
|
||||
products={productCards}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tagIcon={Phone}
|
||||
title="Need Help Choosing a Tire?"
|
||||
description="Our tire specialists are ready to help you find the perfect match for your vehicle. Contact us today!"
|
||||
buttons={[
|
||||
{ text: "Call Us", href: "tel:+1-555-123-4567" },
|
||||
{ text: "Email Now", href: "mailto:hello@nailsluxe.com" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Tire Shop"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "Products", href: "/products" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Summer Tires", href: "#products" },
|
||||
{ label: "Winter Tires", href: "#products" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "FAQ", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user