"use client"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useState, type ReactNode } from "react"; import { CARD_FADE, DarkButton, EASE_OUT, Eyebrow, PriceDisplay, PricingStyles, SPRING, SecondaryButton, TeamIcon, VIEWPORT, type PricingPeriod, } from "../pricing-shared/pricing-shared"; export interface Pricing2Props { /** Eyebrow above the heading. @default "Pricing" */ eyebrow?: string; /** Heading content. */ heading?: ReactNode; /** Optional sub-heading under the title. */ subhead?: string; /** Billing period (controlled). Falls back to internal state if omitted. */ period?: PricingPeriod; /** Fires whenever the user toggles the billing period. */ onPeriodChange?: (p: PricingPeriod) => void; className?: string; } /** * Bento dual-tier — small Free card on the left, wide inverted Plus card on the * right with two sub-prices, a `layoutId`-driven Annual/Monthly toggle pill, * and an Enterprise CTA row underneath. */ export function Pricing2({ eyebrow = "Pricing", heading, subhead, period: periodProp, onPeriodChange, className, }: Pricing2Props) { const reduce = useReducedMotion() ?? false; const [localPeriod, setLocalPeriod] = useState( periodProp ?? "yearly", ); const period = periodProp ?? localPeriod; const setPeriod = useCallback( (p: PricingPeriod) => { if (!periodProp) setLocalPeriod(p); onPeriodChange?.(p); }, [periodProp, onPeriodChange], ); const teamPrice = period === "yearly" ? 19 : 24; const businessPrice = period === "yearly" ? 39 : 48; const teamStrike = period === "yearly" ? 24 : undefined; const businessStrike = period === "yearly" ? 48 : undefined; return (

{eyebrow}

{heading ?? ( <> Choose the plan
that fits. )}

{subhead &&

{subhead}

}

Save 20% with annual billing

Free

A complete experience for individuals and small projects. Forever free.

Personal

Up to 3 users, 3 projects, and 5 GB of storage. All core features included.

Create workspace

Paid plans Most popular

{(["yearly", "monthly"] as const).map((p) => { const active = period === p; return ( ); })}

For teams ready to standardize on a single workspace. Full feature set, no usage caps.

Team

/ user / month

Unlimited projects, shared workspaces, SSO, and priority support for growing teams.

Business

/ user / month

Adds SAML, SCIM provisioning, audit logs, 99.9% SLA, and a dedicated success manager.

Choose a plan Start 14-day trial

Enterprise & large teams

Volume pricing, custom terms, security review, and a named architect for 100+ seats.

Contact sales

); } Pricing2.displayName = "Pricing2";

{heading ?? ( <> Choose the plan that fits. )}

Free

Paid plans Most popular

Enterprise & large teams

{heading ?? ( <> Choose the plan
that fits. )}

Pricing · Bento

Customize

Usage