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 and one button.
 *
 * Use for: a modest prompt between sections, or the last line of a page —
 *   "Questions? Write to us".
 * Not for: the big closing banner (<CtaBanner>); anything with a picture
 *   (<CtaSplit>, <CtaPanel>).
 * Children: none.
 * Buttons: a button appears only when its text is given.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** the prompt; omit for the quiet one-line form */
  title?: string;
  /** a second line under the title, in a lighter weight */
  highlight?: string;
  /** a sentence under the title (or the whole text when there is no title) */
  description?: string;
  /** background of the band */
  theme?: Theme;
  /** text of the solid brand button; omit to hide the button */
  primaryText?: string;
  /** link of the primary button */
  primaryHref?: string;
  /** text of the second, outlined button */
  secondaryText?: string;
  /** link of the secondary button */
  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>