PlanSection

apps/www/src/components/PlanSection.astro · 27 lines · group Pricing

Used by

No site uses it, neither now nor in the content repos’ history.

Samples 1

synthetic sample — no site uses this component

Hosting plans

Three sizes of the same virtual machine

Small

$19Per month

For a landing page

2 GB RAM
1 CPU
40 GB SSD

Order

Medium

Large

$79Per month

For everything else

8 GB RAM
4 CPU
160 GB SSD

Order

MDX of this sample

<PlanSection title="Hosting plans" description="Three sizes of the same virtual machine">
  <PlanItem name="Small" price="19" description="For a landing page" ramCapacity="2 GB" coresAmount="1" ssdCapacity="40 GB" callToAction="Order" />
  <PlanItem name="Medium" price="39" recommended description="For a shop" ramCapacity="4 GB" coresAmount="2" ssdCapacity="80 GB" callToAction="Order" />
  <PlanItem name="Large" price="79" description="For everything else" ramCapacity="8 GB" coresAmount="4" ssdCapacity="160 GB" callToAction="Order" />
</PlanSection>

Props

Name	Type	Required	Default	Description
title	string	yes
description	string

Source apps/www/src/components/PlanSection.astro @ gitt.one

---
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<section
  id="pricing"
  class="mx-auto max-w-7xl bg-white px-4 py-24 sm:px-6 lg:px-8"
>
  <h2
    class="text-3xl font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl"
  >
    {title}
  </h2>
  {description && <p class="mt-6 max-w-2xl text-xl text-gray-500">{description}</p>}

  <div
    class="mt-24 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:space-y-0"
  >
    <slot />
  </div>
</section>

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.