Update src/app/blog/page.tsx

This commit is contained in:
2026-02-13 13:33:07 +00:00
parent 84b89c4c0d
commit 5fd2fe54c2

View File

@@ -1,11 +1,33 @@
"use client";
import ReactLenis from "lenis/react";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
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() {
const { posts, isLoading } = useBlogPosts();
@@ -22,43 +44,34 @@ export default function BlogPage() {
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Brew Haven"
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "menu" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Order Now", href: "#menu" }}
buttonClassName="shadow-md"
logoHref="#"
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Brew Haven"
navItems={navItems}
button={{ text: "Order Now", href: "/menu" }}
buttonClassName="shadow-md"
logoHref="/"
/>
</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="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>
{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>
)}\n <Footer />
</ThemeProvider>
);
}