src/app/blog/page.tsx

@@ -0,0 +1,91 @@
+"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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+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="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSmallSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium">
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+
+                    <NavbarStyleApple brandName="PawsHome"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Pets", id: "pets" },
+            { name: "Stories", id: "stories" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" },{"name":"Shop","id":"/shop"}]} />
+                </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">
+
+                        <FooterLogoReveal logoText="PawsHome"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }} />
+                    </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
+