Cta

Props

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

---
/**
 * Cta — a call to action.
 *
 * variant="banner" title + highlight line, buttons to the right (pages.gitt.one)
 * variant="price"  one price card with a button (posexpert hourly rate)
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  variant?: 'banner' | 'price';
  title: string;
  highlight?: string;
  description?: string;
  price?: string;
  priceNote?: string;
  primaryText?: string;
  primaryHref?: string;
  secondaryText?: string;
  secondaryHref?: string;
  theme?: Theme;
}

const {
  id, variant = 'banner', title, highlight, description, price, priceNote,
  primaryText, primaryHref = '#', secondaryText, secondaryHref = '#', theme,
} = Astro.props;
---

{
  variant === 'price' ? (
    <Section id={id} theme={theme ?? 'muted'}>
      <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>}
        {primaryText && <div class="mt-6"><Button href={primaryHref}>{primaryText}</Button></div>}
      </div>
    </Section>
  ) : (
    <Section id={id} theme={theme ?? 'light'}>
      <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">{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={theme === 'dark'}>{secondaryText}</Button>}
        </div>
      </div>
    </Section>
  )
}