feat: update styles and components for theme support; add FontAwesome icons

package-lock.json

@@ -11,6 +11,9 @@
         "@astrojs/check": "^0.9.4",
         "@astrojs/tailwind": "^5.1.2",
         "@fontsource/bricolage-grotesque": "^5.1.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.1",
+        "@fortawesome/free-brands-svg-icons": "^6.7.1",
+        "@fortawesome/free-solid-svg-icons": "^6.7.1",
         "astro": "^4.16.13",
         "astro-navbar": "^2.3.7",
         "autoprefixer": "10.4.14",
@@ -929,6 +932,47 @@
       "integrity": "sha512-kdZyXbftmi09GjewApG5z7KVbcz5ZXNvFUguKodNtOe34j9F3Hp7dWjcZNqMt/o4BtBKZBBLM4MjAVE+DrQpng==",
       "license": "OFL-1.1"
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz",
+      "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz",
+      "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-nJR76eqPzCnMyhbiGf6X0aclDirZriTPRcFm1YFvuupyJOGwlNF022w3YBqu+yrHRhnKRpzFX+8wJKqiIjWZkA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",

package.json

@@ -13,6 +13,9 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/tailwind": "^5.1.2",
     "@fontsource/bricolage-grotesque": "^5.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "astro": "^4.16.13",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",

src/components/Button.astro

@@ -1,18 +1,23 @@
 ---
-const { class: className, isPrimary, isBordered, href } = Astro.props;
+const { class: className, isPrimary, isBordered, href, id } = Astro.props;
 ---
 
 {href ? (
-  <a href={href} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
+  <a id={id} href={href} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
     <slot />
   </a>
 ) : (
-  <button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
+  <button id={id} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
     <slot />
   </button>
 )}
 <style>
-  button {
+  button, a {
     font-size: .9rem;
+  
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: .5;
+    }
   }
 </style>

src/components/Circles.astro

@@ -6,7 +6,7 @@ const borderWidths = [20, 30, 40, 50]
 <div id="circles" class:list={["inset-0 overflow-hidden pointer-events-none", classList]}>
   <div class="mx-auto opacity-10 lg:opacity-100">
     {[...Array(4)].map((_, i) => (
-      <div class:list={["absolute rounded-full -translate-x-1/2 -translate-y-1/2", white ? "border-white" : "border-coral"]}
+      <div class:list={["absolute rounded-full -translate-x-1/2 -translate-y-1/2", white ? "border-paper" : "border-coral"]}
        style={{
           width: `${multiplier*sizes[i]}px`,
           height: `${multiplier*sizes[i]}px`,

src/components/Footer.astro

@@ -6,18 +6,24 @@ import Circles from '../components/Circles.astro'
 import { Image } from 'astro:assets'
 import myImage from '../assets/browser.png'
 import { ArrowRight, Github, Twitter } from 'lucide-astro'
+import { ThemeSwitch } from 'free-astro-components'
 ---
 
 <footer
   id="footer"
   class="flex flex-col w-full p-4 lg:p-24 !pb-0 gap-24 md:gap-[15%] bg-dark text-paper border-t border-dark relative overflow-hidden"
 >
-  <div>
-    <Title class="!text-paper">Zen Browser</Title>
-    <Description class="w-1/3">
-      Beautifully designed, privacy-focused, and packed with features. We care
-      about your experience, not your data.
-    </Description>
+  <div class="w-full flex justify-between items-center flex-col lg:flex-row">
+    <div>
+      <Title class="!text-paper">Zen Browser</Title>
+      <Description class="px-4 lg:px-0 lg:w-2/5">
+        Beautifully designed, privacy-focused, and packed with features. We care
+        about your experience, not your data.
+      </Description>
+    </div>
+    <div id="theme-switcher">
+      <ThemeSwitch label="Toggle theme" class="!text-dark" />
+    </div>
   </div>
   <div class="flex flex-col justify-between w-full lg:flex-row gap-6 lg:pr-52 my-12">
     <Button href="/download" isPrimary class="h-fit bg-paper !text-dark">
@@ -45,7 +51,6 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
         <div class="opacity-80 flex flex-col">
           <a href="/about" class="font-normal">About Us</a>
           <a href="/privacy-policy" class="font-normal">Privacy Policy</a>
-          <a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal">Report an Issue</a>
         </div>
       </div>
     </div>
@@ -67,6 +72,7 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
       <div class="opacity-80 flex flex-col">
         <a href="https://discord.gg/zen-browser" class="font-normal">Discord</a>
         <a href="https://uptime.zen-browser.app/" class="font-normal">Uptime Status</a>
+        <a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal">Report an Issue</a>
       </div>
     </div>
   </div>
@@ -77,3 +83,8 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
     <Circles white multiplier={0.7} class="ml-auto mb-[-100px] mr-[-80px] hidden lg:block" />
   </div>  
 </footer>
+<style is:global>
+  #theme-switcher * {
+    @apply !text-paper;
+  }
+</style>

src/components/NavBar.astro

@@ -12,7 +12,7 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
   class="fixed flex justify-between w-full items-center pt-6 px-6 z-10 top-0 left-0"
 >
   <Astronav>
-    <MenuItems class="rounded-full border-dark border-2 p-2 pl-4 backdrop-blur-xl bg-paper/80 hidden mx-auto lg:flex gap-12">
+    <MenuItems class="rounded-full border-dark border-2 p-2 pl-4 backdrop-blur-2xl bg-paper/80 dark:bg-paper dark:shadow-md hidden mx-auto lg:flex gap-12">
       <a class="font-bold text-lg items-center flex" href="/">
         zen browser
       </a>
@@ -115,7 +115,7 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
       @apply flex gap-2 p-4 flex-col rounded-lg select-none cursor-pointer transition-colors duration-200;
 
       &:hover {
-        @apply bg-dark/10;
+        @apply bg-muted;
       }
 
       & .dropdown-title {

src/components/ReleaseNoteItem.astro

@@ -11,7 +11,7 @@ const date = new Date(Date.parse(`${year}-${month}-${day}`));
 ---
 
 <section
-	class="relative mt-24 flex flex-col border-t pt-24 lg:flex-row"
+	class="relative mt-24 flex flex-col border-t border-dark/30 pt-24 lg:flex-row"
 	id={props.version}
 	>
 	<div class="mb-0 hidden lg:block ml-5 md:ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground">
@@ -92,7 +92,7 @@ const date = new Date(Date.parse(`${year}-${month}-${day}`));
 		@apply !text-dark;
 
 		&:hover {
-			@apply !text-dark/70;
+			opactiy: 0.8 !important;
 		}
 	}
 
@@ -100,7 +100,7 @@ const date = new Date(Date.parse(`${year}-${month}-${day}`));
 		transition: height 0.2s ease-in-out !important;
 
 		& li {
-			@apply !text-dark/70;
+			opacity: .5;
 		}
 	}
 </style>

src/layouts/Layout.astro

@@ -10,7 +10,7 @@ import Footer from "../components/Footer.astro";
 ---
 
 <!doctype html>
-<html lang="en" data-theme="light">
+<html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<!-- no bot here for now -->
@@ -52,6 +52,18 @@ import Footer from "../components/Footer.astro";
     src: url('/fonts/JunicodeVF-Italic.woff2') format('woff2');
   }
 
+	:root {
+		--zen-paper: #F2F0E3;
+		--zen-dark: #202020;
+		--zen-muted: rgba(0, 0, 0, 0.05);
+
+		&[data-theme='dark'] {
+			--zen-paper: #202020;
+			--zen-dark: #F2F0E3;
+			--zen-muted: rgba(255, 255, 255, 0.05);
+		}
+	}
+
 	* {
 		margin: 0;
 		padding: 0;
@@ -71,3 +83,13 @@ import Footer from "../components/Footer.astro";
     font-variation-settings: "wdth" 100;
 	}
 </style>
+<style is:global>
+  /* Declare a custom CSS class to make the icon look right */
+  .svg-inline--fa {
+    overflow: visible;
+    box-sizing: content-box;
+    display: inline-block;
+    height: 1em;
+    vertical-align: -0.125em;
+  }
+</style>

src/pages/download.astro

@@ -5,20 +5,406 @@ 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 { library, icon } from "@fortawesome/fontawesome-svg-core";
+import { faWindows, faLinux, faApple } from "@fortawesome/free-brands-svg-icons";
+import { ArrowLeft, ArrowRight, HardDriveDownload, Info } from 'lucide-astro';
+
+library.add(faWindows, faLinux, faApple);
+const windowsIcon = icon({ prefix: "fab", iconName: "windows" });
+const linuxIcon = icon({ prefix: "fab", iconName: "linux" });
+const appleIcon = icon({ prefix: "fab", iconName: "apple" });
 ---
 
 <Layout title="Welcome to Zen">
   <main class="h-screen flex flex-col justify-center items-center">
-    <div class="flex">
-      <Image src={myImage } alt="Zen Browser" class="w-24 h-24" />
-      <div class="p-4 mb-24 lg:w-1/2">
-        <Title>Try out Zen!</Title>
-        <Description>
-          Start browsing the web with Zen Browser today. Beautifully designed,
-          privacy-focused, and packed with features!
-        </Description>
+    <div class="flex justify-center flex-col px-2 md:px-12 lg:px-0 lg:flex-row xl:justify-start">
+      <Image src={myImage} alt="Zen Browser" class="w-24 h-24" />
+      <div class="p-4 mb-24 lg:w-1/2 flex flex-col gap-12 ">
+        <div>
+          <Title>Try out Zen!</Title>
+          <Description>
+            Start browsing the web with Zen Browser today. Beautifully designed,
+            privacy-focused, and packed with features!
+          </Description>
+        </div>
+        <div id="download-form">
+          <div id="form-os-select" class="form-item">
+            <div class="form-title">
+              Before downloading, we need to your system info!
+            </div>
+            <div class="form-description">
+              Please select your operating system below, we already auto-detected
+              it for you!
+            </div>
+            <form class="flex flex-col gap-2" id="os-select">
+              <input type="radio" name="os" value="windows" id="os-select-windows" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="os-select-windows">
+                <Fragment set:html={windowsIcon.html} />
+                <div>Windows</div>
+              </label>
+              <input type="radio" name="os" value="linux" id="os-select-linux" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="os-select-linux">
+                <Fragment set:html={linuxIcon.html} />
+                <div>Linux</div>
+              </label>
+              <input type="radio" name="os" value="macos" id="os-select-macos" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="os-select-macos">
+                <Fragment set:html={appleIcon.html} />
+                <div>MacOS</div>
+              </label>
+            </form>
+          </div>
+          <div id="form-macos-download" class="form-item hidden">
+            <div class="form-title">
+              Download Zen for MacOS!
+            </div>
+            <div class="form-description">
+              You can choose between the Intel or ARM version of Zen Browser, select
+              the one that fits your system.
+            </div>
+            <div class="flex flex-col gap-4">
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="macos-arm-download">
+                Download ARM Version
+                <HardDriveDownload class="size-4" />
+              </div>
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="macos-intel-download">
+                Download Intel Version
+                <HardDriveDownload class="size-4" />
+              </div>
+            </div>
+          </div>
+          <div id="linux-target-download" class="form-item hidden">
+            <div class="form-title">
+              Choose your Linux target system
+            </div>
+            <div class="form-description">
+              We have a few options for Linux, please select the one that fits your
+              system.
+            </div>
+            <form class="flex flex-col gap-2">
+              <input type="radio" name="linux-target" value="optimized" id="linux-target-optimized" class="hidden" checked/>
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="linux-target-optimized">
+                <div>Optimized</div>
+              </label>
+              <input type="radio" name="linux-target" value="generic" id="linux-target-generic" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="linux-target-generic">
+                <div>Generic</div>
+              </label>
+              <input type="radio" name="linux-target" value="aarch64" id="linux-target-aarch64" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="linux-target-aarch64">
+                <div>ARM64</div>
+              </label>
+            </form>
+            <div class="italic ml-2 flex gap-4 items-center mt-4">
+              <Info class="size-6" />
+              <div class="text-sm">
+                <strong class="text-sm">Stuck?</strong> If you're not sure which one to choose, please refer to the <a class="text-sm underline font-bold" href="https://docs.zen-browser.app/guides/generic-optimized" target="_blank" class="text-primary">documentation</a>.
+              </div>
+            </div>
+          </div>
+          <div id="form-linux-download" class="form-item hidden">
+            <div class="form-title">
+              Download Zen for Linux!
+            </div>
+            <div class="form-description">
+              You can choose between different download formats for Linux, select
+              the one that fits you best.
+            </div>
+            <div class="flex flex-col gap-4">
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="linux-tar-download">
+                Download Tarball
+                <HardDriveDownload class="size-4" />
+              </div>
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="linux-appimage-download">
+                Download AppImage
+                <HardDriveDownload class="size-4" />
+              </div>
+            </div>
+          </div>
+          <div id="windows-target-download" class="form-item hidden">
+            <div class="form-title">
+              Choose your Windows target system
+            </div>
+            <div class="form-description">
+              We have a few options for Windows, please select the one that fits your
+              system.
+            </div>
+            <form class="flex flex-col gap-2">
+              <input type="radio" name="windows-target" value="optimized" id="windows-target-optimized" class="hidden" checked/>
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="windows-target-optimized">
+                <div>Optimized</div>
+              </label>
+              <input type="radio" name="windows-target" value="generic" id="windows-target-generic" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="windows-target-generic">
+                <div>Generic</div>
+              </label>
+              <input type="radio" name="windows-target" value="aarch64" id="windows-target-aarch64" class="hidden" />
+              <label class="flex border-2 rounded-md p-2 w-full border-dark gap-2 px-4 items-center cursor-pointer" for="windows-target-aarch64">
+                <div>ARM64</div>
+              </label>
+            </form>
+            <div class="italic ml-2 flex gap-4 items-center mt-4">
+              <Info class="size-6" />
+              <div class="text-sm">
+                <strong class="text-sm">Stuck?</strong> If you're not sure which one to choose, please refer to the <a class="text-sm underline font-bold" href="https://docs.zen-browser.app/guides/generic-optimized" target="_blank" class="text-primary">documentation</a>.
+              </div>
+            </div>
+          </div>
+          <div id="windows-download" class="form-item hidden">
+            <div class="form-title">
+              Download Zen for Windows!
+            </div>
+            <div class="form-description">
+              You can choose between different download formats for Windows, select
+              the one that fits you best.
+            </div>
+            <div class="flex flex-col gap-4">
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="windows-installer-download">
+                Download Installer
+                <HardDriveDownload class="size-4" />
+              </div>
+              <div class="border-2 p-2 px-4 border-dark text-dark rounded-md shadow-sm flex items-center cursor-pointer justify-between hover:bg-dark hover:text-paper transition-all duration-100" id="windows-zip-download">
+                Download Zip
+                <HardDriveDownload class="size-4" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex w-full items-center justify-end">
+          <Button isPrimary id="next-button">
+            Continue
+            <ArrowRight class="size-4" />
+          </Button>
+        </div>
       </div>
     </div>
-    
   </main>
 </Layout>
+<script>
+  const releases = {
+    macos: {
+      intel: "macos-x86_64.dmg",
+      arm: "macos-aarch64.dmg",
+    },
+    linux: {
+      optimized: {
+        tar: "zen.linux-specific.tar.bz2",
+        appImage: "zen-specific.AppImage",
+      },
+      generic: {
+        tar: "zen.linux-generic.tar.bz2",
+        appImage: "zen-generic.AppImage",
+      },
+      aarch64: {
+        tar: "zen.linux-aarch64.tar.bz2",
+        appImage: "zen-aarch64.AppImage",
+      },
+    },
+    windows: {
+      optimized: {
+        installer: "zen.installer.exe",
+        zip: "zen.win-specific.zip",
+      },
+      generic: {
+        installer: "zen.installer-generic.exe",
+        zip: "zen.win-generic.zip",
+      },
+      arm: {
+        installer: "zen.installer-arm64.exe",
+        zip: "zen.win-arm64.zip",
+      },
+    },
+  } as any;
+
+  const BASE_URL =
+    "https://github.com/zen-browser/desktop/releases/latest/download";
+  const TWILIGHT_BASE_URL =
+    "https://github.com/zen-browser/desktop/releases/download/twilight";
+
+  var selectedOS: string | null = null;
+  var isTwilight: boolean = false;
+
+  var selectedArch: string | null = null;
+
+  function hideNextButton() {
+    const nextButton = document.getElementById("next-button") as HTMLButtonElement;
+    nextButton.classList.add("hidden");
+  }
+
+  function showThanksPage() {
+    hideNextButton();
+  }
+
+  function downloadRelease(os: string, arch: string, format: string = "") {
+    let releaseName = releases[os][arch];
+    if (os !== "macos") {
+      releaseName = releases[os][arch][format];
+    }
+    const url = `${isTwilight ? TWILIGHT_BASE_URL : BASE_URL}/${releaseName}`;
+    window.location.replace(url);
+
+    hideNextButton();
+  }
+
+  function goNextForm() {
+    if (selectedOS === null) {
+      const osSelect = document.getElementById("os-select") as HTMLFormElement;
+      const selectedRadio = osSelect.querySelector("input[type='radio']:checked") as HTMLInputElement;
+      selectedOS = selectedRadio.value;
+      document.getElementById("form-os-select")?.classList.add("hidden");
+      console.log(selectedOS);
+
+      if (selectedOS === "macos") {
+        const macosDownload = document.getElementById("form-macos-download") as HTMLDivElement;
+        macosDownload.classList.remove("hidden");
+        hideNextButton();
+      } else if (selectedOS === "linux") {
+        const linuxDownload = document.getElementById("linux-target-download") as HTMLDivElement;
+        linuxDownload.classList.remove("hidden");
+      } else if (selectedOS === "windows") {
+        const windowsDownload = document.getElementById("windows-target-download") as HTMLDivElement;
+        windowsDownload.classList.remove("hidden");
+      }
+    } else if (selectedOS === "linux" && selectedArch === null) {
+      const linuxTargetSelect = document.getElementById("linux-target-download") as HTMLFormElement;
+      const selectedRadio = linuxTargetSelect.querySelector("input[type='radio']:checked") as HTMLInputElement;
+      selectedArch = selectedRadio.value;
+      document.getElementById("linux-target-download")?.classList.add("hidden");
+
+      const linuxDownload = document.getElementById("form-linux-download") as HTMLDivElement;
+      linuxDownload.classList.remove("hidden");
+
+      hideNextButton();
+    } else if (selectedOS === "windows" && selectedArch === null) {
+      const windowsTargetSelect = document.getElementById("windows-target-download") as HTMLFormElement;
+      const selectedRadio = windowsTargetSelect.querySelector("input[type='radio']:checked") as HTMLInputElement;
+      selectedArch = selectedRadio.value;
+      document.getElementById("windows-target-download")?.classList.add("hidden");
+
+      const windowsDownload = document.getElementById("windows-download") as HTMLDivElement;
+      windowsDownload.classList.remove("hidden");
+
+      hideNextButton();
+    } else {
+      throw new Error("Unknown state");
+    }
+  }
+
+  function filloutDefaultOS() {
+    const osSelect = document.getElementById("os-select") as HTMLFormElement;
+    const osSelectWindows = document.getElementById("os-select-windows") as HTMLInputElement;
+    const osSelectLinux = document.getElementById("os-select-linux") as HTMLInputElement;
+    const osSelectMacOS = document.getElementById("os-select-macos") as HTMLInputElement;
+
+    if (navigator.platform.includes("Win")) {
+      osSelectWindows.checked = true;
+    } else if (navigator.platform.includes("Linux")) {
+      osSelectLinux.checked = true;
+    } else if (navigator.platform.includes("Mac")) {
+      osSelectMacOS.checked = true;
+    }
+  }
+
+  function getIfTwilight() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const twilight = urlParams.get("twilight");
+    if (twilight === "true") {
+      isTwilight = true;
+    }
+  }
+
+  window.addEventListener("DOMContentLoaded", () => {
+    getIfTwilight();
+
+    document.getElementById("next-button")?.addEventListener("click", () => {
+      console.log("Next button clicked");
+      goNextForm();
+    });
+
+    document.getElementById("macos-arm-download")?.addEventListener("click", () => {
+      downloadRelease("macos", "arm");
+    });
+
+    document.getElementById("macos-intel-download")?.addEventListener("click", () => {
+      downloadRelease("macos", "intel");
+    });
+
+    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");
+    });
+
+    document.getElementById("windows-installer-download")?.addEventListener("click", () => {
+      downloadRelease("windows", selectedArch as string, "installer");
+    });
+
+    document.getElementById("windows-zip-download")?.addEventListener("click", () => {
+      downloadRelease("windows", selectedArch as string, "zip");
+    });
+
+    filloutDefaultOS();
+  });
+</script>
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  #download-form {
+
+  }
+
+  .form-item {
+    @apply select-none;
+    opacity: 0;
+
+    animation: fadeIn 0.2s forwards;
+
+    &:nth-child(1) {
+      animation-delay: 0.1s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+
+  .form-title {
+    @apply font-bold mb-1;
+  }
+
+  .form-description {
+    @apply opacity-50 text-sm mb-4;
+  }
+
+  form {
+    & > label {
+      @apply cursor-pointer transition-transform duration-200;
+    
+      &:hover {
+        @apply bg-muted;
+      }
+
+      input[type="radio"]:checked + & {
+        transform: translateX(5px);
+        @apply bg-dark text-paper;
+      }
+    }
+  }
+</style>

src/pages/mods/index.astro

@@ -1,6 +1,5 @@
 ---
 import Description from '../../components/Description.astro';
-import ModsSearch from '../../components/ModsSearch.astro';
 import Title from '../../components/Title.astro';
 import Layout from '../../layouts/Layout.astro';
 import { getAllMods, type ZenTheme } from '../../mods';

src/pages/privacy-policy.astro

@@ -0,0 +1,74 @@
+---
+import Title from "../components/Title.astro";
+import Layout from "../layouts/Layout.astro";
+
+---
+
+<Layout title="Privacy Policy - Zen">
+  <main class="w-1/2 mx-auto mt-52 pb-24">
+    <Title id="privacy-policy">Privacy Policy</Title>
+    <div class="ml-4 font-bold">
+      Last updated: 2024-08-12
+    </div>
+    <Title class="!text-3xl font-bold mt-4" id="introduction">Introduction</Title>
+    <p>Welcome to Zen Browser! Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen Browser.</p>
+    <div class="my-12 mx-12 flex gap-4 font-bold">
+      We don't sell data - We don't collect data - We don't track you
+    </div>
+    <Title class="!text-3xl font-bold mt-4" id="1-information-we-do-not-collect">1. Information We Do Not Collect</Title>
+    <p>Zen Browser is designed with privacy in mind. We do not collect, store, or share any of your personal data. Here’s what that means:</p>
+    <ul>
+    <li>Crash reports can be sent to Mozilla Firefox. But, we do not collect any crash reports. Crash reports are sent securely to Mozilla Firefox to help improve the stability of the browser. They do not contain any personal information.</li>
+    </ul>
+    <h3 class="!font-bold text-3xl mt-2" id="-1-1-no-telemetry-"><strong class="font-bold">1.1. No Telemetry</strong></h3>
+    <p>We do not collect any telemetry data.</p>
+    <p>However, you can opt-in to share telemetry data to Mozilla for the improvement of FireFox (the base upon which the Zen Browser is built). It will be treated in accordance with their Privacy Policy which you can read about <a href="https://www.mozilla.org/en-US/privacy/">here</a>.</p>
+    <h3 class="!font-bold text-3xl mt-2" id="-1-2-no-personal-data-collection-"><strong class="font-bold">1.2. No Personal Data Collection</strong></h3>
+    <p>Zen Browser does not collect any personal information such as your IP address, browsing history, search queries, or form data.</p>
+    <h3 class="!font-bold text-3xl mt-2" id="-1-3-no-third-party-tracking-"><strong class="font-bold">1.3. No Third-Party Tracking</strong></h3>
+    <p>We do not allow third-party trackers or analytics tools to operate within Zen Browser. Your browsing activity remains entirely private and is not shared with any third party. Mozilla is not considered a third party as it is the base of Zen Browser.</p>
+    <Title class="!text-3xl font-bold mt-4" id="2-information-stored-locally-on-your-device">2. Information Stored Locally on Your Device</Title>
+    <h3 class="!font-bold text-3xl mt-2" id="-2-1-browsing-data-"><strong class="font-bold">2.1. Browsing Data</strong></h3>
+    <p>Zen Browser stores certain data locally on your device to enhance your browsing experience. This includes:</p>
+    <ul>
+    <li><strong class="font-bold">Cookies</strong>: Cookies are stored locally on your device and are not shared with Zen Browser or any third party. You have full control over the management of cookies through the browser’s settings.</li>
+    <li><strong class="font-bold">Cache and Temporary Files</strong>: Zen Browser may store cache files and other temporary data locally to improve performance. These files can be cleared at any time through the browser’s settings.</li>
+    </ul>
+    <h3 class="!font-bold text-3xl mt-2" id="-2-2-settings-and-preferences-"><strong class="font-bold">2.2. Settings and Preferences</strong></h3>
+    <p>Any customizations, settings, and preferences you make within Zen Browser are stored locally on your device. We do not have access to or control over this data.</p>
+    <Title class="!text-3xl font-bold mt-4" id="3-sync-feature">3. Sync Feature</Title>
+    <p>Zen Browser offers a &quot;Sync&quot; feature, this is implemented using Mozilla Firefox&#39;s Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla’s servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.</p>
+    <ul>
+    <li><a href="https://www.mozilla.org/en-US/privacy/mozilla-accounts/">Mozilla Firefox Sync</a></li>
+    <li><a href="https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords.">This is how we store your passwords</a></li>
+    </ul>
+    <Title class="!text-3xl font-bold mt-4" id="4-data-security">4. Data Security</Title>
+    <p>Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla&#39;s servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.</p>
+    <ul>
+    <li>Note that most of the security measures are taken care by Mozilla Firefox.</li>
+    </ul>
+    <Title class="!text-3xl font-bold mt-4" id="5-your-control">5. Your Control</Title>
+    <h3 class="!font-bold text-3xl mt-2" id="-5-1-data-deletion-"><strong class="font-bold">5.1. Data Deletion</strong></h3>
+    <p>You have full control over all data stored locally on your device by Zen Browser. You can clear your browsing data, cookies, and cache at any time using the browser’s settings.</p>
+    <h3 class="!font-bold text-3xl mt-2" id="-5-2-do-not-track-"><strong class="font-bold">5.2. Do Not Track</strong></h3>
+    <p>Zen Browser automatically honors &quot;Do Not Track&quot; requests by default. We ensure that no tracking of your activity occurs, in compliance with this setting.</p>
+    <Title class="!text-3xl font-bold mt-4" id="6-our-website-and-services">6. Our Website and Services</Title>
+    <p>When you click on the &quot;Download&quot; button on our website, a number in the database is incremented to track the number of downloads. This is done to understand the popularity of the browser. No personal data is collected during the process.</p>
+    <h3 class="!font-bold text-3xl mt-2" id="-6-1-external-links-"><strong class="font-bold">6.1.    External links</strong></h3>
+    <p>Zen Browser may contain links to external websites or services that are not owned or operated by us. We are not responsible for the content or privacy practices of these sites. We recommend that you review the privacy policies of these sites before providing them with any personal information.</p>
+    <Title class="!text-3xl font-bold mt-4" id="7-changes-to-this-privacy-policy">7. Changes to This Privacy Policy</Title>
+    <p>We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of any significant changes by updating the effective date at the top of this policy. Continued use of Zen Browser after such changes constitutes your acceptance of the new terms.</p>
+    <Title class="!text-3xl font-bold mt-4" id="8-other-telemetry-done-by-mozilla-firefox">8. Other telemetry done by Mozilla Firefox</Title>
+    <p>We try to disable all telemetry data collection in Zen Browser. But, we may have missed some. Check the below links for more information.</p>
+    <p>You can also optionally enable telemetry data collection and other Mozilla Research Studies in Zen Browser. This is disabled by default. You can enable it by going to the settings page.</p>
+    <ul>
+    <li>Please check <a href="https://www.mozilla.org/en-US/privacy/">Firefox Privacy Notice</a> for more information.</li>
+    </ul>
+    <Title class="!text-3xl font-bold mt-4" id="9-contact-us">9. Contact Us</Title>
+    <p>If you have any questions or concerns about this Privacy Policy or Zen Browser, please contact us at:</p>
+    <ul>
+    <li>Discord: <a href="https://discord.gg/zen-browser">Zen Browser&#39;s Discord</a></li>
+    <li>GitHub: <a href="https://github.com/zen-browser">Organization</a></li>
+    </ul>
+  </main>
+</Layout>

tailwind.config.mjs

@@ -8,9 +8,10 @@ export default {
 				'-lg': '@media (min-width: 1024px)',
 			},
 			colors: {
-				"paper": "#F2F0E3",
+				"paper": "var(--zen-paper)",
 				"coral": "#F76F53",
-				"dark": "#202020",
+				"dark": "var(--zen-dark)",
+				"muted": "var(--zen-muted)",
 				"zen-blue": "#6287f5",
 				"zen-green": "#63f78b",
 			},