145 lines
6.2 KiB
Plaintext
145 lines
6.2 KiB
Plaintext
---
|
|
import { readSingleton } from '@directus/sdk';
|
|
|
|
import directus from '@lib/directus';
|
|
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
|
|
import Image from '@components/ui/images/Image.astro';
|
|
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="w-full overflow-hidden bg-stone-300/40 dark:bg-stone-800/20"
|
|
transition:animate="none"
|
|
>
|
|
<div class="relative px-4 pt-16 pb-12 sm:px-6">
|
|
<div class="mx-auto max-w-[85rem]">
|
|
<div class="grid grid-cols-1 gap-10 md:grid-cols-12">
|
|
<!-- 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 rounded-lg">
|
|
<BrandLogo class="max-h-[40px] max-w-[40px] rounded-full" />
|
|
</div>
|
|
|
|
<span class="ml-3 text-xl font-bold text-neutral-800 dark:text-neutral-200">
|
|
{global.name}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<p class="mt-4 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
|
|
{global.about}
|
|
</p>
|
|
</div>
|
|
<!-- Left links -->
|
|
<div class="col-span-1 md:col-span-2">
|
|
<h3
|
|
class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
|
|
>
|
|
Blog
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
{
|
|
NavigationLinks.map((link) => (
|
|
<li>
|
|
<a
|
|
href={link.url}
|
|
class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
|
|
>
|
|
<span class="relative inline-block overflow-hidden">
|
|
<span class="relative z-10">{link.name}</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<!-- Right links -->
|
|
<div class="col-span-1 md:col-span-3">
|
|
<h3
|
|
class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
|
|
>
|
|
Other
|
|
</h3>
|
|
<ul class="mt-4 space-y-3">
|
|
{
|
|
FooterLinks.map((link) => (
|
|
<li>
|
|
<a
|
|
href={link.url}
|
|
class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
|
|
>
|
|
<span class="relative inline-block overflow-hidden">
|
|
<span class="relative z-10">{link.name}</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<!-- Right image -->
|
|
<div class="col-span-3 mt-10 flex justify-center md:mt-0">
|
|
<div class="-mt-10 hidden max-h-[460px] max-w-[220px] scale-80 md:block">
|
|
<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="mt-12 border-t border-neutral-400/30 pt-8 dark:border-neutral-600/50">
|
|
<div class="flex flex-col items-center justify-between gap-4 md:flex-row">
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
|
© {currentYear} All rights reserved.
|
|
</p>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span>
|
|
<a
|
|
href="https://astro.build"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
|
|
>
|
|
<svg class="mr-1 h-4 w-4 text-[#FF5D01]" viewBox="0 0 36 36" fill="none">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
|
|
fill="currentColor"></path>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
<span class="relative">
|
|
Astro
|
|
<span
|
|
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
|
|
>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|