"use client"; import { useState, useEffect } from "react"; import styled, { keyframes } from "styled-components"; import { ny } from "@/lib/utils"; import { Checkbox } from "./ui/checkbox"; import { ChevronLeft } from "lucide-react"; import { Button } from "./ui/button"; import Particles from "./ui/particles"; import confetti from "canvas-confetti"; import { releases, releaseTree } from "@/lib/releases"; import { InfoCircledIcon } from "@radix-ui/react-icons"; import Link from "next/link"; const BASE_URL = "https://github.com/zen-browser/desktop/releases/latest/download"; import SparklesText from "./ui/sparkles-text"; const field_enter = keyframes` 0% { opacity: 0; transform: scale(0.9); filter: blur(10px); } 1% { max-height: 100%; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } `; const field_exit = keyframes` from { display: flex; opacity: 1; transform: scale(1); filter: blur(0); } 99% { opacity: 0; transform: scale(0.9); filter: blur(10px); } 100% { display: none; } `; const FormField = styled.div<{ enter: boolean; out: boolean }>` max-height: 0; flex-direction: column; margin-top: 3rem; opacity: 0; width: 100%; animation: 0.2s ease-in-out forwards ${({ enter, out }) => (enter ? field_enter : out ? field_exit : "")} !important; animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")}; `; const FieldTitle = styled.div` font-size: 1.35rem; font-weight: 500; `; const FieldDescription = styled.div` font-size: 1rem; color: #666; margin-bottom: 1rem; `; export default function DownloadPage() { const [platform, setPlatform] = useState(null); const [architecture, setArchitecture] = useState(null); const [windowsDownloadType, setWindowsDownloadType] = useState( null ); const [linuxDownloadType, setLinuxDownloadType] = useState( null ); const [selectedPlatform, setSelectedPlatform] = useState(""); const [selectedArchitecture, setSelectedArchitecture] = useState("specific"); const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] = useState("installer"); const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] = useState("portable"); const [hasDownloaded, setHasDownloaded] = useState(false); const [flowIndex, setFlowIndex] = useState(0); useEffect(() => { let userAgent: string = ""; if (typeof window !== "undefined") { userAgent = window.navigator.userAgent; } if (userAgent.includes("Win")) { setSelectedPlatform("Windows"); } if (userAgent.includes("Mac")) { setSelectedPlatform("MacOS"); } if (userAgent.includes("Linux")) { setSelectedPlatform("Linux"); } }, []); const throwConfetti = () => { const end = Date.now() + 3 * 1000; // 3 seconds const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"]; const frame = () => { if (Date.now() > end) return; confetti({ particleCount: 2, angle: 60, spread: 55, startVelocity: 60, origin: { x: 0, y: 0.5 }, colors, }); confetti({ particleCount: 2, angle: 120, spread: 55, startVelocity: 60, origin: { x: 1, y: 0.5 }, colors, }); requestAnimationFrame(frame); }; frame(); }; const startDownload = () => { let releaseTarget: string; if (selectedLinuxDownloadType === "flatpak") { window.open( "https://dl.flathub.org/repo/appstream/io.github.zen_browser.zen.flatpakref" ); releaseTarget = "flatpak"; } else { const platform = releaseTree[selectedPlatform.toLowerCase()]; let arch: string = selectedArchitecture; if (selectedPlatform === "MacOS") { releaseTarget = platform[arch]; } else { releaseTarget = platform[arch][ selectedPlatform === "Windows" ? (selectedWindowsDownloadType as string) : (selectedLinuxDownloadType as string) ]; } console.log("Downloading: "); console.log("platform: ", selectedPlatform); console.log("compat: ", arch); window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`); } setHasDownloaded(true); throwConfetti(); }; const continueFlow = () => { if (flowIndex === 0) setPlatform(selectedPlatform); if (flowIndex === 1) setArchitecture(selectedArchitecture); if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) { setWindowsDownloadType(selectedWindowsDownloadType); setLinuxDownloadType(selectedLinuxDownloadType); startDownload(); } setFlowIndex(flowIndex + 1); }; const goBackFlow = () => { if (flowIndex === 1) { setPlatform(null); } else if (flowIndex === 2) { setArchitecture(null); } else if (flowIndex === 3) { setWindowsDownloadType(null); setSelectedWindowsDownloadType("installer"); setLinuxDownloadType(null); setSelectedLinuxDownloadType("portable"); } if (flowIndex > 0) setFlowIndex(flowIndex - 1); }; const changeToFlatpak = () => { if (selectedArchitecture === "specific") { setSelectedLinuxDownloadType("flatpak"); } }; return ( <>
{(hasDownloaded && (

Downloaded! ❤️

Zen Browser has been downloaded successfully. Enjoy browsing the web with Zen!

{selectedPlatform === "MacOS" && (

Installation Instructions

To install Zen on MacOS, the process is a bit different. Please follow the instructions below:

)}
)) || ( <>

Download

We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.

)}
{platform === null && ( Platform Choose the platform you want to download Zen for.
setSelectedPlatform("Windows")} className={ny( "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", selectedPlatform === "Windows" ? "border-blue-400" : "" )} >
Windows
setSelectedPlatform("Linux")} className={ny( "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", selectedPlatform === "Linux" ? "border-yellow-400" : "" )} >
Linux
setSelectedPlatform("MacOS")} className={ny( "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border", selectedPlatform === "MacOS" ? "border-purple-400" : "" )} >
MacOS
)} {/* Architecture */} {(platform === "Windows" || platform === "Linux") && flowIndex === 1 && ( = 1 } > Select Architecture Choose the architecture of your device, either optimized or generic.
setSelectedArchitecture("specific")} className={ny( "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedArchitecture === "specific" ? "border-blue-400" : "" )} >

🚀

Optimized

Blazing fast and compatible with modern devices

setSelectedArchitecture("generic")} className={ny( "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedArchitecture === "generic" ? "border-blue-400" : "" )} >

👴

Generic

Slow but compatible with older devices.

)} {platform === "MacOS" && flowIndex === 1 && ( Download Zen for MacOS Click the button below to download Zen for MacOS.
setSelectedArchitecture("specific")} className={ny( "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedArchitecture === "specific" ? "border-blue-400" : "" )} >

🍏

AArch64

64-bit ARM architecture, for Apple's M Series Chips

setSelectedArchitecture("generic")} className={ny( "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedArchitecture === "generic" ? "border-blue-400" : "" )} >

x64

Intel

64-bit Intel architecture, for older Macs

)} {flowIndex === 2 && platform === "Windows" && ( = 2} > Download Zen for Windows {selectedArchitecture} Choose the type of download you want for Zen for Windows.
setSelectedWindowsDownloadType("installer")} className={ny( "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedWindowsDownloadType === "installer" ? "border-blue-400" : "" )} >

🚀

Installer

Install Zen with a setup wizard

setSelectedWindowsDownloadType("portable")} className={ny( "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedWindowsDownloadType === "portable" ? "border-blue-400" : "" )} >

📦

Portable

Download Zen as a ZIP file

)} {flowIndex === 2 && platform === "Linux" && ( = 2} > Download Zen for Linux {selectedArchitecture} Choose the type of download you want for Zen for Linux.
setSelectedLinuxDownloadType("appimage")} className={ny( "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedLinuxDownloadType === "appimage" ? "border-blue-400" : "" )} >

🚀

AppImage

Install Zen with a setup wizard

setSelectedLinuxDownloadType("portable")} className={ny( "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedLinuxDownloadType === "portable" ? "border-blue-400" : "" )} >

📦

Portable

Download Zen as a ZIP file

changeToFlatpak()} className={ny( "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border", selectedLinuxDownloadType === "flatpak" ? "border-blue-400" : "", selectedArchitecture === "generic" ? "opacity-50 cursor-not-allowed" : "" )} >

🧑‍💻

Flatpak

Install Zen from the Flatpak repository.

)}
{!hasDownloaded && (
)} {(platform === "Linux" || platform === "Windows") && flowIndex === 1 && (

Confused about which build to choose?{" "} System requirements .

)}
); }