Initial commit — RoadCode import

src/components/UseCases.tsx

@@ -0,0 +1,68 @@
+const useCases = [
+  {
+    icon: "🏢",
+    title: "Enterprise Automation",
+    description: "Deploy AI agents to automate complex business processes across departments",
+    metrics: "75% reduction in manual tasks",
+  },
+  {
+    icon: "🔬",
+    title: "Research & Analysis",
+    description: "Run parallel research agents that analyze documents, data, and web content",
+    metrics: "10x faster literature review",
+  },
+  {
+    icon: "🛠️",
+    title: "DevOps & SRE",
+    description: "Intelligent agents that monitor, diagnose, and remediate infrastructure issues",
+    metrics: "60% faster incident response",
+  },
+  {
+    icon: "🎯",
+    title: "Sales & Marketing",
+    description: "Personalized outreach agents that research leads and craft custom messages",
+    metrics: "3x higher response rates",
+  },
+  {
+    icon: "📊",
+    title: "Data Processing",
+    description: "ETL agents that clean, transform, and analyze data at scale",
+    metrics: "Process 1M+ records/hour",
+  },
+  {
+    icon: "🤝",
+    title: "Customer Support",
+    description: "Multi-agent support teams that handle inquiries with human-level nuance",
+    metrics: "90% resolution rate",
+  },
+]
+
+export default function UseCases() {
+  return (
+    <section className="px-6 py-16">
+      <div className="mx-auto max-w-6xl">
+        <h2 className="text-center font-display text-2xl font-bold">
+          Built for <span className="gradient-text">Every Use Case</span>
+        </h2>
+        <p className="mx-auto mt-4 max-w-lg text-center text-text-muted">
+          From startups to enterprises, BlackRoad powers AI agents across industries
+        </p>
+        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {useCases.map((uc) => (
+            <div
+              key={uc.title}
+              className="group rounded-xl border border-border bg-surface p-6 transition hover:-translate-y-0.5 hover:border-border-hover"
+            >
+              <div className="text-3xl">{uc.icon}</div>
+              <h3 className="mt-4 font-display font-semibold group-hover:text-accent">
+                {uc.title}
+              </h3>
+              <p className="mt-2 text-sm text-text-muted">{uc.description}</p>
+              <p className="mt-4 text-xs font-medium text-accent">{uc.metrics}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}