132 lines
4.7 KiB
Plaintext
132 lines
4.7 KiB
Plaintext
---
|
|
import { readSingleton } from '@directus/sdk';
|
|
|
|
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
|
|
import Image from '@components/ui/images/Image.astro';
|
|
import directus from '@lib/directus';
|
|
import { NavigationLinks, FooterLinks } from '@/config';
|
|
|
|
import footerImg from '@images/flowers.png';
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
---
|
|
|
|
<footer
|
|
class="bg-background-accent w-full overflow-hidden"
|
|
transition:animate="none"
|
|
>
|
|
<div class="relative px-4 sm:px-6 pt-16 pb-12">
|
|
<div class="max-w-340 mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-10">
|
|
<!-- Brand section -->
|
|
<div class="col-span-1 md:col-span-3">
|
|
<a href="/" class="group inline-block">
|
|
<div class="flex items-center">
|
|
<div class="mx-auto aspect-square overflow-hidden">
|
|
<BrandLogo class="rounded-lg max-h-10 max-w-10"/>
|
|
</div>
|
|
<span class="text-header text-lg lg:text-2xl font-semibold leading-tight tracking-tight text-balance ml-3">
|
|
{global.name}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<p class="text-primary text-sm lg:text-base text-pretty leading-relaxed mt-4">
|
|
{global.about}
|
|
</p>
|
|
</div>
|
|
<!-- Left links -->
|
|
<div class="col-span-1 md:col-span-2">
|
|
<h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
|
|
Site
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
{NavigationLinks.map((link) => (
|
|
<li>
|
|
<a
|
|
href={link.url}
|
|
class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<!-- Right links -->
|
|
<div class="col-span-1 md:col-span-3">
|
|
<h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
|
|
Other
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
{FooterLinks.map((link) => (
|
|
<li>
|
|
<a
|
|
href={link.url}
|
|
class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<!-- Right image -->
|
|
<div class="flex justify-center col-span-4 mt-10 md:mt-0">
|
|
<div class="md:block max-h-115 max-w-55 -mt-10 scale-80 hidden">
|
|
<Image
|
|
src={footerImg}
|
|
alt={global.footer_image_alt}
|
|
class="h-full w-full object-cover object-center"
|
|
draggable="false"
|
|
loading="eager"
|
|
format="webp"
|
|
quality="low"
|
|
widths={[440]}
|
|
disableBlur={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom section -->
|
|
<div class="border-t border-divider pt-8 mt-12">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<p class="text-secondary text-sm">
|
|
© {currentYear} All rights reserved.
|
|
</p>
|
|
<div class="flex items-center">
|
|
<span class="text-secondary text-sm">
|
|
Weather provided by
|
|
</span>
|
|
<a
|
|
href="https://open-meteo.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
|
|
>
|
|
<span class="relative underline ml-1">
|
|
Open-Meteo.
|
|
</span>
|
|
</a>
|
|
<div class="ml-4"/>
|
|
<span class="text-secondary text-sm">
|
|
Built with
|
|
</span>
|
|
<a
|
|
href="https://astro.build"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
|
|
>
|
|
<span class="relative underline ml-1">
|
|
Astro.
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|