mirror of
https://github.com/zen-browser/www
synced 2026-04-25 17:14:56 +02:00
227 lines
8.2 KiB
Plaintext
227 lines
8.2 KiB
Plaintext
---
|
|
import Description from '~/components/Description.astro'
|
|
import DownloadScript from '~/components/download/DownloadScript.astro'
|
|
import PlatformDownload from '~/components/download/PlatformDownload.astro'
|
|
import { getReleasesWithChecksums } from '~/components/download/release-data'
|
|
import Layout from '~/layouts/Layout.astro'
|
|
import { getChecksums } from '~/utils/githubChecksums'
|
|
import { getLocale, getUI } from '~/utils/i18n'
|
|
|
|
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
|
import { faApple, faGithub, faLinux, faWindows } from '@fortawesome/free-brands-svg-icons'
|
|
import ExternalLinkIcon from '~/icons/ExternalLink.astro'
|
|
import LockIcon from '~/icons/LockIcon.astro'
|
|
|
|
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 githubIcon = icon({ prefix: 'fab', iconName: 'github' })
|
|
|
|
const checksums = await getChecksums()
|
|
const releases = getReleasesWithChecksums(checksums)
|
|
|
|
const platformNames = download.platformNames
|
|
const platformDescriptions = download.platformDescriptions
|
|
---
|
|
|
|
<DownloadScript />
|
|
|
|
<Layout title={layout.download.title} description={layout.download.description}>
|
|
<main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
|
|
<div class="container relative mx-auto py-12">
|
|
<div class="mb-6 mt-12 flex flex-col gap-4">
|
|
<Description id="download-title" class="text-6xl font-bold">{download.title}</Description>
|
|
<Description class="max-w-xl text-pretty">
|
|
{download.description}
|
|
</Description>
|
|
<div
|
|
id="twilight-info"
|
|
class="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 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>
|
|
|
|
<!-- Platform selector -->
|
|
<div class="mb-6 flex">
|
|
<div
|
|
class="inline-flex rounded-3xl bg-[rgba(255,255,255,0.4)] p-2 shadow-md dark:bg-[rgba(0,0,0,0.3)] dark:shadow-sm"
|
|
>
|
|
<button
|
|
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
|
data-platform="mac"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<Fragment set:html={appleIcon.html} />
|
|
<span>{platformNames.mac}</span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
|
data-platform="windows"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<Fragment set:html={windowsIcon.html} />
|
|
<span>{platformNames.windows}</span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
|
data-platform="linux"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<Fragment set:html={linuxIcon.html} />
|
|
<span>{platformNames.linux}</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Cards -->
|
|
<div
|
|
class="relative mb-16 overflow-hidden rounded-3xl bg-[rgba(255,255,255,0.4)] p-8 shadow-xl md:p-10 dark:bg-[rgba(0,0,0,0.3)]"
|
|
>
|
|
<!-- MacOS Download -->
|
|
<PlatformDownload
|
|
platform="mac"
|
|
icon={appleIcon.html}
|
|
title={platformNames.macDownload}
|
|
description={platformDescriptions.mac}
|
|
releases={releases.macos}
|
|
/>
|
|
<!-- Windows Download -->
|
|
<PlatformDownload
|
|
platform="windows"
|
|
icon={windowsIcon.html}
|
|
title={platformNames.windowsDownload}
|
|
description={platformDescriptions.windows}
|
|
releases={releases.windows}
|
|
/>
|
|
|
|
<!-- Linux Download -->
|
|
<PlatformDownload
|
|
platform="linux"
|
|
icon={linuxIcon.html}
|
|
title={platformNames.linuxDownload}
|
|
description={platformDescriptions.linux}
|
|
releases={releases.linux}
|
|
/>
|
|
</div>
|
|
|
|
<!-- Additional resources -->
|
|
<section class="mb-16">
|
|
<h2 class="mb-4 text-3xl font-semibold">
|
|
{download.additionalResources.title}
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<a
|
|
href="https://github.com/zen-browser"
|
|
class="group rounded-2xl bg-[rgba(255,255,255,0.4)] p-6 transition-all duration-300 hover:shadow-lg dark:bg-[rgba(0,0,0,0.3)]"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h3 class="mb-2 text-xl font-medium">
|
|
{download.additionalResources.sourceCode.title}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{download.additionalResources.sourceCode.description}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="grid aspect-square h-12 w-12 place-items-center rounded-xl border border-subtle transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-10"
|
|
>
|
|
<div
|
|
class="text-muted-foreground transition-all duration-200 group-hover:text-coral"
|
|
>
|
|
<Fragment set:html={githubIcon.html} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="https://docs.zen-browser.app"
|
|
class="group rounded-2xl bg-[rgba(255,255,255,0.4)] p-6 transition-all duration-200 hover:shadow-lg dark:bg-[rgba(0,0,0,0.3)]"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h3 class="mb-2 text-xl font-medium">
|
|
{download.additionalResources.documentation.title}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{download.additionalResources.documentation.description}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="rounded-xl border border-subtle p-3 transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-20"
|
|
>
|
|
<ExternalLinkIcon
|
|
class="h-5 w-5 transition-all duration-200 group-hover:text-coral"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Security Notice -->
|
|
<div class="bg-opaicty-10 grid grid-cols-[auto,1fr] gap-4 rounded-2xl bg-subtle p-6">
|
|
<div class="h-fit rounded-xl bg-subtle p-3">
|
|
<LockIcon class="h-5 w-5" />
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="mb-2 text-lg font-medium">
|
|
{download.securityNotice.title}
|
|
</h3>
|
|
<p class="text-muted-foreground" set:html={download.securityNotice.description} />
|
|
</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>
|