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,80 @@
+type SponsorContactData = {
+  id: string;
+  title: string;
+  description: string;
+  phone: { label: string; value: string };
+  email: { label: string; value: string };
+  cta: string;
+  image: { src: string; alt: string };
+};
+
+export default function SponsorContact({ data }: { data: SponsorContactData }) {
+  return (
+    <section id={data.id} className="py-16 lg:py-32 relative">
+      <div className="max-w-[1280px] mx-auto px-gutter">
+
+        {/* glass-panel gold-border — p-stack-lg lg:p-section-gap */}
+        <div className="glass-panel gold-border p-stack-lg lg:p-section-gap rounded-3xl overflow-hidden relative">
+          {/* Glow */}
+          <div className="absolute -bottom-24 -right-24 w-64 h-64 bg-primary/20 blur-[100px] rounded-full" />
+
+          <div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-stack-lg items-center">
+            {/* Left */}
+            <div>
+              <h2 className="font-display-lg text-display-lg mb-6">{data.title}</h2>
+
+              <p className="font-body-base text-body-base text-on-surface-variant/80 mb-8">
+                {data.description}
+              </p>
+
+              <div className="space-y-6 mb-12">
+                {/* Phone */}
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
+                    <span className="material-symbols-outlined text-primary">call</span>
+                  </div>
+                  <div>
+                    <p className="text-label-caps opacity-60">{data.phone.label}</p>
+                    <p className="font-title-sm">{data.phone.value}</p>
+                  </div>
+                </div>
+
+                {/* Email */}
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
+                    <span className="material-symbols-outlined text-primary">mail</span>
+                  </div>
+                  <div>
+                    <p className="text-label-caps opacity-60">{data.email.label}</p>
+                    <p className="font-title-sm">{data.email.value}</p>
+                  </div>
+                </div>
+              </div>
+
+              <button
+                type="button"
+                className="gold-gradient-bg text-on-primary font-title-sm px-12 py-5 rounded-lg hover:opacity-90 transition-all active:scale-95 flex items-center gap-3"
+              >
+                {data.cta}
+                <span className="material-symbols-outlined">arrow_forward</span>
+              </button>
+            </div>
+
+            {/* Right: image */}
+            <div className="hidden lg:block">
+              <div className="relative aspect-square">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={data.image.src}
+                  alt={data.image.alt}
+                  className="w-full h-full object-cover rounded-2xl opacity-60 mix-blend-luminosity"
+                />
+                <div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}