bender/66157114-68b3-456d-9ca0-dddf2725ffa2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
bender
2026-02-13 13:33:17 +00:00
parent 1cf3190ac1 1cd7b86621
commit 1c5b682297
8 changed files with 228 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/about/page.tsx
View File

@@ -65,6 +65,7 @@ export default function AboutPage() {
imagePosition="right" imagePosition="right"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
/> />
</div> </div>

85
src/app/blog/page.tsx
View File

@@ -1,11 +1,33 @@
"use client"; "use client";
import ReactLenis from "lenis/react"; import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import BlogCardThree from '@/components/sections/blog/BlogCardThree'; import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import { useBlogPosts } from "@/hooks/useBlogPosts"; import { useBlogPosts } from "@/hooks/useBlogPosts";
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Menu", id: "/menu" },
{ name: "Contact", id: "/contact" },
];
const Footer = () => (
<footer className="py-8 bg-card border-t">
<div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center">
<p className="text-foreground/80 text-sm mb-4 md:mb-0">{`© ${new Date().getFullYear()} Brew Haven. All rights reserved.`}</p>
<nav className="flex gap-4">
{navItems.map((item) => (
<Link key={item.name} href={item.id} className="text-sm text-foreground hover:text-[var(--primary-cta)] transition-colors">
{item.name}
</Link>
))}
</nav>
</div>
</footer>
);
export default function BlogPage() { export default function BlogPage() {
const { posts, isLoading } = useBlogPosts(); const { posts, isLoading } = useBlogPosts();
@@ -22,43 +44,34 @@ export default function BlogPage() {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="nav" data-section="nav"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[ button={{ text: "Order Now", href: "/menu" }}
{ name: "Home", id: "/" }, buttonClassName="shadow-md"
{ name: "Menu", id: "menu" }, logoHref="/"
{ name: "About", id: "about" }, />
{ name: "Testimonials", id: "testimonials" }, </div>
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }, {isLoading ? (
]} <div className="w-content-width mx-auto py-20 text-center">
button={{ text: "Order Now", href: "#menu" }} <p className="text-foreground">Loading posts...</p>
buttonClassName="shadow-md" </div>
logoHref="#" ) : (
<div id="blog" data-section="blog">
<BlogCardThree
blogs={posts}
title="From Our Roastery"
description="Discover the stories, techniques, and passion behind every cup."
tag="Coffee Chronicles"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/> />
</div> </div>
)}\n <Footer />
{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="From Our Roastery"
description="Discover the stories, techniques, and passion behind every cup."
tag="Coffee Chronicles"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
)}
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }

3
src/app/contact/page.tsx
View File

@@ -64,6 +64,7 @@ export default function ContactPage() {
imageAlt="A modern, inviting coffee shop interior" imageAlt="A modern, inviting coffee shop interior"
mediaPosition="right" mediaPosition="right"
useInvertedBackground={false} useInvertedBackground={false}
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
formCardClassName="p-6 md:p-8 rounded-lg shadow-lg" formCardClassName="p-6 md:p-8 rounded-lg shadow-lg"
titleClassName="text-3xl font-semibold" titleClassName="text-3xl font-semibold"
@@ -85,6 +86,7 @@ export default function ContactPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
faqsAnimation="slide-up" faqsAnimation="slide-up"
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
containerClassName="max-w-7xl mx-auto" containerClassName="max-w-7xl mx-auto"
/> />
@@ -101,6 +103,7 @@ export default function ContactPage() {
imagePosition="right" imagePosition="right"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
/> />
</div> </div>

25
src/app/layout.tsx
View File

@@ -3,36 +3,23 @@ import { Barlow } from "next/font/google";
import "./globals.css"; import "./globals.css";
const barlow = Barlow({ const barlow = Barlow({
variable: "--font-barlow", variable: "--font-barlow", subsets: ["latin"],
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Brew Haven - Your Daily Coffee Escape", title: "Brew Haven - Your Daily Coffee Escape", description: "Experience the finest coffee, expertly crafted in a cozy and welcoming atmosphere. Brew Haven is your perfect spot for quality brews and relaxation.", robots: {
description: "Experience the finest coffee, expertly crafted in a cozy and welcoming atmosphere. Brew Haven is your perfect spot for quality brews and relaxation.",
robots: {
index: true, index: true,
follow: true, follow: true,
}, },
openGraph: { openGraph: {
title: "Brew Haven - Premium Coffee Shop", title: "Brew Haven - Premium Coffee Shop", description: "Indulge in the best coffee experience at Brew Haven. Freshly brewed, ethically sourced, and passionately served.", url: "https://www.brewhaven.com", siteName: "Brew Haven", images: [
description: "Indulge in the best coffee experience at Brew Haven. Freshly brewed, ethically sourced, and passionately served.",
url: "https://www.brewhaven.com",
siteName: "Brew Haven",
images: [
{ {
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9h4xtn", url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9h4xtn", alt: "Freshly roasted coffee beans and a steaming cup of coffee"},
alt: "Freshly roasted coffee beans and a steaming cup of coffee",
},
], ],
type: "website", type: "website"},
},
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image", title: "Brew Haven - Your Daily Coffee Escape", description: "Experience the finest coffee, expertly crafted in a cozy and welcoming atmosphere.", images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9h4xtn"],
title: "Brew Haven - Your Daily Coffee Escape",
description: "Experience the finest coffee, expertly crafted in a cozy and welcoming atmosphere.",
images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9h4xtn"],
}, },
}; };

1
src/app/menu/page.tsx
View File

@@ -104,6 +104,7 @@ export default function MenuPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
faqsAnimation="slide-up" faqsAnimation="slide-up"
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
containerClassName="max-w-7xl mx-auto" containerClassName="max-w-7xl mx-auto"
/> />

2
src/app/page.tsx
View File

@@ -83,6 +83,7 @@ export default function HomePage() {
imagePosition="right" imagePosition="right"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
/> />
</div> </div>
@@ -154,6 +155,7 @@ export default function HomePage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
faqsAnimation="slide-up" faqsAnimation="slide-up"
mediaAnimation="slide-up"
className="py-16 md:py-24 lg:py-32" className="py-16 md:py-24 lg:py-32"
containerClassName="max-w-7xl mx-auto" containerClassName="max-w-7xl mx-auto"
contentClassName="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12" contentClassName="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12"

195
src/app/shop/[id]/page.tsx
View File

@@ -2,7 +2,7 @@
import { use, useCallback } from "react"; import { use, useCallback } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react"; import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard"; import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
@@ -15,6 +15,28 @@ interface ProductPageProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
} }
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Menu", id: "/menu" },
{ name: "Contact", id: "/contact" },
];
const Footer = () => (
<footer className="py-8 bg-card border-t">
<div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center">
<p className="text-foreground/80 text-sm mb-4 md:mb-0">{`© ${new Date().getFullYear()} Brew Haven. All rights reserved.`}</p>
<nav className="flex gap-4">
{navItems.map((item) => (
<Link key={item.name} href={item.id} className="text-sm text-foreground hover:text-[var(--primary-cta)] transition-colors">
{item.name}
</Link>
))}
</nav>
</div>
</footer>
);
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();
@@ -79,22 +101,21 @@ export default function ProductPage({ params }: ProductPageProps) {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="navbar" data-section="navbar"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} buttonClassName="shadow-md"
buttonClassName="shadow-md" logoHref="/"
logoHref="#" />
/> </div>
</div> <div id="loading-section" data-section="loading-section">
<div id="loading-section" data-section="loading-section"> <main className="min-h-screen flex items-center justify-center pt-20">
<main className="min-h-screen flex items-center justify-center pt-20"> <p className="text-foreground">Loading product...</p>
<p className="text-foreground">Loading product...</p> </main>
</main> </div>
</div> <Footer />
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }
@@ -113,30 +134,29 @@ export default function ProductPage({ params }: ProductPageProps) {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="navbar" data-section="navbar"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} buttonClassName="shadow-md"
buttonClassName="shadow-md" logoHref="/"
logoHref="#" />
/> </div>
</div> <div id="not-found-section" data-section="not-found-section">
<div id="not-found-section" data-section="not-found-section"> <main className="min-h-screen flex items-center justify-center pt-20">
<main className="min-h-screen flex items-center justify-center pt-20"> <div className="text-center">
<div className="text-center"> <p className="text-foreground mb-4">Product not found</p>
<p className="text-foreground mb-4">Product not found</p> <button
<button onClick={() => router.push("/shop")}
onClick={() => router.push("/shop")} className="primary-button px-6 py-2 rounded-theme"
className="primary-button px-6 py-2 rounded-theme" >
> Back to Shop
Back to Shop </button>
</button> </div>
</div> </main>
</main> </div>
</div> <Footer />
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }
@@ -154,53 +174,52 @@ export default function ProductPage({ params }: ProductPageProps) {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="navbar" data-section="navbar"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} button={{ text: "Cart", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }} buttonClassName="shadow-md"
buttonClassName="shadow-md" logoHref="/"
logoHref="#" />
/> </div>
</div> <div id="product-detail-card" data-section="product-detail-card">
<div id="product-detail-card" data-section="product-detail-card"> <ProductDetailCard
<ProductDetailCard layout="page"
layout="page" name={product.name}
name={product.name} price={product.price}
price={product.price} salePrice={meta.salePrice}
salePrice={meta.salePrice} rating={product.rating || 0}
rating={product.rating || 0} description={product.description}
description={product.description} images={images}
images={images} variants={variants.length > 0 ? variants : undefined}
variants={variants.length > 0 ? variants : undefined} quantity={quantityVariant}
quantity={quantityVariant} ribbon={meta.ribbon}
ribbon={meta.ribbon} inventoryStatus={meta.inventoryStatus}
inventoryStatus={meta.inventoryStatus} inventoryQuantity={meta.inventoryQuantity}
inventoryQuantity={meta.inventoryQuantity} sku={meta.sku}
sku={meta.sku} buttons={[
buttons={[ { text: "Add To Cart", onClick: handleAddToCart },
{ text: "Add To Cart", onClick: handleAddToCart }, { text: "Buy Now", onClick: handleBuyNow },
{ text: "Buy Now", onClick: handleBuyNow }, ]}
]} />
/> </div>
</div> <div id="product-cart" data-section="product-cart">
<div id="product-cart" data-section="product-cart"> <ProductCart
<ProductCart isOpen={cartOpen}
isOpen={cartOpen} onClose={() => setCartOpen(false)}
onClose={() => setCartOpen(false)} items={cartItems}
items={cartItems} onQuantityChange={updateQuantity}
onQuantityChange={updateQuantity} onRemove={removeItem}
onRemove={removeItem} total={`$${cartTotal}`}
total={`$${cartTotal}`} buttons={[
buttons={[ {
{ text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout, },
}, ]}
]} />
/> </div>
</div> <Footer />
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }

98
src/app/shop/page.tsx
View File

@@ -1,11 +1,33 @@
"use client"; "use client";
import ReactLenis from "lenis/react"; import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog"; import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog"; import { useProductCatalog } from "@/hooks/useProductCatalog";
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Menu", id: "/menu" },
{ name: "Contact", id: "/contact" },
];
const Footer = () => (
<footer className="py-8 bg-card border-t">
<div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center">
<p className="text-foreground/80 text-sm mb-4 md:mb-0">{`© ${new Date().getFullYear()} Brew Haven. All rights reserved.`}</p>
<nav className="flex gap-4">
{navItems.map((item) => (
<Link key={item.name} href={item.id} className="text-sm text-foreground hover:text-[var(--primary-cta)] transition-colors">
{item.name}
</Link>
))}
</nav>
</div>
</footer>
);
export default function ShopPage() { export default function ShopPage() {
const { const {
products, products,
@@ -29,22 +51,21 @@ export default function ShopPage() {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="navbar" data-section="navbar"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} button={{ text: "Cart", onClick: () => {} }}
button={{ text: "Cart", onClick: () => {} }} buttonClassName="shadow-md"
buttonClassName="shadow-md" logoHref="/"
logoHref="#" />
/> </div>
</div> <div id="loading-section" data-section="loading-section">
<div id="loading-section" data-section="loading-section"> <main className="min-h-screen flex items-center justify-center pt-20">
<main className="min-h-screen flex items-center justify-center pt-20"> <p className="text-foreground">Loading products...</p>
<p className="text-foreground">Loading products...</p> </main>
</main> </div>
</div> <Footer />
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }
@@ -62,28 +83,27 @@ export default function ShopPage() {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <div id="nav" data-section="nav">
<div id="navbar" data-section="navbar"> <NavbarLayoutFloatingOverlay
<NavbarLayoutFloatingOverlay brandName="Brew Haven"
brandName="Brew Haven" navItems={navItems}
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} button={{ text: "Cart", onClick: () => {} }}
button={{ text: "Cart", onClick: () => {} }} buttonClassName="shadow-md"
buttonClassName="shadow-md" logoHref="/"
logoHref="#" />
/> </div>
</div> <div id="product-catalog" data-section="product-catalog">
<div id="product-catalog" data-section="product-catalog"> <ProductCatalog
<ProductCatalog layout="page"
layout="page" products={products}
products={products} searchValue={search}
searchValue={search} onSearchChange={setSearch}
onSearchChange={setSearch} searchPlaceholder="Search products..."
searchPlaceholder="Search products..." filters={filters}
filters={filters} emptyMessage="No products found"
emptyMessage="No products found" />
/> </div>
</div> <Footer />
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }