diff --git a/src/components/download/ButtonCard.astro b/src/components/download/ButtonCard.astro new file mode 100644 index 0000000..3124af4 --- /dev/null +++ b/src/components/download/ButtonCard.astro @@ -0,0 +1,45 @@ +--- +interface Props { + label: string + href: string + variant?: string +} + +const { label, href, variant } = Astro.props +--- + + +
+

{label}

+
+
+ + Beta + +
+ + + + +
+
+
diff --git a/src/components/download/release-data.astro b/src/components/download/release-data.astro new file mode 100644 index 0000000..8b825cb --- /dev/null +++ b/src/components/download/release-data.astro @@ -0,0 +1,50 @@ +--- +import { releaseNotes, releaseNotesTwilight } from '../../release-notes' + +export const releases = { + macos: { + universal: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.macos.mar', + label: `Universal`, + }, + }, + windows: { + x86_64: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe', + label: `64-bit`, + }, + arm64: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe', + label: `ARM64`, + }, + }, + linux: { + x86_64: { + tarball: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.tar.gz', + label: `Tarball x86_64`, + }, + appImage: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.AppImage', + label: `AppImage x86_64`, + }, + }, + aarch64: { + tarball: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.tar.gz', + label: `Tarball aarch64`, + }, + appImage: { + link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage', + label: `AppImage aarch64`, + }, + }, + flathub: { + all: { + link: 'https://flathub.org/apps/app.zen_browser.zen', + label: `Flathub`, + }, + }, + }, +} +--- diff --git a/src/pages/download.astro b/src/pages/download.astro index 1f982a7..ba3baed 100644 --- a/src/pages/download.astro +++ b/src/pages/download.astro @@ -1,544 +1,606 @@ --- -import Button from '../components/Button.astro' import Description from '../components/Description.astro' import Title from '../components/Title.astro' import Layout from '../layouts/Layout.astro' -import { Image } from 'astro:assets' -import myImage from '../assets/app-icon.png' +import DownloadCard from '../components/download/ButtonCard.astro' +import { releases } from '../components/download/release-data.astro' import { library, icon } from '@fortawesome/fontawesome-svg-core' -import { faWindows, faLinux, faApple } from '@fortawesome/free-brands-svg-icons' -import { ArrowLeft, HardDriveDownload, Info } from 'lucide-astro' +import { + faWindows, + faLinux, + faApple, + faGithub, +} from '@fortawesome/free-brands-svg-icons' +import { Lock, Download as DownloadIcon, ExternalLink } from 'lucide-astro' -library.add(faWindows, faLinux, faApple) +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' }) --- - -
-
- Zen Browser -
+ +
+
+ + + +
+ + + Download Zen + + Start your journey to a more mindful internet experience with Zen + Browser. Choose your platform below to get started. + +
+ + +
+
+ + + +
+
+ + +
+ +
+
+ + +
+
+
+
+
+ +
+

macOS Download

+
+

+ Universal binary for Apple Silicon (M1/M2/M3) and Intel Macs.
+ Requires macOS 11.0 or later. +

+
+ { + Object.entries(releases.macos).map( + ([variant, releaseNote]) => ( + + ) + ) + } +
+
+
+
+
+ + + + + +
+
+
+ +
+
+
+
+
+
+ + + + + + + +
+ + +
+

+ Additional Resources +

+ + +
+ + +
+
+ +
+
- Try out <span id="zen-name">Zen</span>! - - Start browsing the web with Zen Browser today. Beautifully designed, - privacy-focused, and packed with features! - - -
-
-
-
- Before downloading, we need to know your system info! -
-
- Please select your operating system below, we already - auto-detected it for you! -
-
- - - - - - -
-
- - - - -
-
-
- -
+

Verified & Secure Downloads

+

+ All Zen Browser downloads are signed and verified for your security. + We recommend downloading directly from our official website or + GitHub repository. If your download seems broken or gets flagged by + your antivirus, please + report it to us. +

+ - document.getElementById('macos-select')?.addEventListener('click', () => { - downloadRelease('macos', 'universal') - }) - - document - .getElementById('linux-tar-download') - ?.addEventListener('click', () => { - downloadRelease('linux', selectedArch as string, 'tar') - }) - - document - .getElementById('linux-appimage-download') - ?.addEventListener('click', () => { - downloadRelease('linux', selectedArch as string, 'appImage') - }) - - if (!isTwilight) { - document - .getElementById('linux-flathub-download') - ?.addEventListener('click', () => { - window.open('https://flathub.org/apps/app.zen_browser.zen') - }) - } else { - document.getElementById('linux-flathub-download')?.classList.add('hidden') + + + diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 997066f..75ec5a1 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -5,8 +5,9 @@ export default { theme: { extend: { screens: { - '-md': '@media (min-width: 768px)', - '-lg': '@media (min-width: 1024px)', + '-sm': '@media (max-width: 639px)', + '-md': '@media (max-width: 767px)', + '-lg': '@media (max-width: 1023px)', }, colors: { paper: 'var(--zen-paper)',