Spaces:
Sleeping
Sleeping
File size: 4,171 Bytes
aa63765 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import Link from "next/link";
const stats = [
{ label: "Multi-tenant agents", value: "3 MCPs" },
{ label: "Policies enforced", value: "128 rules" },
{ label: "Avg. response time", value: "1.8s" },
];
export function Hero() {
return (
<section className="relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-slate-900 via-slate-900/70 to-cyan-900/40 p-10 text-white shadow-2xl">
<div className="grid gap-12 md:grid-cols-[1.2fr,0.8fr]">
<div className="space-y-8">
<span className="badge">
<span className="h-2 w-2 rounded-full bg-cyan-400" />
realtime oversight
</span>
<h1 className="text-4xl font-semibold leading-tight md:text-5xl">
Run chat agents, red-flag governance, and analytics from a single
console.
</h1>
<p className="text-lg text-slate-200">
IntegraChat brings together the FastAPI backend, MCP tool servers,
and compliance automation into a cohesive operator experience.
Trigger conversations, inspect tool traces, and stream policy
alerts—without leaving the browser.
</p>
<div className="flex flex-wrap gap-4 text-base font-medium">
<Link
href="#chat"
className="rounded-full bg-white/90 px-6 py-3 text-slate-900 shadow-lg shadow-cyan-500/30 transition hover:-translate-y-0.5 hover:bg-white"
>
Launch chat workspace
</Link>
<Link
href="#analytics"
className="rounded-full border border-white/30 px-6 py-3 text-white transition hover:border-cyan-300/70 hover:text-cyan-100"
>
View governance metrics
</Link>
</div>
</div>
<div className="glass-panel p-6">
<p className="text-sm uppercase tracking-[0.3em] text-cyan-200/70">
Stack Snapshot
</p>
<ul className="mt-6 space-y-4 text-sm text-slate-100">
<li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
<div>
<p className="text-xs uppercase tracking-wider text-slate-300">
API Gateway
</p>
<p className="font-semibold text-white">FastAPI 0.110 + CORS</p>
</div>
<span className="text-xs text-slate-300">backend/api</span>
</li>
<li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
<div>
<p className="text-xs uppercase tracking-wider text-slate-300">
MCP Servers
</p>
<p className="font-semibold text-white">
RAG · Web · Admin policy
</p>
</div>
<span className="text-xs text-slate-300">ports 8001-8003</span>
</li>
<li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
<div>
<p className="text-xs uppercase tracking-wider text-slate-300">
Workers
</p>
<p className="font-semibold text-white">
Celery ingestion + analytics
</p>
</div>
<span className="text-xs text-slate-300">beat + workers</span>
</li>
</ul>
<div className="mt-6 grid gap-4 rounded-2xl border border-white/10 bg-slate-900/30 p-5 text-center sm:grid-cols-3">
{stats.map((stat) => (
<div key={stat.label}>
<p className="text-2xl font-semibold text-white">
{stat.value}
</p>
<p className="text-xs uppercase tracking-wider text-slate-400">
{stat.label}
</p>
</div>
))}
</div>
</div>
</div>
<div className="pointer-events-none absolute inset-0 opacity-40">
<div className="grid-fade" />
</div>
</section>
);
}
|