'use client'; import type { HTMLAttributes } from 'react'; import { useState } from 'react'; import Link from 'next/link'; import { AnimatePresence, motion } from 'framer-motion'; import { usePlausible } from 'next-plausible'; import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app'; import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; export type PricingTableProps = HTMLAttributes; const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar'; export const PricingTable = ({ className, ...props }: PricingTableProps) => { const event = usePlausible(); const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>('MONTHLY'); return (
setPeriod('MONTHLY')} > Monthly {period === 'MONTHLY' && ( )} setPeriod('YEARLY')} > Yearly
Save $60 or $120
{period === 'YEARLY' && ( )}

Free

$0

For small teams and individuals with basic needs.

5 standard documents per month

Up to 10 recipients per document

No credit card required

Individual

{period === 'MONTHLY' && $30} {period === 'YEARLY' && $300}

Everything you need for a great signing experience.

Unlimited Documents per Month

API Accesss

Email and Discord Support

Premium Profile Name

Teams

{period === 'MONTHLY' && $50} {period === 'YEARLY' && $480}

For companies looking to scale across multiple teams.

Unlimited Documents per Month

API Accesss

Email and Discord Support

Team Inbox

5 Users Included

Add More Users for {period === 'MONTHLY' ? '$10/ mo.' : '$96/ yr.'}

); };