init

2026-05-11 16:24:14 +07:00
commit 6a48d6351c
313 changed files with 41936 additions and 0 deletions
@@ -0,0 +1,57 @@
+export default function AgendaSection({
+  data,
+}: {
+  data: {
+    id: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    items: { order: string; time: string; title: string; description: string }[];
+  };
+}) {
+  return (
+    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
+      <div className="flex flex-col xl:flex-row justify-between xl:items-end mb-12 lg:mb-24 gap-8">
+        <div className="max-w-3xl">
+          <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-8 tracking-[0.25em]">
+            {data.eyebrow}
+          </span>
+          <h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
+            {data.title}
+          </h2>
+        </div>
+        <p className="text-on-surface-variant/60 text-base lg:text-[20px] max-w-md xl:text-right">
+          {data.description}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-10">
+        {data.items.map((item) => (
+          <div
+            key={item.order}
+            className="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
+          >
+            <div className="absolute top-0 right-0 p-6 lg:p-8">
+              <span className="font-[var(--font-display-lg)] text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">
+                {item.order}
+              </span>
+            </div>
+            <div className="mb-6 lg:mb-10">
+              <span className="font-[var(--font-display-lg)] text-2xl lg:text-[36px] text-primary">
+                {item.time}
+              </span>
+            </div>
+            <h3 className="font-[var(--font-display-lg)] text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">
+              {item.title}
+            </h3>
+            <p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
+              {item.description}
+            </p>
+            <div className="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+