_Section

Props

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

---
/**
 * Shared shell of every library section: vertical rhythm, container width,
 * light/dark theme, optional centered heading. Sections compose it; content
 * never uses it directly.
 */
export type Theme = 'light' | 'muted' | 'dark' | 'brand' | 'brand-dark';

interface Props {
  id?: string;
  theme?: Theme;
  title?: string;
  description?: string;
  /** pulls the section up over the previous one (hero → cards overlap) */
  overlap?: boolean;
  /** 'sr' hides the heading visually but keeps it for a11y/SEO */
  heading?: 'center' | 'left' | 'sr';
  /** decorative dot grid behind the content (the older sites had it;
      opt-in, because on a dense page it becomes noise) */
  decor?: 'none' | 'dots' | 'dots-left';
  class?: string;
}

const {
  id,
  theme = 'light',
  title,
  description,
  overlap = false,
  heading = 'center',
  decor = 'none',
  class: extra = '',
} = Astro.props;

// 'brand-dark' is the flat bottom step of the site's own brand ladder — the
// band the testimonials used to have, only derived from brandColor instead
// of a hardcoded #500724, so every site gets its own (Kirill, 2026-08-26).
const bg = {
  light: 'bg-white',
  muted: 'bg-gray-50',
  dark: 'bg-stone-800',
  brand: 'bg-gradient-to-r from-primary-800 to-primary-alt-700',
  'brand-dark': 'bg-primary-950',
}[theme];
const onDark = theme === 'dark' || theme === 'brand' || theme === 'brand-dark';
const fg = onDark ? 'text-white' : 'text-gray-900';
const sub = onDark ? 'text-primary-100' : 'text-gray-500';
const align = heading === 'left' ? '' : 'text-center mx-auto';
const dots = decor !== 'none';
// one pattern id per section, so several decorated sections can coexist
const dotsId = `dots-${Math.random().toString(36).slice(2, 8)}`;
---

<section
  id={id}
  class:list={[overlap ? 'bg-transparent text-gray-900 relative z-10 -mt-32 pb-16' : [bg, fg, 'py-16 sm:py-24'], 'px-4 sm:px-6 lg:px-8', dots && 'relative overflow-hidden', extra]}
  aria-labelledby={title && id ? `${id}-title` : undefined}
>
  {dots && (
    <svg
      class:list={['pointer-events-none absolute top-8 hidden lg:block', onDark ? 'text-white/10' : 'text-gray-200', decor === 'dots-left' ? '-left-16' : '-right-16']}
      width="404"
      height="384"
      viewBox="0 0 404 384"
      fill="none"
      aria-hidden="true"
    >
      <defs>
        <pattern id={dotsId} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="4" height="4" fill="currentColor" />
        </pattern>
      </defs>
      <rect width="404" height="384" fill={`url(#${dotsId})`} />
    </svg>
  )}
  <div class:list={['mx-auto max-w-7xl', dots && 'relative']}>
    {
      title && (
        <div class:list={['max-w-3xl', align, heading === 'sr' ? 'sr-only' : 'mb-12']}>
          <h2 id={id ? `${id}-title` : undefined} class="text-3xl font-extrabold tracking-tight sm:text-4xl">
            {title}
          </h2>
          {description && <p class:list={['mt-4 text-xl', sub]}>{description}</p>}
        </div>
      )
    }
    <slot />
  </div>
</section>