src/app/blog/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useBlogPosts } from "@/hooks/useBlogPosts";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Heart, Leaf, Mail, Sparkles } from "lucide-react";
+
+const footerColumns: FooterColumn[] = [
+    {
+        title: "Product",
+        items: [
+            { label: "Features", href: "/features" },
+            { label: "Pricing", href: "/pricing" },
+            { label: "FAQ", href: "/faq" },
+        ],
+    },
+    {
+        title: "Company",
+        items: [
+            { label: "About", href: "/about" },
+            { label: "Blog", href: "/blog" },
+            { label: "Careers", href: "/careers" },
+        ],
+    },
+    {
+        title: "Resources",
+        items: [
+            { label: "Documentation", href: "/docs" },
+            { label: "Support", href: "/support" },
+            { label: "Contact", href: "/contact" },
+        ],
+    },
+];
+
+export default function BlogPage() {
+    const { posts, isLoading } = useBlogPosts();
+
+    return (
+        <ThemeProvider defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium">
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+
+                    <NavbarLayoutFloatingInline brandName="Orio"
+          navItems={[
+            { name: "Collections", id: "products" },
+            { name: "About", id: "about" },
+            { name: "Services", id: "features" },
+            { name: "News", id: "/news" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Book Now",            href: "#contact"
+          }}
+          animateOnLoad={true} />
+                </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">
+                            <BlogCardOne
+                                blogs={posts}
+                                title="Latest Articles"
+                                description="Stay updated with our latest insights"
+                                textboxLayout="default"
+                                useInvertedBackground={false}
+                                carouselMode="buttons"
+                                animationType="slide-up"
+                            />
+                        </div>
+                    )}
+
+                    <div id="footer" data-section="footer">
+
+                        <FooterCard logoText="Orio"
+          copyrightText="© 2024 Orio Flowers. Handcrafted with love." />
+                    </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
+