sponsor from nhat

2026-05-13 19:47:14 +07:00
parent a01aebd8bd
commit 778f5f735d
6 changed files with 432 additions and 0 deletions
@@ -0,0 +1,51 @@
+import Link from "next/link";
+
+type SponsorHeroData = {
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta: { label: string; href: string };
+};
+
+export default function SponsorHero({ data }: { data: SponsorHeroData }) {
+  return (
+    <section className="relative py-16 lg:py-32 overflow-hidden">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(197,160,89,0.08),transparent_70%)]" />
+
+      <div className="max-w-[1280px] mx-auto px-gutter relative z-10 text-center">
+        <span className="font-label-caps text-label-caps text-primary mb-4 block">
+          {data.eyebrow}
+        </span>
+
+        <h1 className="font-display-lg text-display-lg mb-6">
+          {data.title}
+        </h1>
+
+        <h2 className="font-headline-md text-headline-md text-on-surface-variant mb-8 max-w-3xl mx-auto">
+          {data.subtitle}
+        </h2>
+
+        <p className="font-body-base text-body-base text-on-surface-variant/80 max-w-2xl mx-auto mb-12">
+          {data.description}
+        </p>
+
+        <div className="flex flex-col sm:flex-row justify-center gap-stack-md">
+          <Link
+            href={data.primaryCta.href}
+            className="gold-gradient-bg text-on-primary font-title-sm px-10 py-4 rounded-lg hover:opacity-90 transition-all active:scale-95 text-center"
+          >
+            {data.primaryCta.label}
+          </Link>
+          <Link
+            href={data.secondaryCta.href}
+            className="border border-primary text-primary font-title-sm px-10 py-4 rounded-lg hover:bg-primary/5 transition-all active:scale-95 text-center"
+          >
+            {data.secondaryCta.label}
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}