Build static Astro pilot for Happy Tails

src/components/Footer.astro

@@ -0,0 +1,11 @@
+---
+import { isBlog, site } from '../lib/site-data.js';
+---
+<footer class="site-footer">
+  <div class="shell footer-grid">
+    <div><a class="brand" href="/"><span class="brand-mark" aria-hidden="true">✦</span><span>{isBlog ? 'Happy Tails Journal' : 'Happy Tails'}</span></a><p>{site.description}</p></div>
+    <div><p class="eyebrow">Explore</p>{site.nav.map((item) => <a class="footer-link" href={item.href}>{item.label}</a>)}</div>
+    {!isBlog && <address><p class="eyebrow">Say hello</p><a class="footer-link" href={`tel:${site.contact.phoneHref}`}>{site.contact.phone}</a><a class="footer-link" href={`mailto:${site.contact.email}`}>{site.contact.email}</a></address>}
+  </div>
+  <div class="shell footer-bottom">© {new Date().getFullYear()} {site.name} <span>Built with care by SloanOps</span></div>
+</footer>

src/components/Header.astro

@@ -0,0 +1,22 @@
+---
+import { isBlog, site } from '../lib/site-data.js';
+const path = Astro.url.pathname;
+---
+<header class="site-header">
+  <div class="shell nav-wrap">
+    <a class="brand" href="/" aria-label={`${site.name} home`}><span class="brand-mark" aria-hidden="true">✦</span><span>{isBlog ? 'Happy Tails Journal' : 'Happy Tails'}</span></a>
+    <button class="menu-button" aria-expanded="false" aria-controls="main-menu">Menu <span aria-hidden="true">+</span></button>
+    <nav id="main-menu" aria-label="Main navigation">
+      {site.nav.map((item) => <a href={item.href} aria-current={path === item.href ? 'page' : undefined}>{item.label}</a>)}
+    </nav>
+  </div>
+</header>
+<script>
+  const button = document.querySelector('.menu-button');
+  const menu = document.querySelector('#main-menu');
+  button?.addEventListener('click', () => {
+    const open = button.getAttribute('aria-expanded') !== 'true';
+    button.setAttribute('aria-expanded', String(open));
+    menu?.classList.toggle('is-open', open);
+  });
+</script>

src/components/Hero.astro

@@ -0,0 +1,9 @@
+---
+import { site } from '../lib/site-data.js';
+---
+<section class="hero">
+  <div class="shell hero-grid">
+    <div class="hero-copy"><p class="eyebrow">{site.hero.eyebrow}</p><h1>{site.hero.headline}</h1><p class="lede">{site.hero.copy}</p><a class="button" href={site.hero.ctaHref}>{site.hero.cta} <span aria-hidden="true">→</span></a></div>
+    <div class="hero-image"><img src={site.hero.image} alt={site.hero.imageAlt} fetchpriority="high" /><div class="image-note">Kind care. Every day.</div></div>
+  </div>
+</section>