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

'use client'

import { Book, Building2, Code, ExternalLink, Eye, FileText, Fingerprint, Globe, Layers, Mail, PenLine, Shield, Users, Webhook } from "lucide-react"
import { Github } from "@/components/brand"
import Pricing from "@/components/sign/Pricing"
import { Cards } from "@/components/product/ProductLanding"
import { Text } from "@hanzo/ui"
import { Aside, LINK } from "@/components/products/Aside"
import { Lede } from "@/components/products/Lede"
import { Steps } from "@/components/preview/steps"
import { ProductFooter } from "@/components/products/ProductFooter"
import { Start } from "@/components/products/Start"
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

const DOCS = "https://docs.hanzo.ai/docs/projects/hanzoai/esign"
const REPO = "https://github.com/hanzoai/esign"

/** A document's life, one step at a time, walked beside the heading: the page's own words. */
const FLOW = [
  { title: phrase('Upload the PDF'), body: phrase('The contract you send fifty times a month gets its fields placed once. After that, sending it is choosing a recipient.') },
  { title: phrase('Place the fields'), body: phrase('Fields for a signature, initials, a date, a name, a checkbox or free text, placed where you want them on the page.') },
  { title: phrase('Send it'), body: phrase('Each signer gets a link and signs in their browser. Nobody installs anything and nobody prints anything.') },
  { title: phrase('Watch it move'), body: phrase('Sent, opened, signed, declined — per recipient, as it happens.') },
  { title: phrase('Keep the record'), body: phrase('The completed document carries a certificate recording each signer, the time, and the address they signed from.') },
]

export default function SignClient() {
  const { t } = useI18n()
  return (
    <>
      <Lede
        preview={<Steps title={phrase('A document, signed')} icon={<PenLine size={12} color="currentColor" />} steps={FLOW} />}
        badge={phrase("Document signing")}
        badgeIcon={PenLine}
        title="Hanzo Sign"
        actions={[
          { label: phrase('Try Hanzo'), href: '/login', icon: ExternalLink },
          { label: phrase('Documentation'), href: DOCS },
        ]}
      >
        {t('Upload a PDF, drop the fields where people need to sign, and send it.')}
      </Lede>

      <Cards
        grid={{
          title: phrase('What is in it'),
          sub: phrase('The parts of signing that are actually work: placing the fields, chasing the signers, and proving afterwards that it happened.'),
          items: [
            { icon: PenLine, title: phrase('Signatures'), body: phrase('Fields for a signature, initials, a date, a name, a checkbox or free text, placed where you want them on the page. The completed document carries a certificate recording each signer, the time, and the address they signed from.') },
            { icon: FileText, title: phrase('Templates'), body: phrase('The contract you send fifty times a month gets its fields placed once. After that, sending it is choosing a recipient.') },
            { icon: Users, title: phrase('Teams'), body: phrase('Documents belong to a team rather than to whoever uploaded them, so a person leaving does not take the paperwork with them. Roles decide who can send, who can only see.') },
            { icon: Webhook, title: phrase('Webhooks and an API'), body: phrase('Your system creates the document, adds the recipients and sends it. A webhook fires when somebody opens, signs or declines, so your side of the workflow moves without anybody watching an inbox.') },
            { icon: Shield, title: phrase('Security & Compliance'), body: phrase('End-to-end encryption, a signed trail on every document, and data that stays in the region you choose.') },
            { icon: Layers, title: phrase('Your name on it'), body: phrase('The signing page carries your logo and your colours on your own domain, so the person signing sees the company they are doing business with rather than the company we are.') },
            { icon: Mail, title: phrase('The chasing, done for you'), body: phrase('The invitation, the reminder for the one person who has not got to it yet, and the copy of the finished document to everybody who signed.') },
            { icon: Fingerprint, title: phrase('Signing in'), body: phrase('A passkey, or a password kept as a bcrypt digest. A document can also demand that a recipient authenticate before it will open, so the link alone is not enough to read it.') },
            { icon: Eye, title: phrase('Where it is right now'), body: phrase('Sent, opened, signed, declined — per recipient, as it happens. You know which of five people is holding up a deal without asking any of them.') },
            { icon: Globe, title: phrase('Twelve languages'), body: phrase('German, English, Spanish, French, Italian, Japanese, Korean, Dutch, Polish, Brazilian Portuguese, Albanian and Chinese. The signer reads the page in theirs, not yours.') },
          ],
        }}
      />

      <Pricing />

      <Aside
        title={phrase("Built on Open Source")}
        links={[
          { label: 'hanzoai/esign', href: REPO, icon: Github },
          { label: phrase('Upstream: documenso/documenso'), href: 'https://github.com/documenso/documenso', icon: ExternalLink },
        ]}
      >
        {t('Hanzo Sign is built on {documenso}, an open-source document signing platform, under the AGPL.', {
          documenso: (
            <Text render="a" {...{ href: 'https://documenso.com', target: '_blank', rel: 'noopener noreferrer' }} color={LINK.color}>
              Documenso
            </Text>
          ),
        })}{' '}
        {t('The upstream project is named here and in the licence, because naming what you forked is required and is a different act from branding yourself with it. Run our build, or run your own — the whole thing is a TypeScript application over Postgres, and you can read every line that touches a document before you trust it with one.')}
      </Aside>

      <Cards
        grid={{
          title: phrase('Send the first one'),
          sub: phrase('Upload a PDF and place a signature field. You will know inside five minutes whether this fits.'),
          items: [
            { icon: PenLine, title: phrase('Start signing'), body: phrase('Open the hosted app and send a document'), link: { label: phrase('Try Hanzo'), href: '/login' } },
            { icon: Book, title: phrase('Documentation'), body: phrase('Setup, self-hosting, and the API reference'), link: { label: phrase('View Docs'), href: DOCS } },
            { icon: Code, title: phrase('The source'), body: phrase('Read it before you trust a contract to it'), link: { label: phrase('View on GitHub'), href: REPO } },
          ],
        }}
      />

      <Aside title={phrase("Something more specific")} links={[{ label: phrase('Contact Sales'), href: '/contact-sales', icon: Building2 }]}>
        {t('Signing inside your own product, a flow with approvals before the send, or running it on your infrastructure. Tell us the shape and we will tell you whether it fits.')}
      </Aside>

      <Start title={phrase("Get started with Sign")} docs={DOCS} repo={REPO} />
      <ProductFooter slug="sign" name="Sign" />
    </>
  )
}