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:

<a
  href="https://wa.me/<number>?text=Hi%2C%20I%27m%20interested%20in%20your%20services"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Chat on WhatsApp"
  class="fixed bottom-6 right-6 z-50 flex items-center gap-2 bg-green-700 hover:bg-green-600 text-white font-semibold px-4 py-3 rounded-full shadow-lg transition-all"
>
  <svg>...</svg>
  WhatsApp
</a>

This has visible “WhatsApp” text, so no sr-only needed.