init

2026-05-11 16:24:14 +07:00
commit 6a48d6351c
313 changed files with 41936 additions and 0 deletions
@@ -0,0 +1,49 @@
+export default function VisionSection({
+  data,
+}: {
+  data: {
+    eyebrow: string;
+    title: string;
+    paragraphs: string[];
+    cards: { icon: string; title: string; description: string }[];
+  };
+}) {
+  return (
+    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-32 items-start">
+        <div className="lg:col-span-5">
+          <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary mb-6 lg:mb-10 block tracking-[0.25em]">
+            {data.eyebrow}
+          </span>
+          <h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
+            {data.title}
+          </h2>
+          <div className="space-y-6 lg:space-y-10 text-on-surface-variant text-lg lg:text-[22px] leading-relaxed">
+            {data.paragraphs.map((p) => (
+              <p key={p}>{p}</p>
+            ))}
+          </div>
+        </div>
+        <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-10">
+          {data.cards.map((c) => (
+            <div
+              key={c.title}
+              className="glass-panel p-8 lg:p-12 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
+            >
+              <span className="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block">
+                {c.icon}
+              </span>
+              <h3 className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">
+                {c.title}
+              </h3>
+              <p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">
+                {c.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+