crema-app-aifirst-template/app/routes/home.tsx

import { ArrowRight, Sparkles, Boxes, Activity, BookOpen } from "lucide-react"
import { Link } from "react-router"

import { AppShell } from "~/components/layout/app-shell"
import { PageHeader } from "~/components/layout/page-header"
import { Card, CardDescription, CardHeader, CardTitle } from "~/components/ui/card"
import { pageTitle } from "~/lib/page-meta"

export const meta = () => pageTitle("Overview")

const tiles = [
  {
    to: "/assistant",
    icon: Sparkles,
    title: "Assistant",
    body: "AI-first surface — chat, suggestions, and full UI control.",
    accent: true,
  },
  {
    to: "/resources",
    icon: Boxes,
    title: "Resources",
    body: "Traditional list + detail surface for managed entities.",
  },
  {
    to: "/activity",
    icon: Activity,
    title: "Activity",
    body: "Event stream and audit log.",
  },
  {
    to: "/library",
    icon: BookOpen,
    title: "Library",
    body: "Saved items, templates, reusable artifacts.",
  },
]

export default function HomeRoute() {
  return (
    <AppShell title="Overview">
      <PageHeader
        title="Welcome"
        description={
          <>
            A hybrid traditional + AI-first scaffold. Use the rail to navigate;
            the Assistant can drive the UI on your behalf — try{" "}
            <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
              ⌘⇧P
            </kbd>{" "}
            for the script runner.
          </>
        }
      />

      <div className="grid gap-4 md:grid-cols-2">
        {tiles.map((t) => {
          const Icon = t.icon
          return (
            <Link
              key={t.to}
              to={t.to}
              data-action={`home-tile-${t.title.toLowerCase()}`}
              className="group block"
            >
              <Card
                className={[
                  "h-full transition-colors",
                  t.accent
                    ? "border-primary/30 bg-primary/5 hover:border-primary/50"
                    : "hover:border-foreground/20",
                ].join(" ")}
              >
                <CardHeader>
                  <div className="mb-2 flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <Icon className="size-5" />
                  </div>
                  <CardTitle className="flex items-center gap-2">
                    {t.title}
                    <ArrowRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />
                  </CardTitle>
                  <CardDescription>{t.body}</CardDescription>
                </CardHeader>
              </Card>
            </Link>
          )
        })}
      </div>
    </AppShell>
  )
}