src/app/blog/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { BlogCardTwo } from "import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+import { useBlogPosts } from "@/hooks/useBlogPosts";
+
+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="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold">
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+        <FooterBase navItems={[
+            { name: "Home", id: "hero" },
+            { name: "About", id: "about" },
+            { name: "Pets", id: "products" },
+            { name: "Stories", id: "testimonial" },
+            { name: "FAQ", id: "faq" }
+          ]}
+          button={{
+            text: "Adopt Now",            href: "contact"
+          }}
+          brandName="PawsHome" /><div id="blog" data-section="blog">
+        <BlogCardTwo {...blogProps} />
+      </div>
+      </ThemeProvider>
+    );
+}
+