---
interface Props {
  title: string;
  subtitle?: string;
}

const { title, subtitle } = Astro.props;
---

<section class="py-12 bg-gradient-to-r from-amber-500 to-amber-700 text-white dark:from-amber-800/70 dark:to-amber-950/80">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto text-center">
      <h1 class="text-4xl font-bold mb-4">{title}</h1>
      {subtitle && <p class="text-xl opacity-90">{subtitle}</p>}
      <slot />
    </div>
  </div>
</section> 