Pricing and FAQ

What it costs, and the questions people ask before they decide.

Two tiersThree tiersComparison tableFAQ accordion

Two tiers

sections/pricing/two-tiers.html

Two plans side by side. The simplest pricing that still gives people a choice.

<section class="mx-auto max-w-4xl px-6 py-16 sm:py-24">
  <div class="text-center">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Simple pricing</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">Starting points, not a menu. Every garden gets a written quote.</p>
  </div>
  <div class="mt-12 grid gap-6 md:grid-cols-2">
    <div class="flex flex-col rounded-2xl border border-black/10 p-8 dark:border-white/10">
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Regular care</h3>
      <p class="mt-2! mb-0! text-sm text-black/70 dark:text-white/70">Mowing, edging and tidying on a schedule.</p>
      <p class="mt-6! mb-0! flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$45</span><span class="text-sm text-black/60 dark:text-white/60">per visit</span></p>
      <ul class="mt-6! mb-8! flex list-none! flex-col gap-3 pl-0! text-sm">
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Weekly or every other week</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Clippings taken away</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Pause any time</li>
      </ul>
      <a href="#" class="mt-auto inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">Book a visit</a>
    </div>
    <div class="flex flex-col rounded-2xl border-2 border-brand-500 p-8">
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Garden design</h3>
      <p class="mt-2! mb-0! text-sm text-black/70 dark:text-white/70">A one-off design and planting project.</p>
      <p class="mt-6! mb-0! flex items-baseline gap-1"><span class="text-sm text-black/60 dark:text-white/60">from</span><span class="text-4xl font-bold tracking-tight">$800</span></p>
      <ul class="mt-6! mb-8! flex list-none! flex-col gap-3 pl-0! text-sm">
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Site visit and a drawn plan</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Plants chosen for your soil</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Planting and a first-month check</li>
      </ul>
      <a href="#" class="mt-auto inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">Ask for a quote</a>
    </div>
  </div>
</section>

Three tiers

sections/pricing/three-tiers.html

Three plans, with the middle one highlighted as the one most people pick. Stacked on a phone, in a row from 1024px.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Pick a plan</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">Every plan includes online booking and reminders. Change or cancel whenever you want.</p>
  </div>
  <div class="mt-12 grid items-start gap-6 lg:grid-cols-3">
    <div class="flex flex-col rounded-2xl border border-black/10 p-8 dark:border-white/10">
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Solo</h3>
      <p class="mt-2! mb-0! text-sm text-black/70 dark:text-white/70">For one person taking bookings.</p>
      <p class="mt-6! mb-0! flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$9</span><span class="text-sm text-black/60 dark:text-white/60">/month</span></p>
      <a href="#" class="mt-6 inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">Start with Solo</a>
      <ul class="mt-8! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>1 calendar</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Email reminders</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Your own booking page</li>
      </ul>
    </div>
    <div class="relative flex flex-col rounded-2xl border-2 border-brand-500 p-8 shadow-lg lg:-mt-4">
      <span class="absolute -top-3 left-8 rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white">Most popular</span>
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Studio</h3>
      <p class="mt-2! mb-0! text-sm text-black/70 dark:text-white/70">For a small team sharing one diary.</p>
      <p class="mt-6! mb-0! flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$29</span><span class="text-sm text-black/60 dark:text-white/60">/month</span></p>
      <a href="#" class="mt-6 inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">Start with Studio</a>
      <ul class="mt-8! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Up to 5 calendars</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Text and email reminders</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Deposits and payments</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Everything in Solo</li>
      </ul>
    </div>
    <div class="flex flex-col rounded-2xl border border-black/10 p-8 dark:border-white/10">
      <h3 class="mt-0! mb-0! text-lg! font-semibold! leading-snug!">Business</h3>
      <p class="mt-2! mb-0! text-sm text-black/70 dark:text-white/70">For more than one location.</p>
      <p class="mt-6! mb-0! flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight">$79</span><span class="text-sm text-black/60 dark:text-white/60">/month</span></p>
      <a href="#" class="mt-6 inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">Talk to us</a>
      <ul class="mt-8! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Unlimited calendars</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Several locations</li>
        <li class="mt-0! flex gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Everything in Studio</li>
      </ul>
    </div>
  </div>
</section>

Comparison table

sections/pricing/comparison-table.html

Features down the side, plans across the top. Scrolls sideways on a phone instead of squashing the columns.

  • The ! classes on the table, rows and cells are what stop VitePress's own table styles (striped rows, borders on every cell, display: block) from taking over.
<section class="mx-auto max-w-5xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! border-t-0! pt-0! text-center text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Compare plans</h2>
  <div class="mt-12 overflow-x-auto rounded-2xl border border-black/10 dark:border-white/10">
    <table class="my-0! table! w-full min-w-[36rem] border-collapse text-left text-sm">
      <thead>
        <tr class="border-t-0! border-b border-black/10 bg-transparent! dark:border-white/10">
          <th scope="col" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! text-left! font-semibold!">Feature</th>
          <th scope="col" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! text-center! font-semibold">Solo</th>
          <th scope="col" class="border-0! bg-brand-50! px-5! py-4! text-center! text-sm! font-semibold! text-brand-600! dark:bg-brand-500/15! dark:text-white!">Studio</th>
          <th scope="col" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! text-center! font-semibold">Business</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-t-0! border-b border-black/10 bg-transparent! dark:border-white/10">
          <th scope="row" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! font-normal!">Calendars</th>
          <td class="border-0! px-5! py-4! text-center">1</td>
          <td class="border-0! bg-brand-50/60 px-5! py-4! text-center dark:bg-brand-500/10">5</td>
          <td class="border-0! px-5! py-4! text-center">Unlimited</td>
        </tr>
        <tr class="border-t-0! border-b border-black/10 bg-transparent! dark:border-white/10">
          <th scope="row" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! font-normal!">Email reminders</th>
          <td class="border-0! px-5! py-4! text-center"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
          <td class="border-0! bg-brand-50/60 px-5! py-4! text-center dark:bg-brand-500/10"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
          <td class="border-0! px-5! py-4! text-center"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
        </tr>
        <tr class="border-t-0! border-b border-black/10 bg-transparent! dark:border-white/10">
          <th scope="row" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! font-normal!">Text reminders</th>
          <td class="border-0! px-5! py-4! text-center text-black/40 dark:text-white/40"><svg class="mx-auto size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" role="img" aria-label="Not included"><path d="M8 12h8"/></svg></td>
          <td class="border-0! bg-brand-50/60 px-5! py-4! text-center dark:bg-brand-500/10"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
          <td class="border-0! px-5! py-4! text-center"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
        </tr>
        <tr class="border-t-0! border-b border-black/10 bg-transparent! dark:border-white/10">
          <th scope="row" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! font-normal!">Deposits and payments</th>
          <td class="border-0! px-5! py-4! text-center text-black/40 dark:text-white/40"><svg class="mx-auto size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" role="img" aria-label="Not included"><path d="M8 12h8"/></svg></td>
          <td class="border-0! bg-brand-50/60 px-5! py-4! text-center dark:bg-brand-500/10"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
          <td class="border-0! px-5! py-4! text-center"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
        </tr>
        <tr class="border-t-0! border-b-0! bg-transparent!">
          <th scope="row" class="border-0! bg-transparent! px-5! py-4! text-sm! text-inherit! font-normal!">Several locations</th>
          <td class="border-0! px-5! py-4! text-center text-black/40 dark:text-white/40"><svg class="mx-auto size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" role="img" aria-label="Not included"><path d="M8 12h8"/></svg></td>
          <td class="border-0! bg-brand-50/60 px-5! py-4! text-center text-black/40 dark:bg-brand-500/10 dark:text-white/40"><svg class="mx-auto size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" role="img" aria-label="Not included"><path d="M8 12h8"/></svg></td>
          <td class="border-0! px-5! py-4! text-center"><svg class="mx-auto size-5 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Included"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

FAQ accordion

sections/pricing/faq.html

Questions that open one at a time, built on <details>, so it works with no JavaScript and every answer is in the page for search engines.

  • The shared name="faq" is what closes one answer when another opens. Remove it to let several stay open at once.
<section class="mx-auto max-w-3xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Common questions</h2>
  <div class="mt-10 divide-y divide-black/10 border-y border-black/10 dark:divide-white/10 dark:border-white/10">
    <details name="faq" class="group" open>
      <summary class="my-0! flex cursor-pointer list-none items-center justify-between gap-6 py-5 font-semibold [&::-webkit-details-marker]:hidden">How quickly do you reply?<svg class="size-5 shrink-0 text-brand-500 transition group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></summary>
      <p class="mt-0! mb-5! leading-relaxed! text-black/70 dark:text-white/70">Usually the same day, and always within one working day. A person reads every message.</p>
    </details>
    <details name="faq" class="group">
      <summary class="my-0! flex cursor-pointer list-none items-center justify-between gap-6 py-5 font-semibold [&::-webkit-details-marker]:hidden">Is the quote the final price?<svg class="size-5 shrink-0 text-brand-500 transition group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></summary>
      <p class="mt-0! mb-5! leading-relaxed! text-black/70 dark:text-white/70">Yes. If we find something we didn't expect, we ask before doing any extra work, and you can say no.</p>
    </details>
    <details name="faq" class="group">
      <summary class="my-0! flex cursor-pointer list-none items-center justify-between gap-6 py-5 font-semibold [&::-webkit-details-marker]:hidden">Do I need to be home?<svg class="size-5 shrink-0 text-brand-500 transition group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></summary>
      <p class="mt-0! mb-5! leading-relaxed! text-black/70 dark:text-white/70">No. Leave the gate unlocked and we'll send a photo when we're done.</p>
    </details>
    <details name="faq" class="group">
      <summary class="my-0! flex cursor-pointer list-none items-center justify-between gap-6 py-5 font-semibold [&::-webkit-details-marker]:hidden">Can I pause over the winter?<svg class="size-5 shrink-0 text-brand-500 transition group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></summary>
      <p class="mt-0! mb-5! leading-relaxed! text-black/70 dark:text-white/70">Any time, for as long as you like. There's no contract and nothing to cancel.</p>
    </details>
  </div>
</section>