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

'use client'

import { ArrowRight, Box, FileText, Image as ImageIcon, Layers, Mic, Sparkles, Zap } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { useI18n } from '@hanzo/i18n/react'

/**
 * Jin, 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".
 *
 * 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 JinPage() {
  const { t } = useI18n()
  return (
    <>
      <ProductLanding
        badge={"hanzoai/jin"}
        badgeIcon={Sparkles}
        title={"Jin"}
        tagline={t("Research on learning without labels")}
        lede={t("A joint-embedding predictive architecture does not reconstruct pixels. It predicts the embedding of a piece of an image from the embedding of another piece — so the model spends its capacity on what the image means rather than on what it looks like. Jin is our work on that idea, in the open, with the code and the papers to read.")}
        ctas={[
          { label: t("Read the docs"), href: "https://docs.hanzo.ai", icon: ArrowRight },
          { label: t("View on GitHub"), href: "https://github.com/hanzoai" },
        ]}
        what={{
          title: t("What is in the repository"),
          sub: t("Read it, fork it, take the parts you want."),
          pillars: [
            {
              icon: Layers,
              title: "I-JEPA",
              body: t("A clean implementation of the image variant: a context encoder, a target encoder that is its moving average, and a predictor that has to guess the target embeddings. Both a ViT and an energy-transformer backbone."),
            },
            {
              icon: ImageIcon,
              title: "Saccade JEPA",
              body: t("Ours. Eyes jitter constantly and the brain predicts what the jitter will do to the scene, so the model shifts an image, predicts how its embedding moves, and shifts back to check it lands where it started."),
            },
            {
              icon: Box,
              title: t("Three losses at once"),
              body: t("Huber loss on the prediction, a cycle-consistency term that punishes drift on the round trip, and the invariance and covariance parts of VICReg to stop the representation collapsing."),
            },
            {
              icon: FileText,
              title: t("Masked autoencoding"),
              body: t("An MAE with self-distillation sits alongside, for the comparison that matters: is a decoder worth its parameters when the goal is a good representation rather than a good reconstruction?"),
            },
            {
              icon: Zap,
              title: t("Ways to see what it learned"),
              body: t("Self-supervised training has no validation loss to watch, so there are linear probes, KNN, attention-map visualisation in a Dash dashboard, correlation dimension, and UMAP coloured by true class."),
            },
            {
              icon: Mic,
              title: t("The papers"),
              body: t("Grant proposals on hierarchical JEPA for edge AI, where the interesting constraint is learning useful representations on hardware that cannot phone home."),
            },
          ],
        }}
        stats={{
          items: [
            { value: "I-JEPA", label: t("Reference build") },
            { value: "Saccade", label: t("Our own variant") },
            { value: "MAE", label: t("Self-distilled") },
            { value: t("Papers"), label: t("Edge AI proposals") },
          ],
        }}
        finalCta={{
          title: t("Read the code"),
          buttons: [
            { label: t("Read the docs"), href: "https://docs.hanzo.ai", icon: ArrowRight },
            { label: t("View on GitHub"), href: "https://github.com/hanzoai" },
          ],
        }}
      />
      <ProductFooter slug={"jin"} name={"Jin"} />
    </>
  )
}