hanzo.ai/app/(marketing)/console/view.tsx

'use client'

import type { ReactNode } from 'react'
import { ArrowRight, Activity, BarChart3, Clock, DollarSign, Eye, GitBranch, Shield } from 'lucide-react'
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'

/**
 * Console, through the ONE product kit.
 *
 * One of NINE pages — console, insights, kms, kv, mq, pubsub, sql, storage,
 * stream — that shared a class set 100%: the same hero, stat row, six-card
 * grid, terminal and call to action, written out nine times in ~310 utility
 * classes each. They now pass one typed props object to `ProductLanding` and
 * carry zero layout classes. See LLM.md, "Tailwind is NOT gone", for the rule.
 *
 * EVERY WORD IS THE ONE THAT WAS HERE, the four stat tiles included: 28 of the
 * group's 36 carry a port, a version, a licence or a coding the prose does not
 * (measured), so unlike /ledger's four they are not restatements and they stay.
 *
 * One fix the move makes by construction: ProductFooter sat INSIDE the final
 * card's `max-w-4xl` wrapper on all nine, so the OSS attribution and deploy
 * block rendered narrower here than on every other product page.
 */

export default function ConsolePage({ source }: { source: ReactNode }) {
  return (
    <>
      <ProductLanding
        badge={"platform.hanzo.ai"}
        badgeIcon={Activity}
        title={"Hanzo Console"}
        tagline={"One admin for everything you run"}
        lede={"Every product on Hanzo Cloud has a module here — providers and models, keys, applications, stores, agents, clusters, domains, billing. Sign in once and the sidebar is whatever your organization actually uses."}
        ctas={[
          { label: "Open Console", href: "https://platform.hanzo.ai", icon: ArrowRight },
          { label: "Documentation", href: "https://docs.hanzo.ai/docs/console" },
        ]}
        what={{
          title: "A module per product, one shell around them",
          sub: "Add what you use. Hide what you don't. The shell stays the same.",
          pillars: [
            {
              icon: Eye,
              title: "Providers and models",
              body: "Every model your organization can call, and which provider serves it. Connect an account of your own and its models appear beside the ones we run.",
            },
            {
              icon: DollarSign,
              title: "Usage and balance",
              body: "A usage record per call and one balance per organization, so spend is attributed where it happened instead of totalled at the end of the month.",
            },
            {
              icon: Clock,
              title: "Keys",
              body: "Issue an API key, scope it, revoke it. The key you paste into a client is minted here, and revoking it here is what stops it working.",
            },
            {
              icon: BarChart3,
              title: "Applications and stores",
              body: "Register an app, hand it an identity, give it a store. The console writes the same resources the CLI does, because both are clients of the same API.",
            },
            {
              icon: GitBranch,
              title: "Find it by typing it",
              body: "A command palette reaches every module and every record without learning where anything lives. The sidebar is yours to reorder and prune.",
            },
            {
              icon: Shield,
              title: "Scoped to the org on your token",
              body: "Sign-in is OIDC against Hanzo IAM. What you see is what your organization owns, and switching organization switches the whole page — there is no global view to fall into by accident.",
            },
          ],
        }}
        stats={{
          items: [
            { value: "/v1", label: "One API behind it" },
            { value: "OIDC", label: "Sign in with Hanzo IAM" },
            { value: "Per-org", label: "Data scoped to your org" },
            { value: "OSS", label: "MIT or Apache-2.0" },
          ],
        }}
        code={{
          head: { title: "The console is a client. So is your code.", sub: "Everything on these screens is a call to api.hanzo.ai/v1, and the typed clients are generated from the same document." },
          name: "app.py",
          source,
        }}
        finalCta={{
          title: "Open the console",
          sub: "Sign in with your Hanzo identity. The organization you land in is the one that gets billed, and everything on these screens belongs to it.",
          buttons: [
            { label: "Open Console", href: "https://platform.hanzo.ai", icon: ArrowRight },
            { label: "View on GitHub", href: "https://github.com/hanzoai" },
          ],
        }}
      >
        <OSSRevenueBanner />
      </ProductLanding>
      <ProductFooter slug={"console"} name={"Console"} />
    </>
  )
}