69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
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>
|
|
)
|
|
}
|