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,96 @@
+type PackageItem = {
+  id: string;
+  tier: string;
+  badge: string | null;
+  price: string;
+  featured: boolean;
+  cta: string;
+  benefits: string[];
+  boldBenefit: string | null;
+};
+
+type SponsorPackagesData = {
+  eyebrow: string;
+  title: string;
+  items: PackageItem[];
+};
+
+export default function SponsorPackages({ data }: { data: SponsorPackagesData }) {
+  return (
+    <section className="py-16 lg:py-32 bg-surface-container-lowest">
+      <div className="max-w-[1280px] mx-auto px-gutter">
+
+        {/* Header — flex items-center justify-between mb-stack-lg */}
+        <div className="flex items-center justify-between mb-stack-lg">
+          <h2 className="font-headline-md text-headline-md">{data.title}</h2>
+          <div className="hidden lg:block h-px flex-grow mx-stack-lg bg-outline-variant/30" />
+        </div>
+
+        {/* Grid — gap-stack-lg = 32px */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
+          {data.items.map((pkg) => (
+            <div
+              key={pkg.id}
+              className={`glass-panel p-stack-lg rounded-xl flex flex-col h-full ${
+                pkg.featured ? "gold-border gold-glow ring-2 ring-primary/20" : ""
+              }`}
+            >
+              <div className="mb-stack-lg">
+                {pkg.badge && (
+                  <span className="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">
+                    {pkg.badge}
+                  </span>
+                )}
+                <h3
+                  className={`font-display-lg text-headline-md ${
+                    pkg.featured ? "text-primary" : ""
+                  }`}
+                >
+                  {pkg.tier}
+                </h3>
+                <div className="text-on-surface font-display-lg text-title-sm mt-2">
+                  {pkg.price}
+                </div>
+              </div>
+
+              <ul className="space-y-4 mb-stack-lg flex-grow">
+                {pkg.benefits.map((benefit) => (
+                  <li key={benefit} className="flex items-start gap-3">
+                    <span
+                      className="material-symbols-outlined text-primary text-[20px]"
+                      style={
+                        pkg.featured
+                          ? { fontVariationSettings: "'FILL' 1" }
+                          : undefined
+                      }
+                    >
+                      check_circle
+                    </span>
+                    <span
+                      className={`text-on-surface-variant ${
+                        benefit === pkg.boldBenefit ? "font-bold" : ""
+                      }`}
+                    >
+                      {benefit}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+
+              <button
+                type="button"
+                className={`w-full py-4 rounded font-title-sm transition-all active:scale-95 ${
+                  pkg.featured
+                    ? "gold-gradient-bg text-on-primary hover:opacity-90"
+                    : "border border-outline-variant text-on-surface hover:border-primary transition-colors"
+                }`}
+              >
+                {pkg.cta}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}