Welcome to Duskmoon UI

<.dm_page_header id="page-header-single-default" nav_id="story-page-header-nav">
  <:menu to="#home">Home</:menu>
  <:menu to="#about">About</:menu>
  <:menu to="#docs">Docs</:menu>
  <:user_profile>
    <span class="text-sm px-4">(^_^)</span>
  </:user_profile>
  <div class="py-12 text-center">
    <h1 class="text-4xl font-bold">Welcome to Duskmoon UI</h1>
    <p class="text-lg mt-4 opacity-70">A component library for Phoenix LiveView</p>
  </div>
</.dm_page_header>

<.dm_page_header
  id="page-header-single-with-custom-class"
  class="bg-surface-container"
  nav_id="story-page-header-nav-styled"
  nav_class="bg-surface-container-high"
>
  <:menu to="#features" class="text-primary">Features</:menu>
  <:menu to="#pricing" class="text-primary">Pricing</:menu>
  <div class="py-8 text-center">
    <h2 class="text-3xl font-bold">Styled Page Header</h2>
  </div>
</.dm_page_header>

<.dm_page_header id="page-header-single-with-active-menu" nav_id="story-page-header-nav-active">
  <:menu to="#home" active={true}>Home</:menu>
  <:menu to="#about">About</:menu>
  <:menu to="#contact">Contact</:menu>
  <div class="py-8 text-center">
    <h2 class="text-3xl font-bold">Active Menu Demo</h2>
  </div>
</.dm_page_header>

<.dm_page_header
  id="page-header-single-with-nav-label"
  nav_label="Main site navigation"
  toggle_menu_label="Open navigation menu"
  nav_id="story-page-header-nav-a11y"
>
  <:menu to="#docs">Documentation</:menu>
  <:menu to="#api">API Reference</:menu>
  <div class="py-8 text-center">
    <h2 class="text-3xl font-bold">Accessible Header</h2>
    <p class="mt-2 opacity-70">Inspect element to see aria-label on nav</p>
  </div>
</.dm_page_header>