Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f09a51e967 | |||
| 42004a5519 | |||
| 4f06fe3899 | |||
| f33e7c9870 | |||
| d3cb9e3710 | |||
| 314e982071 | |||
| cec8d35af3 | |||
| 94ca28858b | |||
| 8f115856ea | |||
| ba46b48e13 | |||
| ac9a063c7f | |||
| 86c52a4667 |
@@ -1,13 +1,20 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import ReactLenis from "lenis/react";
|
|
||||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||||
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
||||||
import { useBlogPosts } from "@/hooks/useBlogPosts";
|
import { useBlogPosts } from "@/hooks/useBlogPosts";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Menu", id: "/#menu" },
|
||||||
|
{ name: "Brew Process", id: "/#process" },
|
||||||
|
{ name: "Contact", id: "/#contact" }
|
||||||
|
];
|
||||||
|
|
||||||
export default function BlogPage() {
|
export default function BlogPage() {
|
||||||
const { posts, isLoading } = useBlogPosts();
|
const { posts, isLoading } = useBlogPosts();
|
||||||
|
|
||||||
@@ -24,61 +31,53 @@ export default function BlogPage() {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<div id="nav" data-section="nav">
|
||||||
<div id="nav" data-section="nav">
|
<NavbarStyleCentered
|
||||||
<NavbarStyleCentered
|
brandName="Bakteria"
|
||||||
brandName="Bakteria"
|
navItems={navItems}
|
||||||
navItems={[
|
button={{ text: "Order Now", href: "/#contact" }}
|
||||||
{ name: "Home", id: "/" },
|
/>
|
||||||
{ name: "About", id: "about" },
|
</div>
|
||||||
{ name: "Menu", id: "menu" },
|
|
||||||
{ name: "Brew Process", id: "process" },
|
{isLoading ? (
|
||||||
{ name: "Contact", id: "contact" }
|
<div className="w-full mx-auto py-20 text-center">
|
||||||
]}
|
<p className="text-foreground">Loading posts...</p>
|
||||||
button={{ text: "Order Now", href: "contact" }}
|
</div>
|
||||||
|
) : (
|
||||||
|
<div id="blog" data-section="blog">
|
||||||
|
<BlogCardOne
|
||||||
|
blogs={posts}
|
||||||
|
title="Coffee Stories & Insights"
|
||||||
|
description="Discover the art of coffee roasting, brewing techniques, and the stories behind our exceptional beans"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
animationType="slide-up"
|
||||||
|
carouselMode="buttons"
|
||||||
|
tag="Blog"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{isLoading ? (
|
<div id="footer" data-section="footer">
|
||||||
<div className="w-content-width mx-auto py-20 text-center">
|
<FooterCard
|
||||||
<p className="text-foreground">Loading posts...</p>
|
logoText="Bakteria"
|
||||||
</div>
|
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
||||||
) : (
|
socialLinks={[
|
||||||
<div id="blog" data-section="blog">
|
{
|
||||||
<BlogCardTwo
|
icon: Instagram,
|
||||||
blogs={posts}
|
href: "https://instagram.com/bakteriacoffee", ariaLabel: "Instagram"
|
||||||
title="Coffee Stories & Insights"
|
},
|
||||||
description="Discover the art of coffee roasting, brewing techniques, and the stories behind our exceptional beans"
|
{
|
||||||
textboxLayout="default"
|
icon: Twitter,
|
||||||
useInvertedBackground={false}
|
href: "https://twitter.com/bakteriacoffee", ariaLabel: "Twitter"
|
||||||
animationType="slide-up"
|
},
|
||||||
carouselMode="buttons"
|
{
|
||||||
tag="Blog"
|
icon: Facebook,
|
||||||
/>
|
href: "https://facebook.com/bakteriacoffee", ariaLabel: "Facebook"
|
||||||
</div>
|
}
|
||||||
)}
|
]}
|
||||||
|
/>
|
||||||
<div id="footer" data-section="footer">
|
</div>
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{
|
|
||||||
icon: Instagram,
|
|
||||||
href: "https://instagram.com/bakteriacoffee", ariaLabel: "Instagram"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Twitter,
|
|
||||||
href: "https://twitter.com/bakteriacoffee", ariaLabel: "Twitter"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Facebook,
|
|
||||||
href: "https://facebook.com/bakteriacoffee", ariaLabel: "Facebook"
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
2766
src/app/layout.tsx
2766
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
@@ -11,6 +11,14 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import { Coffee, Instagram, Twitter, Facebook } from "lucide-react";
|
import { Coffee, Instagram, Twitter, Facebook } from "lucide-react";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Menu", id: "/#menu" },
|
||||||
|
{ name: "Brew Process", id: "/#process" },
|
||||||
|
{ name: "Contact", id: "/#contact" }
|
||||||
|
];
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
@@ -28,15 +36,9 @@ export default function LandingPage() {
|
|||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Bakteria"
|
brandName="Bakteria"
|
||||||
navItems={[
|
navItems={navItems}
|
||||||
{ name: "Home", id: "hero" },
|
|
||||||
{ name: "About", id: "about" },
|
|
||||||
{ name: "Menu", id: "menu" },
|
|
||||||
{ name: "Brew Process", id: "process" },
|
|
||||||
{ name: "Contact", id: "contact" }
|
|
||||||
]}
|
|
||||||
button={{
|
button={{
|
||||||
text: "Order Now", href: "contact"
|
text: "Order Now", href: "/#contact"
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -50,8 +52,8 @@ export default function LandingPage() {
|
|||||||
imageSrc="https://img.b2bpic.net/free-vector/digital-technology-with-hexagonal-shapes_1017-29805.jpg?id=12320003"
|
imageSrc="https://img.b2bpic.net/free-vector/digital-technology-with-hexagonal-shapes_1017-29805.jpg?id=12320003"
|
||||||
imageAlt="Bakteria Coffee Roastery Setup"
|
imageAlt="Bakteria Coffee Roastery Setup"
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Explore Our Menu", href: "menu" },
|
{ text: "Explore Our Menu", href: "/#menu" },
|
||||||
{ text: "Learn More", href: "about" }
|
{ text: "Learn More", href: "/#about" }
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -64,7 +66,6 @@ export default function LandingPage() {
|
|||||||
subdescription="Bakteria Coffee Roastery"
|
subdescription="Bakteria Coffee Roastery"
|
||||||
icon={Coffee}
|
icon={Coffee}
|
||||||
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1771409435358-37r0e5p4.mp4"
|
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1771409435358-37r0e5p4.mp4"
|
||||||
imageAlt="Roastery Interior"
|
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
@@ -191,4 +192,4 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,26 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { use, useCallback } from "react";
|
import { use } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import ReactLenis from "lenis/react";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
|
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||||
import ProductCart from "@/components/ecommerce/cart/ProductCart";
|
|
||||||
import { useProductDetail } from "@/hooks/useProductDetail";
|
import { useProductDetail } from "@/hooks/useProductDetail";
|
||||||
import { useCart } from "@/hooks/useCart";
|
|
||||||
import { useCheckout } from "@/hooks/useCheckout";
|
|
||||||
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
||||||
|
|
||||||
interface ProductPageProps {
|
interface ProductPageProps {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Menu", id: "/#menu" },
|
||||||
|
{ name: "Brew Process", id: "/#process" },
|
||||||
|
{ name: "Contact", id: "/#contact" }
|
||||||
|
];
|
||||||
|
|
||||||
export default function ProductPage({ params }: ProductPageProps) {
|
export default function ProductPage({ params }: ProductPageProps) {
|
||||||
const { id } = use(params);
|
const { id } = use(params);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -28,148 +32,56 @@ export default function ProductPage({ params }: ProductPageProps) {
|
|||||||
meta,
|
meta,
|
||||||
variants,
|
variants,
|
||||||
quantityVariant,
|
quantityVariant,
|
||||||
selectedQuantity,
|
|
||||||
createCartItem,
|
|
||||||
} = useProductDetail(id);
|
} = useProductDetail(id);
|
||||||
|
|
||||||
const {
|
const renderContent = () => {
|
||||||
items: cartItems,
|
if (isLoading) {
|
||||||
isOpen: cartOpen,
|
return (
|
||||||
setIsOpen: setCartOpen,
|
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||||
addItem,
|
<p className="text-foreground">Loading product...</p>
|
||||||
updateQuantity,
|
</main>
|
||||||
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) {
|
||||||
if (product) {
|
return (
|
||||||
buyNow(product, selectedQuantity);
|
<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"
|
||||||
|
>
|
||||||
|
Back to Shop
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}, [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 (
|
return (
|
||||||
<ThemeProvider
|
<div id="productDetailCard" data-section="productDetailCard">
|
||||||
defaultButtonVariant="icon-arrow"
|
<ProductDetailCard
|
||||||
defaultTextAnimation="background-highlight"
|
layout="page"
|
||||||
borderRadius="rounded"
|
name={product.name}
|
||||||
contentWidth="smallMedium"
|
price={product.price}
|
||||||
sizing="large"
|
salePrice={meta.salePrice}
|
||||||
background="grid"
|
rating={product.rating || 0}
|
||||||
cardStyle="solid"
|
description={product.description}
|
||||||
primaryButtonStyle="double-inset"
|
images={images}
|
||||||
secondaryButtonStyle="glass"
|
variants={variants.length > 0 ? variants : undefined}
|
||||||
headingFontWeight="extrabold"
|
quantity={quantityVariant}
|
||||||
>
|
ribbon={meta.ribbon}
|
||||||
<ReactLenis root>
|
inventoryStatus={meta.inventoryStatus}
|
||||||
<div id="navbar" data-section="navbar">
|
inventoryQuantity={meta.inventoryQuantity}
|
||||||
<NavbarStyleCentered
|
sku={meta.sku}
|
||||||
brandName="Bakteria"
|
buttons={[
|
||||||
navItems={[
|
{ text: "Learn More", onClick: () => router.push('/#process') },
|
||||||
{"name":"Home","id":"/"},
|
]}
|
||||||
{"name":"About","id":"about"},
|
/>
|
||||||
{"name":"Menu","id":"menu"},
|
</div>
|
||||||
{"name":"Brew Process","id":"process"},
|
|
||||||
{"name":"Contact","id":"contact"},
|
|
||||||
{"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">
|
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{"icon":Instagram,"href":"https://instagram.com/bakteriacoffee","ariaLabel":"Instagram"},
|
|
||||||
{"icon":Twitter,"href":"https://twitter.com/bakteriacoffee","ariaLabel":"Twitter"},
|
|
||||||
{"icon":Facebook,"href":"https://facebook.com/bakteriacoffee","ariaLabel":"Facebook"}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
if (!product) {
|
|
||||||
return (
|
|
||||||
<ThemeProvider
|
|
||||||
defaultButtonVariant="icon-arrow"
|
|
||||||
defaultTextAnimation="background-highlight"
|
|
||||||
borderRadius="rounded"
|
|
||||||
contentWidth="smallMedium"
|
|
||||||
sizing="large"
|
|
||||||
background="grid"
|
|
||||||
cardStyle="solid"
|
|
||||||
primaryButtonStyle="double-inset"
|
|
||||||
secondaryButtonStyle="glass"
|
|
||||||
headingFontWeight="extrabold"
|
|
||||||
>
|
|
||||||
<ReactLenis root>
|
|
||||||
<div id="navbar" data-section="navbar">
|
|
||||||
<NavbarStyleCentered
|
|
||||||
brandName="Bakteria"
|
|
||||||
navItems={[
|
|
||||||
{"name":"Home","id":"/"},
|
|
||||||
{"name":"About","id":"about"},
|
|
||||||
{"name":"Menu","id":"menu"},
|
|
||||||
{"name":"Brew Process","id":"process"},
|
|
||||||
{"name":"Contact","id":"contact"},
|
|
||||||
{"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"
|
|
||||||
>
|
|
||||||
Back to Shop
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{"icon":Instagram,"href":"https://instagram.com/bakteriacoffee","ariaLabel":"Instagram"},
|
|
||||||
{"icon":Twitter,"href":"https://twitter.com/bakteriacoffee","ariaLabel":"Twitter"},
|
|
||||||
{"icon":Facebook,"href":"https://facebook.com/bakteriacoffee","ariaLabel":"Facebook"}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
@@ -184,69 +96,25 @@ export default function ProductPage({ params }: ProductPageProps) {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<div id="nav" data-section="nav">
|
||||||
<div id="navbar" data-section="navbar">
|
<NavbarStyleCentered
|
||||||
<NavbarStyleCentered
|
brandName="Bakteria"
|
||||||
brandName="Bakteria"
|
navItems={navItems}
|
||||||
navItems={[
|
button={{ text: "Order Now", href: "/#contact" }}
|
||||||
{"name":"Home","id":"/"},
|
/>
|
||||||
{"name":"About","id":"about"},
|
</div>
|
||||||
{"name":"Menu","id":"menu"},
|
{renderContent()}
|
||||||
{"name":"Brew Process","id":"process"},
|
<div id="footer" data-section="footer">
|
||||||
{"name":"Contact","id":"contact"},
|
<FooterCard
|
||||||
{"name":"Shop","id":"/shop"}
|
logoText="Bakteria"
|
||||||
]}
|
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
||||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
socialLinks={[
|
||||||
/>
|
{ icon: Instagram, href: "https://instagram.com/bakteriacoffee", ariaLabel: "Instagram" },
|
||||||
</div>
|
{ icon: Twitter, href: "https://twitter.com/bakteriacoffee", ariaLabel: "Twitter" },
|
||||||
<div id="productDetailCard" data-section="productDetailCard">
|
{ icon: Facebook, href: "https://facebook.com/bakteriacoffee", ariaLabel: "Facebook" }
|
||||||
<ProductDetailCard
|
]}
|
||||||
layout="page"
|
/>
|
||||||
name={product.name}
|
</div>
|
||||||
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>
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{"icon":Instagram,"href":"https://instagram.com/bakteriacoffee","ariaLabel":"Instagram"},
|
|
||||||
{"icon":Twitter,"href":"https://twitter.com/bakteriacoffee","ariaLabel":"Twitter"},
|
|
||||||
{"icon":Facebook,"href":"https://facebook.com/bakteriacoffee","ariaLabel":"Facebook"}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,69 +1,34 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import ReactLenis from "lenis/react";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||||
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
import { Instagram, Twitter, Facebook } from 'lucide-react';
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Menu", id: "/#menu" },
|
||||||
|
{ name: "Brew Process", id: "/#process" },
|
||||||
|
{ name: "Contact", id: "/#contact" }
|
||||||
|
];
|
||||||
|
|
||||||
export default function ShopPage() {
|
export default function ShopPage() {
|
||||||
const {
|
const {
|
||||||
products,
|
products,
|
||||||
isLoading,
|
isLoading,
|
||||||
search,
|
|
||||||
setSearch,
|
|
||||||
filters,
|
|
||||||
} = useProductCatalog({ basePath: "/shop" });
|
} = useProductCatalog({ basePath: "/shop" });
|
||||||
|
|
||||||
if (isLoading) {
|
const formattedProducts = products.map((p: any) => ({
|
||||||
return (
|
id: p.id,
|
||||||
<ThemeProvider
|
name: p.name,
|
||||||
defaultButtonVariant="icon-arrow"
|
price: p.price,
|
||||||
defaultTextAnimation="background-highlight"
|
variant: p.meta?.variant || 'Coffee Beans',
|
||||||
borderRadius="rounded"
|
imageSrc: p.images?.[0]?.src || '/placeholders/placeholder.webp',
|
||||||
contentWidth="smallMedium"
|
imageAlt: p.images?.[0]?.alt || p.name,
|
||||||
sizing="large"
|
}));
|
||||||
background="grid"
|
|
||||||
cardStyle="solid"
|
|
||||||
primaryButtonStyle="double-inset"
|
|
||||||
secondaryButtonStyle="glass"
|
|
||||||
headingFontWeight="extrabold"
|
|
||||||
>
|
|
||||||
<ReactLenis root>
|
|
||||||
<div id="navbar" data-section="navbar">
|
|
||||||
<NavbarStyleCentered
|
|
||||||
brandName="Bakteria"
|
|
||||||
navItems={[
|
|
||||||
{"name":"Home","id":"/"},
|
|
||||||
{"name":"About","id":"about"},
|
|
||||||
{"name":"Menu","id":"menu"},
|
|
||||||
{"name":"Brew Process","id":"process"},
|
|
||||||
{"name":"Contact","id":"contact"},
|
|
||||||
{"name":"Shop","id":"/shop"}
|
|
||||||
]}
|
|
||||||
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{"icon":Instagram,"href":"https://instagram.com/bakteriacoffee","ariaLabel":"Instagram"},
|
|
||||||
{"icon":Twitter,"href":"https://twitter.com/bakteriacoffee","ariaLabel":"Twitter"},
|
|
||||||
{"icon":Facebook,"href":"https://facebook.com/bakteriacoffee","ariaLabel":"Facebook"}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
@@ -78,44 +43,42 @@ export default function ShopPage() {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<div id="nav" data-section="nav">
|
||||||
<div id="navbar" data-section="navbar">
|
<NavbarStyleCentered
|
||||||
<NavbarStyleCentered
|
brandName="Bakteria"
|
||||||
brandName="Bakteria"
|
navItems={navItems}
|
||||||
navItems={[
|
button={{ text: "Order Now", href: "/#contact" }}
|
||||||
{"name":"Home","id":"/"},
|
/>
|
||||||
{"name":"About","id":"about"},
|
</div>
|
||||||
{"name":"Menu","id":"menu"},
|
{isLoading ? (
|
||||||
{"name":"Brew Process","id":"process"},
|
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||||
{"name":"Contact","id":"contact"},
|
<p className="text-foreground">Loading products...</p>
|
||||||
{"name":"Shop","id":"/shop"}
|
</main>
|
||||||
]}
|
) : (
|
||||||
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
<div id="product-catalog" data-section="product-catalog">
|
||||||
|
<ProductCardFour
|
||||||
|
title="Our Products"
|
||||||
|
description="Handpicked beans from around the world, roasted to perfection in our roastery."
|
||||||
|
tag="Shop"
|
||||||
|
products={formattedProducts}
|
||||||
|
gridVariant="uniform-all-items-equal"
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="productCatalog" data-section="productCatalog">
|
)}
|
||||||
<ProductCatalog
|
<div id="footer" data-section="footer">
|
||||||
layout="page"
|
<FooterCard
|
||||||
products={products}
|
logoText="Bakteria"
|
||||||
searchValue={search}
|
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
||||||
onSearchChange={setSearch}
|
socialLinks={[
|
||||||
searchPlaceholder="Search products..."
|
{ icon: Instagram, href: "https://instagram.com/bakteriacoffee", ariaLabel: "Instagram" },
|
||||||
filters={filters}
|
{ icon: Twitter, href: "https://twitter.com/bakteriacoffee", ariaLabel: "Twitter" },
|
||||||
emptyMessage="No products found"
|
{ icon: Facebook, href: "https://facebook.com/bakteriacoffee", ariaLabel: "Facebook" }
|
||||||
/>
|
]}
|
||||||
</div>
|
/>
|
||||||
<div id="footer" data-section="footer">
|
</div>
|
||||||
<FooterCard
|
|
||||||
logoText="Bakteria"
|
|
||||||
copyrightText="© 2025 Bakteria Coffee Roastery. All rights reserved."
|
|
||||||
socialLinks={[
|
|
||||||
{"icon":Instagram,"href":"https://instagram.com/bakteriacoffee","ariaLabel":"Instagram"},
|
|
||||||
{"icon":Twitter,"href":"https://twitter.com/bakteriacoffee","ariaLabel":"Twitter"},
|
|
||||||
{"icon":Facebook,"href":"https://facebook.com/bakteriacoffee","ariaLabel":"Facebook"}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user