sexy/packages/frontend/src/lib/components/page-hero/page-hero.svelte

<script lang="ts">
  import type { Snippet } from "svelte";

  interface Props {
    title: string;
    description?: string;
    children?: Snippet;
  }

  let { title, description, children }: Props = $props();
</script>

<section class="relative -mt-16 pt-28 pb-12 md:pb-20 overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-b from-primary/12 via-accent/6 to-transparent"></div>
  <div class="relative container mx-auto px-4 text-center">
    <div class="max-w-5xl mx-auto">
      <h1
        class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
      >
        {title}
      </h1>
      {#if description}
        <p
          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
        >
          {description}
        </p>
      {/if}
      {#if children}
        {@render children()}
      {/if}
    </div>
  </div>
</section>