# Pricing & FAQ ## Pricing & FAQ **Files:** `src/content/sections//pricing-section.md`, `src/content/pricing//-index.md`, `src/content/sections//faq-section.md`, `src/content/faq//-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//`, and each page that shows them can change them with a named block. ### Where Pricing Appears | Page | File with the page's block | Layout in the demo | | ----------------------------- | ------------------------------------------------ | ------------------ | | `/pricing/` | `src/content/pricing//-index.md` | `subscription` | | Solo designer home (`/`) | `src/content/homepage//-index.md` | `cards` | | Photographer home (`/home-photo/`) | `src/content/homepage//home-photo.md` | `rates` | `/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 ```yaml 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. | Layout | What it shows | Fields it reads | | -------------- | -------------------------------------------------------------------------------- | ------------------------------------------------ | | `subscription` | A row of steps, then a dark feature card, one plan card, and a band for one-off projects | `steps`, `feature`, `plans` (the one with `highlight: true`, else the first), `single` | | `rates` | Ruled package rows with a starting price, then a strip of the months you are open or booked | `rates`, `months`, `feature.pill` | | `cards` | Every plan as a card, side by side, with a monthly and yearly toggle | `plans`, `billing` | Every figure counts up as it scrolls into view. Write the final text. ### Plans ```yaml 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): ```yaml 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](https://lucide.dev/icons/) 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`: ```yaml 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/.json`. Keep `months` up to date, or remove the list. ### The FAQ Section ```yaml # src/content/sections/english/faq-section.md 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 ``` | Layout | What it looks like | | ------------ | ------------------------------------------------------------------------ | | `split` | Questions on the left, a sticky booking card on the right | | `single` | One centered column, heading above the questions | | `two-column` | Heading and line on the left, questions on the right | 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](/margo/customization/contact-booking/). ### Where The FAQ Appears | Page | File with the page's block | Layout in the demo | | --------------------- | ----------------------------------------------- | ------------------ | | `/faq/` | `src/content/faq//-index.md` | `two-column`, grouped | | `/pricing/` | `src/content/pricing//-index.md` | `single` | | `/contact/` | `src/content/contact//-index.md` | `single` | | `/services/` | `src/content/services//-index.md` | `single` | | Solo designer home | `src/content/homepage//-index.md` | `two-column` | 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: ```yaml 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 ```text 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. ```