"use client"; import { motion, useReducedMotion } from "motion/react"; import type { ReactNode } from "react"; import { CARD_FADE, DEFAULT_TIERS, DarkButton, EASE_OUT, Eyebrow, PriceDisplay, PricingStyles, SecondaryButton, VIEWPORT, type PricingTier, } from "../pricing-shared/pricing-shared"; export interface Pricing3Props { /** Eyebrow above the heading. @default "Pricing" */ eyebrow?: string; /** Heading content. */ heading?: ReactNode; /** 3-tier list. */ tiers?: PricingTier[]; /** Tier index rendered as the inverted (featured) card. @default 1 */ featuredIndex?: number; className?: string; } /** * Bold editorial — huge italic-accented headline, 3 minimal cards with massive * price numerals, corner index labels. */ export function Pricing3({ eyebrow = "Pricing", heading, tiers = DEFAULT_TIERS, featuredIndex = 1, className, }: Pricing3Props) { const reduce = useReducedMotion() ?? false; return (

{eyebrow}

{heading ?? ( <> Plans for
every stage. )}

Want a walkthrough first? Book a demo

{tiers.slice(0, 3).map((tier, i) => { const isFeatured = tier.featured ?? i === featuredIndex; return ( {String(i + 1).padStart(2, "0")} / 03 {isFeatured && " · POPULAR"}

{tier.name}

{tier.description}

{tier.per && ( {tier.per} )}

{tier.features[0] ?? ""}

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

); })}

); } Pricing3.displayName = "Pricing3";

{heading ?? ( <> Plans for every stage. )}

{tier.name}

{heading ?? ( <> Plans for
every stage. )}

Pricing · Editorial

Customize

Usage