www/src/pages/[...locale]/download.astro

---
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faApple, faGithub, faLinux, faWindows } from '@fortawesome/free-brands-svg-icons'
import Image from 'astro/components/Image.astro'
import AppIconDark from '~/assets/app-icon-dark.png'
import AppIconLight from '~/assets/app-icon-light.png'
import Description from '~/components/Description.astro'
import DownloadScript from '~/components/download/DownloadScript.astro'
import PlatformDownload from '~/components/download/PlatformDownload.astro'
import { getReleases } from '~/components/download/release-data'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'

export { getStaticPaths } from '~/utils/i18n'

const locale = getLocale(Astro)
const {
  routes: { download },
  layout,
} = getUI(locale)

library.add(faWindows, faLinux, faApple, faGithub)
const windowsIcon = icon({ prefix: 'fab', iconName: 'windows' })
const linuxIcon = icon({ prefix: 'fab', iconName: 'linux' })
const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })

const releases = getReleases(locale)

const platformDescriptions = download.platformDescriptions
---

<DownloadScript />

<Layout title={layout.download.title} description={layout.download.description}>
  <main class="mt-48 flex flex-col px-6 data-[os='windows']:bg-zen-blue">
    <div class="container relative mx-auto pb-48">
      <div class="mb-6 flex flex-col gap-4">
        <div class="download-browser-logo mx-auto">
          <Image
            src={AppIconDark}
            alt="Zen Browser"
            class="w-32 translate-y-3 transform dark:hidden"
          />
          <Image
            src={AppIconLight}
            alt="Zen Browser"
            class="hidden w-32 translate-y-3 transform dark:block"
          />
        </div>
        <Description id="download-title" class="mx-auto max-w-3xl text-center text-6xl font-bold"
          >{download.title}</Description
        >
        <Description class="mx-auto text-pretty text-center">
          <Fragment set:html={download.description} />
        </Description>
        <div
          id="twilight-info"
          class="mx-auto hidden max-w-xl items-center justify-center gap-3 text-pretty rounded-xl border border-zen-blue/20 bg-zen-blue/5 p-4 text-left text-center data-[twilight='true']:flex"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="mt-0.5 h-5 w-5 flex-shrink-0 text-zen-blue"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <Description set:html={download.alertInfo.description} />
        </div>
      </div>

      <!-- Download Cards -->
      <div class="relative overflow-hidden">
        <!-- MacOS Download -->
        <PlatformDownload
          platform="mac"
          icon={appleIcon.html}
          description={platformDescriptions.mac}
          releases={releases.macos}
          cpu="x86_64"
        />

        <PlatformDownload
          platform="mac"
          icon={appleIcon.html}
          description={platformDescriptions.mac}
          releases={releases.macos}
          cpu="arm64"
        />

        <!-- Windows Download -->
        <PlatformDownload
          platform="windows"
          icon={windowsIcon.html}
          description={platformDescriptions.windows}
          releases={releases.windows}
          cpu="x86_64"
        />

        <PlatformDownload
          platform="windows"
          icon={windowsIcon.html}
          description={platformDescriptions.windows}
          releases={releases.windows}
          cpu="arm64"
        />

        <!-- Linux Download -->
        <PlatformDownload
          platform="linux"
          icon={linuxIcon.html}
          description={platformDescriptions.linux}
          releases={releases.linux}
          cpu="x86_64"
        />

        <PlatformDownload
          platform="linux"
          icon={linuxIcon.html}
          description={platformDescriptions.linux}
          releases={releases.linux}
          cpu="aarch64"
        />
      </div>

      <div class="mt-20 flex flex-col items-center justify-center gap-2 text-center">
        <div class="flex cursor-default items-center justify-center gap-3 text-sm font-bold">
          {download.beta}
          <span
            class="leading-20 caption inline-block flex h-6 items-center rounded-md border border-dark px-2 text-xs"
            >BETA</span
          >
        </div>
        <div
          class="max-w-[55ch] cursor-default text-balance text-sm font-normal text-black/50 dark:text-white/50"
        >
          <Fragment set:html={download.otherDownload} />
        </div>
      </div>
    </div>
  </main>
</Layout>

<style is:global>
  /* Download card icon */
  .download-card__icon {
    @apply flex h-10 w-10 items-center justify-center rounded-full bg-subtle p-2 text-coral data-[twilight='true']:text-zen-blue;
  }

  /* Make FontAwesome icons match size */
  .download-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
</style>

<style is:global>
  .os-icon svg {
    height: 3rem;
    width: 3rem;
  }
</style>