87 lines
2.9 KiB
Plaintext
87 lines
2.9 KiB
Plaintext
---
|
|
// Import the necessary dependencies
|
|
import EmailFooterInput from '@components/ui/forms/input/EmailFooterInput.astro';
|
|
import BrandLogo from '@components/BrandLogo.astro';
|
|
import { SITE } from '@data/constants';
|
|
import { getLocaleFromPath, localizeHref } from '@/i18n';
|
|
import { siteCopy } from '@data/site-copy';
|
|
|
|
const locale = getLocaleFromPath(Astro.url.pathname);
|
|
const copy = siteCopy[locale].footer;
|
|
|
|
type FooterSection = {
|
|
section: string;
|
|
links: Array<{ name: string; url: string }>;
|
|
};
|
|
---
|
|
|
|
<footer class="w-full bg-neutral-300 dark:bg-neutral-900">
|
|
<div
|
|
class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-(--breakpoint-2xl)"
|
|
>
|
|
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
|
|
<div class="col-span-full lg:col-span-1">
|
|
{/* Brand Logo */}
|
|
<BrandLogo class="h-auto w-40" />
|
|
</div>
|
|
{/* An array of links for Product and Company sections */}
|
|
{
|
|
copy.sections.map((section: FooterSection) => (
|
|
<div class="col-span-1 min-w-0">
|
|
<h3
|
|
class="break-words font-bold text-neutral-800 dark:text-neutral-200"
|
|
>
|
|
{section.section}
|
|
</h3>
|
|
<ul class="mt-3 grid space-y-3">
|
|
{section.links.map(link => (
|
|
<li>
|
|
<a
|
|
href={localizeHref(link.url, locale)}
|
|
class="inline-flex max-w-full gap-x-2 rounded-lg break-words whitespace-normal text-neutral-600 ring-zinc-500 outline-hidden transition duration-300 hover:text-neutral-500 focus-visible:ring-3 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-hidden"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
<div class="col-span-2 min-w-0">
|
|
<h3 class="break-words font-bold text-neutral-800 dark:text-neutral-200">
|
|
{copy.conversationTitle}
|
|
</h3>
|
|
|
|
<div>
|
|
<EmailFooterInput
|
|
title={copy.contactButton}
|
|
url={localizeHref('/contact', locale)}
|
|
/>
|
|
<p class="mt-3 break-words text-sm text-neutral-600 dark:text-neutral-400">
|
|
{copy.conversationContent}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mt-9 grid gap-y-2 sm:mt-12 sm:flex sm:items-center sm:justify-between sm:gap-y-0"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<p class="break-words text-sm text-neutral-600 dark:text-neutral-400">
|
|
© <span id="current-year"></span>
|
|
{SITE.title}. {copy.copyrightSuffix}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const year = new Date().getFullYear();
|
|
const element = document.getElementById('current-year');
|
|
element!.innerText = year.toString();
|
|
</script>
|
|
</div>
|
|
</footer>
|