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

'use client'

import { Banknote, Book, Building2, Code, Coins, ExternalLink, FileText, Fingerprint, PenLine, PieChart, Shield, Target, TrendingUp, Users } from "lucide-react"
import { Github } from "@/components/brand"
import Pricing from "@/components/captable/Pricing"
import { Cards } from "@/components/product/ProductLanding"
import { Text } from "@hanzo/ui"
import { useI18n } from '@hanzo/i18n/react'
import { Aside, LINK } from "@/components/products/Aside"
import { Lede } from "@/components/products/Lede"
import { phrase } from "@hanzo/i18n"
import { Steps } from "@/components/preview/steps"
import { ProductFooter } from "@/components/products/ProductFooter"
import { Start } from "@/components/products/Start"

const DOCS = "https://docs.hanzo.ai/docs/cli/captable"
const REPO = "https://github.com/hanzoai/captable"

/** A round, run first, one step at a time, walked beside the heading: the page's own words. */
const ROUND = [
  { title: phrase('Share classes'), body: phrase('Common, preferred, and custom share classes, with authorized shares, par value and voting rights.') },
  { title: phrase('Option grants'), body: phrase('ISO and NSO, with the cliff and the schedule attached to the grant.') },
  { title: phrase('SAFEs and notes'), body: phrase('Caps, discounts and interest held as terms, not as a note in a folder.') },
  { title: phrase('Run the round'), body: phrase('What they convert into at a given price is a calculation you can run before you agree to it.') },
  { title: phrase('Fully diluted'), body: phrase('What everyone owns once the options and the notes convert.') },
  { title: phrase('Waterfall'), body: phrase('At an exit price, who gets paid and in what order.') },
]

export default function CaptableClient() {
  const { t } = useI18n()
  return (
    <>
      <Lede
        preview={<Steps title={phrase('A round, run first')} icon={<PieChart size={12} color="currentColor" />} steps={ROUND} />}
        badge={t('Equity Management Platform')}
        badgeIcon={PieChart}
        title="Hanzo Cap Table"
        actions={[
          { label: t('Try Hanzo'), href: '/login', icon: ExternalLink },
          { label: t('Documentation'), href: DOCS },
        ]}
      >
        {t('Who owns what, and what happens to that when you raise again.')}
      </Lede>

      <Cards
        grid={{
          title: t('The instruments, modelled'),
          sub: t('A spreadsheet can hold these numbers. It cannot tell you what they become at the next price.'),
          items: [
            { icon: PieChart, title: t('Ownership, fully diluted'), body: t('The number that matters is not how many shares exist, it is what everyone owns once the options and the notes convert. That is the default view here.') },
            { icon: Coins, title: t('Share Classes'), body: t('Common, preferred, and custom share classes. Track authorized shares, par value, and voting rights.') },
            { icon: Target, title: t('Option grants'), body: t('ISO and NSO, with the cliff and the schedule attached to the grant. Vested-to-date is computed from the dates rather than typed in and left to rot.') },
            { icon: Banknote, title: t('SAFEs and notes'), body: t('Caps, discounts and interest held as terms, not as a note in a folder. What they convert into at a given price is a calculation you can run before you agree to it.') },
            { icon: FileText, title: t('Equity Plans'), body: t('Option pools and equity incentive plans. Manage board-approved pools with real-time utilization tracking.') },
            { icon: PenLine, title: t('Built-in E-Signing'), body: t('Integrated document signing for equity grants, board consents, and stock purchase agreements.') },
            { icon: Users, title: t('Stakeholders'), body: t("Founders, employees, investors and advisors, each seeing their own holding and nobody else's. The exercise window after someone leaves is a date the system knows, not one they have to remember.") },
            { icon: TrendingUp, title: t('Waterfall'), body: t("At an exit price, who gets paid and in what order. Preferences mean the founders' share is not their percentage, and this is where that becomes visible.") },
            { icon: Shield, title: t('Audit Trail'), body: t('Complete audit history for every transaction. SOC 2 compatible controls and data integrity.') },
            { icon: Fingerprint, title: t('SSO Authentication'), body: t('Passkeys, Google SSO, and Hanzo IAM single sign-on for secure access.') },
          ],
        }}
      />

      <Pricing />

      <Aside
        title={t('Built on Open Source')}
        links={[
          { label: 'hanzoai/captable', href: REPO, icon: Github },
          { label: t('Upstream: {repo}', { repo: 'captableinc/captable' }), href: 'https://github.com/captableinc/captable', icon: ExternalLink },
        ]}
      >
        {t('Hanzo Cap Table is built on {upstream} (OpenCap), the open-source alternative to Carta, Pulley, and AngelList. We contribute back to the community and extend it with Hanzo IAM integration, e-signing, and enterprise features.', {
          upstream: (
            <Text render="a" {...{ href: 'https://github.com/captableinc/captable', target: '_blank', rel: 'noopener noreferrer' }} color={LINK.color}>
              Captable, Inc.
            </Text>
          ),
        })}
      </Aside>

      <Cards
        grid={{
          title: t('Put the current table in, then model the round'),
          sub: t('Import what you have today. The useful part starts when you ask what the next price does to it.'),
          items: [
            { icon: PieChart, title: t('Get Started'), body: t('Set up your cap table in minutes'), link: { label: t('Try Hanzo'), href: '/login' } },
            { icon: Book, title: t('Documentation'), body: t('Explore our guides and API references'), link: { label: t('View Docs'), href: DOCS } },
            { icon: Code, title: t('For Developers'), body: t('Self-host or integrate via API'), link: { label: t('View on GitHub'), href: REPO } },
          ],
        }}
      />

      <Aside title={t('Need a Custom Solution?')} links={[{ label: t('Contact Sales'), href: '/contact-sales', icon: Building2 }]}>
        {t('Our team can help you set up and migrate your cap table with advanced compliance and security features.')}
      </Aside>

      <Start title={t('Get started with Cap Table')} docs={DOCS} repo={REPO} />
      <ProductFooter slug="captable" name="Captable" />
    </>
  )
}