Pricing & FAQ

Pricing & FAQ

Files: src/content/sections/<language>/pricing-section.md, src/content/pricing/<language>/-index.md, src/content/sections/<language>/faq-section.md, src/content/faq/<language>/-index.md · Skill level: Beginner

The pricing section shows how people can hire you: monthly plans, fixed packages, or one-off projects. The FAQ section answers the questions clients ask before they write. Both have a default file in src/content/sections/<language>/, and each page that shows them can change them with a named block.

Where Pricing Appears

/pricing/ shows the page header, the pricing section, and a FAQ section with the pricing questions. The pricing and FAQ page files have no schema, so npm run astro-check doesn’t catch a misspelled option there. Open the page after each change.

Pick A Pricing Layout

pricingSection:
  options:
    layout: "subscription" # subscription | rates | cards

Each layout reads its own fields from pricing-section.md. The comments in that file say which layout uses which field. Fields a layout doesn’t use are ignored, so you can switch freely.

Every figure counts up as it scrolls into view. Write the final text.

Plans

plans:
  - name: "Monthly retainer"
    description: "**A set monthly fee for your regular requests.** Suits teams that send work every week."
    price: "€6,400"
    unit: "/ month"
    priceYearly: "€64,000" # `cards` only: shown when a visitor picks Yearly
    unitYearly: "/ year"
    features:
      - "One request in progress at a time"
      - "A weekly review call"
    button:
      enable: true
      label: "Reserve your month"
      url: "/contact/"
    highlight: true # the plan card in `subscription`, the dark card in `cards`

In the cards layout, use 2 or 3 plans. A plan without priceYearly keeps its monthly price when the toggle is on Yearly.

The billing toggle (cards only):

billing:
  enable: true # false hides the toggle
  monthly: "" # empty uses the theme label "Monthly"
  yearly: "" # empty uses the theme label "Yearly"
  note: "**2 months free** with yearly billing" # write the discount your yearly prices use

The toggle shows only when a plan has priceYearly.

Steps, Feature Card, And One-Off Projects

Used by subscription:

• steps: 3 or 4 steps, each with icon (a Lucide name), title, and description.
• feature: the dark card. pill is the availability label, icon a Lucide name drawn large ("" hides it), text the statement, and slots a line such as "2 openings left this month", whose first number is shown large.
• single: the band for one-off projects, with name, description, features, and button.

Packages And Months

Used by rates:

rates:
  - name: "Art direction"
    description: "Campaign stills and product shoots, planned and run on set."
    includes:
      - "Shot list and schedule"
      - "Direction on set"
    from: "€1,400" # shown after a "From" label
    unit: "/ day"

months:
  - { month: "Jan", status: "booked" } # open | booked
  - { month: "Feb", status: "open" }

List the 12 months in order. Each month shows a dot and the word “Open” or “Booked”, and the number of open months is counted for you. The words come from pricing in src/i18n/<language>.json. Keep months up to date, or remove the list.

The FAQ Section

title: "Asked before\nevery *project*." # two lines; *word* is set in the serif accent
description: "**Plain answers on scope, price, and files.** If your question is not here, send it over."
items:
  - question: "What happens after I get in touch?"
    answer: "I reply within a day..." # Markdown
options:
  layout: "split" # split | single | two-column
  structuredData: false

The first question starts open, and opening one closes the others.

The booking card (split only) is the card block: an optional image, the availability label, a title, a description, a stat (a figure that counts up, such as a reply time), and a button. A button with an empty url links to your booking page, [settings.contactInfo] booking in config.toml. See Contact & Booking.

Where The FAQ Appears

Each service page also shows its own questions, from the faq list in the service file.

A page’s items list replaces the default questions on that page. Remember that a list in a block replaces the whole list.

Grouped Questions

/faq/ sorts its questions under small headings with groups. When groups is set, it replaces items, in every layout:

faqSection:
  groups:
    - title: "Working together"
      items:
        - question: "What do you need from me to start?"
          answer: "A short brief, any brand files you already have..."
    - title: "Files and rights"
      items:
        - question: "Who owns the final files?"
          answer: "You do..."
  options:
    layout: "two-column"
    structuredData: true

FAQ Data For Search Engines

options.structuredData: true adds FAQ data (FAQPage) that search engines read, for the questions on that page. The demo turns it on for /faq/ only, because the same questions appear on other pages. Keep it on one page.

Do It With AI

Update my prices. In src/content/sections/english/pricing-section.md, set the plans to: [PLANS
WITH PRICES AND FEATURES], the packages (rates) to: [PACKAGES], and the open months to: [MONTHS].
Keep every key and comment. Make the same change in the french and arabic files, writing each
price the way that language writes it. Then replace the questions in
src/content/faq/english/-index.md with: [QUESTIONS AND ANSWERS], grouped under [GROUPS], in every
language.