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 { useI18n } from '@hanzo/i18n/react'
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() {
  const { t } = useI18n()
  return (
    <>
      <ProductLanding
        badge={t("Traces · observations · scores")}
        badgeIcon={LayoutDashboard}
        title={"Hanzo Dashboards"}
        tagline={t("A dashboard is a saved query")}
        lede={t("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: t("What a dashboard is made of"),
          sub: t("Widgets, monitors, saved views and score configs — all of them queries over one store."),
          pillars: [
            {
              icon: BarChart3,
              title: t("Widgets over your own data"),
              body: t("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: t("Monitors"),
              body: t("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: t("One store, not two"),
              body: t("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: t("Saved table views"),
              body: t("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: t("Scores are yours to define"),
              body: t("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: t("Permission per category"),
              body: t("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: t("Traces"), label: t("The thing being queried") },
            { value: t("Scores"), label: t("Yours to define") },
            { value: t("Monitors"), label: t("Saved and watched") },
            { value: "SSO", label: t("IAM login") },
          ],
        }}
        finalCta={{
          title: t("Start from a trace"),
          sub: t("Send traces from your application, then build the view that answers the question you keep asking about them."),
          buttons: [
            { label: t("View on GitHub"), href: "https://github.com/hanzoai/dashboards" },
          ],
        }}
      >
        <OSSRevenueBanner />
      </ProductLanding>
      <ProductFooter slug={"dashboards"} name={"Dashboards"} />
    </>
  )
}