bender/067ab0de-2dc1-4d67-9727-3fba4d76324f
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/products/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 21:15:41 +00:00
parent 9e56e790b4
commit 80d0915551
1 changed files with 209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/app/products/page.tsx Normal file
View File

@@ -0,0 +1,209 @@
"use client";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Mail, MapPin, Phone } from 'lucide-react';
import { useState, useMemo } from 'react';
const CATEGORIES = [
"Beer", "Craft Beer", "Wine", "Champagne", "Gin", "Vodka", "Rum", "Whisky", "Tequila", "Liqueurs", "RTDs", "Premixed Drinks", "Low Alcohol", "Mixers", "Specials"];
const SAMPLE_PRODUCTS = [
{ id: "1", name: "Corona Extra", category: "Beer", price: "$3.99", rating: 4.5, reviewCount: "256" },
{ id: "2", name: "Heineken Premium", category: "Beer", price: "$4.49", rating: 4.3, reviewCount: "189" },
{ id: "3", name: "Tuatara Pale Ale", category: "Craft Beer", price: "$7.99", rating: 4.8, reviewCount: "342" },
{ id: "4", name: "Hobbiton Brewing IPA", category: "Craft Beer", price: "$8.49", rating: 4.7, reviewCount: "218" },
{ id: "5", name: "Marlborough Sauvignon Blanc", category: "Wine", price: "$18.99", rating: 4.6, reviewCount: "512" },
{ id: "6", name: "Penfolds Shiraz", category: "Wine", price: "$22.99", rating: 4.5, reviewCount: "387" },
{ id: "7", name: "Champagne Moët", category: "Champagne", price: "$54.99", rating: 4.9, reviewCount: "421" },
{ id: "8", name: "Gordon's Gin", category: "Gin", price: "$29.99", rating: 4.4, reviewCount: "267" },
{ id: "9", name: "Tanqueray Gin", category: "Gin", price: "$32.99", rating: 4.5, reviewCount: "198" },
{ id: "10", name: "Vodka Smirnoff", category: "Vodka", price: "$24.99", rating: 4.2, reviewCount: "310" },
{ id: "11", name: "Bacardi Rum", category: "Rum", price: "$28.99", rating: 4.3, reviewCount: "276" },
{ id: "12", name: "Johnnie Walker Red", category: "Whisky", price: "$35.99", rating: 4.4, reviewCount: "445" },
{ id: "13", name: "Jack Daniel's", category: "Whisky", price: "$42.99", rating: 4.6, reviewCount: "678" },
{ id: "14", name: "José Cuervo Tequila", category: "Tequila", price: "$26.99", rating: 4.2, reviewCount: "156" },
{ id: "15", name: "Kahlúa Liqueur", category: "Liqueurs", price: "$19.99", rating: 4.5, reviewCount: "203" },
{ id: "16", name: "Baileys Irish Cream", category: "Liqueurs", price: "$22.99", rating: 4.7, reviewCount: "534" },
{ id: "17", name: "Pre-mixed Mojito", category: "RTDs", price: "$5.99", rating: 4.1, reviewCount: "89" },
{ id: "18", name: "Ready-made Margarita", category: "Premixed Drinks", price: "$6.49", rating: 4.2, reviewCount: "112" },
{ id: "19", name: "Skinny Lemonade", category: "Low Alcohol", price: "$4.99", rating: 4.3, reviewCount: "145" },
{ id: "20", name: "Fever-Tree Tonic", category: "Mixers", price: "$3.99", rating: 4.6, reviewCount: "267" },
];
export default function ProductsPage() {
const [selectedCategory, setSelectedCategory] = useState("All");
const [searchTerm, setSearchTerm] = useState("");
const filteredProducts = useMemo(() => {
return SAMPLE_PRODUCTS.filter(product => {
const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
return matchesCategory && matchesSearch;
});
}, [selectedCategory, searchTerm]);
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="grid"
cardStyle="layered-gradient"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Super Liquor Paihia"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/products" },
{ name: "Specials", id: "/#specials" },
{ name: "Selection", id: "/#selection" },
{ name: "Contact", id: "/#contact" },
]}
button={{
text: "Call Now", href: "tel:0994558333"
}}
animateOnLoad={true}
/>
</div>
<main className="min-h-screen bg-background py-20">
<div className="w-full max-w-7xl mx-auto px-4 md:px-6">
{/* Page Header */}
<div className="mb-12 text-center">
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-3">
Product Catalog
</h1>
<p className="text-lg text-foreground/80">
Discover our complete selection of premium beverages
</p>
</div>
{/* Search Bar */}
<div className="mb-8">
<input
type="text"
placeholder="Search products..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-accent"
/>
</div>
{/* Categories Filter */}
<div className="mb-12 flex flex-wrap gap-3">
<button
onClick={() => setSelectedCategory("All")}
className={`px-4 py-2 rounded-full font-medium transition-all ${
selectedCategory === "All"
? "bg-primary-cta text-background"
: "bg-card text-foreground border border-accent/20 hover:border-accent"
}`}
>
All Categories
</button>
{CATEGORIES.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-4 py-2 rounded-full font-medium transition-all ${
selectedCategory === category
? "bg-primary-cta text-background"
: "bg-card text-foreground border border-accent/20 hover:border-accent"
}`}
>
{category}
</button>
))}
</div>
{/* Products Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{filteredProducts.map((product) => (
<div
key={product.id}
className="bg-card rounded-lg overflow-hidden border border-accent/10 hover:border-accent/30 transition-all hover:shadow-lg"
>
<div className="aspect-square bg-gradient-to-br from-accent to-background-accent flex items-center justify-center">
<div className="text-center text-foreground/60">
<p className="text-sm font-medium mb-1">Product Image</p>
<p className="text-xs text-foreground/40">{product.category}</p>
</div>
</div>
<div className="p-4">
<p className="text-xs text-accent font-semibold mb-1 uppercase">
{product.category}
</p>
<h3 className="text-lg font-semibold text-foreground mb-2 line-clamp-2">
{product.name}
</h3>
<div className="flex items-center justify-between mb-3">
<span className="text-2xl font-bold text-primary-cta">
{product.price}
</span>
<div className="flex items-center gap-1">
<span className="text-sm font-medium text-foreground">
{product.rating}
</span>
<span className="text-sm text-foreground/60">★</span>
</div>
</div>
<p className="text-xs text-foreground/60 mb-3">
{product.reviewCount} reviews
</p>
<button className="w-full py-2 bg-primary-cta text-background rounded-lg font-medium hover:opacity-90 transition-opacity">
View Details
</button>
</div>
</div>
))}
</div>
{/* No Results */}
{filteredProducts.length === 0 && (
<div className="text-center py-12">
<p className="text-lg text-foreground/60">
No products found matching your search.
</p>
</div>
)}
{/* Results Count */}
<div className="mt-8 text-center text-foreground/60">
<p className="text-sm">
Showing {filteredProducts.length} of {SAMPLE_PRODUCTS.length} products
</p>
</div>
</div>
</main>
<div id="footer" data-section="footer">
<FooterCard
logoText="Super Liquor Paihia"
copyrightText="© 2025 Super Liquor Paihia | 14 Marsden Road, Paihia 0200 | Ph: 09 945 8333"
socialLinks={[
{
icon: Phone,
href: "tel:0994558333", ariaLabel: "Call us"
},
{
icon: MapPin,
href: "https://maps.google.com/?q=14+Marsden+Road+Paihia+0200+New+Zealand", ariaLabel: "Get directions"
},
{
icon: Mail,
href: "mailto:info@superliquorpaihia.co.nz", ariaLabel: "Send email"
},
]}
/>
</div>
</ThemeProvider>
);
}