hanzo.ai/app/(marketing)/dashboards/page.tsx

'use client'

import { ArrowRight, BarChart3, Bell, Database, Globe, Layers, LayoutDashboard, Shield } from 'lucide-react'
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'

/**
 * Hanzo Dashboards, through the ONE product kit.
 *
 * auto, dashboards and flow scored 93–100% identical on their className sets —
 * the same hero, stat row, six-card grid and call to action three more times.
 * See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE.
 */

export default function HanzoDashboardsPage() {
  return (
    <>
      <ProductLanding
        badge={"Traces · observations · scores"}
        badgeIcon={LayoutDashboard}
        title={"Hanzo Dashboards"}
        tagline={"A dashboard is a saved query"}
        lede={"Views over what your own applications recorded. A widget is a query against the traces, observations and scores this service already holds — not a copy of them in a second system, and not a metrics store you have to feed on the side."}
        ctas={[
          { label: "GitHub", href: "https://github.com/hanzoai/dashboards" },
        ]}
        what={{
          title: "What a dashboard is made of",
          sub: "Widgets, monitors, saved views and score configs — all of them queries over one store.",
          pillars: [
            {
              icon: BarChart3,
              title: "Widgets over your own data",
              body: "A widget names what to select and how to group it. Because it queries the store that already holds your traces, a chart cannot drift from what happened.",
            },
            {
              icon: Bell,
              title: "Monitors",
              body: "A saved query you want watched rather than looked at. Same definition as the widget beside it, kept in one place so the alert and the chart cannot disagree.",
            },
            {
              icon: Database,
              title: "One store, not two",
              body: "Traces, observations and scores live in the service that serves the dashboards. There is no export step, no second database to keep in sync, and nothing to reconcile after an outage.",
            },
            {
              icon: Layers,
              title: "Saved table views",
              body: "The columns, filters and sort you arrived at are a preset you can name and return to. Presets belong to the project, so a colleague opens the view you meant.",
            },
            {
              icon: Globe,
              title: "Scores are yours to define",
              body: "Score configs say what good means for your application — a rating, a label, a number from an evaluator. Dashboards then aggregate the thing you actually care about.",
            },
            {
              icon: Shield,
              title: "Permission per category",
              body: "Access is granted by category rather than per object, and the boundary is the organization on your token. Reading somebody else's project is not a URL away.",
            },
          ],
        }}
        stats={{
          items: [
            { value: "Traces", label: "The thing being queried" },
            { value: "Scores", label: "Yours to define" },
            { value: "Monitors", label: "Saved and watched" },
            { value: "SSO", label: "IAM login" },
          ],
        }}
        finalCta={{
          title: "Start from a trace",
          sub: "Send traces from your application, then build the view that answers the question you keep asking about them.",
          buttons: [
            { label: "View on GitHub", href: "https://github.com/hanzoai/dashboards" },
          ],
        }}
      >
        <OSSRevenueBanner />
      </ProductLanding>
      <ProductFooter slug={"dashboards"} name={"Dashboards"} />
    </>
  )
}