Add src/app/gin/page.tsx

This commit is contained in:
2026-03-09 21:15:40 +00:00
parent ba248a60d1
commit 77ddcc9bb1

235
src/app/gin/page.tsx Normal file
View File

@@ -0,0 +1,235 @@
"use client";
import { useState } from "react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Mail, MapPin, Phone, Zap } from 'lucide-react';
import Link from 'next/link';
const ginProducts = [
{ id: "gin-1", name: "Tanqueray London Dry Gin", price: "$49.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Tanqueray London Dry Gin bottle" },
{ id: "gin-2", name: "Bombay Sapphire Premium Gin", price: "$54.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Bombay Sapphire Premium Gin bottle" },
{ id: "gin-3", name: "Gordon's London Dry Gin", price: "$45.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Gordon's London Dry Gin bottle" },
{ id: "gin-4", name: "Hendrick's Cucumber Gin", price: "$59.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Hendrick's Cucumber Gin bottle" },
{ id: "gin-5", name: "Beefeater London Dry Gin", price: "$52.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Beefeater London Dry Gin bottle" },
{ id: "gin-6", name: "Seagram's Extra Dry Gin", price: "$44.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Seagram's Extra Dry Gin bottle" },
{ id: "gin-7", name: "Junipero Premium Gin", price: "$62.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Junipero Premium Gin bottle" },
{ id: "gin-8", name: "Tanqueray No. Ten", price: "$64.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Tanqueray No. Ten bottle" },
{ id: "gin-9", name: "Bombay Dry Gin", price: "$48.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Bombay Dry Gin bottle" },
{ id: "gin-10", name: "Whitley Neill Gin", price: "$55.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Whitley Neill Gin bottle" },
{ id: "gin-11", name: "Darnley's London Dry", price: "$51.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Darnley's London Dry Gin bottle" },
{ id: "gin-12", name: "Gin Mare Mediterranean", price: "$67.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Gin Mare Mediterranean Gin bottle" },
{ id: "gin-13", name: "Filliers Dry Gin 28", price: "$56.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Filliers Dry Gin 28 bottle" },
{ id: "gin-14", name: "Hayman's Old Tom Gin", price: "$58.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Hayman's Old Tom Gin bottle" },
{ id: "gin-15", name: "The Botanist Premium", price: "$65.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "The Botanist Premium Gin bottle" },
{ id: "gin-16", name: "Star of Bombay Gin", price: "$69.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Star of Bombay Gin bottle" },
{ id: "gin-17", name: "Greenalls Original Gin", price: "$46.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Greenalls Original Gin bottle" },
{ id: "gin-18", name: "Citadelle Gin", price: "$61.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Citadelle Gin bottle" },
{ id: "gin-19", name: "Leopold's American Gin", price: "$63.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Leopold's American Gin bottle" },
{ id: "gin-20", name: "Monkey 47 Schwarzwald", price: "$79.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Monkey 47 Schwarzwald Gin bottle" },
{ id: "gin-21", name: "Bols Genever Gin", price: "$50.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Bols Genever Gin bottle" },
{ id: "gin-22", name: "Tanqueray Rangpur", price: "$53.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Tanqueray Rangpur bottle" },
{ id: "gin-23", name: "Empress Indigo Gin", price: "$66.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Empress Indigo Gin bottle" },
{ id: "gin-24", name: "Sipsmith London Dry", price: "$62.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Sipsmith London Dry Gin bottle" },
{ id: "gin-25", name: "Bombay Original Dry", price: "$47.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Bombay Original Dry Gin bottle" },
{ id: "gin-26", name: "Roku Japanese Gin", price: "$68.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Roku Japanese Gin bottle" },
{ id: "gin-27", name: "Four Pillars Rare", price: "$71.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Four Pillars Rare Gin bottle" },
{ id: "gin-28", name: "Bafferts London Dry", price: "$52.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Bafferts London Dry Gin bottle" },
{ id: "gin-29", name: "Sloane's Dry Gin", price: "$49.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Sloane's Dry Gin bottle" },
{ id: "gin-30", name: "Malfy Gin Con Limone", price: "$57.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Malfy Gin Con Limone bottle" },
{ id: "gin-31", name: "Brooker's London Dry", price: "$51.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Brooker's London Dry Gin bottle" },
{ id: "gin-32", name: "Luxardo Dry Gin", price: "$64.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "Luxardo Dry Gin bottle" },
{ id: "gin-33", name: "M&H Peaky Blinder", price: "$73.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "M&H Peaky Blinder Gin bottle" },
{ id: "gin-34", name: "Warner Edwards Gin", price: "$59.99", imageSrc: "https://images.unsplash.com/photo-1608603175141-b4e7ca6b9cc3?w=500&h=500&fit=crop", imageAlt: "Warner Edwards Gin bottle" },
{ id: "gin-35", name: "Fords Gin London Dry", price: "$58.99", imageSrc: "https://images.unsplash.com/photo-1608270861620-7c80b66ce398?w=500&h=500&fit=crop", imageAlt: "Fords Gin London Dry bottle" },
{ id: "gin-36", name: "The Tarquin's London Dry", price: "$60.99", imageSrc: "https://images.unsplash.com/photo-1599199810694-f3fc466b249b?w=500&h=500&fit=crop", imageAlt: "The Tarquin's London Dry Gin bottle" },
{ id: "gin-37", name: "Mombasa Club London Dry", price: "$55.99", imageSrc: "https://images.unsplash.com/photo-1510812431401-41d2cab2707c?w=500&h=500&fit=crop", imageAlt: "Mombasa Club London Dry Gin bottle" },
];
export default function GinCollection() {
const [selectedProduct, setSelectedProduct] = useState<typeof ginProducts[0] | null>(null);
const [cartItems, setCartItems] = useState<Array<any>>([]);
const [quantity, setQuantity] = useState(1);
const handleAddToCart = () => {
if (selectedProduct) {
const existingItem = cartItems.find(item => item.id === selectedProduct.id);
if (existingItem) {
setCartItems(cartItems.map(item =>
item.id === selectedProduct.id
? { ...item, quantity: item.quantity + quantity }
: item
));
} else {
setCartItems([...cartItems, { ...selectedProduct, quantity }]);
}
setQuantity(1);
setSelectedProduct(null);
}
};
const handleQuantityChange = (amount: number) => {
const newQuantity = quantity + amount;
if (newQuantity > 0) {
setQuantity(newQuantity);
}
};
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: "Gin Collection", id: "/gin" },
{ name: "Specials", id: "specials" },
{ name: "Selection", id: "selection" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Call Now", href: "tel:0994558333"
}}
animateOnLoad={true}
/>
</div>
<div id="gin-collection" data-section="gin-collection" className="min-h-screen py-16">
<div className="max-w-7xl mx-auto px-4">
<div className="mb-12">
<h1 className="text-5xl font-bold mb-4">Premium Gin Collection</h1>
<p className="text-xl text-foreground/80">Explore our extensive range of 37 premium gins from around the world</p>
</div>
{selectedProduct ? (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-card rounded-lg p-8 max-w-lg w-full">
<button
onClick={() => setSelectedProduct(null)}
className="float-right text-2xl font-bold text-foreground hover:text-accent"
>
×
</button>
<div className="mb-6">
<img
src={selectedProduct.imageSrc}
alt={selectedProduct.imageAlt}
className="w-full h-80 object-cover rounded-lg mb-4"
/>
<h2 className="text-2xl font-bold mb-2">{selectedProduct.name}</h2>
<p className="text-3xl font-bold text-primary-cta mb-6">{selectedProduct.price}</p>
</div>
<div className="mb-6">
<label className="block text-sm font-medium mb-2">Quantity</label>
<div className="flex items-center gap-4">
<button
onClick={() => handleQuantityChange(-1)}
className="px-4 py-2 bg-secondary-cta rounded-lg hover:opacity-80"
>
</button>
<span className="text-2xl font-bold w-12 text-center">{quantity}</span>
<button
onClick={() => handleQuantityChange(1)}
className="px-4 py-2 bg-secondary-cta rounded-lg hover:opacity-80"
>
+
</button>
</div>
</div>
<button
onClick={handleAddToCart}
className="w-full bg-primary-cta text-white py-3 rounded-lg font-bold hover:opacity-90 mb-2"
>
Add to Cart
</button>
<button
onClick={() => setSelectedProduct(null)}
className="w-full bg-secondary-cta text-foreground py-3 rounded-lg font-bold hover:opacity-90"
>
Close
</button>
</div>
</div>
) : null}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{ginProducts.map((product) => (
<div key={product.id} className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="w-full h-64 object-cover"
/>
<div className="p-4">
<h3 className="text-lg font-bold mb-2">{product.name}</h3>
<p className="text-2xl font-bold text-primary-cta mb-4">{product.price}</p>
<button
onClick={() => setSelectedProduct(product)}
className="w-full bg-primary-cta text-white py-2 rounded-lg font-bold hover:opacity-90"
>
View & Add to Cart
</button>
</div>
</div>
))}
</div>
</div>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get in Touch"
tagIcon={Phone}
tagAnimation="slide-up"
title="Questions About Our Gin Selection?"
description="Our expert staff can help you find the perfect gin for your taste preferences. Call us, visit in person, or send us a message."
buttons={[
{ text: "Call 09 945 8333", href: "tel:0994558333" },
{ text: "Get Directions", href: "https://maps.google.com/?q=14+Marsden+Road+Paihia+0200+New+Zealand" },
]}
buttonAnimation="slide-up"
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
/>
</div>
<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>
);
}