Pricing

Build a three-tier pricing section. Above the grid: a small "Pricing" eyebrow, a 40px headline, and a billing-period toggle (Monthly / Yearly, with "Save 20%" badge on Yearly). Three cards in a 3-col grid (stacks on mobile). Each card: rounded-2xl, padding 32px, 1px border rgba(255,255,255,0.08). Middle "Pro" card has a 1px brighter border, a tiny "Most popular" pill at the top, and a slight scale (1.02). Each card has: tier name, price (large 48px), per-period suffix, one-line description, primary CTA, and a feature list with check icons grouped under faint sub-labels (Core / Collaboration / Support). End with a quiet line of small print under the grid.

Build a usage-based pricing calculator. A horizontal slider for "Monthly active users" (or requests, GB, seats). As the user drags, the total price updates in a large 56px number above the slider with a smooth tween. Below the slider, a breakdown table: line items (Base, Overage, Add-ons) with subtotals. Include a small "What's included" expandable card to the right of the slider. Style: dark, minimal, monospace for numbers, sans for everything else.

Build an Enterprise contact row that sits below a standard pricing grid. Full-width card, rounded-2xl, 1px subtle border, padding 40px. Left side: "Enterprise" label, headline "Built for scale", one-line subhead. Right side: 3 columns of feature bullets (SSO/SAML, Dedicated support, Custom contracts, Audit logs, Region pinning, On-prem). Bottom-right: a "Talk to sales →" CTA as a ghost link. No price displayed.

Build a monthly/annual billing toggle. A two-segment rounded-full pill, ~280px wide. The active segment renders a solid background pill that animates with framer-motion layout to the selected segment (220ms ease). The 'Annual' segment has a small accent 'Save 20%' badge. When toggled, all prices on the page count up/down with a 240ms tween (use animated number component) and update suffix labels (/mo vs /yr). Persist preference in localStorage.

Build a credit-pack pricing grid. 4 cards in a row. Each card: rounded-2xl, padding 28px, 1px border, surface fill. Top: credit count as a 36px number ('5,000 credits'). Then a 28px dollar price. Below: a small uppercase 'Effective: $0.004 / credit' footer in monospace. The third card is flagged 'Best value' with a soft accent border and a 'Most popular' ribbon. Single primary CTA per card. Below the grid: a one-line note explaining credits never expire.

Build a single-price pricing card. Centered card, max-width 480px, rounded-2xl, padding 40px. Top: a small uppercase 'Lifetime' eyebrow. Then a 64px price in tabular monospace with a one-line 'paid once, yours forever' subhead. A divider, then a checklist of 7 features (lucide check icon + label, 14px). A full-width primary CTA at the bottom labeled 'Get lifetime access'. Below the button: muted 13px 'Includes 30-day refund. No questions asked'. Background subtly glows via a faint backdrop gradient behind the card.

Build a contact-pricing form. Two-column layout: left column has a 36px headline and a one-paragraph explanation of how pricing works, plus a row of customer logos. Right column: a form card with 5 fields (name, work email, company, team size as a select, use case as a textarea) and a primary submit. Below the submit: 'We respond within 2 business hours.' On submit, post to /api/contact, then swap the form to a 'Thanks - we'll be in touch' success state.

Build a comparison pricing table. First column lists features grouped under section labels (Core / Collaboration / Admin / Security) using small uppercase row headers. Subsequent columns are 4 plans. Plan column headers sticky during scroll, each showing tier name + price + CTA. Cells use a small check icon for boolean true, an em-dash for false, and a value (e.g. 'Unlimited' or '10 GB') for quantitative ones. Each feature name has an info tooltip explaining what it includes. Recommended plan column has a soft acce

Build a configurable pricing card. Two-column inside a single card: left column has the plan name and a list of toggleable add-ons (SSO, Audit logs, Dedicated region) as switches. Right column: a seat count input with - / + steppers (min 1, max 500), a live total in 56px tabular monospace, and an itemized breakdown beneath ('5 seats × $20 = $100', '+ SSO = $50') ending in a bordered total row. CTA at the bottom right.

Compose a pricing FAQ section that sits below the pricing grid. Section heading '40px' + one-line subhead. Below: an accordion of 8 questions targeting purchase doubts - refunds, plan changes, prorating, team billing, taxes, regional pricing, free-trial details, contract terms. Use the standard accordion FAQ component, indented within a max-width 760px column. Below the accordion, a quiet ghost-link CTA: 'Still unsure? Talk to sales →'.