site-profile/src/components/Footer.astro

---
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-340">
      <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-10 max-w-10 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">
            &copy; {currentYear} All rights reserved.
          </p>

          <div class="flex items-center">
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              Weather provided by
            </p>
            <a
              href="https://open-meteo.com/"
              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"
            >
              <span class="relative ml-1">
                Open-Meteo.
              </span>
            </a>

            <div class="ml-4"></div>

            <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"
            >
              <span class="relative ml-1">
                Astro.
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>