"use client"; import { motion, useReducedMotion } from "motion/react"; import type { ReactNode } from "react"; import { CARD_FADE, CheckIcon, DEFAULT_TIERS, DarkButton, EASE_OUT, Eyebrow, PriceDisplay, PrimaryButton, PricingStyles, SecondaryButton, VIEWPORT, type PricingTier, } from "../pricing-shared/pricing-shared"; export interface Pricing1Props { /** Uppercase eyebrow above the heading. @default "Pricing" */ eyebrow?: string; /** Heading content. Wrap a segment in `` for the muted-italic accent. */ heading?: ReactNode; /** Sub-heading paragraph. */ subhead?: string; /** 3-tier list. Defaults to a sensible 12/24/48 SaaS ladder. */ tiers?: PricingTier[]; /** Tier index rendered as the inverted (featured) card. @default 1 */ featuredIndex?: number; className?: string; } /** * Classic 3-tier pricing — centered hero, "start free" banner, middle tier * inverted with the conic ambient ring. */ export function Pricing1({ eyebrow = "Pricing", heading, subhead = "Start free. Upgrade only when your team outgrows it. Cancel any time — no setup fees, no annual contracts on Starter and Team.", tiers = DEFAULT_TIERS, featuredIndex = 1, className, }: Pricing1Props) { const reduce = useReducedMotion() ?? false; return (
{eyebrow}
{heading ?? ( <> Simple, transparent pricing. )}

{subhead}

Start for free.

14-day trial · No credit card required

Get started
{tiers.slice(0, 3).map((tier, i) => { const isFeatured = tier.featured ?? i === featuredIndex; return (

{tier.name}
{(tier.badge || isFeatured) && ( {tier.badge ?? "Most popular"} )}

{tier.description}

{tier.per && {tier.per}}

{isFeatured ? "Billed annually · save 20%" : i === 0 ? "Billed monthly · cancel anytime" : "Billed annually · invoiced"}

{i === 0 ? "Includes" : isFeatured ? "Everything in Starter, plus" : "Everything in Team, plus"}

{tier.features.map((f) => (
{f}
))}

{isFeatured ? ( {tier.cta?.label ?? `Choose ${tier.name}`} ) : ( {tier.cta?.label ?? `Choose ${tier.name}`} )}
); })}

); } Pricing1.displayName = "Pricing1";

{heading ?? ( <> Simple, transparent pricing. )}

Start for free.

{tier.name}

Pricing · Classic

Customize

Usage