CtaPrice

Props

Source apps/www/src/sections/CtaPrice.astro @ gitt.one

---
/**
 * CtaPrice — a single rate as a call to action: one white price card with a
 *   big figure, a note, a line of text and one button, on a muted band.
 *
 * Use for: "from €39 a month — start today", a hosting fee, a subscription —
 *   when the price is the argument for the next step.
 * Not for: a real price list (<PricingCards>, <PricingWide>, <PricingSingle>
 *   with <Plan>); a prompt without a price (<CtaBanner>).
 * Children: none.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** what the price is for, one line above the figure */
  title: string;
  /** a sentence under the figure */
  description?: string;
  /** the figure, e.g. "€39" */
  price: string;
  /** the unit beside the figure, e.g. "per month" */
  priceNote?: string;
  /** text of a small underlined link under the description; shown only with href */
  linkText?: string;
  /** target of that link */
  href?: string;
  /** background of the band (default "muted") */
  theme?: Theme;
  /** text of the button; omit to hide it */
  primaryText?: string;
  /** link of the button */
  primaryHref?: string;
}
const { id, title, description, price, priceNote, linkText, href, theme = 'muted', primaryText, primaryHref = '#' } = Astro.props;
---

<Section id={id} theme={theme}>
  <div class="mx-auto max-w-xl rounded-lg bg-white px-6 py-8 text-center text-gray-900 shadow-lg lg:p-12">
    <p class="text-lg font-medium text-gray-900">{title}</p>
    <p class="mt-4 flex items-baseline justify-center gap-3 text-5xl font-extrabold">
      <span>{price}</span>
      {priceNote && <span class="text-xl font-medium text-gray-500">{priceNote}</span>}
    </p>
    {description && <p class="mt-4 text-base text-gray-500">{description}</p>}
    {linkText && href && <p class="mt-4 text-sm"><a href={href} class="font-medium text-gray-500 underline">{linkText}</a></p>}
    {primaryText && <div class="mt-6"><Button href={primaryHref}>{primaryText}</Button></div>}
  </div>
</Section>