Update src/app/blog/page.tsx
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user