Props

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

---
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  title: string;
  description?: string;
  imgPath: string;
  firstBtnText?: string;
  firstBtnPath?: string;
  secondBtnText?: string;
  secondBtnPath?: string;
}

const {
  title,
  description,
  imgPath,
  firstBtnText,
  firstBtnPath = '#',
  secondBtnText,
  secondBtnPath = '#',
} = Astro.props;

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

<div class="relative">
  <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
      <div class="absolute inset-0 overflow-hidden">
        {/* the hero image is the LCP element: load it eagerly at full priority */}
        <Image
          src={image}
          alt=""
          widths={[400, 840, 1280, 1680]}
          loading="eager"
          fetchpriority="high"
          class="h-full w-full object-cover"
        />
        <div class="absolute inset-0 bg-gradient-to-r from-primary-800 to-primary-alt-700 mix-blend-multiply"></div>
      </div>
      <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
        <h1 class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
          <span class="block text-white">{title}</span>
        </h1>
        {
          description && (
            <p class="mx-auto mt-6 max-w-lg text-center text-xl text-primary-200 sm:max-w-3xl">
              {description}
            </p>
          )
        }
        <div class="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
          <div class="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
            {
              firstBtnText && (
                <a
                  href={firstBtnPath}
                  class="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-primary-700 shadow-sm hover:bg-primary-50 sm:px-8"
                >
                  {firstBtnText}
                </a>
              )
            }
            {
              secondBtnText && (
                <a
                  href={secondBtnPath}
                  class="flex items-center justify-center rounded-md border border-transparent bg-primary-500/60 px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-primary-500/70 sm:px-8"
                >
                  {secondBtnText}
                </a>
              )
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</div>