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

'use client'

import { ArrowRight, Download, GitBranch, Lock, Package, Plug, Search, Wrench } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { phrase } from '@hanzo/i18n'

/**
 * Skills, 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 SkillsPage() {
  return (
    <>
      <ProductLanding
        badge={"hanzoai/skills"}
        badgeIcon={Plug}
        title={"Skills"}
        tagline={phrase("Development knowledge your coding agent loads only when it needs it")}
        lede={phrase("A skill is a markdown file about one thing — Postgres query plans, Zig comptime, TLS certificate chains. Install the plugin and your agent reads the right one when the work calls for it, instead of carrying all of them into every session.")}
        ctas={[
          { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
        ]}
        what={{
          title: phrase("Coverage costs context. This is the trade."),
          sub: phrase("Load every guide at boot and the context window is spent before the first file is opened. Load none and the agent guesses at things that have known answers. Skills splits the difference: small files, and a discovery layer that fetches them on the keywords in what you asked for."),
          pillars: [
            {
              icon: Package,
              title: phrase("A skill is a markdown file"),
              body: phrase("Frontmatter carries a name and a description. Below it is prose, code, and links to related skills. Nothing to compile, nothing to run — you can read one before you trust it."),
            },
            {
              icon: Search,
              title: phrase("Gateway skills do the finding"),
              body: phrase("A gateway is a small skill whose whole job is to notice. Say Postgres and discover-database wakes up; say comptime and discover-zig does. It pulls the specific files and gets out of the way."),
            },
            {
              icon: Download,
              title: phrase("Install it in one line"),
              body: "npx skills add https://hanzoskills.com/hanzo.md adds the Hanzo skill to your agent, and hanzoskills.com/llms.txt lists every other one as plain markdown.",
            },
            {
              icon: GitBranch,
              title: phrase("Written small on purpose"),
              body: phrase("One topic per file, a few hundred lines each. Five focused reads cost less than one monolithic guide, and you get the five that matter instead of the one that covers everything badly."),
            },
            {
              icon: Lock,
              title: phrase("Cross-referenced, not duplicated"),
              body: phrase("Skills link to the skills next to them, so an agent following a thread from API design into rate limiting into Redis reads three files and never the same paragraph twice."),
            },
            {
              icon: Wrench,
              title: phrase("Add your own"),
              body: phrase("Drop a markdown file in a category, give it a name and a description, and it joins discovery. Your house conventions load the same way the public ones do."),
            },
          ],
        }}
        finalCta={{
          title: phrase("Get started with Skills"),
          buttons: [
            { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
          ],
        }}
      />
      <ProductFooter slug={"skills"} name={"Skills"} />
    </>
  )
}