first commit

components/blog-hero.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Link from "next/link";
+
+export default function BlogHero() {
+  return (
+    <section className="relative h-[750px] w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800">
+      {/* Gradient blobs */}
+      <div
+        className="absolute -left-[20%] -top-[30%] h-[80%] w-[60%] rounded-full opacity-90 blur-2xl"
+        style={{
+          background:
+            "linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(139, 92, 246, 0.3) 100%)",
+        }}
+      />
+      <div
+        className="absolute -bottom-[25%] -right-[15%] h-[70%] w-[55%] rounded-full opacity-90 blur-2xl"
+        style={{
+          background:
+            "linear-gradient(315deg, rgba(139, 92, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(59, 130, 246, 0.25) 100%)",
+        }}
+      />
+      {/* Subtle curve lines (optional decoration) */}
+      <svg
+        className="absolute right-[15%] top-1/2 h-48 w-48 -translate-y-1/2 opacity-[0.07]"
+        viewBox="0 0 100 100"
+        fill="none"
+        stroke="white"
+        strokeWidth="0.5"
+      >
+        <path d="M10 50 Q50 20 90 50 Q50 80 10 50" />
+        <path d="M20 50 Q50 30 80 50" />
+      </svg>
+
+      {/* Content */}
+      <div className="container relative z-10 mx-auto flex h-full min-h-0 flex-col items-center justify-center px-4 text-center">
+        <h1 className="text-4xl font-bold tracking-tight text-white drop-shadow-md md:text-5xl lg:text-6xl">
+          Blog Grid
+        </h1>
+        <nav className="mt-3 flex items-center gap-1.5 text-sm text-white/95">
+          <Link href="/" className="hover:underline">
+            Home
+          </Link>
+          <span className="opacity-70">/</span>
+          <span className="text-white">Blog Grid</span>
+        </nav>
+      </div>
+    </section>
+  );
+}