Props

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

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

interface Props {
  title: string;
  subtitle: string;
  text: string;
  primaryButtonTitle?: string;
  primaryButtonLink?: string;
  secondaryButtonTitle?: string;
  secondaryButtonLink?: string;
  imageName: string;
  /** the strip under the hero; omitted when the site has nothing to shout */
  brightName?: string;
  /** which half the photo occupies on wide screens */
  imageSide?: 'left' | 'right';
}

const {
  title,
  subtitle,
  text,
  primaryButtonTitle = 'Get started',
  primaryButtonLink = '#',
  secondaryButtonTitle,
  secondaryButtonLink = '#',
  imageName,
  brightName,
  imageSide = 'left',
} = Astro.props;

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

<section class="relative mt-1">
  <div
    class:list={[
      "mx-auto w-full max-w-7xl pt-16 text-center lg:w-[50%] lg:py-48 lg:text-left",
      imageSide === "left" ? "lg:ml-[50%]" : "lg:mr-[50%]",
    ]}
  >
    <div class="m-auto max-w-[40rem] px-4 sm:px-8 lg:m-0 xl:pr-16">
      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
        <div class="block">{title}</div>
        <div class="block text-primary-600">{subtitle}</div>
      </h1>
      <p class="mx-auto mt-3 max-w-md text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
        {text}
      </p>
      <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
        <div class="rounded-md shadow">
          <a
            href={primaryButtonLink}
            class="flex w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-primary-600 px-8 py-3 text-base font-medium text-white hover:bg-primary-700 md:px-10 md:py-4 md:text-lg"
          >
            {primaryButtonTitle}
          </a>
        </div>
        {
          secondaryButtonTitle && (
            <div class="mt-3 rounded-md shadow sm:ml-3 sm:mt-0">
              <a
                href={secondaryButtonLink}
                class="flex w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-primary-600 hover:bg-gray-50 md:px-10 md:py-4 md:text-lg"
              >
                {secondaryButtonTitle}
              </a>
            </div>
          )
        }
      </div>
    </div>
    <div class:list={["relative mt-8 h-64 w-full lg:absolute lg:inset-y-0 lg:mt-0 lg:h-full lg:w-1/2", imageSide === "left" ? "lg:left-0" : "lg:right-0"]}>
      {/* the hero image is the LCP element: load it eagerly at full priority */}
      <Image
        src={image}
        alt={[title, subtitle].join(' ')}
        widths={[400, 840, 1280, 1680]}
        loading="eager"
        fetchpriority="high"
        class="absolute inset-0 h-full w-full max-w-full object-contain object-center lg:object-right-bottom"
      />
    </div>
  </div>
</section>
{
  brightName ? (
    <div class="relative mb-20 bg-primary-600 py-4 text-center font-medium uppercase text-white">
      {brightName}
    </div>
  ) : (
    <div class="mb-20" />
  )
}