hanzo.ai/components/captable/Pricing.tsx

'use client'

/**
 * The cap-table plans, as a band of the product page they sit on.
 *
 * `Band` and `Head` from components/marketing/band are the frame the card
 * sections on either side of this one already stand in — `Cards` in
 * ProductLanding makes the same call — so this one stops writing its own. It
 * passes CONTENT: the rule, the gutter, the measure, the rhythm and the type
 * all come from the frame.
 *
 * Three deliberate moves, all of them adopting something that already exists:
 *
 *   ground   `FADE`, the house fade this band was drawing by hand one notch
 *            darker. One gradient, named once, rather than three copies of it
 *            across /captable, /dataroom and /sign.
 *   heading  `Title quiet` — the section-heading role. It is a rung
 *            lighter (600, from `--type-hero`) than the `font-bold` it
 *            replaces and steps up to `--text-4xl` at 640, which is what every
 *            other heading on this page does.
 *   deck     `{ min: 240, max: 4 }`, the Fit `WorldPricing` in
 *            components/pricing already states for a row of four tiers.
 *
 * THE DECK WRAPS ON WIDTH, NOT ON BREAKPOINTS, so it does not step 1/2/4 at
 * 768 and 1024 the way `md:grid-cols-2 lg:grid-cols-4` did. A Fit cannot: the
 * track floor is one number, and 4-up at 1024 needs it under 222 while 2-up at
 * 768 needs it over 224. Measured on the export, the row now reads 1-up to
 * ~624, 2-up to ~888, 3-up to ~1152, and 4-up above that — so between 1024 and
 * 1152 the fourth card sits on its own line instead of squeezing into a 222px
 * column. That is the trade, and it is the one the pricing kit already made.
 */

import PricingPlan from "@/components/pricing/PricingPlan";
import { PieChart, Building2, Rocket } from "lucide-react"
import { Github } from "@/components/brand"
import { Grid } from '@hanzo/ui/grid'
import { Band, Head, FADE } from '@/components/marketing/band'

/** Every tier's mark, at the size and ink components/pricing draws them. */
const MARK = { size: 24, color: 'var(--muted-foreground)' } as const

const Pricing = () => {
  return (
    <Band rule={false} pad="$10" measure={1152} ground={FADE}>
      <Head
        title="Simple, Transparent Pricing"
        lede="Free and open source forever. Self-host or use our managed cloud."
      />

      <Grid columns={{ min: 240, max: 4 }} gap={24}>
        <PricingPlan
          name="Community"
          icon={<Github {...MARK} />}
          price="Free"
          description="Self-host and own your data. Full source code on GitHub."
          githubLink
          features={[
            'Unlimited stakeholders',
            'Share classes & options',
            'SAFEs & convertible notes',
            'Vesting schedules',
            'Basic reporting',
            'Community support',
          ]}
        />
        <PricingPlan
          name="Startup"
          icon={<PieChart {...MARK} />}
          price="$50"
          billingPeriod="/mo"
          description="For early-stage startups managing their first cap table."
          features={[
            'Everything in Community',
            'Managed cloud hosting',
            'E-signing for grants',
            'Waterfall analysis',
            '409A valuation tracking',
            'Email support',
            'Up to 25 stakeholders',
          ]}
        />
        <PricingPlan
          name="Growth"
          icon={<Building2 {...MARK} />}
          price="$150"
          billingPeriod="/mo"
          popular
          description="For growing companies with complex equity structures."
          features={[
            'Everything in Startup',
            'Unlimited stakeholders',
            'Advanced equity plans',
            'Board consent workflows',
            'Data room integration',
            'Custom branding',
            'SSO / SAML',
            'Priority support',
          ]}
        />
        <PricingPlan
          name="Enterprise"
          icon={<Rocket {...MARK} />}
          price="Custom"
          description="For companies with advanced compliance and security needs."
          contactSalesUrl="/contact-sales"
          features={[
            'Everything in Growth',
            'Dedicated infrastructure',
            'Custom SLA',
            'On-premise deployment',
            'Compliance certifications',
            'Dedicated account manager',
            '24/7 phone support',
          ]}
        />
      </Grid>
    </Band>
  );
};

export default Pricing;