1 files changed, 53 insertions, 0 deletions
diff --git a/components/solutions-tabs.tsx b/components/solutions-tabs.tsx
new file mode 100644
index 0000000..0bc055c
--- /dev/null
+++ b/components/solutions-tabs.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { solutions } from "@/lib/content";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+
+export function SolutionsTabs() {
+  return (
+    <Tabs defaultValue={solutions[0].id} className="w-full">
+      <TabsList
+        variant="line"
+        className="h-auto w-full flex-wrap justify-start gap-1 rounded-none bg-transparent p-0"
+      >
+        {solutions.map((s) => (
+          <TabsTrigger
+            key={s.id}
+            value={s.id}
+            className="h-9 px-3 text-sm data-active:text-foreground"
+          >
+            {s.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {solutions.map((s) => (
+        <TabsContent key={s.id} value={s.id} className="mt-10">
+          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-primary">
+            {s.label}
+          </p>
+          <h2 className="mt-3 max-w-3xl font-heading text-3xl leading-tight text-foreground md:text-4xl">
+            {s.headline}
+          </h2>
+          <p className="mt-5 max-w-3xl text-base leading-relaxed text-muted-foreground">
+            {s.body}
+          </p>
+          <ul className="mt-8 grid gap-3 sm:grid-cols-3">
+            {s.outcomes.map((o) => (
+              <li
+                key={o}
+                className="rounded-xl border border-white/10 bg-white/5 p-4 text-sm leading-relaxed text-foreground/90 backdrop-blur-xl"
+              >
+                {o}
+              </li>
+            ))}
+          </ul>
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}