CtaCenteredpopular

Props

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

---
/**
 * CtaCentered — a short centered prompt with the buttons under it. Without a
 * `title` it is a quiet one-line invitation: muted text, one button.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  title?: string;
  /** a second line under the title, in a lighter weight */
  highlight?: string;
  description?: string;
  theme?: Theme;
  primaryText?: string;
  primaryHref?: string;
  secondaryText?: string;
  secondaryHref?: string;
}
const { id, title, highlight, description, theme = 'light', primaryText, primaryHref = '#', secondaryText, secondaryHref = '#' } = Astro.props;
const dark = theme === 'dark' || theme === 'brand';
---

<Section id={id} theme={theme}>
  <div class="mx-auto max-w-4xl text-center">
    {title && <h2 class="text-2xl font-bold tracking-tight">{title}{highlight && <span class="block font-normal text-gray-500 [.bg-stone-800_&]:text-primary-100">{highlight}</span>}</h2>}
    {description && <p class:list={['text-lg text-gray-500', title && 'mt-4']}>{description}</p>}
    <div class="mt-8 flex flex-wrap justify-center gap-4">
      {primaryText && <Button href={primaryHref}>{primaryText}</Button>}
      {secondaryText && <Button href={secondaryHref} kind="secondary" onDark={dark}>{secondaryText}</Button>}
    </div>
  </div>
</Section>