hanzo.ai/components/dataroom/Pricing.tsx

'use client'

/**
 * The data-room plans, as a band of the product page they sit on.
 *
 * Same frame, same reasons, as `components/captable/Pricing.tsx` — read that
 * file for the three moves this one also makes (`FADE` for the ground, the
 * `Title` role for the heading, and the `{ min: 240, max: 4 }` deck that
 * wraps on width rather than at `md` and `lg`).
 *
 * These three files stay three files. They are one shape carrying three
 * different plan tables, and collapsing them means passing the plans in as
 * data — a change to what /captable, /dataroom and /sign each own, which is a
 * different decision from taking the section frame off their hands.
 */

import PricingPlan from "@/components/pricing/PricingPlan";
import { FolderLock, 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="Start free and scale as you grow. Self-host for free forever or let us handle the infrastructure."
      />

      <Grid columns={{ min: 240, max: 4 }} gap={24}>
        <PricingPlan
          name="Free"
          icon={<Github {...MARK} />}
          githubLink
          price="$0"
          billingPeriod="/mo"
          description="Get started with document sharing and analytics."
          features={[
            '1 team member',
            '50 links',
            '50 documents',
            'Unlimited visitors',
            'Page-by-page analytics',
            'Community support',
          ]}
        />
        <PricingPlan
          name="Pro"
          icon={<FolderLock {...MARK} />}
          price="$25"
          billingPeriod="/mo"
          description="For professionals who need branding and more capacity."
          features={[
            'Unlimited links',
            '100 documents',
            'Large file uploads',
            'Custom branding',
            'Video support',
            'Folder organization',
          ]}
        />
        <PricingPlan
          name="Business"
          icon={<Building2 {...MARK} />}
          price="$59"
          billingPeriod="/mo"
          popular
          description="For teams that need custom domains and advanced access controls."
          features={[
            'Everything in Pro',
            '3 team members',
            '1,000 documents',
            'Custom domain',
            'Email verification',
            'Allow/block lists',
            'Screenshot protection',
            'Webhooks',
          ]}
        />
        <PricingPlan
          name="Data Rooms"
          icon={<Rocket {...MARK} />}
          price="$99"
          billingPeriod="/mo"
          description="Full data room capabilities for fundraising and due diligence."
          features={[
            'Everything in Business',
            'Unlimited data rooms',
            'Data room analytics',
            'NDA agreements',
            'Dynamic watermark',
            'Granular permissions',
            'Custom data room domain',
            '24/7 email support',
          ]}
        />
      </Grid>
    </Band>
  );
};

export default Pricing;