Nav & Footer

const { active = “” } = Astro.props;

<!-- Logo -->
<a href="/" aria-label="Business Name - Home">
  <img src="/logo.svg" alt="Business Name" width="130" height="32" class="h-8 w-auto" />
  <span class="sr-only">Business Name - Home</span>
</a>

<!-- Links -->
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-400">
  <a href="/#services" class:list={["hover:text-white transition-colors", { "text-white": active === "services" }]}>Services</a>
  <a href="/services/web-design/" class:list={["hover:text-white transition-colors", { "text-white": active === "websites" }]}>Websites</a>
  <a href="/about" class:list={["hover:text-white transition-colors", { "text-white": active === "about" }]}>About</a>
</nav>

<!-- CTA -->
<a href="/contact" class="bg-brand-700 hover:bg-brand-600 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition-colors">
  Get a Quote
</a>

```

Pass the active prop from each page to highlight the current nav item:

<Nav active="about" />

Footer (`src/components/Footer.astro`)

Standard footer with grouped links, social icons, copyright, and credit line.

Rules

Never link to removed sections. If you remove a #work section from the homepage, remove /#work from the footer too. Broken anchor links are flagged as SEO issues.
Icon-only links must have sr-only text. SVG icons with no visible text count as “no anchor text” for crawlers:

<a href="https://wa.me/..." aria-label="WhatsApp">
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">WhatsApp</span>
</a>

Include a credit line. Below the copyright:

<p class="text-xs text-gray-600 mt-1">Built with care by [Your Name]</p>

Link groups

Group	Links
Services	Web Design, Managed SEO, Managed Hosting
Company	About, Blog, Contact
Legal	Privacy Policy, Terms of Service

Keep legal links - they’re required for GA4 (Privacy Policy) and for any paid service (Terms of Service).

Mobile nav

The nav above hides on mobile (hidden md:flex). Add a hamburger menu if the client has more than 4-5 nav items. For most service sites, the desktop nav is sufficient and mobile users use the floating WhatsApp button.

Floating WhatsApp button

Goes in the <body> of Layout.astro, not in Nav or Footer.

Use a wrapper <div> for the fixed position so the animate-ping ring can be an absolute sibling of the <a> — you cannot combine Tailwind fixed and the relative needed for child absolute positioning on the same element:

<div class="fixed bottom-7 right-7 z-50">
  <!-- Expanding ring animation — draws attention without obstructing the icon -->
  <span class="absolute inset-0 rounded-full bg-[#25d366] opacity-60 animate-ping"></span>
  <a
    href="https://wa.me/<number>?text=Hi%2C%20I%27m%20interested%20in%20your%20services"
    target="_blank"
    rel="noopener noreferrer"
    class="relative z-10 flex items-center justify-center w-13 h-13 rounded-full bg-[#25d366] shadow-xl hover:scale-110 transition-transform"
  >
    <span class="sr-only">Chat on WhatsApp</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-6 h-6" aria-hidden="true">
      <!-- WhatsApp SVG path -->
    </svg>
  </a>
</div>

animate-ping scales the span to 2× and fades it to transparent on a 1 s loop — the same effect as a notification ring
relative z-10 on the <a> keeps it painted above the ping span
sr-only on the text + aria-hidden on the SVG is the correct pattern for icon-only links (required for Screaming Frog / axe accessibility)