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

'use client'

import { ArrowRight, Activity, Cable, Filter, Globe, Layers, Shield, Zap } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { phrase } from '@hanzo/i18n'

/**
 * Hanzo Telemetry, through the ONE product kit.
 *
 * The largest cluster left: TWELVE pages — engine, gateway, guard, ingress,
 * jin, metrics, o11y, operator, sentinel, skills, telemetry, visor — at 85%+
 * identical className sets, each a hero, a six-card grid and a call to action
 * written out again. All twelve pass one typed props object to
 * `ProductLanding`. See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE. ProductFooter came out of the final
 * card's `max-w-3xl` wrapper, where it had been rendering narrower than on
 * every other product page.
 */

export default function HanzoTelemetryPage() {
  return (
    <>
      <ProductLanding
        badge={"telemetry.hanzo.ai"}
        badgeIcon={Activity}
        title={"Hanzo Telemetry"}
        tagline={phrase("The collector that sits between your app and wherever the data goes")}
        lede={phrase("Your services talk to it instead of talking to a backend. It receives OTLP, batches it, holds a memory ceiling so a traffic spike cannot take the host down with it, and forwards onward. Change where the data goes by editing its config — not by redeploying every service that produces the data.")}
        ctas={[
          { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
        ]}
        what={{
          title: phrase("One hop you control"),
          sub: phrase("The last place your telemetry is yours before it goes anywhere."),
          pillars: [
            {
              icon: Cable,
              title: phrase("OTLP in, OTLP out"),
              body: phrase("Receives over gRPC and HTTP, exports the same way. OTLP is the format the OpenTelemetry SDKs already speak, so nothing in your code changes to point at it."),
            },
            {
              icon: Layers,
              title: phrase("Traces, metrics and logs"),
              body: phrase("All three move through the same process, so there is one thing to run, one config to read and one place to look when telemetry stops arriving."),
            },
            {
              icon: Filter,
              title: phrase("Batching"),
              body: phrase("Spans arrive one at a time and leave in batches. That is the difference between a request per span and a request per few thousand, and your backend feels it."),
            },
            {
              icon: Zap,
              title: phrase("A memory ceiling"),
              body: phrase("Tell it how much memory it may use and it refuses work rather than exceeding it. Telemetry is the thing that should degrade during an incident, not the thing that causes one."),
            },
            {
              icon: Globe,
              title: phrase("Assembled, not installed"),
              body: phrase("This is the collector itself. Build a distribution with the receivers, processors and exporters you actually want, and ship one binary containing those and nothing else."),
            },
            {
              icon: Shield,
              title: phrase("It runs where you run"),
              body: phrase("A binary in your own network. Whatever you decide not to forward, you decide before the data has left — which is the only point where that is still your call."),
            },
          ],
        }}
        finalCta={{
          title: phrase("Put it in front of your backend"),
          buttons: [
            { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
          ],
        }}
      />
      <ProductFooter slug={"telemetry"} name={"Telemetry"} />
    </>
  )
}