Header.astro

---
import { SITE_TITLE } from '../consts';
import ShepherdHead from '../images/shepherd-head.svg?raw';
import ShepherdHeader from '../images/shepherd-header.svg';

const { isHome } = Astro.props;
---

<header class="flex justify-center mt-4 w-full">
  <div class="absolute ml-2 top-0">
    <a href="/">
      <Fragment class="shepherd-logo absolute ml-2" set:html={ShepherdHead} />
    </a>
  </div>

  <div
    class="bg-grey-light flex flex-col font-heading justify-center items-center w-full"
  >
    <nav
      class="flex flex-wrap justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0"
    >
      <div class="flex lg:p-12">
        <a
          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
          href="https://github.com/shipshapecode/shepherd"
        >
          GitHub
        </a>
        <a
          class="pr-6 uppercase lg:pr-10 hover:text-navy-light"
          href="https://docs.shepherdjs.dev"
        >
          Docs
        </a>
        <button
          class="pr-6 uppercase cursor-pointer hover:text-navy-light lg:pr-0"
          id="showTour"
          type="button"
        >
          Demo
        </button>
      </div>

      <div class="flex lg:p-12">
        <a
          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
          href="/pricing"
        >
          Pricing
        </a>
        <a
          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
          href="https://discord.gg/EGcDW5NSud"
        >
          Discord
        </a>
        <!-- <a class='pr-6 uppercase hover:text-navy-light lg:pr-10' href='/blog'>
          Blog
        </a> -->
        <a
          class="uppercase hover:text-navy-light"
          href="mailto:ahoy@shipshape.io"
        >
          Contact
        </a>
      </div>
    </nav>

    <img
      class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
      src={ShepherdHeader.src}
      alt={SITE_TITLE}
    />

    <h2 class="font-body p-2 text-xl">
      Guide your users through a tour of your app
    </h2>

    {
      isHome && (
        <div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
          <div class="feature m-4 relative w-full lg:w-1/3">
            <div class="border-4 border-navy w-full">
              <img
                class="absolute a11y-icon z-20"
                src="/img/accessibility.svg"
                alt=""
                role="presentation"
              />

              <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

              <div class="bg-white h-72 p-6 relative z-10">
                <h3 class="p-2 text-2xl text-center uppercase w-full">
                  Accessibility
                </h3>

                <p class="font-body p-2 text-xl">
                  Shepherd has full keyboard navigation support, focus trapping,
                  and a11y compliance via aria attributes.
                </p>
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
            </div>
          </div>

          <div class="customizable m-4 relative w-full lg:w-1/3">
            <div class="border-4 border-navy w-full">
              <img
                class="absolute customizable-icon z-20"
                src="/img/customizable.svg"
                alt=""
                role="presentation"
              />

              <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

              <div class="bg-white h-72 p-6 relative z-10">
                <h3 class="p-2 text-2xl text-center uppercase w-full">
                  Highly Customizable
                </h3>

                <p class="font-body p-2 text-xl">
                  Shepherd's styles are kept minimal, allowing you to easily
                  customize the look and feel, but still give you enough to drop
                  in and be ready to go quickly.
                </p>
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
            </div>
          </div>

          <div class="feature m-4 relative w-full lg:w-1/3">
            <div class="border-4 border-navy w-full">
              <img
                class="absolute framework-icon z-20"
                src="/img/framework.svg"
                alt=""
                role="presentation"
              />

              <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

              <div class="bg-white h-72 p-6 relative z-10">
                <h3 class="p-2 text-2xl text-center uppercase w-full">
                  Framework Ready
                </h3>

                <p class="font-body p-2 text-xl">
                  Shepherd is ready to drop into your application using React,
                  Ember, Angular, Vue.js, ES Modules, or plain Javascript!
                </p>
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
            </div>
          </div>
        </div>
      )
    }
  </div>
</header>

<script>
  // Handle demo button click - redirect to home if not already there
  function setupDemoButton() {
    const showTourBtn = document.querySelector('#showTour');
    
    if (!showTourBtn) return;
    
    // Remove any existing listeners
    const newBtn = showTourBtn.cloneNode(true) as HTMLElement;
    showTourBtn.parentNode?.replaceChild(newBtn, showTourBtn);
    
    newBtn.addEventListener('click', () => {
      // Check if we're on the home page
      if (window.location.pathname !== '/') {
        // Store flag to start tour after navigation
        sessionStorage.setItem('startTourOnLoad', 'true');
        window.location.href = '/';
      } else {
        // We're already on home page, dispatch event to start tour
        window.dispatchEvent(new CustomEvent('startTour'));
      }
    });
  }
  
  // Run on initial load
  document.addEventListener('DOMContentLoaded', setupDemoButton);
  
  // Run on Astro page transitions
  document.addEventListener('astro:page-load', setupDemoButton);
</script>