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,80 @@
+"use client";
+
+const BASE = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+type GalleryItem = {
+  src: string;
+  alt: string;
+  span: "wide" | "normal" | "full";
+};
+
+type Props = {
+  data: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    items: GalleryItem[];
+  };
+};
+
+// Map span → Tailwind col-span classes
+const spanClass: Record<GalleryItem["span"], string> = {
+  wide:   "md:col-span-2 lg:col-span-2",
+  normal: "",
+  full:   "md:col-span-2 lg:col-span-3",
+};
+
+// Map span → chiều cao ảnh
+const heightClass: Record<GalleryItem["span"], string> = {
+  wide:   "h-[240px] md:h-[340px] lg:h-[420px]",
+  normal: "h-[240px] md:h-[340px] lg:h-[420px]",
+  full:   "h-[260px] md:h-[360px] lg:h-[480px]",
+};
+
+export default function GallerySection({ data }: Props) {
+  return (
+    <section
+      className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]"
+      id="gallery"
+    >
+      {/* Header */}
+      <div className="text-center mb-12 lg:mb-20">
+        <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-6 tracking-[0.25em] uppercase">
+          {data.eyebrow}
+        </span>
+        <h2 className="font-[var(--font-display-lg)] text-on-surface mb-4 lg:mb-6 text-[clamp(2rem,4vw+1rem,4.5rem)] leading-tight">
+          {data.title}
+        </h2>
+        <p className="font-[var(--font-body-base)] text-on-surface-variant text-base lg:text-[20px] max-w-2xl mx-auto opacity-70 leading-relaxed">
+          {data.description}
+        </p>
+      </div>
+
+      {/* Grid masonry-style */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
+        {data.items.map((item, i) => (
+          <div
+            key={i}
+            className={[
+              spanClass[item.span],
+              "overflow-hidden rounded-2xl border border-primary/20 hover:border-primary/50",
+              "shadow-lg group transition-all duration-500",
+            ].join(" ")}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={`${BASE}${item.src}`}
+              alt={item.alt}
+              className={[
+                "w-full object-cover",
+                heightClass[item.span],
+                "transition-transform duration-700 group-hover:scale-105",
+              ].join(" ")}
+              loading={i < 3 ? "eager" : "lazy"}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -5,6 +5,8 @@ import HeroSection from "@/app/components/home/HeroSection";
 import VisionSection from "@/app/components/home/VisionSection";
 import StatsSection from "@/app/components/home/StatsSection";
 import AgendaSection from "@/app/components/home/AgendaSection";
+import SpeakerSpotlightSection from "@/app/components/home/SpeakerSpotlightSection";
+import GallerySection from "@/app/components/home/GallerySection";
 import PartnersCarousel from "@/app/components/home/PartnersCarousel";

 export default function HomePageClient() {
@@ -16,7 +18,9 @@ export default function HomePageClient() {
      <VisionSection data={home.vision} />
      <StatsSection data={home.stats} />
      <AgendaSection data={home.agenda} />
-      <PartnersCarousel />
+      <SpeakerSpotlightSection data={home.speakers} />
+      <PartnersCarousel eyebrow={home.partners.eyebrow} title={home.partners.title} />
+      <GallerySection data={home.gallery} />
    </main>
  );
 }
@@ -73,17 +73,23 @@ function CarouselRow({
  );
 }

-export default function PartnersCarousel() {
+export default function PartnersCarousel({
+  eyebrow = "Partners & Sponsors",
+  title = "Trusted by Industry Leaders",
+}: {
+  eyebrow?: string;
+  title?: string;
+}) {
  const base = process.env.NEXT_PUBLIC_BASE_PATH || "";

  return (
    <section className="w-full py-16 lg:py-24 overflow-hidden border-t border-white/5">
      <div className="mb-10 px-[var(--spacing-gutter)] max-w-hd mx-auto">
        <p className="text-primary font-[var(--font-label-caps)] text-xs tracking-[0.3em] uppercase mb-3">
-          Partners &amp; Sponsors
+          {eyebrow}
        </p>
        <h2 className="text-on-surface font-[var(--font-display-lg)] text-2xl lg:text-4xl font-bold">
-          Trusted by Industry Leaders
+          {title}
        </h2>
      </div>

@@ -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>
+  );
+}