Initial commit

src/lib/components/Footer.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import Icon from '$lib/components/Icon.svelte';
+  import type { FooterContent, LinkItem } from '$lib/types';
+
+  export let footer: FooterContent;
+
+  const socialLinks: LinkItem[] = [
+    { label: 'Instagram', href: 'https://www.instagram.com/goodwalk.nz/', external: true },
+    { label: 'Facebook', href: 'https://facebook.com/goodwalk.nz', external: true },
+    { label: 'Google', href: 'https://g.page/r/CUsvrWPhkYrAEB0', external: true }
+  ];
+</script>
+
+<footer>
+  <div class="footer-inner">
+    <div class="footer-brand">
+      <img
+        src="/images/goodwalk-auckland-dog-walking-logo.png"
+        alt="Goodwalk – Auckland dog walking service logo"
+        class="footer-logo"
+        height="28"
+      />
+      <p>{footer.brandText}</p>
+      <div class="social-links">
+        <a href={socialLinks[0].href} target="_blank" rel="noopener" aria-label="Instagram">
+          <Icon name="fab fa-instagram" />
+        </a>
+        <a href={socialLinks[1].href} target="_blank" rel="noopener" aria-label="Facebook">
+          <Icon name="fab fa-facebook-f" />
+        </a>
+        <a href={socialLinks[2].href} target="_blank" rel="noopener" aria-label="Google">
+          <Icon name="fab fa-google" />
+        </a>
+      </div>
+    </div>
+
+    <div class="footer-explore">
+      <p class="footer-col-label">Explore</p>
+      <ul class="footer-nav">
+        {#each footer.navigationLinks as link}
+          <li>
+            <a
+              href={link.href}
+              target={link.external ? '_blank' : undefined}
+              rel={link.external ? 'noopener' : undefined}
+            >
+              {link.label}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </div>
+
+    <div class="footer-action">
+      <p class="footer-col-label">Get Started</p>
+      <a href="/booking" class="footer-book-btn">
+        Book a Meet &amp; Greet
+        <Icon name="fas fa-arrow-right" />
+      </a>
+      <p class="footer-book-note">Free, no-obligation introduction</p>
+      <a
+        href="https://g.page/r/CUsvrWPhkYrAEB0/"
+        target="_blank"
+        rel="noopener"
+        class="footer-reviews"
+      >
+        <Icon name="fab fa-google" />
+        <span>See our 5&#9733; Google reviews</span>
+      </a>
+
+      {#if footer.email || footer.phone}
+        <div class="footer-contact">
+          {#if footer.email}
+            <a href="mailto:{footer.email}" class="footer-contact-link">
+              <Icon name="fas fa-envelope" />
+              {footer.email}
+            </a>
+          {/if}
+          {#if footer.phone}
+            <a href="tel:{footer.phone.replace(/[^0-9+]/g, '')}" class="footer-contact-link">
+              <Icon name="fas fa-phone" />
+              {footer.phone}
+            </a>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="footer-bottom">
+    <span>{footer.copyright}</span>
+    <nav class="footer-legal">
+      <a href="/terms-and-conditions">Terms &amp; Conditions</a>
+      <a href="/privacy-policy">Privacy Policy</a>
+    </nav>
+  </div>
+</footer>