Pricing

What it is

The Pricing section reads plans directly from config.ts. The component does not contain hardcoded pricing; it reads billing.plans and renders one card per entry. Anchor pricing (crossed-out "original" price), featured-plan highlighting, and the monthly/yearly toggle are built into the component and toggle automatically based on the config values.

This is the one section you typically should NOT edit the component for. Edit config.ts and the layout updates.

Usage

import { Pricing } from '@/components/landing/Pricing'

export default function Page() {
  return <Pricing />
}

A standalone /pricing route at app/(marketing)/pricing/page.tsx renders the same component along with a FAQ section underneath.

Customization

Edit the plans

All plans live in config.ts under billing.plans:

billing: {
  plans: [
    {
      name: 'Starter',
      description: 'A short value-prop sentence.',
      price: { monthly: 199, yearly: 199 },
      priceAnchor: { monthly: 249, yearly: 249 },
      priceId: {
        monthly: 'price_xxx',
        yearly: 'price_xxx',
      },
      features: ['Feature 1', 'Feature 2'],
    },
  ],
}

For one-time billing (the default), set monthly === yearly and the yearly-toggle math collapses correctly. For subscription billing, use different values; the yearly card auto-renders a "Save N%" label based on the discount.

Anchor pricing

priceAnchor is optional. When set, the card renders a crossed-out anchor price next to the real price. Remove the field to hide the anchor. Use anchor pricing only when the anchor is genuine (a previous public price, a competitor price, or a published launch promo); manufactured anchors erode trust if a buyer cross-checks.

Featured plan

Add isFeatured: true to highlight a plan with a brand-color border and a "Most Popular" badge. Use this on the plan you actually want most buyers to pick (usually the middle tier or the higher of two tiers), not on the most expensive one by default.

Monthly/yearly toggle

The toggle is rendered by default. To hide it (one-time pricing where the toggle is meaningless), set monthly === yearly on every plan; the toggle still shows but both states show the same price. To remove the toggle entirely, comment out the toggle JSX in components/landing/Pricing.tsx.

Frame-fit check

Pricing copy is brand-frame load-bearing. "One price. Lifetime access." names a commitment. "Starter / Pro / Enterprise" names tiers but says nothing. The description line under each plan name is where the architectural commitment goes: not "perfect for side projects" but "the security foundation with everything to launch a SaaS."