# Pricing

## Pricing

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

<div class="border border-dark">
  ![The pricing page](/images/taskly/pricing.jpg)
</div>

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`:

```yaml
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`.

<Aside type="caution" title="Plans are set in three places">
  `pricing-section.md` holds the default plans, but `src/content/homepage/english/home-2.md`
  and `src/content/pricing/english/-index.md` each have a `pricingSection`
  block with their own `plans` list. A list in a block replaces the whole
  list, so when you change prices, update those blocks too, or delete their
  `plans` lists to use the section file everywhere.
</Aside>

### The Comparison Table
`src/content/sections/english/plan-compare-section.md`, on `/pricing/` only:

```yaml
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](/taskly/customization/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
```text
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.
```