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

'use client'

import { ArrowRight, Code, GitFork, Layers, LayoutGrid, Rocket, Search, Sparkles } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { useI18n } from '@hanzo/i18n/react'

/**
 * Gallery, through the ONE product kit.
 *
 * A fourth cluster of the same duplicated shape — computer, desktop, gallery
 * and world scored 83–97% identical on their className sets. Hero, a six-card
 * grid, a call to action, written out four times. They now pass one typed
 * props object to `ProductLanding` and carry zero layout classes of their own.
 * See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE, with the same one deletion /node and
 * /network took: a trailing "Get started with X" card whose two links were the
 * docs and GitHub, both of which the hero and the card above it already reach.
 * ProductFooter was nested inside it, so it also rendered narrower than on
 * every other product page; out here it is the width it is everywhere else.
 */

export default function GalleryPage() {
  const { t } = useI18n()
  return (
    <>
      <ProductLanding
        badge={"gallery.hanzo.ai"}
        badgeIcon={LayoutGrid}
        title={"Gallery"}
        tagline={t("Curated template showcase for Hanzo products")}
        lede={t("Production-ready starters for every Hanzo product. Browse, fork, deploy. From RAG chatbots to multi-agent workflows — wired up to Hanzo Cloud, IAM, and KMS out of the box.")}
        ctas={[
          { label: t("Browse the Gallery"), href: "https://gallery.hanzo.ai", icon: ArrowRight },
          { label: t("Documentation"), href: "https://docs.hanzo.ai/docs/studio" },
        ]}
        what={{
          title: t("Start from a Working App"),
          sub: t("Templates that build, deploy, and scale on day one."),
          pillars: [
            {
              icon: Sparkles,
              title: t("RAG Chatbots"),
              body: t("Vector + Chat + Zen, prewired. Plug your docs in, ship a branded assistant in an afternoon."),
            },
            {
              icon: Layers,
              title: t("Agent Workflows"),
              body: t("Multi-step agents using the Hanzo Agent SDK. Email triage, research bots, research-to-PR pipelines."),
            },
            {
              icon: Rocket,
              title: t("Deploy in One Click"),
              body: t("Every template ships with a Hanzo Cloud deploy button. CI, secrets, and scaling preconfigured."),
            },
            {
              icon: Code,
              title: t("Open Source"),
              body: t("All templates Apache-2.0 in the hanzo-apps/gallery monorepo. Read the code, fork the project."),
            },
            {
              icon: Search,
              title: t("Searchable"),
              body: t("Filter by stack, product, or use case. Live previews. Embedded code playgrounds."),
            },
            {
              icon: GitFork,
              title: t("Submit Yours"),
              body: t("Build a template the community will love? Open a PR — we showcase the best with a paid bounty."),
            },
          ],
        }}
        finalCta={{
          title: t("Skip the Boilerplate"),
          sub: t("Ship your idea, not your scaffolding."),
          buttons: [
            { label: t("Browse the Gallery"), href: "https://gallery.hanzo.ai", icon: ArrowRight },
            { label: t("View on GitHub"), href: "https://github.com/hanzo-apps/gallery" },
          ],
        }}
      />
      <ProductFooter slug={"gallery"} name={"Gallery"} />
    </>
  )
}