first commit

Made-with: Cursor

frontend/components/public/BlogPreviewSection.tsx

@@ -0,0 +1,81 @@
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+interface BlogPost {
+  slug: string;
+  title: string;
+  excerpt: string;
+  categories: string[];
+}
+
+interface BlogPreviewSectionProps {
+  posts?: BlogPost[];
+}
+
+export function BlogPreviewSection({ posts }: BlogPreviewSectionProps) {
+  return (
+    <section className="py-24 px-8 border-t border-zinc-800/50">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-end mb-12">
+          <div>
+            <p className="uppercase tracking-[0.2em] text-primary mb-2 font-semibold text-xs">
+              From the network
+            </p>
+            <h2 className="text-3xl font-black tracking-tight">Latest from the Blog</h2>
+          </div>
+          <Link
+            href="/blog"
+            className="hidden md:flex items-center gap-2 text-sm text-primary font-semibold hover:gap-3 transition-all"
+          >
+            View All <ArrowRight size={16} />
+          </Link>
+        </div>
+
+        {!posts || posts.length === 0 ? (
+          <p className="text-on-surface-variant text-center py-16 text-sm">
+            No posts yet. Check back soon for curated Bitcoin content.
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+            {posts.map((post) => (
+              <Link
+                key={post.slug}
+                href={`/blog/${post.slug}`}
+                className="group flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200"
+              >
+                {post.categories.length > 0 && (
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    {post.categories.map((cat) => (
+                      <span
+                        key={cat}
+                        className="text-primary text-[10px] uppercase tracking-widest font-bold"
+                      >
+                        {cat}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                <h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
+                  {post.title}
+                </h3>
+                <p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
+                  {post.excerpt}
+                </p>
+                <span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all mt-auto">
+                  Read More <ArrowRight size={13} />
+                </span>
+              </Link>
+            ))}
+          </div>
+        )}
+
+        <Link
+          href="/blog"
+          className="md:hidden flex items-center justify-center gap-2 text-primary font-semibold mt-8 text-sm"
+        >
+          View All <ArrowRight size={16} />
+        </Link>
+      </div>
+    </section>
+  );
+}