Build New Optic website

components/AboutSection.tsx

@@ -0,0 +1,22 @@
+import { CheckCircle2 } from "lucide-react";
+import type { Messages } from "@/messages";
+import AnimatedSection from "./AnimatedSection";
+import SectionHeader from "./SectionHeader";
+
+export default function AboutSection({ t }: { t: Messages }) {
+  return (
+    <AnimatedSection className="px-4 py-20 sm:px-6">
+      <div className="mx-auto max-w-7xl rounded-[2.8rem] bg-white/70 p-6 shadow-glass ring-1 ring-ink/5 backdrop-blur sm:p-10 lg:p-14">
+        <SectionHeader eyebrow={t.about.eyebrow} title={t.about.title} body={t.about.body} />
+        <div className="mt-10 grid gap-4 md:grid-cols-3">
+          {t.about.cards.map((card) => (
+            <div key={card} className="flex items-center gap-3 rounded-3xl border border-ink/8 bg-smoke/70 p-5 text-sm font-semibold text-ink/72">
+              <CheckCircle2 className="shrink-0 text-optical" size={20} />
+              <span>{card}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </AnimatedSection>
+  );
+}