Files
landing/src/lib/components/Footer.svelte
mifi a5989b03b1
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
ci/woodpecker/push/deploy Pipeline was successful
Add GDPR compliant cookie banner and update footer/privacy policy to include GA and Clarity; added e2e and unit tests for cookie handling; updated snapshots
2026-03-12 15:04:49 -03:00

111 lines
3.4 KiB
Svelte

<script lang="ts">
import LinkedInIcon from './Icon/LinkedIn.svelte';
import GithubIcon from './Icon/Github.svelte';
import ExternalLinkIcon from './Icon/ExternalLink.svelte';
</script>
<footer class="footer">
<div class="container">
<p class="copyright">
© <span id="copyright-year">2026</span> mifi Ventures, LLC. All rights reserved.
</p>
<nav class="footer-links footer-links-wrap" aria-label="Footer links">
<a
class="link"
href="https://linkedin.com/in/the-mifi"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn profile (opens in new tab)"
data-umami-event="footer link"
data-umami-event-label="linkedin"
>
<LinkedInIcon size={15} />
LinkedIn
<ExternalLinkIcon aria-label="Opens in new tab" size={15} />
</a>
<a
class="link"
href="https://github.com/the-mifi"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub profile (opens in new tab)"
data-umami-event="footer link"
data-umami-event-label="github"
>
<GithubIcon size={15} />
GitHub
<ExternalLinkIcon aria-label="Opens in new tab" size={15} />
</a>
<a
class="link"
href="/privacy-policy"
data-umami-event="footer link"
data-umami-event-label="privacy-policy"
>
Privacy Policy
</a>
<a
class="link"
href="/terms-of-service"
data-umami-event="footer link"
data-umami-event-label="terms-of-service"
>
Terms of Service
</a>
</nav>
<p class="legal-notice">
We improve our products and advertising by using Google Analytics and
Microsoft Clarity to see how you use our website. By using our site, you agree
that we and Microsoft can collect and use this data. Our <a
href="/privacy-policy">privacy policy</a
> has more details.
</p>
</div>
</footer>
<style>
.footer {
padding: var(--space-xxl) 0 var(--space-xl) 0;
text-align: center;
background-color: var(--color-bg);
border-top: 1px solid var(--color-border);
}
.copyright {
margin-bottom: var(--space-md);
font-size: var(--font-size-medium);
font-weight: var(--font-weight-normal);
color: var(--color-text-tertiary);
max-width: 100%;
}
.footer-links-wrap {
flex-wrap: wrap;
}
.link {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
.legal-notice {
margin-top: var(--space-md);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
color: var(--color-text-tertiary);
max-width: 100%;
}
.legal-notice a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.legal-notice a:hover {
color: var(--color-primary-hover);
}
</style>