Merge version_1 into main #1
@@ -1,68 +1,47 @@
|
||||
use client";
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useBlogPosts } from "@/hooks/useBlogPosts";
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function BlogPage() {
|
||||
const { posts, isLoading } = useBlogPosts();
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Hero", id: "hero-section" },
|
||||
{ name: "About", id: "about-section" },
|
||||
{ name: "Feature", id: "features-section" },
|
||||
{ name: "Product", id: "products-section" },
|
||||
{ name: "Testimonial", id: "testimonials-section" },
|
||||
{ name: "Faq", id: "faq-section" },
|
||||
{ name: "Contact", id: "contact-section" }
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="WarmCrust Bakery"
|
||||
brandName="Sweet Crumb Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{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">
|
||||
<BlogCardThree
|
||||
blogs={posts}
|
||||
title="Featured Articles"
|
||||
description="Explore our latest insights"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
uniformGridCustomHeightClasses="min-h-[600px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="footer" data-section="footer" />
|
||||
<div id="blog-section" data-section="blog-section">
|
||||
{!isLoading && posts && posts.length > 0 && (
|
||||
<BlogCardThree posts={posts} />
|
||||
)}
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,23 +9,20 @@ const rubik = Rubik({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Artisan Baked Goods | Homemade Treats Made with Love", description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love. Experience the perfect blend of traditional techniques and quality ingredients.", keywords: ["artisan bakery", "homemade treats", "fresh baked goods", "local bakery", "cozy bakery experience"],
|
||||
title: "Artisan Baked Goods | Homemade Treats Made with Love", description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love. Experience the perfect blend of tradition and quality.", keywords: "bakery, artisan bread, fresh pastries, homemade, baked goods", openGraph: {
|
||||
title: "Artisan Baked Goods | Homemade Treats Made with Love", description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love.", type: "website"},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${rubik.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en" className={`${rubik.variable}`}>
|
||||
<body>
|
||||
<ServiceWrapper>{children}</ServiceWrapper>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1393,7 +1390,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
108
src/app/page.tsx
108
src/app/page.tsx
@@ -11,43 +11,38 @@ import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { Sparkles, Star } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const assetMap: Record<string, string> = {
|
||||
"hero-section-backgroundImage": "https://img.b2bpic.net/free-photo/front-view-delicious-thanksgiving-meal_23-2148629567.jpg", "about-section-imageSrc": "https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg", "features-section-localIngredients": "https://img.b2bpic.net/free-photo/flat-lay-composition-vegetables-with-copyspace_23-2148190200.jpg", "features-section-traditionalTechniques": "https://img.b2bpic.net/free-photo/ordered-composition-baking-tools-view_23-2150096486.jpg", "features-section-dailyFreshness": "https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg", "products-section-croissant": "https://img.b2bpic.net/free-photo/croissant-with-raspberries-wooden-platter_114579-18545.jpg", "products-section-chocolateChipCookie": "https://img.b2bpic.net/free-photo/closeup-shot-freshly-baked-chocolate-chip-cookies-white-plate-yellow-textile_181624-21376.jpg", "products-section-blueberryMuffin": "https://img.b2bpic.net/free-photo/muffins-with-black-currant_661915-152.jpg", "products-section-cinnamonRoll": "https://img.b2bpic.net/free-photo/flat-lay-cinnamon-roll-assortment_23-2148904728.jpg", "testimonials-section-testimonial1-image": "https://img.b2bpic.net/free-photo/man-baker-kitchen-by-pastry-cart_1303-32295.jpg", "testimonials-section-testimonial2-image": "https://img.b2bpic.net/free-photo/crop-daughter-giving-gift-mom-breakfast_23-2147788218.jpg", "testimonials-section-testimonial3-image": "https://img.b2bpic.net/free-photo/portrait-family-having-fun-kitchen_329181-5378.jpg", "testimonials-section-testimonial4-image": "https://img.b2bpic.net/free-photo/bread-baking-industry-tasty-pastry_1303-19776.jpg", "contact-section-backgroundImage": "https://img.b2bpic.net/free-photo/crumbles-chocholate-tasty-dessert-with-biscuit-top-wooden-table-near-delicious-coffee-mini-cake-baked-after-traditional-recipe_482257-19880.jpg", "footer-section-backgroundImage": "https://img.b2bpic.net/free-photo/bakery-atmospheric-photo_1321-4640.jpg"
|
||||
};
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
];
|
||||
|
||||
function getAssetUrl(id: string): string {
|
||||
return assetMap[id] || "/placeholders/placeholder1.webp";
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Hero", id: "hero-section" },
|
||||
{ name: "About", id: "about-section" },
|
||||
{ name: "Feature", id: "features-section" },
|
||||
{ name: "Product", id: "products-section" },
|
||||
{ name: "Testimonial", id: "testimonials-section" },
|
||||
{ name: "Faq", id: "faq-section" },
|
||||
{ name: "Contact", id: "contact-section" }
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="WarmCrust Bakery"
|
||||
brandName="Sweet Crumb Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +58,7 @@ export default function LandingPage() {
|
||||
{ text: "Visit Us", href: "#contact-section" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc={getAssetUrl("hero-section-backgroundImage")}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/front-view-delicious-thanksgiving-meal_23-2148629567.jpg"
|
||||
imageAlt="Cozy bakery interior with warm lighting and fresh baked goods on display"
|
||||
textPosition="bottom-left"
|
||||
showDimOverlay={true}
|
||||
@@ -84,7 +79,7 @@ export default function LandingPage() {
|
||||
{ text: "Visit Our Bakery", href: "#contact-section" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc={getAssetUrl("about-section-imageSrc")}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg"
|
||||
imageAlt="Baker preparing fresh bread in a cozy bakery setting"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="About our bakery and baking philosophy"
|
||||
@@ -100,16 +95,13 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "feature-1", title: "Locally Sourced Ingredients", description: "We partner with local farms and suppliers to bring you the freshest, highest-quality ingredients for our baked goods.", tag: "Fresh & Local", imageSrc: getAssetUrl("features-section-localIngredients"),
|
||||
imageAlt: "Farmers market produce and fresh ingredients"
|
||||
id: "feature-1", title: "Locally Sourced Ingredients", description: "We partner with local farms and suppliers to bring you the freshest, highest-quality ingredients for our baked goods.", tag: "Fresh & Local", imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-composition-vegetables-with-copyspace_23-2148190200.jpg", imageAlt: "Farmers market produce and fresh ingredients"
|
||||
},
|
||||
{
|
||||
id: "feature-2", title: "Traditional Techniques", description: "Each item is crafted using time-tested methods passed down through generations, ensuring authentic flavors and textures.", tag: "Time-Honored", imageSrc: getAssetUrl("features-section-traditionalTechniques"),
|
||||
imageAlt: "Baker working with traditional tools and dough"
|
||||
id: "feature-2", title: "Traditional Techniques", description: "Each item is crafted using time-tested methods passed down through generations, ensuring authentic flavors and textures.", tag: "Time-Honored", imageSrc: "https://img.b2bpic.net/free-photo/ordered-composition-baking-tools-view_23-2150096486.jpg", imageAlt: "Baker working with traditional tools and dough"
|
||||
},
|
||||
{
|
||||
id: "feature-3", title: "Daily Freshness", description: "Our baked goods are made fresh each morning, guaranteeing peak flavor and quality with every bite.", tag: "Made Daily", imageSrc: getAssetUrl("features-section-dailyFreshness"),
|
||||
imageAlt: "Freshly baked bread and pastries arranged on wooden tray"
|
||||
id: "feature-3", title: "Daily Freshness", description: "Our baked goods are made fresh each morning, guaranteeing peak flavor and quality with every bite.", tag: "Made Daily", imageSrc: "https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg", imageAlt: "Freshly baked bread and pastries arranged on wooden tray"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -119,20 +111,16 @@ export default function LandingPage() {
|
||||
<ProductCardOne
|
||||
products={[
|
||||
{
|
||||
id: "croissant", name: "Butter Croissant", price: "$3.50", imageSrc: getAssetUrl("products-section-croissant"),
|
||||
imageAlt: "A golden, flaky butter croissant with a crispy exterior and tender interior"
|
||||
id: "croissant", name: "Butter Croissant", price: "$3.50", imageSrc: "https://img.b2bpic.net/free-photo/croissant-with-raspberries-wooden-platter_114579-18545.jpg", imageAlt: "A golden, flaky butter croissant with a crispy exterior and tender interior"
|
||||
},
|
||||
{
|
||||
id: "chocolate-chip-cookie", name: "Chocolate Chip Cookie", price: "$2.25", imageSrc: getAssetUrl("products-section-chocolateChipCookie"),
|
||||
imageAlt: "A warm, chewy chocolate chip cookie with melted chocolate chips"
|
||||
id: "chocolate-chip-cookie", name: "Chocolate Chip Cookie", price: "$2.25", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-freshly-baked-chocolate-chip-cookies-white-plate-yellow-textile_181624-21376.jpg", imageAlt: "A warm, chewy chocolate chip cookie with melted chocolate chips"
|
||||
},
|
||||
{
|
||||
id: "blueberry-muffin", name: "Blueberry Muffin", price: "$3.00", imageSrc: getAssetUrl("products-section-blueberryMuffin"),
|
||||
imageAlt: "A moist blueberry muffin with fresh blueberries nestled inside"
|
||||
id: "blueberry-muffin", name: "Blueberry Muffin", price: "$3.00", imageSrc: "https://img.b2bpic.net/free-photo/muffins-with-black-currant_661915-152.jpg", imageAlt: "A moist blueberry muffin with fresh blueberries nestled inside"
|
||||
},
|
||||
{
|
||||
id: "cinnamon-roll", name: "Cinnamon Roll", price: "$4.00", imageSrc: getAssetUrl("products-section-cinnamonRoll"),
|
||||
imageAlt: "A warm cinnamon roll with a sweet glaze and cinnamon sugar coating"
|
||||
id: "cinnamon-roll", name: "Cinnamon Roll", price: "$4.00", imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-cinnamon-roll-assortment_23-2148904728.jpg", imageAlt: "A warm cinnamon roll with a sweet glaze and cinnamon sugar coating"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
@@ -149,7 +137,6 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Our artisanal baked goods selection"
|
||||
gridClassName="gap-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -158,23 +145,19 @@ export default function LandingPage() {
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1", name: "Sarah Johnson", role: "Local Food Blogger", company: "Bite & Sip", rating: 5,
|
||||
imageSrc: getAssetUrl("testimonials-section-testimonial1-image"),
|
||||
imageAlt: "Sarah Johnson, local food blogger, enjoying a fresh croissant"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/man-baker-kitchen-by-pastry-cart_1303-32295.jpg", imageAlt: "Sarah Johnson, local food blogger, enjoying a fresh croissant"
|
||||
},
|
||||
{
|
||||
id: "testimonial-2", name: "Michael Torres", role: "Regular Customer", company: "Tech Innovators Inc.", rating: 5,
|
||||
imageSrc: getAssetUrl("testimonials-section-testimonial2-image"),
|
||||
imageAlt: "Michael Torres, satisfied customer with a warm smile holding a pastry"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/crop-daughter-giving-gift-mom-breakfast_23-2147788218.jpg", imageAlt: "Michael Torres, satisfied customer with a warm smile holding a pastry"
|
||||
},
|
||||
{
|
||||
id: "testimonial-3", name: "Emma Richardson", role: "Café Owner", company: "Urban Grind Café", rating: 5,
|
||||
imageSrc: getAssetUrl("testimonials-section-testimonial3-image"),
|
||||
imageAlt: "Emma Richardson, café owner, praising the quality of baked goods"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/portrait-family-having-fun-kitchen_329181-5378.jpg", imageAlt: "Emma Richardson, café owner, praising the quality of baked goods"
|
||||
},
|
||||
{
|
||||
id: "testimonial-4", name: "David Chen", role: "Event Planner", company: "Celebration Events", rating: 5,
|
||||
imageSrc: getAssetUrl("testimonials-section-testimonial4-image"),
|
||||
imageAlt: "David Chen, event planner, with a box of artisanal pastries"
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/bread-baking-industry-tasty-pastry_1303-19776.jpg", imageAlt: "David Chen, event planner, with a box of artisanal pastries"
|
||||
}
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
@@ -193,12 +176,6 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Testimonials section featuring customer reviews"
|
||||
gridClassName="gap-6 md:gap-8"
|
||||
textBoxClassName="bg-white/80 backdrop-blur-sm p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
ratingClassName="text-amber-500 mb-2"
|
||||
nameClassName="font-semibold text-gray-800"
|
||||
roleClassName="text-sm text-gray-600"
|
||||
companyClassName="text-xs text-gray-500 mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -243,30 +220,23 @@ export default function LandingPage() {
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Your Phone Number" }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your Message", rows: 5,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc={getAssetUrl("contact-section-backgroundImage")}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/crumbles-chocholate-tasty-dessert-with-biscuit-top-wooden-table-near-delicious-coffee-mini-cake-baked-after-traditional-recipe_482257-19880.jpg"
|
||||
imageAlt="Cozy bakery interior with warm lighting and fresh pastries"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
ariaLabel="Contact section"
|
||||
className="py-16"
|
||||
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
||||
contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
|
||||
formCardClassName="bg-white rounded-xl shadow-lg p-8"
|
||||
titleClassName="text-3xl font-bold text-gray-900 mb-4"
|
||||
descriptionClassName="text-lg text-gray-600 mb-6"
|
||||
buttonClassName="bg-amber-600 hover:bg-amber-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105"
|
||||
buttonTextClassName="text-base"
|
||||
mediaWrapperClassName="relative rounded-xl overflow-hidden"
|
||||
mediaClassName="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-section" data-section="footer-section">
|
||||
<FooterMedia
|
||||
imageSrc={getAssetUrl("footer-section-backgroundImage")}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/bakery-atmospheric-photo_1321-4640.jpg"
|
||||
imageAlt="Cozy bakery interior with wooden shelves and warm lighting"
|
||||
columns={[
|
||||
{
|
||||
|
||||
@@ -8,206 +8,72 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
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";
|
||||
import Link from 'next/link';
|
||||
|
||||
interface ProductPageProps {
|
||||
function ProductDetailContent({
|
||||
params,
|
||||
}: {
|
||||
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 resolvedParams = use(params);
|
||||
const { product, isLoading } = useProductDetail(resolvedParams.id);
|
||||
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]);
|
||||
// Handle add to cart logic
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
|
||||
brandName="WarmCrust Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
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>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
return <div>Loading product...</div>;
|
||||
}
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
|
||||
brandName="WarmCrust Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
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>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
return <div>Product not found</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProductDetailCard product={product} onAddToCart={handleAddToCart} />
|
||||
<ProductCart />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProductDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
|
||||
brandName="WarmCrust Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="productDetailCard" data-section="productDetailCard">
|
||||
<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="productCart" data-section="productCart">
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
total={`$${cartTotal}`}
|
||||
buttons={[
|
||||
{
|
||||
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="Sweet Crumb Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<ProductDetailContent params={params} />
|
||||
</Suspense>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,93 +6,61 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||
import Link from 'next/link';
|
||||
|
||||
function ShopPageContent() {
|
||||
const {
|
||||
products,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
filters,
|
||||
} = useProductCatalog({ basePath: "/shop" });
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
|
||||
brandName="WarmCrust Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
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>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
categoryFilter,
|
||||
setCategoryFilter,
|
||||
} = useProductCatalog();
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
|
||||
brandName="WarmCrust Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@warmcrustbakery.com"
|
||||
topBarClassName=""
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="productCatalog" data-section="productCatalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
<ProductCatalog
|
||||
products={products}
|
||||
isLoading={isLoading}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
categoryFilter={categoryFilter}
|
||||
onCategoryChange={setCategoryFilter}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<ShopPageContent />
|
||||
</Suspense>
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="Sweet Crumb Bakery"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<ShopPageContent />
|
||||
</Suspense>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user