Refine homepage and restore hero

2026-03-15 18:26:31 +01:00
parent 6caf723695
commit cf957cbbe2
14 changed files with 1565 additions and 155 deletions
@@ -0,0 +1,50 @@
+import { Bot, Database, Globe, ServerCog } from "lucide-react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { SectionHeading } from "./section-heading";
+import type { CapabilitiesSectionCopy } from "./types";
+
+type CapabilitiesSectionProps = {
+  copy: CapabilitiesSectionCopy;
+};
+
+const capabilityIcons = [Globe, Database, ServerCog, Bot];
+
+export function CapabilitiesSection({ copy }: CapabilitiesSectionProps) {
+  return (
+    <section className="space-y-8">
+      <SectionHeading
+        eyebrow={copy.eyebrow}
+        title={copy.title}
+        description={copy.description}
+      />
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
+        {copy.items.map((item, index) => {
+          const Icon = capabilityIcons[index] ?? Globe;
+
+          return (
+            <AppCard
+              key={item.title}
+              layer="single"
+              interactive
+              className="group border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-panel"
+            >
+              <div className="flex h-full flex-col gap-5 p-6">
+                <div className="flex h-11 w-11 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-transform duration-300 group-hover:-translate-y-0.5">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <div className="space-y-3">
+                  <h3 className="text-xl font-semibold tracking-[-0.04em] text-foreground">
+                    {item.title}
+                  </h3>
+                  <p className="text-sm leading-7 text-muted-foreground">{item.description}</p>
+                </div>
+              </div>
+            </AppCard>
+          );
+        })}
+      </div>
+    </section>
+  );
+}