app/src/components/Header.astro

---
interface Props {
  title: string;
  description?: string;
}
const { title, description } = Astro.props as Props;
---
<section class="hero">
  <h1 class="hero-title">{title}</h1>
  <div class="hero-banner">
    <slot name="banner" />
    {description && <p class="hero-desc">{description}</p>}
  </div>
</section>