98 lines
3.0 KiB
Svelte
98 lines
3.0 KiB
Svelte
|
<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 & 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★ 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 & Conditions</a>
|
|||
|
|
<a href="/privacy-policy">Privacy Policy</a>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|