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

'use client'

import { ArrowRight, Code, Eye, GitBranch, Puzzle, Shield, Workflow, Zap } from 'lucide-react'
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'

/**
 * Hanzo Flow, 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 HanzoFlowPage() {
  return (
    <>
      <ProductLanding
        badge={"flow.hanzo.ai"}
        badgeIcon={Workflow}
        title={"Hanzo Flow"}
        tagline={"Build an AI workflow on a canvas, ship it as an API"}
        lede={"Drag a model, a vector store and a prompt onto a canvas, wire them together, and run it with the values you actually have. Every component is Python you can open and edit in place, so the canvas stops where your code starts instead of at a wall. When it works, publish it: a REST endpoint, a JSON file a Python app loads, or an MCP server, which turns the flow into a tool any MCP client can call."}
        ctas={[
          { label: "Open Flow", href: "https://flow.hanzo.ai", icon: ArrowRight },
          { label: "Documentation", href: "https://docs.hanzo.ai/docs/cli/flow" },
        ]}
        what={{
          title: "The canvas is not the ceiling",
          sub: "Visual builders usually work right up until you need the thing they did not think of. This one hands you the source.",
          pillars: [
            {
              icon: Puzzle,
              title: "The library",
              body: "Models, vector stores, document loaders, text splitters, output parsers, memory, retrievers and toolkits — plus anything you write yourself, which is a component like the rest.",
            },
            {
              icon: Code,
              title: "Open any node",
              body: "A component is a Python class. Edit it in the browser and the change is live on the next run — no rebuild, no plugin format, no waiting for someone to add the parameter you need.",
            },
            {
              icon: Eye,
              title: "Step through it",
              body: "The playground runs a flow one node at a time and shows what each one received and returned. When a chain gives a strange answer, this is where you find the node that caused it.",
            },
            {
              icon: GitBranch,
              title: "Multi-agent",
              body: "Several agents on the same canvas, with conversation state between them and retrieval underneath — visible as a graph rather than buried in a prompt.",
            },
            {
              icon: Zap,
              title: "Publish it three ways",
              body: "As a REST endpoint, as JSON your Python app loads directly, or as an MCP server — after which the flow is a tool your coding agent can call.",
            },
            {
              icon: Shield,
              title: "Keys stay out of the flow",
              body: "Credentials live as variables the graph references by name, so a flow you export or share carries the wiring and not the secrets.",
            },
          ],
        }}
        stats={{
          items: [
            { value: "Python", label: "Every component" },
            { value: "REST", label: "Or JSON, or MCP" },
            { value: ":7860", label: "On your machine" },
            { value: "MIT", label: "Self-hosted" },
          ],
        }}
        finalCta={{
          title: "Run it locally first",
          sub: "uv pip install hanzoflow, then uv run hanzoflow run. It opens on 127.0.0.1:7860. Docker works too.",
          buttons: [
            { label: "Open Flow", href: "https://flow.hanzo.ai", icon: ArrowRight },
            { label: "View on GitHub", href: "https://github.com/hanzoai" },
          ],
        }}
      >
        <OSSRevenueBanner />
      </ProductLanding>
      <ProductFooter slug={"flow"} name={"Flow"} />
    </>
  )
}