PriceSection

Props

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

---
interface Props {
  title: string;
  price: string;
  currency?: string;
  linkText?: string;
  linkPath?: string;
  buttonText?: string;
  buttonPath?: string;
}

const { title, price, currency, linkText, linkPath, buttonText, buttonPath } =
  Astro.props;
---

<div class="bg-gray-100 py-12">
  <div class="relative mx-auto bg-gray-100 px-4 sm:px-6 lg:px-8">
    <div
      class="mx-auto max-w-xl overflow-hidden rounded-lg bg-white px-6 py-8 text-center shadow-lg lg:flex lg:flex-shrink-0 lg:flex-col lg:justify-center lg:p-12"
    >
      <p class="text-lg font-medium leading-6 text-gray-900">{title}</p>
      <div
        class="mt-4 flex items-center justify-center text-5xl font-extrabold text-gray-900"
      >
        <span>{price}</span>
        {
          currency && (
            <span class="ml-3 text-xl font-medium text-gray-500">
              {currency}
            </span>
          )
        }
      </div>
      {
        linkText && linkPath && (
          <p class="mt-4 text-sm">
            <a href={linkPath} class="font-medium text-gray-500 underline">
              {linkText}
            </a>
          </p>
        )
      }
      {
        buttonText && buttonPath && (
          <div class="mt-6">
            <div class="rounded-md shadow">
              <a
                href={buttonPath}
                class="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-primary-600 to-primary-alt-700 px-5 py-3 text-base font-medium text-white hover:from-primary-700 hover:to-primary-alt-800"
              >
                {buttonText}
              </a>
            </div>
          </div>
        )
      }
    </div>
  </div>
</div>