FeatureItem

Props

Source apps/www/src/sections/FeatureItem.astro @ gitt.one

---
/**
 * FeatureItem — one row of <FeatureSection>: an icon badge, a headline, a
 *   paragraph and a gradient button on the left, a big picture on the right
 *   bleeding past the container.
 *
 * Parent: <FeatureSection> only.
 * Children: none; the text comes from `description`. All five props are
 *   required.
 * Picture: `imgPath` (file name in images/) is a LANDSCAPE screenshot or
 *   photo; it keeps its proportions and is cropped only on very wide screens.
 *   The icon in the badge is fixed (an inbox).
 */
import { Image } from 'astro:assets';
import Inbox from 'astro-heroicons/outline/Inbox.astro';

import { resolveImage } from '../lib/images';

interface Props {
  /** the headline of the row */
  title: string;
  /** the paragraph under the headline */
  description: string;
  /** text of the gradient button */
  btnText: string;
  /** link of the button */
  btnPath: string;
  /** file name in images/, a landscape screenshot or photo */
  imgPath: string;
}

const { title, description, btnText, btnPath, imgPath } = Astro.props;
const image = await resolveImage(imgPath);
---

<div class="relative">
  <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
    <div class="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
      <div>
        <div>
          <span class="h-12 w-12 rounded-md flex items-center justify-center bg-gradient-to-r from-primary-600 to-primary-alt-700">
            <Inbox class="h-6 w-6 text-white" aria-hidden="true" />
          </span>
        </div>
        <div class="mt-6">
          <h2 class="text-3xl font-extrabold tracking-tight text-gray-900">{title}</h2>
          <p class="mt-4 text-lg text-gray-500">{description}</p>
          <div class="mt-6">
            <a
              href={btnPath}
              class="inline-flex bg-gradient-to-r from-primary-600 to-primary-alt-700 bg-origin-border px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:from-primary-700 hover:to-primary-800"
            >
              {btnText}
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-12 sm:mt-16 lg:mt-0">
      {/* the image deliberately bleeds past the container; on ultra-wide
          viewports the page grows visible side margins and the bleed reads as
          a mistake, so from 2560px the image is cropped to its own column */}
      <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
        <Image
          src={image}
          alt={title}
          widths={[400, 840]}
          class="w-full rounded-xl shadow-xl ring-1 ring-black/5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none boxed:max-w-full boxed:object-cover"
        />
      </div>
    </div>
  </div>
</div>