Adding speakers section and gallery section

2026-05-22 16:31:12 +07:00
parent 1e706758da
commit 9d5b8120a8
15 changed files with 249 additions and 4 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+const BASE = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+type SpeakerItem = {
+  name: string;
+  title: string;
+  photo: string;
+  quote: string;
+};
+
+type Props = {
+  data: {
+    eyebrow: string;
+    title: string;
+    items: SpeakerItem[];
+  };
+};
+
+export default function SpeakerSpotlightSection({ data }: Props) {
+  const speaker = data.items[0];
+
+  return (
+    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id="speakers">
+      {/* Section header */}
+      <div className="mb-10 lg:mb-16">
+        <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-3 lg:mb-4 tracking-[0.25em] uppercase">
+          {data.eyebrow}
+        </span>
+        <h2 className="font-[var(--font-display-lg)] text-on-surface text-[clamp(2rem,4vw+1rem,4.5rem)] leading-tight">
+          {data.title}
+        </h2>
+      </div>
+
+      {/* Card: 3/10 image — 7/10 quote */}
+      <div className="glass-panel rounded-[2rem] overflow-hidden shadow-2xl shadow-primary/5 flex flex-col lg:flex-row items-stretch">
+
+        {/* LEFT — 30%: ảnh + tên + chức danh */}
+        <div className="lg:w-[30%] flex flex-col items-center justify-center p-8 lg:p-12 text-center border-b lg:border-b-0 lg:border-r border-primary/10">
+          {/* Ảnh tròn */}
+          <div className="relative mb-6 lg:mb-8">
+            {/* Ring gold trang trí */}
+            <div className="absolute inset-0 border-2 border-primary/30 rounded-full scale-110 pointer-events-none" />
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={`${BASE}${speaker.photo}`}
+              alt={speaker.name}
+              className="w-36 h-36 lg:w-56 lg:h-56 rounded-full object-cover object-top border-4 border-surface"
+            />
+          </div>
+
+          {/* Tên */}
+          <h4 className="font-[var(--font-display-lg)] text-xl lg:text-[26px] text-on-surface mb-2 leading-tight">
+            {speaker.name}
+          </h4>
+
+          {/* Chức danh */}
+          <p className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary tracking-widest uppercase leading-relaxed">
+            {speaker.title}
+          </p>
+        </div>
+
+        {/* RIGHT — 70%: quote dàn hàng ngang */}
+        <div className="lg:w-[70%] relative flex items-center p-8 lg:p-16 xl:p-20">
+          {/* Dấu nháy mở trang trí */}
+          <div
+            className="absolute top-4 left-6 lg:top-8 lg:left-10 pointer-events-none select-none text-primary opacity-20 font-[var(--font-display-lg)] leading-none"
+            style={{ fontSize: "clamp(6rem, 12vw, 11rem)" }}
+            aria-hidden="true"
+          >
+            &#x201C;
+          </div>
+
+          <div className="relative z-10 w-full">
+            {/* Quote */}
+            <blockquote className="font-[var(--font-display-lg)] not-italic text-on-surface leading-[1.4] text-[clamp(1.2rem,2vw+0.6rem,2.25rem)] mb-8 lg:mb-10">
+              &ldquo;{speaker.quote}&rdquo;
+            </blockquote>
+
+            {/* Gold divider */}
+            <div className="h-[2px] w-20 bg-primary rounded-full mb-5 lg:mb-6" />
+
+            {/* Attribution nhỏ */}
+            <p className="font-[var(--font-label-caps)] text-xs lg:text-sm text-on-surface-variant/50 uppercase tracking-widest">
+              {speaker.name}&nbsp;&mdash;&nbsp;{speaker.title}
+            </p>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}