CtaBrandPanel

Props

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

---
/**
 * CtaBrandPanel — a call to action as a brand-coloured panel with a picture
 *   card overlapping its left edge, dotted decoration and up to two white
 *   buttons.
 *
 * Use for: the same job as <CtaPanel> — "join the team", "talk to us" — in the
 *   older, more decorated shape. An author block kept from one of the fleet's
 *   sites: fixed layout, no theme prop.
 * Not for: pages that already use <CtaPanel>; mixing the two shapes on one
 *   site looks like two sites.
 * Children: none. All texts are props; `subtitle` is required and is the lead
 *   line.
 * Picture: `imageName` (file name in images/) is cropped to a square on
 *   desktop and to 2:1 on phones.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  /** the prompt */
  title: string;
  /** the lead line under the title */
  subtitle: string;
  /** a paragraph under the lead */
  description?: string;
  /** file name in images/, cropped to fill the picture card */
  imageName: string;
  /** text of the first white button */
  buttonTitle: string;
  /** link of the first button */
  buttonLink: string;
  /** text of the second white button; shown only with its link */
  secondButtonTitle?: string;
  /** link of the second button */
  secondButtonLink?: string;
}

const {
  title = 'Join our team',
  subtitle = 'Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.',
  description,
  buttonTitle = 'Explore open positions',
  buttonLink = '/',
  secondButtonTitle,
  secondButtonLink,
  imageName,
} = Astro.props;

const image = await resolveImage(imageName);
---

<div class="relative bg-white py-16">
  <div class="absolute inset-x-0 top-0 hidden h-1/2 bg-gray-50 lg:block" aria-hidden="true"></div>
  <div class="mx-auto max-w-7xl bg-primary-700 lg:bg-transparent lg:px-8">
    <div class="lg:grid lg:grid-cols-12">
      <div class="relative z-10 lg:col-span-4 lg:col-start-1 lg:row-start-1 lg:bg-transparent lg:py-16">
        <div class="absolute inset-x-0 h-1/2 bg-gray-50 lg:hidden" aria-hidden="true"></div>
        <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
          <Image
            src={image}
            alt={title}
            widths={[400, 840]}
            class="aspect-[2/1] rounded-3xl object-cover object-center shadow-2xl lg:aspect-square"
          />
        </div>
      </div>

      <div class="relative bg-primary-700 lg:col-span-10 lg:col-start-3 lg:row-start-1 lg:grid lg:grid-cols-10 lg:items-center lg:rounded-3xl">
        <div class="absolute inset-0 hidden overflow-hidden rounded-3xl lg:block" aria-hidden="true">
          <svg
            class="absolute bottom-full left-full translate-y-1/3 -translate-x-2/3 transform xl:bottom-auto xl:top-0 xl:translate-y-0"
            width={404}
            height={384}
            fill="none"
            viewBox="0 0 404 384"
            aria-hidden="true"
          >
            <defs>
              <pattern
                id="brand-panel-dots-pattern"
                x={0}
                y={0}
                width={20}
                height={20}
                patternUnits="userSpaceOnUse"
              >
                <rect x={0} y={0} width={4} height={4} class="text-primary-500" fill="currentColor"></rect>
              </pattern>
            </defs>
            <rect width={404} height={384} fill="url(#brand-panel-dots-pattern)"></rect>
          </svg>
          <svg
            class="absolute top-full -translate-y-1/3 -translate-x-1/3 transform xl:-translate-y-1/2"
            width={404}
            height={384}
            fill="none"
            viewBox="0 0 404 384"
            aria-hidden="true"
          >
            <rect width={404} height={384} fill="url(#brand-panel-dots-pattern)"></rect>
          </svg>
        </div>
        <div class="relative mx-auto max-w-md space-y-6 px-4 py-12 sm:max-w-3xl sm:px-6 sm:py-16 lg:col-span-6 lg:col-start-4 lg:max-w-none lg:p-0">
          <h2 class="text-3xl font-extrabold text-white" id="join-heading">
            {title}
          </h2>
          <p class="text-lg text-white">{subtitle}</p>
          {description && <p class="text-lg text-white">{description}</p>}
          <a
            class="block w-full rounded-md border border-transparent bg-white px-5 py-3 text-center text-base font-medium text-primary-700 shadow-md hover:bg-gray-50 sm:inline-block sm:w-auto"
            href={buttonLink}
          >
            {buttonTitle}
          </a>
          {
            secondButtonLink && secondButtonTitle && (
              <a
                class="block w-full rounded-md border border-transparent bg-white px-5 py-3 text-center text-base font-medium text-primary-700 shadow-md hover:bg-gray-50 sm:ml-3 sm:inline-block sm:w-auto"
                href={secondButtonLink}
              >
                {secondButtonTitle}
              </a>
            )
          }
        </div>
      </div>
    </div>
  </div>
</div>