mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
refactor(download): big improvement to the download page design
This commit is contained in:
parent
794d500606
commit
0c11177313
4 changed files with 640 additions and 482 deletions
45
src/components/download/ButtonCard.astro
Normal file
45
src/components/download/ButtonCard.astro
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
label: string
|
||||||
|
href: string
|
||||||
|
variant?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, href, variant } = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
class="group relative flex items-center justify-between rounded-2xl border border-subtle p-4 transition-colors duration-300 hover:border-coral hover:shadow-md"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-medium">{label}</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex items-center">
|
||||||
|
<span
|
||||||
|
class="release-type-tag mr-2 rounded-full bg-coral/10 px-2 py-1 text-xs font-medium text-coral"
|
||||||
|
>
|
||||||
|
Beta
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="text-muted-foreground rounded-xl border border-subtle p-2 transition-colors duration-300 group-hover:border-coral group-hover:text-coral"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-arrow-up-right"
|
||||||
|
>
|
||||||
|
<path d="M7 17 17 7"></path>
|
||||||
|
<path d="M7 7h10v10"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
50
src/components/download/release-data.astro
Normal file
50
src/components/download/release-data.astro
Normal file
|
@ -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`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
---
|
File diff suppressed because it is too large
Load diff
|
@ -5,8 +5,9 @@ export default {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
screens: {
|
screens: {
|
||||||
'-md': '@media (min-width: 768px)',
|
'-sm': '@media (max-width: 639px)',
|
||||||
'-lg': '@media (min-width: 1024px)',
|
'-md': '@media (max-width: 767px)',
|
||||||
|
'-lg': '@media (max-width: 1023px)',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
paper: 'var(--zen-paper)',
|
paper: 'var(--zen-paper)',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue