Footer.astro

---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import Circles from '../components/Circles.astro'
import { ArrowRight } from 'lucide-astro'

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import {
  faMastodon,
  faBluesky,
  faGithub,
  faTwitter,
  faReddit,
} from '@fortawesome/free-brands-svg-icons'

library.add(faMastodon, faBluesky, faGithub, faTwitter, faReddit)
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
const Github = icon({ prefix: 'fab', iconName: 'github' })
const Twitter = icon({ prefix: 'fab', iconName: 'twitter' })
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
---

<footer
  id="footer"
  class="relative flex w-full flex-col gap-24 overflow-hidden border-t border-dark bg-dark px-4 py-12 !pb-0 text-paper md:gap-[15%] lg:p-24"
>
  <div class="flex w-full flex-col items-center justify-between lg:flex-row">
    <div>
      <Title class="!text-paper">Zen Browser</Title>
      <Description class="px-4 lg:w-2/5 lg:px-0">
        Beautifully designed, privacy-focused, and packed with features. We care
        about your experience, not your data.
      </Description>
    </div>
  </div>
  <div
    class="flex w-full flex-col justify-between gap-6 lg:my-12 lg:flex-row lg:pr-52"
  >
    <Button href="/download" isPrimary class="h-fit w-fit bg-paper !text-dark">
      Download
      <ArrowRight class="size-4" />
    </Button>
    <div class="flex flex-col gap-10">
      <div class="flex flex-col gap-2">
        <Description class="!font-semibold"> Follow Us </Description>
        <ul class="flex items-center gap-4 opacity-80">
          <li>
            <a
              href="https://github.com/zen-browser"
              target="_blank"
              class="font-bold"
              aria-label="Visit Zen Browser on GitHub"
            >
              <Fragment set:html={Github.html} />
            </a>
          </li>
          <li>
            <a
              href="https://twitter.com/zen_browser"
              target="_blank"
              class="font-normal"
              aria-label="Visit Zen Browser on Twitter"
            >
              <Fragment set:html={Twitter.html} />
            </a>
          </li>
          <li>
            <a
              href="https://fosstodon.org/@zenbrowser"
              target="_blank"
              class="font-normal"
              aria-label="Visit Zen Browser on Mastodon"
            >
              <Fragment set:html={Mastodon.html} />
            </a>
          </li>
          <li>
            <a
              href="https://bsky.app/profile/zen-browser.app"
              target="_blank"
              class="font-normal"
              aria-label="Visit Zen Browser on Bluesky"
            >
              <Fragment set:html={Bluesky.html} />
            </a>
          </li>
          <li>
            <a
              href="https://www.reddit.com/r/zen_browser"
              target="_blank"
              class="font-normal"
              aria-label="Visit Zen Browser on Reddit"
            >
              <Fragment set:html={Reddit.html} />
            </a>
          </li>
        </ul>
      </div>
      <div class="flex flex-col gap-2">
        <Description class="!font-semibold"> About Us </Description>
        <ul class="flex flex-col opacity-80">
          <li><a href="/about" class="font-normal">About Us</a></li>
          <li>
            <a href="/privacy-policy" class="font-normal">Privacy Policy</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <Description class="!font-semibold"> Get Started </Description>
      <ul class="flex flex-col opacity-80">
        <li><a href="/download" class="font-normal">Download</a></li>
        <li><a href="/mods" class="font-normal">Zen Mods</a></li>
        <li><a href="/release-notes" class="font-normal">Release Notes</a></li>
        <li><a href="/download?twilight" class="font-normal">Twilight</a></li>
      </ul>
    </div>
    <div class="flex flex-col gap-2">
      <Description class="!font-semibold"> Get Help </Description>
      <ul class="flex flex-col opacity-80">
        <li>
          <a href="https://discord.gg/zen-browser" class="font-normal"
            >Discord</a
          >
        </li>
        <li>
          <div class="flex items-center">
            <div class="absolute">
              <img
                src="https://uptime.zen-browser.app/embed-badges/pulse?"
                loading="lazy"
                alt="Phare badge"
                class="relative right-5 h-5 w-5 lg:right-6"
              />
            </div>
            <a href="https://uptime.zen-browser.app/" class="font-normal"
              >Uptime Status</a
            >
          </div>
        </li>
        <li>
          <a
            href="https://github.com/zen-browser/desktop/issues/new/choose"
            class="font-normal">Report an Issue</a
          >
        </li>
        <li>
          <a href="mailto:hello@zen-browser.app" class="font-normal"
            >hello@zen-browser.app</a
          >
        </li>
      </ul>
    </div>
  </div>
  <div class="flex h-32 w-full items-center">
    <span class="flex">
      Made with ❤️ by the <a href="/about" class="ml-2 inline-block font-bold"
        >Zen Browser Team</a
      >
    </span>
    <Circles
      white
      multiplier={0.7}
      class="mb-[-100px] ml-auto mr-[-80px] hidden lg:block"
    />
  </div>
</footer>