Projects › BibleWeb › Navigation UX › Pricing page
Done

Pricing page

Area: Navigation UX

1. Context

BibleWeb needs a clear, honest pricing presentation that explains the three-tier model (Free / Pro / Premium), makes the current plan obvious, and builds confidence for eventual paid subscriptions. The page is marketing material as much as a functional UI.

2. Functional

  • Displays three plan cards: Free ($0/mo), Pro ($5/mo), Premium ($10/mo).
  • The card matching the user's current tier (user.currentTier) is highlighted with a "Current plan" badge.
  • CTA buttons:
    • Current plan: disabled "Current plan" button.
    • Pro and Premium (not current): disabled "Coming soon" button — payment is not yet connected.
    • If the user is on a higher tier, a "Downgrade" link pointing to /settings is shown on the Free card.
  • Below the cards: a full feature comparison table with 11 feature rows across all three tiers.
  • Feature values: ✓, —, a number (e.g., 5), or "Unlimited" (for null). Positive values are highlighted in gold (--color-jesus-words); negative in muted grey.

Feature matrix (from code):

Feature Free Pro Premium
Notes 5 Unlimited Unlimited
Dutch translation ✓ ✓ ✓
Parallel Gospel ✓ ✓ ✓
Interlinear — ✓ ✓
Commentaries — ✓ ✓
Cross-ref graph — ✓ ✓
Offline download — ✓ ✓
Note cross-linking — ✓ ✓
Note export — — ✓
AI chat — — ✓
Personal translation — — ✓

3. UX & Design

  • Page max-width: 56rem, centered, 2rem/4rem padding top/bottom.
  • Plan cards: responsive grid repeat(auto-fit, minmax(14rem, 1fr)). Pro card has a gold border (--color-jesus-words) as the featured option.
  • "Current plan" badge: gold pill, absolute-positioned at top of card.
  • Comparison table: horizontally scrollable on narrow screens, alternating row backgrounds, "You" badge in the column header for the active tier.
  • All text driven by i18n keys (pricing.*); supports both English and Dutch.

4. Technical

Route: apps/web/src/routes/(app)/pricing/+page.svelte

  • Client-side only (no +page.server.ts) — tier data comes from the reactive user store.
  • TierFeatures type imported from $lib/tier.js — same type used by the backend, ensuring parity.
  • Feature rows are defined as FeatureRow[] mapping i18n label keys to TierFeatures keys; adding a new feature row is a one-line change.
  • No Stripe integration yet; all upgrade CTAs are disabled "Coming soon" buttons.

Dependencies:

  • $lib/stores/user.svelte.js — provides user.currentTier
  • $lib/tier.js — TierFeatures type
  • $lib/i18n/index.js — t() translation function

5. Status

UI is fully implemented and correctly reflects the tier feature matrix. Stripe checkout integration is not yet built — all paid plan CTAs show "Coming soon". The page is ready to receive live upgrade links once payment is wired up.

← Back to Navigation UX features