50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|