frontend/app/page.tsx

import { AnalyticsPanel } from "@/components/analytics-panel";
import { ChatPanel } from "@/components/chat-panel";
import { FeatureGrid } from "@/components/feature-grid";
import { Footer } from "@/components/footer";
import { Hero } from "@/components/hero";
import { KnowledgeBasePanel } from "@/components/knowledge-base-panel";

export default function Home() {
  return (
    <main className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
      <header className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/5 px-6 py-4 text-sm text-slate-100 shadow-lg shadow-slate-950/40">
        <div className="flex items-center gap-3 text-base font-semibold">
          <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
            IC
          </span>
          IntegraChat Operator Console
        </div>
        <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.4em] text-slate-400">
          FastAPI · MCP Servers · Celery · Next.js
        </div>
      </header>

      <Hero />
      <FeatureGrid />
      <KnowledgeBasePanel />
      <ChatPanel />
      <AnalyticsPanel />
      <Footer />
    </main>
  );
}