Props

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

---
/**
 * HeroText — the first screen without a picture: title, pitch and buttons,
 *   centered in a reading column.
 *
 * Use for: a page that opens with words alone — a service, a consultancy, a
 *   documentation landing, an inner page.
 * Not for: a page that has a good picture — use <HeroSplit> or <HeroCover>; a
 *   mid-page call to action — use a <Cta…> section, this one renders an <h1>.
 * Children: optional markdown between the tags, rendered under the description
 *   and above the buttons. No sub-block tags.
 * Theme: "light" (white) or "dark" (stone band with white text).
 * Buttons: a button appears only when its text is given.
 */
import Button from './_Button.astro';

interface Props {
  /** the headline, one line */
  title: string;
  /** a second line of the headline, painted with the brand gradient */
  highlight?: string;
  /** the pitch under the headline, one or two sentences */
  description?: string;
  /** "light" white, "dark" stone band */
  theme?: 'light' | 'dark';
  /** text of the solid brand button; omit to hide the button */
  primaryText?: string;
  /** link of the primary button */
  primaryHref?: string;
  /** text of the second, outlined button */
  secondaryText?: string;
  /** link of the secondary button */
  secondaryHref?: string;
}
const { title, highlight, description, theme = 'light', primaryText, primaryHref = '#', secondaryText, secondaryHref = '#' } = Astro.props;
const dark = theme === 'dark';
---

<section class:list={['relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', dark ? 'bg-stone-800 text-white' : 'bg-white text-gray-900']}>
  <div class="mx-auto max-w-3xl text-center">
    <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
      {title}
      {highlight && <span class:list={['block bg-gradient-to-r bg-clip-text text-transparent', dark ? 'from-primary-300 to-primary-alt-400' : 'from-primary-500 to-primary-alt-600']}>{highlight}</span>}
    </h1>
    {description && <p class:list={['mt-6 text-xl', dark ? 'text-primary-100' : 'text-gray-500']}>{description}</p>}
    <slot />
    {(primaryText || secondaryText) && (
      <div class="mt-10 flex flex-wrap justify-center gap-4">
        {primaryText && <Button href={primaryHref}>{primaryText}</Button>}
        {secondaryText && <Button href={secondaryHref} kind="secondary" onDark={dark}>{secondaryText}</Button>}
      </div>
    )}
  </div>
</section>