Navigation
Part 6

Pricing Section

Pricing table sections for each theme.

The Pricing section displays product plans and tiers. Each theme has its own visual treatment.

Theme Variants

ThemeComponentStyle
LiquidPricingLiquid.astroFluid card layout with gradient accents
GlassPricingGlass.astroFrosted pricing cards
NeoPricingNeo.astroHigh-contrast pricing grid
LuxuryPricingLuxury.astroGold accent pricing with premium feel
MinimalPricingMinimal.astroClean, simple pricing list
AuroraPricingAurora.astroGradient background pricing cards

All variants are located at src/components/sections/pricing/.

Content Source

Pricing data is loaded from src/locales/{lang}/pricing.json via useTranslations(). The JSON contains plan names, descriptions, prices, features, and CTA text.

pricing.json (excerpt)
{
  "title": "Simple Pricing",
  "subtitle": "Choose the plan that works for you",
  "plans": {
    "starter": {
      "name": "Starter",
      "price": "19",
      "features": ["5 Projects", "Basic Analytics"]
    }
  }
}
ℹ️
No Props

Pricing components take no external props. To change plans, prices, or features, edit src/locales/{lang}/pricing.json.

Customizing

To customize:

  1. Edit src/components/sections/pricing/Pricing{Theme}.astro.
  2. Adjust styles in src/styles/components/pricing/.
  3. Change content in src/locales/{lang}/pricing.json.