ProductQualitySection

Props

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

---
interface Props {
  title: string;
  description: string;
  articleTitle?: string;
  articleUrl?: string;
  firstBtnTitle?: string;
  firstBtnUrl?: string;
  secondBtnTitle?: string;
  secondBtnUrl?: string;
}

const {
  title,
  description,
  articleTitle,
  articleUrl,
  firstBtnTitle,
  firstBtnUrl,
  secondBtnTitle,
  secondBtnUrl,
} = Astro.props;
---

<div class="py-12 bg-gray-50 overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
    <div class="text-base max-w-prose mx-auto lg:max-w-none">
      <h2 class="text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
        {title}
      </h2>
    </div>
    <div class="relative z-10 text-base max-w-prose mx-auto lg:max-w-5xl lg:mx-0 lg:pr-72">
      <p class="text-lg text-center lg:text-left text-gray-500">
        {description}
      </p>
    </div>
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
      <div class="relative z-10 mx-auto lg:max-w-none">
        <div
          class="prose prose-gray max-w-none [&_h2]:text-center [&_h2_a]:no-underline [&_h3]:text-center [&_h3_a]:no-underline"
        >
          <slot name="article">
            {
              articleTitle && articleUrl && (
                <p>
                  <a href={articleUrl} class="text-primary-700 hover:text-primary-800">
                    {articleTitle}
                  </a>
                </p>
              )
            }
          </slot>
        </div>
        <div class="mx-auto mt-8 flex justify-center text-base lg:max-w-none">
          {
            firstBtnTitle && (
              <div class="rounded-md shadow">
                <a
                  href={firstBtnUrl}
                  class="flex w-full items-center justify-center rounded-md border border-transparent bg-primary-700 px-5 py-3 text-base font-medium text-white no-underline hover:bg-primary-800"
                >
                  {firstBtnTitle}
                </a>
              </div>
            )
          }
          {
            secondBtnTitle && (
              <div class="ml-4 rounded-md shadow">
                <a
                  href={secondBtnUrl}
                  class="flex w-full items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-primary-700 no-underline hover:bg-gray-50"
                >
                  {secondBtnTitle}
                </a>
              </div>
            )
          }
        </div>
      </div>
      <div class="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
        <svg
          class="absolute top-0 right-0 -mt-20 -mr-20 lg:top-auto lg:right-auto lg:bottom-1/2 lg:left-1/2 lg:mt-0 lg:mr-0 xl:top-0 xl:right-0 xl:-mt-20 xl:-mr-20"
          width="404"
          height="384"
          fill="none"
          viewBox="0 0 404 384"
          aria-hidden="true"
        >
          <defs>
            <pattern
              id="product-quality-dots"
              x="0"
              y="0"
              width="20"
              height="20"
              patternUnits="userSpaceOnUse"
            >
              <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"></rect>
            </pattern>
          </defs>
          <rect width="404" height="384" fill="url(#product-quality-dots)"></rect>
        </svg>
        <slot />
      </div>
    </div>
  </div>
</div>