Update src/app/page.tsx

This commit is contained in:
2026-03-09 21:15:41 +00:00
parent e82d68de00
commit 9e56e790b4

View File

@@ -11,8 +11,34 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Beer, Leaf, Mail, MapPin, Package, Phone, Quote, ShoppingCart, Star, Wine, Zap } from 'lucide-react';
import { useEffect, useState } from 'react';
export default function LandingPage() {
const [isMobile, setIsMobile] = useState(false);
const [stickyVisible, setStickyVisible] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768);
};
const handleScroll = () => {
const currentScrollY = window.scrollY;
setStickyVisible(currentScrollY < lastScrollY || currentScrollY < 100);
setLastScrollY(currentScrollY);
};
handleResize();
window.addEventListener('resize', handleResize);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('scroll', handleScroll);
};
}, [lastScrollY]);
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -36,11 +62,33 @@ export default function LandingPage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Call Now", href: "tel:0994558333"}}
text: "Call Now", href: "tel:0994558333"
}}
animateOnLoad={true}
/>
</div>
{isMobile && stickyVisible && (
<div className="fixed bottom-0 left-0 right-0 z-40 bg-gradient-to-t from-card via-card to-transparent backdrop-blur-md border-t border-accent/20 p-3 flex gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300">
<a
href="tel:0994558333"
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-primary-cta text-background rounded-full font-semibold text-sm hover:shadow-lg transition-all duration-300 hover:scale-105"
>
<Phone className="w-4 h-4" />
<span>Call</span>
</a>
<a
href="https://maps.google.com/?q=14+Marsden+Road+Paihia+0200+New+Zealand"
target="_blank"
rel="noopener noreferrer"
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-secondary-cta text-foreground rounded-full font-semibold text-sm hover:shadow-lg transition-all duration-300 hover:scale-105 border border-accent/30"
>
<MapPin className="w-4 h-4" />
<span>Directions</span>
</a>
</div>
)}
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Your Local Bottle Shop in Paihia"
@@ -60,13 +108,16 @@ export default function LandingPage() {
testimonials={[
{
name: "Sarah Mitchell", handle: "Tourist from Auckland", testimonial: "Great friendly service and excellent selection. Found exactly what I needed!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg"},
imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg"
},
{
name: "James Wilson", handle: "Local Resident", testimonial: "Best bottle shop in Paihia. Always quick service and competitive prices.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg"},
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg"
},
{
name: "Emma Davis", handle: "Holiday Visitor", testimonial: "Convenient location and friendly staff made my stay in Paihia perfect.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-young-model-woman-making-selfie-alp-mountains-wearing-dress-leather-jacket-sunglasses-backpack_291049-83.jpg"},
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-young-model-woman-making-selfie-alp-mountains-wearing-dress-leather-jacket-sunglasses-backpack_291049-83.jpg"
},
]}
testimonialRotationInterval={5000}
useInvertedBackground={false}
@@ -82,13 +133,17 @@ export default function LandingPage() {
tagAnimation="slide-up"
metrics={[
{
id: "1", title: "4.0 ★ Google Rating", subtitle: "Verified customer reviews", category: "Reputation", value: "43+ Reviews"},
id: "1", title: "4.0 ★ Google Rating", subtitle: "Verified customer reviews", category: "Reputation", value: "43+ Reviews"
},
{
id: "2", title: "Fast Friendly Service", subtitle: "Quick transactions guaranteed", category: "Experience", value: "In & Out"},
id: "2", title: "Fast Friendly Service", subtitle: "Quick transactions guaranteed", category: "Experience", value: "In & Out"
},
{
id: "3", title: "Convenient Location", subtitle: "Walking distance from hotels", category: "Location", value: "Central Paihia"},
id: "3", title: "Convenient Location", subtitle: "Walking distance from hotels", category: "Location", value: "Central Paihia"
},
{
id: "4", title: "Cold Drinks Ready", subtitle: "Refreshment on demand", category: "Service", value: "Always Stocked"},
id: "4", title: "Cold Drinks Ready", subtitle: "Refreshment on demand", category: "Service", value: "Always Stocked"
},
]}
animationType="slide-up"
textboxLayout="default"
@@ -97,7 +152,32 @@ export default function LandingPage() {
/>
</div>
<div id="specials" data-section="specials">
<div id="specials" data-section="specials" className="relative">
<style>{`
@keyframes swipe {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.swipe-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.swipe-container > * {
scroll-snap-align: start;
}
.product-card-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card-glass:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
`}</style>
<ProductCardOne
title="Weekly Specials & Deals"
description="Check out our latest promotions and exclusive in-store offers"
@@ -106,11 +186,14 @@ export default function LandingPage() {
tagAnimation="slide-up"
products={[
{
id: "1", name: "Beer Selection Specials", price: "From $15.99", imageSrc: "http://img.b2bpic.net/free-photo/top-view-beer-bottles-with-chips_23-2148673798.jpg", imageAlt: "Beer specials selection"},
id: "1", name: "Beer Selection Specials", price: "From $15.99", imageSrc: "http://img.b2bpic.net/free-photo/top-view-beer-bottles-with-chips_23-2148673798.jpg", imageAlt: "Beer specials selection"
},
{
id: "2", name: "Premium Wine Promotions", price: "From $22.99", imageSrc: "http://img.b2bpic.net/free-photo/tray-with-wine-bottle-stoppers-beside_23-2148414202.jpg", imageAlt: "Wine selection deals"},
id: "2", name: "Premium Wine Promotions", price: "From $22.99", imageSrc: "http://img.b2bpic.net/free-photo/tray-with-wine-bottle-stoppers-beside_23-2148414202.jpg", imageAlt: "Wine selection deals"
},
{
id: "3", name: "Spirit Deals", price: "From $29.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-tasty-american-beer-assortment_23-2148907595.jpg", imageAlt: "Spirits promotion"},
id: "3", name: "Spirit Deals", price: "From $29.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-tasty-american-beer-assortment_23-2148907595.jpg", imageAlt: "Spirits promotion"
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -119,6 +202,7 @@ export default function LandingPage() {
buttons={[
{ text: "View All Specials", href: "tel:0994558333" },
]}
cardClassName="product-card-glass"
/>
</div>
@@ -132,26 +216,34 @@ export default function LandingPage() {
features={[
{
icon: Beer,
title: "Beer & Cider", description: "Craft, local, and international beers. Ice-cold ciders ready to go."},
title: "Beer & Cider", description: "Craft, local, and international beers. Ice-cold ciders ready to go."
},
{
icon: Wine,
title: "Wine Selection", description: "Red, white, and rosé wines from premium local and imported vineyards."},
title: "Wine Selection", description: "Red, white, and rosé wines from premium local and imported vineyards."
},
{
icon: Wine,
title: "Spirits & Liqueurs", description: "Whisky, vodka, rum, gin, and premium liqueurs for every taste."},
title: "Spirits & Liqueurs", description: "Whisky, vodka, rum, gin, and premium liqueurs for every taste."
},
{
icon: Zap,
title: "Ready-to-Drink", description: "Pre-mixed cocktails and convenient RTD beverages for quick purchases."},
title: "Ready-to-Drink", description: "Pre-mixed cocktails and convenient RTD beverages for quick purchases."
},
{
icon: MapPin,
title: "Local Favourites", description: "Supporting local breweries and distilleries from Bay of Islands region."},
title: "Local Favourites", description: "Supporting local breweries and distilleries from Bay of Islands region."
},
{
icon: Leaf,
title: "Wellness Options", description: "Low-alcohol and alcohol-free alternatives for mindful choices."},
title: "Wellness Options", description: "Low-alcohol and alcohol-free alternatives for mindful choices."
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
cardClassName="group relative bg-gradient-to-br from-card via-background to-background-accent border border-accent/20 rounded-xl p-6 transition-all duration-500 hover:shadow-2xl hover:border-accent/50 overflow-hidden"
gradientClassName="bg-gradient-to-r from-primary-cta/20 via-secondary-cta/20 to-accent/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
/>
</div>
@@ -168,6 +260,7 @@ export default function LandingPage() {
imageAlt="Ready to drink beverages display"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
cardClassName="backdrop-blur-xl bg-gradient-to-br from-card/90 via-background/80 to-background-accent/70 border border-accent/30"
/>
</div>
@@ -202,6 +295,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
cardClassName="backdrop-blur-lg bg-gradient-to-br from-card/80 via-background/70 to-background-accent/60 border border-accent/25 shadow-lg hover:shadow-2xl transition-all duration-500 hover:border-accent/50"
/>
</div>
@@ -219,6 +313,7 @@ export default function LandingPage() {
buttonAnimation="slide-up"
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
contentClassName="backdrop-blur-xl bg-gradient-to-br from-card/90 via-background/80 to-background-accent/70 border border-accent/30 shadow-2xl"
/>
</div>
@@ -229,13 +324,16 @@ export default function LandingPage() {
socialLinks={[
{
icon: Phone,
href: "tel:0994558333", ariaLabel: "Call us"},
href: "tel:0994558333", ariaLabel: "Call us"
},
{
icon: MapPin,
href: "https://maps.google.com/?q=14+Marsden+Road+Paihia+0200+New+Zealand", ariaLabel: "Get directions"},
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"},
href: "mailto:info@superliquorpaihia.co.nz", ariaLabel: "Send email"
},
]}
/>
</div>