CtaPanel

Props

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

---
/**
 * CtaPanel — a call to action inside a rounded brand-coloured panel, with a
 *   picture filling its left edge. Louder than <CtaBanner>: the whole block is
 *   the brand colour.
 *
 * Use for: a recruitment or partnership prompt, "join us", "become a
 *   distributor" — a block that should stand out from the page.
 * Not for: a quiet prompt (<CtaCentered>); the closing banner (<CtaBanner>).
 * Children: none.
 * Picture: `image` (file name in images/) is cropped to a square on desktop
 *   and to 2:1 on phones — a photo of people or a place, not a logo. Without
 *   it the panel is text only.
 * Buttons: both render white on the brand colour; a button appears only when
 *   its text is given.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
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 */
  title: string;
  /** a lead line under the title */
  highlight?: string;
  /** a paragraph under the lead */
  description?: string;
  /** file name in images/, cropped to fill the left part of the panel */
  image?: string;
  /** background of the section around the panel */
  theme?: Theme;
  /** text of the first button; omit to hide it */
  primaryText?: string;
  /** link of the first button */
  primaryHref?: string;
  /** text of the second button */
  secondaryText?: string;
  /** link of the second button */
  secondaryHref?: string;
}
const { id, title, highlight, description, image, theme = 'light', primaryText, primaryHref = '#', secondaryText, secondaryHref = '#' } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<Section id={id} theme={theme}>
  <div class="overflow-hidden rounded-3xl bg-primary-700 text-white lg:grid lg:grid-cols-12 lg:items-center">
    {img && <Image src={img} alt="" widths={[400, 840]} class="aspect-[2/1] w-full object-cover lg:col-span-4 lg:aspect-square lg:h-full" />}
    <div class:list={['space-y-6 px-6 py-12 sm:px-10 lg:py-16', img ? 'lg:col-span-8' : 'lg:col-span-12']}>
      <h2 class="text-3xl font-extrabold">{title}</h2>
      {highlight && <p class="text-lg">{highlight}</p>}
      {description && <p class="text-lg">{description}</p>}
      <div class="flex flex-wrap gap-4">
        {primaryText && <Button href={primaryHref} kind="secondary" onDark>{primaryText}</Button>}
        {secondaryText && <Button href={secondaryHref} kind="secondary" onDark>{secondaryText}</Button>}
      </div>
    </div>
  </div>
</Section>