Add src/app/gin/page.tsx
This commit is contained in:
235
src/app/gin/page.tsx
Normal file
235
src/app/gin/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user