Pricing

Files: src/content/sections/english/pricing-section.md, plan-compare-section.md, src/content/pricing/english/-index.md · Skill level: Beginner

The pricing page

The plan cards appear on /, /home-2/, and /pricing/. The pricing page adds a comparison table, logos, proof, and an FAQ. The shipped plans and prices are samples.

Plans

src/content/sections/english/pricing-section.md:

layout: "default"          # default | compact
highlight: false           # true paints the featured plan lilac with a white button
toggle:                    # the monthly / yearly switch
  monthly: "Monthly"
  yearly: "Yearly"
  badge: "Save 20%"        # pill beside "Yearly"; "" hides it
note: "Most popular plan"  # annotation pointing at the featured plan (extra-large screens); "" hides it
plans:
  - name: "Starter"
    color: "sun"           # pill color of the name
    description: "For small teams finding their rhythm"
    price: { monthly: "$12", yearly: "$9.60" }
    period: { monthly: "per user / month", yearly: "per user / month, billed yearly" }
    featured: false        # true marks the plan for the annotation and the highlight
    badge: ""              # small pill next to the name, for example "Popular"
    features:
      - "Up to 10 members"
      - "Unlimited tasks and projects"
    button: { enable: true, label: "Choose Starter", url: "/signup/", variant: "dark" }

Prices are text, so write them exactly as they should appear: "$12", "€10", "Free", "Custom".
Both price and period need a monthly and a yearly value. For a plan without yearly billing, repeat the monthly values.
Two plans fill two columns; three or more fill three columns on large screens. Four or more plans read better in the compact layout.
With highlight: true, the featured plan’s button is always white, whatever its variant.

The Comparison Table

src/content/sections/english/plan-compare-section.md, on /pricing/ only:

featureLabel: "What’s included"   # header of the first column
plans:                            # columns, left to right
  - name: "Starter"
  - name: "Business"
    featured: true                # this column sits on a cream band
  - name: "Enterprise"
rows:
  - label: "Members"
    info: "People who can join your workspace."   # tooltip on the help icon; "" hides it
    values: ["10", "Unlimited", "Unlimited"]      # one per plan, same order
  - label: "Custom workflows"
    values: [true, true, true]                    # true = check, false = dash

Keep the number of values in each row equal to the number of plans. On phones, the table shows one plan at a time with a plan picker.

The Pricing Page

src/content/pricing/english/-index.md holds the page title, page header, and blocks for the sections it shows: pricingSection (inside the page header), logosSection, planCompareSection, proofSection, faqSection, and ctaSection. Change any of them for this page only with its block. A Markdown copy of the plans is published at /pricing.md for AI tools (see SEO & AI Visibility).

Hide Pricing

From one homepage: add pricingSection: { enable: false } to its content file, or delete its line in the route.
The whole page: delete src/pages/[...lang]/pricing.astro and src/content/pricing/, and remove the Pricing links from the menu files. Search the section files for /pricing/ links.

Do It With AI

Replace the sample pricing with my plans: [NAME, MONTHLY PRICE, YEARLY PRICE, DESCRIPTION,
FEATURES, BUTTON LABEL AND URL for each]. Mark [PLAN] as featured with the badge "[TEXT]". Edit
plans in src/content/sections/english/pricing-section.md, and remove the `plans` lists from the
pricingSection blocks in src/content/homepage/english/home-2.md and
src/content/pricing/english/-index.md so every page uses the section file. Update
plan-compare-section.md with one value per plan in every row: [ROWS]. Then the French files.