CTASection

Props

Source apps/www/src/components/CTASection.astro @ gitt.one

---
interface Props {
  title: string;
  highlightedTitle?: string;
  firstBtnText?: string;
  /** kept as in the original (typo included) for content compatibility */
  fistBtnPath?: string;
  secondBtnText?: string;
  secondBtnPath?: string;
}

const {
  title,
  highlightedTitle,
  firstBtnText,
  fistBtnPath = '#',
  secondBtnText,
  secondBtnPath = '#',
} = Astro.props;
---

<div class="bg-white">
  <div
    class="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8"
  >
    <h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
      <span class="block">{title}</span>
      {
        highlightedTitle && (
          <span class="block bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent">
            {highlightedTitle}
          </span>
        )
      }
    </h2>
    <div class="mt-6 space-y-4 sm:flex sm:space-x-5 sm:space-y-0">
      {
        firstBtnText && (
          <a
            href={fistBtnPath}
            class="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-primary-600 hover:to-primary-alt-700"
          >
            {firstBtnText}
          </a>
        )
      }
      {
        secondBtnText && (
          <a
            href={secondBtnPath}
            class="flex items-center justify-center rounded-md border border-transparent bg-primary-50 px-4 py-3 text-base font-medium text-primary-800 shadow-sm hover:bg-primary-100"
          >
            {secondBtnText}
          </a>
        )
      }
    </div>
  </div>
</div>