Merge version_1 into main #2
@@ -5,21 +5,18 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Sparkles, ShieldCheck } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
@@ -27,18 +24,16 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -59,7 +54,7 @@ export default function AboutPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems.map(item => ({ name: item.name, id: item.id }))}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -79,11 +74,13 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,94 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useBlogPosts } from "@/hooks/useBlogPosts";
|
||||
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
|
||||
export default function BlogPage() {
|
||||
const { posts, isLoading } = useBlogPosts();
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
{ label: "Accessories", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
{isLoading ? (
|
||||
<div className="w-content-width mx-auto py-20 text-center">
|
||||
<p className="text-foreground">Loading posts...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardOne
|
||||
blogs={posts}
|
||||
title="Latest Articles"
|
||||
description="Insights and updates from our team"
|
||||
tag="Blog"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products#hookahs" },
|
||||
{ label: "Tobacco", href: "/products#tobacco" },
|
||||
{ label: "Charcoal", href: "/products#charcoal" },
|
||||
{ label: "Accessories", href: "/products#accessories" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardTwo
|
||||
title="Insights & Guides"
|
||||
description="Stay informed with our latest articles, tips, and product reviews to perfect your hookah experience."
|
||||
tag="From Our Blog"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
blogs={[
|
||||
{ id: "1", category: ["Tips", "Setup"], title: "Mastering Your Hookah Setup: A Beginner's Guide", excerpt: "Learn the essential steps to setting up your hookah for the best smoke, from base to bowl.", imageSrc: "https://img.b2bpic.net/free-photo/bartender-pouring-cocktail-incredients-lounge-atmosphere_482257-24652.jpg", imageAlt: "Person setting up a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "May 10, 2024" },
|
||||
{ id: "2", category: ["Flavors", "Review"], title: "Top 5 New Tobacco Flavors You Must Try This Season", excerpt: "Dive into our review of the freshest and most exciting tobacco blends hitting the market.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-with-mixed-fruits-wooden-board-cocktails-side-view_141793-12246.jpg", imageAlt: "Variety of hookah tobacco flavors", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 28, 2024" },
|
||||
{ id: "3", category: ["Charcoal", "Guide"], title: "The Ultimate Guide to Hookah Charcoal: Types & Usage", excerpt: "Everything you need to know about choosing and managing your charcoal for a smooth session.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-ready-smoke_23-2149173608.jpg", imageAlt: "Various types of hookah charcoal", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 15, 2024" },
|
||||
{ id: "4", category: ["Maintenance", "Tips"], title: "Keeping Your Hookah Pristine: Cleaning & Care Tips", excerpt: "Extend the life of your hookah and ensure optimal performance with our expert cleaning advice.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Cleaning supplies for a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "March 20, 2024" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -3,22 +3,20 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
@@ -26,18 +24,16 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -58,7 +54,7 @@ export default function ContactPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems.map(item => ({ name: item.name, id: item.id }))}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -82,12 +78,27 @@ export default function ContactPage() {
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
title="Have Questions? We're Here to Help."
|
||||
description="Reach out to our friendly customer support team for any inquiries, product recommendations, or assistance with your order."
|
||||
background={{ variant: "floatingGradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="By submitting, you agree to our privacy policy and terms of service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -3,37 +3,23 @@ import { Inter_Tight } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const interTight = Inter_Tight({
|
||||
variable: "--font-inter-tight",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter-tight", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hookah Haven - Premium Hookah, Tobacco & Accessories",
|
||||
description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.",
|
||||
keywords: ["hookah", "shisha", "tobacco", "charcoal", "hookah accessories", "premium hookah", "online hookah store"],
|
||||
title: "Hookah Haven - Premium Hookah, Tobacco & Accessories", description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.", keywords: ["hookah", "shisha", "tobacco", "charcoal", "hookah accessories", "premium hookah", "online hookah store"],
|
||||
metadataBase: new URL("https://www.hookahhaven.com"),
|
||||
alternates: {
|
||||
canonical: "https://www.hookahhaven.com",
|
||||
},
|
||||
canonical: "https://www.hookahhaven.com"},
|
||||
openGraph: {
|
||||
title: "Hookah Haven - Premium Hookah, Tobacco & Accessories",
|
||||
description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.",
|
||||
url: "https://www.hookahhaven.com",
|
||||
siteName: "Hookah Haven",
|
||||
images: [
|
||||
title: "Hookah Haven - Premium Hookah, Tobacco & Accessories", description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.", url: "https://www.hookahhaven.com", siteName: "Hookah Haven", images: [
|
||||
{
|
||||
url: "https://img.b2bpic.net/free-photo/classic-hookah-beautiful-colored-rays-light-smoke-concept-hookah-smoking_169016-5136.jpg",
|
||||
alt: "Elegant hookah setup",
|
||||
},
|
||||
url: "https://img.b2bpic.net/free-photo/classic-hookah-beautiful-colored-rays-light-smoke-concept-hookah-smoking_169016-5136.jpg", alt: "Elegant hookah setup"},
|
||||
],
|
||||
type: "website",
|
||||
},
|
||||
type: "website"},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Hookah Haven - Premium Hookah, Tobacco & Accessories",
|
||||
description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.",
|
||||
images: ["https://img.b2bpic.net/free-photo/classic-hookah-beautiful-colored-rays-light-smoke-concept-hookah-smoking_169016-5136.jpg"],
|
||||
card: "summary_large_image", title: "Hookah Haven - Premium Hookah, Tobacco & Accessories", description: "Discover a premium selection of hookahs, high-quality tobacco, natural charcoal, and essential accessories for an unparalleled smoking experience. Shop now at Hookah Haven.", images: ["https://img.b2bpic.net/free-photo/classic-hookah-beautiful-colored-rays-light-smoke-concept-hookah-smoking_169016-5136.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
|
||||
@@ -9,21 +9,18 @@ import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Gift, Leaf, Plug, Truck } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
@@ -31,18 +28,16 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -63,7 +58,7 @@ export default function HomePage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems.map(item => ({ name: item.name, id: item.id }))}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -80,7 +75,7 @@ export default function HomePage() {
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/products" },
|
||||
{ text: "Explore Flavors", href: "/products" },
|
||||
{ text: "Explore Flavors", href: "/products#tobacco" },
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/classic-hookah-beautiful-colored-rays-light-smoke-concept-hookah-smoking_169016-5136.jpg"
|
||||
imageAlt="Elegant hookah setup with smoke in a luxurious setting"
|
||||
@@ -115,11 +110,11 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Omar K.", handle: "@hookahfanatic", testimonial: "Hookah Haven has the best selection, period. My 'Classic Elegance' hookah arrived fast and is a beauty. Five stars!", imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", imageAlt: "Omar K. avatar" },
|
||||
{ id: "2", name: "Sophia R.", handle: "@shishaqueen", testimonial: "The 'Rich Vanilla Tobacco' is heavenly. The flavors are so intense and smooth. My new go-to for quality shisha.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg?_wi=1", imageAlt: "Sophia R. avatar" },
|
||||
{ id: "2", name: "Sophia R.", handle: "@shishaqueen", testimonial: "The 'Rich Vanilla Tobacco' is heavenly. The flavors are so intense and smooth. My new go-to for quality shisha.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg", imageAlt: "Sophia R. avatar" },
|
||||
{ id: "3", name: "Ahmed G.", handle: "@charcoalguru", testimonial: "Their natural coconut charcoal burns perfectly, no weird taste, just clean heat. It makes a huge difference to my sessions.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3552.jpg", imageAlt: "Ahmed G. avatar" },
|
||||
{ id: "4", name: "Lena M.", handle: "@flavorchaser", testimonial: "I love the 'Exotic Flavor Assortment'! It's a great way to try new things. Always fresh and packed with flavor.", imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Lena M. avatar" },
|
||||
{ id: "5", name: "Jamal P.", handle: "@chillhookah", testimonial: "The customer service is outstanding. They helped me choose the perfect starter kit. Highly recommend for beginners!", imageSrc: "https://img.b2bpic.net/free-photo/portrait-cute-smiling-boy-cafe_23-2148436234.jpg", imageAlt: "Jamal P. avatar" },
|
||||
{ id: "6", name: "Chloe T.", handle: "@smoketricks", testimonial: "Found my favorite hookah accessory here, the ceramic bowl. It truly enhances the smoke. Great quality and prices!", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg?_wi=2", imageAlt: "Chloe T. avatar" }
|
||||
{ id: "6", name: "Chloe T.", handle: "@smoketricks", testimonial: "Found my favorite hookah accessory here, the ceramic bowl. It truly enhances the smoke. Great quality and prices!", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg", imageAlt: "Chloe T. avatar" }
|
||||
]}
|
||||
speed={35}
|
||||
/>
|
||||
@@ -134,10 +129,10 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
blogs={[
|
||||
{ id: "1", category: ["Tips", "Setup"], title: "Mastering Your Hookah Setup: A Beginner's Guide", excerpt: "Learn the essential steps to setting up your hookah for the best smoke, from base to bowl.", imageSrc: "https://img.b2bpic.net/free-photo/bartender-pouring-cocktail-incredients-lounge-atmosphere_482257-24652.jpg?_wi=1", imageAlt: "Person setting up a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "May 10, 2024" },
|
||||
{ id: "2", category: ["Flavors", "Review"], title: "Top 5 New Tobacco Flavors You Must Try This Season", excerpt: "Dive into our review of the freshest and most exciting tobacco blends hitting the market.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-with-mixed-fruits-wooden-board-cocktails-side-view_141793-12246.jpg?_wi=1", imageAlt: "Variety of hookah tobacco flavors", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 28, 2024" },
|
||||
{ id: "3", category: ["Charcoal", "Guide"], title: "The Ultimate Guide to Hookah Charcoal: Types & Usage", excerpt: "Everything you need to know about choosing and managing your charcoal for a smooth session.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-ready-smoke_23-2149173608.jpg?_wi=1", imageAlt: "Various types of hookah charcoal", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 15, 2024" },
|
||||
{ id: "4", category: ["Maintenance", "Tips"], title: "Keeping Your Hookah Pristine: Cleaning & Care Tips", excerpt: "Extend the life of your hookah and ensure optimal performance with our expert cleaning advice.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg?_wi=1", imageAlt: "Cleaning supplies for a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "March 20, 2024" }
|
||||
{ id: "1", category: ["Tips", "Setup"], title: "Mastering Your Hookah Setup: A Beginner's Guide", excerpt: "Learn the essential steps to setting up your hookah for the best smoke, from base to bowl.", imageSrc: "https://img.b2bpic.net/free-photo/bartender-pouring-cocktail-incredients-lounge-atmosphere_482257-24652.jpg", imageAlt: "Person setting up a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "May 10, 2024" },
|
||||
{ id: "2", category: ["Flavors", "Review"], title: "Top 5 New Tobacco Flavors You Must Try This Season", excerpt: "Dive into our review of the freshest and most exciting tobacco blends hitting the market.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-with-mixed-fruits-wooden-board-cocktails-side-view_141793-12246.jpg", imageAlt: "Variety of hookah tobacco flavors", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 28, 2024" },
|
||||
{ id: "3", category: ["Charcoal", "Guide"], title: "The Ultimate Guide to Hookah Charcoal: Types & Usage", excerpt: "Everything you need to know about choosing and managing your charcoal for a smooth session.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hookah-ready-smoke_23-2149173608.jpg", imageAlt: "Various types of hookah charcoal", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "April 15, 2024" },
|
||||
{ id: "4", category: ["Maintenance", "Tips"], title: "Keeping Your Hookah Pristine: Cleaning & Care Tips", excerpt: "Extend the life of your hookah and ensure optimal performance with our expert cleaning advice.", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213330.jpg", imageAlt: "Cleaning supplies for a hookah", authorName: "Hookah Haven Team", authorAvatar: "https://img.b2bpic.net/free-vector/gradient-labels-collection-luxurious-hotel-experience_23-2150241639.jpg", date: "March 20, 2024" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -155,11 +150,13 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -4,21 +4,18 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ProductsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
@@ -26,18 +23,16 @@ export default function ProductsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -58,7 +53,7 @@ export default function ProductsPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems.map(item => ({ name: item.name, id: item.id }))}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -81,11 +76,13 @@ export default function ProductsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,238 +1,76 @@
|
||||
use client";
|
||||
"use client";
|
||||
|
||||
import { Suspense, use, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
import ProductCart from "@/components/ecommerce/cart/ProductCart";
|
||||
import { useProductDetail } from "@/hooks/useProductDetail";
|
||||
import { useCart } from "@/hooks/useCart";
|
||||
import { useCheckout } from "@/hooks/useCheckout";
|
||||
|
||||
interface ProductPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default function ProductPage({ params }: ProductPageProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<ProductPageContent params={params} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductPageContent({ params }: ProductPageProps) {
|
||||
const { id } = use(params);
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
product,
|
||||
isLoading,
|
||||
images,
|
||||
meta,
|
||||
variants,
|
||||
quantityVariant,
|
||||
selectedQuantity,
|
||||
createCartItem,
|
||||
} = useProductDetail(id);
|
||||
|
||||
const {
|
||||
items: cartItems,
|
||||
isOpen: cartOpen,
|
||||
setIsOpen: setCartOpen,
|
||||
addItem,
|
||||
updateQuantity,
|
||||
removeItem,
|
||||
total: cartTotal,
|
||||
getCheckoutItems,
|
||||
} = useCart();
|
||||
|
||||
const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
|
||||
|
||||
const handleAddToCart = useCallback(() => {
|
||||
const item = createCartItem();
|
||||
if (item) {
|
||||
addItem(item);
|
||||
}
|
||||
}, [createCartItem, addItem]);
|
||||
|
||||
const handleBuyNow = useCallback(() => {
|
||||
if (product) {
|
||||
buyNow(product, selectedQuantity);
|
||||
}
|
||||
}, [product, selectedQuantity, buyNow]);
|
||||
|
||||
const handleCheckout = useCallback(async () => {
|
||||
if (cartItems.length === 0) return;
|
||||
|
||||
const currentUrl = new URL(window.location.href);
|
||||
currentUrl.searchParams.set("success", "true");
|
||||
|
||||
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
|
||||
}, [cartItems, checkout, getCheckoutItems]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading product...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hookahs", href: "/products#hookahs" }, { label: "Tobacco", href: "/products#tobacco" }, { label: "Charcoal", href: "/products#charcoal" }, { label: "Accessories", href: "/products#accessories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Blog", href: "/blog" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<div className="text-center">
|
||||
<p className="text-foreground mb-4">Product not found</p>
|
||||
<button
|
||||
onClick={() => router.push("/shop")}
|
||||
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
|
||||
>
|
||||
Back to Shop
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hookahs", href: "/products#hookahs" }, { label: "Tobacco", href: "/products#tobacco" }, { label: "Charcoal", href: "/products#charcoal" }, { label: "Accessories", href: "/products#accessories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Blog", href: "/blog" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="product-detail-card" data-section="product-detail-card">
|
||||
<ProductDetailCard
|
||||
layout="page"
|
||||
name={product.name}
|
||||
price={product.price}
|
||||
salePrice={meta.salePrice}
|
||||
rating={product.rating || 0}
|
||||
description={product.description}
|
||||
images={images}
|
||||
variants={variants.length > 0 ? variants : undefined}
|
||||
quantity={quantityVariant}
|
||||
ribbon={meta.ribbon}
|
||||
inventoryStatus={meta.inventoryStatus}
|
||||
inventoryQuantity={meta.inventoryQuantity}
|
||||
sku={meta.sku}
|
||||
buttons={[
|
||||
{ text: "Add To Cart", onClick: handleAddToCart },
|
||||
{ text: "Buy Now", onClick: handleBuyNow },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="product-cart" data-section="product-cart">
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
total={`$${cartTotal}`}
|
||||
buttons={[
|
||||
{
|
||||
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hookahs", href: "/products#hookahs" }, { label: "Tobacco", href: "/products#tobacco" }, { label: "Charcoal", href: "/products#charcoal" }, { label: "Accessories", href: "/products#accessories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Blog", href: "/blog" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
export default function ProductPage({ params }: { params: { id: string } }) {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
{ label: "Accessories", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Product Detail Page</h1>
|
||||
<p className="text-lg">Product ID: {params.id}</p>
|
||||
<p>Details for this product will be shown here.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,154 +1,88 @@
|
||||
use client";
|
||||
"use client";
|
||||
|
||||
import { Suspense, useCallback } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import ProductCart from "@/components/ecommerce/cart/ProductCart";
|
||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||
import { useCart } from "@/hooks/useCart";
|
||||
import { useCheckout } from "@/hooks/useCheckout";
|
||||
|
||||
function ShopPageContent() {
|
||||
const {
|
||||
products,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
filters,
|
||||
} = useProductCatalog({ basePath: "/shop" });
|
||||
|
||||
const {
|
||||
items: cartItems,
|
||||
isOpen: cartOpen,
|
||||
setIsOpen: setCartOpen,
|
||||
updateQuantity,
|
||||
removeItem,
|
||||
total: cartTotal,
|
||||
getCheckoutItems,
|
||||
} = useCart();
|
||||
|
||||
const { checkout, isLoading: isCheckoutLoading } = useCheckout();
|
||||
|
||||
const handleCheckout = useCallback(async () => {
|
||||
if (cartItems.length === 0) return;
|
||||
|
||||
const currentUrl = new URL(window.location.href);
|
||||
currentUrl.searchParams.set("success", "true");
|
||||
|
||||
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
|
||||
}, [cartItems, checkout, getCheckoutItems]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hookahs", href: "/products#hookahs" }, { label: "Tobacco", href: "/products#tobacco" }, { label: "Charcoal", href: "/products#charcoal" }, { label: "Accessories", href: "/products#accessories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Blog", href: "/blog" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="product-catalog" data-section="product-catalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found"
|
||||
/>
|
||||
</div>
|
||||
<div id="product-cart" data-section="product-cart">
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
total={`$${cartTotal}`}
|
||||
buttons={[
|
||||
{
|
||||
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Hookahs", href: "/products#hookahs" }, { label: "Tobacco", href: "/products#tobacco" }, { label: "Charcoal", href: "/products#charcoal" }, { label: "Accessories", href: "/products#accessories" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Blog", href: "/blog" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<ShopPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hookahs", href: "/products" },
|
||||
{ label: "Tobacco", href: "/products" },
|
||||
{ label: "Charcoal", href: "/products" },
|
||||
{ label: "Accessories", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Hookah Haven"
|
||||
navItems={navItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Our Signature Collection"
|
||||
description="Hand-picked for connoisseurs: discover our best-selling hookahs, premium tobacco, and essential accessories."
|
||||
products={[
|
||||
{ id: "1", name: "Classic Elegance Hookah", price: "$129.99", imageSrc: "https://img.b2bpic.net/free-photo/meduza-hookah-with-cockatails-side-view_140725-9140.jpg", imageAlt: "Classic glass hookah" },
|
||||
{ id: "2", name: "Rich Vanilla Tobacco", price: "$19.99", imageSrc: "https://img.b2bpic.net/free-photo/fresh-shisha-woman-hands_140725-1338.jpg", imageAlt: "Pack of vanilla hookah tobacco" },
|
||||
{ id: "3", name: "Natural Coconut Charcoal", price: "$14.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-still-life-composition_23-2149213336.jpg", imageAlt: "Box of natural coconut charcoal" },
|
||||
{ id: "4", name: "Premium Ceramic Bowl", price: "$24.99", imageSrc: "https://img.b2bpic.net/free-photo/hookah-isolated-white_93675-132617.jpg", imageAlt: "Detailed ceramic hookah bowl" },
|
||||
{ id: "5", name: "Beginner's Hookah Kit", price: "$89.99", imageSrc: "https://img.b2bpic.net/free-photo/people-enjoying-night-out-together_23-2149173653.jpg", imageAlt: "Complete hookah starter kit" },
|
||||
{ id: "6", name: "Exotic Flavor Assortment", price: "$49.99", imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-imposes-pineapple-jam-saucer-with-nuts-glass-tea-table_141793-13056.jpg", imageAlt: "Collection of various hookah tobacco flavors" }
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Hookah Haven"
|
||||
copyrightText="© 2024 Hookah Haven. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user