hanzo.ai/app/(marketing)/commerce/commerce-client.tsx

'use client'

import {
  BarChart,
  Book,
  Code,
  CreditCard,
  Database,
  ExternalLink,
  GitBranch,
  Gift,
  Globe,
  Layers,
  Package,
  Server,
  Shield,
  ShoppingCart,
  Tags,
  Truck,
  Zap,
} from "lucide-react"
import APIEndpoints from "@/components/commerce/APIEndpoints"
import UseCases from "@/components/commerce/UseCases"
import { Cards } from "@/components/product/ProductLanding"
import { Aside } from "@/components/products/Aside"
import { Lede } from "@/components/products/Lede"
import { ProductFooter } from "@/components/products/ProductFooter"
import { Start } from "@/components/products/Start"

const DOCS = "https://docs.hanzo.ai/docs/cli/commerce"
const CONSOLE = "https://platform.hanzo.ai"

export default function CommerceClient() {
  return (
    <>
      <Lede
        badge="Headless E-commerce Platform"
        badgeIcon={ShoppingCart}
        title="Hanzo Commerce"
        actions={[
          { label: 'Read the docs', href: DOCS, icon: ExternalLink },
          { label: 'Console', href: CONSOLE },
        ]}
      >
        Products, carts, checkout, orders and returns behind an API, with no storefront attached. You write the
        front end; this keeps the catalogue, takes the payment and remembers what happened. Card numbers are
        tokenized somewhere else, so the store never holds one.
      </Lede>

      <Cards
        grid={{
          title: 'What it keeps track of',
          sub: 'The nouns a shop is made of, each one addressable and none of them assuming what your site looks like.',
          items: [
            { icon: ShoppingCart, title: 'Carts', body: 'A cart is a real object with its own id, so someone can leave and come back, and you can look at what they left in it.' },
            { icon: Package, title: 'Products and variants', body: 'A product holds the description; a variant holds the size, the colour and the price. Stock is tracked on the variant, which is the thing people actually buy.' },
            { icon: CreditCard, title: 'Authorize and capture', body: 'Two steps, not one. Hold the money when the order is placed and take it when the box ships, which is what your accountant and your customer both expect.' },
            { icon: Gift, title: 'Coupons and discounts', body: 'Applied to a cart or to an invoice, and recorded as their own line. The reason a total came out lower survives the transaction.' },
            { icon: Tags, title: 'Prices per store', body: 'One catalogue can answer differently for different stores. The product does not have to be duplicated to be priced twice.' },
            { icon: BarChart, title: 'Subscriptions', body: 'Plans, prices and renewals sit in the same service as the orders, so a customer who buys once and subscribes once is one customer with one history.' },
            { icon: Truck, title: 'Orders, refunds and returns', body: 'The whole life of an order, including the parts nobody demos. A return is a first-class object rather than a note in a support ticket.' },
            { icon: Globe, title: 'Many stores, one install', body: 'Stores are scoped by organisation, so an agency or a marketplace runs several without running several copies of this.' },
            { icon: Shield, title: 'It never sees a card', body: 'Card numbers are tokenized in a separate service and this one only ever holds the token. That is a smaller thing to secure, and a much smaller thing to be audited on.' },
            { icon: Database, title: 'Your data, per tenant', body: "Each organisation's records live in its own store. Isolation is a file boundary rather than a WHERE clause somebody has to remember to write." },
          ],
        }}
      />

      <APIEndpoints />
      <UseCases />

      <Cards
        grid={{
          title: 'Who takes the money',
          sub: 'The processor is a setting, not an architecture. Each one gets its own webhook endpoint, so adding a second — or leaving the first — is a change here rather than a change in your checkout.',
          items: [
            { title: 'Payment Gateways', points: ['Stripe', 'PayPal', 'Adyen', 'Square', 'Braintree', 'Klarna', 'Affirm', 'Apple Pay'] },
            { title: 'Marketing & CRM', points: ['Mailchimp', 'Klaviyo', 'HubSpot', 'Salesforce', 'Segment', 'Meta Pixel', 'Google Analytics', 'Customer.io'] },
            { title: 'Shipping & Fulfillment', points: ['ShipStation', 'ShipBob', 'EasyPost', 'FedEx', 'UPS', 'USPS', 'DHL', 'AfterShip'] },
            { title: 'Accounting & ERP', points: ['QuickBooks', 'Xero', 'NetSuite', 'SAP', 'Avalara', 'TaxJar', 'Sage', 'Microsoft Dynamics'] },
          ],
        }}
      />

      <Cards
        grid={{
          title: 'What you are running',
          sub: 'Worth knowing before you put your revenue behind it.',
          items: [
            { icon: Server, title: 'One Go binary', body: 'A single container with no queue, no cache tier and no companion services to stand up beside it. Run it locally the same way it runs in production.' },
            { icon: Database, title: 'A store per organisation', body: "Tenants are separated by where their data lives rather than by a column, so one tenant's query cannot reach another's rows." },
            { icon: Shield, title: 'Outside the card boundary', body: 'Card numbers are tokenized by a separate service. This one is connected to that boundary without being inside it, which is the whole point of drawing one.' },
            { icon: Zap, title: 'Identity from Hanzo IAM', body: 'Sign-in, organisations and tokens come from IAM. There is no second user table here to fall out of step with the first.' },
            { icon: Layers, title: 'Mounts into the cloud binary', body: 'It runs on its own or as a subsystem inside the unified Hanzo Cloud binary. Same code, same routes, one fewer process to operate.' },
            { icon: GitBranch, title: 'Open source', body: 'MIT or Apache-2.0, your choice. Read how your money is handled instead of taking our word for it.' },
          ],
        }}
      />

      <Cards
        grid={{
          title: 'Create a product, then sell it',
          sub: 'The whole thing runs from one container. Point your front end at it and take an order.',
          items: [
            { icon: ShoppingCart, title: 'Start Selling', body: 'Launch your store with our easy-to-use platform', link: { label: 'Try Hanzo', href: '/login' } },
            { icon: Book, title: 'Documentation', body: 'Explore our guides and API references', link: { label: 'View Docs', href: DOCS } },
            { icon: Code, title: 'For Developers', body: 'Integrate our APIs into your applications', link: { label: 'API Reference', href: 'https://docs.hanzo.ai/docs' } },
          ],
        }}
      />

      <Aside title="Need a Custom Solution?" links={[{ label: 'Contact Sales', href: '/contact-sales' }]}>
        Our team of experts can help you design and implement a tailored e-commerce solution for your unique
        business needs.
      </Aside>

      <Start title="Get started with Commerce" docs={DOCS} repo="https://github.com/hanzoai" />
      <ProductFooter slug="commerce" name="Commerce" />
    </>
  )
}