CtaBanner

Props

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

---
/**
 * CtaBanner — the wide call to action: the title (with an optional
 *   brand-gradient line) on the left, the buttons on the right, on a
 *   full-width band.
 *
 * Use for: the closing prompt of a landing page, or the prompt between two
 *   content blocks — "Ready to start? Contact us".
 * Not for: a short one-line invitation (<CtaCentered>); a prompt with a
 *   picture (<CtaSplit>, <CtaPanel>); a price (<CtaPrice>).
 * Children: none.
 * Theme: "light" (default), "muted", "dark", "brand" or "brand-dark" — dark
 *   themes turn the text white.
 * 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, one line */
  title: string;
  /** a second line under the title, painted with the brand gradient */
  highlight?: string;
  /** a sentence under the 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, e.g. "/contacts/" */
  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="lg:flex lg:items-center lg:justify-between">
    <div>
      <h2 class="text-4xl font-extrabold tracking-tight">
        <span class="block">{title}</span>
        {highlight && <span class="block bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent">{highlight}</span>}
      </h2>
      {description && <p class="mt-4 max-w-2xl text-xl text-gray-500 [.bg-stone-800_&]:text-primary-100">{description}</p>}
    </div>
    <div class="mt-8 flex flex-wrap gap-4 lg:mt-0 lg:ml-8">
      {primaryText && <Button href={primaryHref}>{primaryText}</Button>}
      {secondaryText && <Button href={secondaryHref} kind="secondary" onDark={dark}>{secondaryText}</Button>}
    </div>
  </div>
</Section>