CtaPrice

Props

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

---
/**
 * CtaPrice — a single rate as a call to action: the price card with one
 * button, on a muted band. When the page is really about the price list, use
 * <PricingSingle> with a <Plan> instead — this one asks for the next step.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  title: string;
  description?: string;
  price: string;
  priceNote?: string;
  linkText?: string;
  href?: string;
  theme?: Theme;
  primaryText?: string;
  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>