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,68 @@
+type ItemCard = {
+  icon: string;
+  title: string;
+  status: string;
+};
+
+type Highlight = {
+  eyebrow: string;
+  title: string;
+  icon: string;
+};
+
+type SponsorItemBasedData = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  items: ItemCard[];
+  highlights: Highlight[];
+};
+
+export default function SponsorItemBased({ data }: { data: SponsorItemBasedData }) {
+  return (
+    <section className="py-16 lg:py-32">
+      <div className="max-w-[1280px] mx-auto px-gutter">
+
+        {/* Header — text-center mb-stack-lg */}
+        <div className="text-center mb-stack-lg">
+          <h2 className="font-headline-md text-headline-md mb-2">{data.title}</h2>
+          <p className="text-on-surface-variant opacity-70">{data.description}</p>
+        </div>
+
+        {/* 4-col cards — gap-gutter = 24px, mb-stack-lg = 32px */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-lg">
+          {data.items.map((item) => (
+            <div
+              key={item.title}
+              className="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors"
+            >
+              <div className="w-12 h-12 gold-gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
+                <span className="material-symbols-outlined text-on-primary">{item.icon}</span>
+              </div>
+              <h4 className="font-title-sm text-body-base mb-1">{item.title}</h4>
+              <p className="text-label-caps text-primary">{item.status}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Highlights — gap-gutter = 24px */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-gutter">
+          {data.highlights.map((h) => (
+            <div
+              key={h.eyebrow}
+              className="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between"
+            >
+              <div>
+                <p className="font-label-caps text-primary mb-1">{h.eyebrow}</p>
+                <p className="font-title-sm">{h.title}</p>
+              </div>
+              <span className="material-symbols-outlined text-primary text-4xl">
+                {h.icon}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}