From 937eae37926592b9e498579ced72fc13f01dcb31 Mon Sep 17 00:00:00 2001
From: zahyaah <itszayd2003@gmail.com>
Date: Fri, 23 Aug 2024 02:27:32 +0530
Subject: [PATCH 01/23] fix typo and grammar in features.tsx

---
 src/components/features.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index b5df379..214e3ab 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -73,7 +73,7 @@ export default function Features() {
               Goodbye bad performance
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are constantly tweak firefox's engine and settings to make it
+              We are constantly tweaking Firefox's engine and settings to make it
               faster than ever. <a className="text-blue-500" href="https://github.com/zen-browser/desktop/blob/main/docs/performance.md" target='_blank'>Learn more</a>
             </p>
           </div>
@@ -101,7 +101,7 @@ export default function Features() {
               Secure by default
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are always using the latest security features from firefox to
+              We are always using the latest security features from Firefox to
               keep you safe. <a className="text-blue-500" href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe">Learn more</a>
             </p>
           </div>

From 217e5d57b08b51ae1f929ff022744250c4710b38 Mon Sep 17 00:00:00 2001
From: Bharath Lakshman Kumar <108531789+BharathxD@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:28:00 +0530
Subject: [PATCH 02/23] refactor: Improved Platform Detection and UI
 Enhancements

---
 src/components/download.tsx | 471 ++++++++++++++++--------------------
 1 file changed, 212 insertions(+), 259 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 2ab7f6e..3a80113 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -1,6 +1,7 @@
 "use client";
-import { addDownload } from "@/lib/db";
-import { useState, useEffect } from "react";
+
+import { incrementDownloadCount } from "@/lib/db";
+import { useState, useEffect, useCallback } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
 import { Checkbox } from "./ui/checkbox";
@@ -8,50 +9,36 @@ import { ChevronLeft } from "lucide-react";
 import { Button } from "./ui/button";
 import Particles from "./ui/particles";
 import confetti from "canvas-confetti";
+import type {
+  Architecture,
+  LinuxDownloadType,
+  Platform,
+  WindowsDownloadType,
+} from "@/lib/releases";
 import { releases, releaseTree } from "@/lib/releases";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
+import SparklesText from "./ui/sparkles-text";
+import { useRouter } from "next/navigation";
+
 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);
-  }
+  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;
-  }
+  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
@@ -59,53 +46,59 @@ const FormField = styled.div<{ enter: boolean; out: boolean }>`
   animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")};
 `;
 
-const FieldTitle = styled.div`
-  font-size: 1.35rem;
-  font-weight: 500;
-`;
+const FieldTitle = ({
+  children,
+  className,
+}: React.PropsWithChildren & React.HTMLAttributes<HTMLHeadElement>) => (
+  <h2 className={ny("text-xl font-medium", className)}>{children}</h2>
+);
 
-const FieldDescription = styled.div`
-  font-size: 1rem;
-  color: #666;
-  margin-bottom: 1rem;
-`;
+const FieldDescription = ({
+  children,
+  className,
+}: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
+  <p className={ny("text-base text-[#666] mb-4", className)}>{children}</p>
+);
+
+const platforms = {
+  Windows: { color: "blue", icon: "windows8" },
+  Linux: { color: "yellow", icon: "linux" },
+  MacOS: { color: "purple", icon: "apple" },
+};
 
 export default function DownloadPage() {
-  const [platform, setPlatform] = useState<string | null>(null);
-  const [architecture, setArchitecture] = useState<string | null>(null);
-  const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
-    null
-  );
-  const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
+  const router = useRouter();
+
+  const [platform, setPlatform] = useState<Platform | null>(null);
+  const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
     null
   );
 
-  const [selectedPlatform, setSelectedPlatform] = useState("");
-  const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
+  const [selectedArchitecture, setSelectedArchitecture] =
+    useState<Architecture>("specific");
   const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] =
-    useState("installer");
+    useState<WindowsDownloadType>("installer");
   const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] =
-    useState("portable");
+    useState<LinuxDownloadType>("portable");
 
-  const [hasDownloaded, setHasDownloaded] = useState(false);
+  const [hasDownloaded, setHasDownloaded] = useState<boolean>(false);
+  const [flowIndex, setFlowIndex] = useState<number>(0);
 
-  const [flowIndex, setFlowIndex] = useState(0);
-  useEffect(() => {
-    let userAgent: string = "";
-    if (typeof window !== "undefined") {
-      userAgent = window.navigator.userAgent;
-    }
-    if (userAgent.includes("Win")) {
+  const detectPlatform = useCallback(() => {
+    if (typeof window === "undefined") return;
+
+    const userAgent = window.navigator.userAgent.toLowerCase();
+
+    if (userAgent.includes("win")) {
       setSelectedPlatform("Windows");
-    }
-    if (userAgent.includes("Mac")) {
+    } else if (userAgent.includes("mac")) {
       setSelectedPlatform("MacOS");
-    }
-    if (userAgent.includes("Linux")) {
+    } else if (userAgent.includes("linux")) {
       setSelectedPlatform("Linux");
     }
   }, []);
-  const throwConfetti = () => {
+
+  const throwConfetti = useCallback(() => {
     const end = Date.now() + 3 * 1000; // 3 seconds
     const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];
     const frame = () => {
@@ -130,68 +123,75 @@ export default function DownloadPage() {
       requestAnimationFrame(frame);
     };
     frame();
-  };
+  }, []);
 
-  const startDownload = () => {
-    let releaseTarget: string;
+  const getReleaseTarget = useCallback(():
+    | keyof typeof releases
+    | undefined => {
     if (selectedLinuxDownloadType === "flatpak") {
-      window.open(
+      router.push(
         "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]}`);
+      return;
     }
-    setHasDownloaded(true);
-    addDownload(releaseTarget);
-    throwConfetti();
-  };
 
-  const continueFlow = () => {
+    if (!selectedPlatform) return;
+
+    const platformReleases = releaseTree[selectedPlatform.toLowerCase()];
+
+    if (selectedPlatform === "MacOS")
+      return platformReleases[selectedArchitecture];
+
+    return platformReleases[selectedArchitecture][
+      selectedPlatform === "Windows"
+        ? selectedWindowsDownloadType
+        : selectedLinuxDownloadType
+    ];
+  }, [
+    router,
+    selectedArchitecture,
+    selectedLinuxDownloadType,
+    selectedPlatform,
+    selectedWindowsDownloadType,
+  ]);
+
+  const startDownload = useCallback(() => {
+    const releaseTarget = getReleaseTarget();
+
+    if (!releaseTarget) return;
+
+    router.push(`${BASE_URL}/${releases[releaseTarget]}`);
+
+    setHasDownloaded(true);
+    incrementDownloadCount(releaseTarget);
+    throwConfetti();
+  }, [getReleaseTarget, router, throwConfetti]);
+
+  const continueFlow = useCallback(() => {
     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);
-  };
+  }, [flowIndex, platform, selectedPlatform, startDownload]);
 
-  const goBackFlow = () => {
-    if (flowIndex === 1) {
-      setPlatform(null);
-    } else if (flowIndex === 2) {
-      setArchitecture(null);
-    } else if (flowIndex === 3) {
-      setWindowsDownloadType(null);
+  const goBackFlow = useCallback(() => {
+    if (flowIndex === 1) setPlatform(null);
+    else if (flowIndex === 3) {
       setSelectedWindowsDownloadType("installer");
-      setLinuxDownloadType(null);
       setSelectedLinuxDownloadType("portable");
     }
     if (flowIndex > 0) setFlowIndex(flowIndex - 1);
-  };
+  }, [flowIndex]);
 
-  const changeToFlatpak = () => {
-    if (selectedArchitecture === "specific") {
-      setSelectedLinuxDownloadType("flatpak");
-    }
-  };
+  const changeToFlatpak = useCallback(() => {
+    if (selectedArchitecture !== "specific") return;
+    setSelectedLinuxDownloadType("flatpak");
+  }, [selectedArchitecture]);
+
+  useEffect(() => {
+    detectPlatform();
+  }, [detectPlatform]);
 
   return (
     <>
@@ -244,63 +244,52 @@ export default function DownloadPage() {
                   <Button
                     className="mt-5"
                     onClick={() =>
-                      (window.location.href =
-                        "https://docs.zen-browser.app/guides/install-macos")
+                      router.push(
+                        "https://docs.zen-browser.app/guides/install-macos"
+                      )
                     }
                   >
-                    Download Zen for MacOS
+                    Read Installation Instructions
                   </Button>
                 </div>
               )}
             </div>
           )) || (
             <>
-              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">Download <SparklesText className="mx-2" text="Zen" /></h1>
+              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">
+                Download <SparklesText className="mx-2" text="Zen" />
+              </h1>
               <p className="text-muted-foreground mt-3">
-                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.
+                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.
               </p>
             </>
           )}
-          <div className="relative w-full">
-            {platform === null && (
-              <FormField enter={platform === null} out={platform !== null}>
+          <div className="relative w-full pt-12">
+            {/* Platform */}
+            {!platform && (
+              <FormField enter={!platform} out={!platform}>
                 <FieldTitle>Platform</FieldTitle>
                 <FieldDescription>
                   Choose the platform you want to download Zen for.
                 </FieldDescription>
-                <div
-                  onClick={() => 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" : ""
-                  )}
-                >
-                  <Checkbox checked={selectedPlatform === "Windows"} />
-                  <i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i>
-                  <div className="ml-2">Windows</div>
-                </div>
-                <div
-                  onClick={() => 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" : ""
-                  )}
-                >
-                  <Checkbox checked={selectedPlatform === "Linux"} />
-                  <i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i>
-                  <div className="ml-2">Linux</div>
-                </div>
-                <div
-                  onClick={() => 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" : ""
-                  )}
-                >
-                  <Checkbox checked={selectedPlatform === "MacOS"} />
-                  <i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i>
-                  <div className="ml-2 font-bold">MacOS</div>
-                </div>
+                {Object.entries(platforms).map(([plat, { color, icon }]) => (
+                  <div
+                    key={plat}
+                    onClick={() => setSelectedPlatform(plat as Platform)}
+                    className={ny(
+                      "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
+                      selectedPlatform === plat && `border-${color}-400`
+                    )}
+                  >
+                    <Checkbox checked={selectedPlatform === plat} />
+                    <i
+                      className={`devicon-${icon}-plain ml-3 p-2 border border-${color}-400 rounded-lg`}
+                    ></i>
+                    <div className="ml-2">{plat}</div>
+                  </div>
+                ))}
               </FormField>
             )}
             {/* Architecture */}
@@ -322,38 +311,30 @@ export default function DownloadPage() {
                     Choose the architecture of your device, either optimized or
                     generic.
                   </FieldDescription>
-                  <div className="flex items-center justify-center">
+                  <div className="flex items-center justify-center gap-2">
                     <div
                       onClick={() => 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"
-                          : ""
+                        selectedArchitecture === "specific" && "border-blue-400"
                       )}
                     >
-                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                        🚀
-                      </h1>
-                      <h1 className="text-2xl font-semibold my-2">Optimized</h1>
-                      <p className="text-muted-foreground mx-auto text-center">
+                      <h1 className="text-5xl my-2">🚀</h1>
+                      <h1 className="text-xl font-semibold my-2">Optimized</h1>
+                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
                         Blazing fast and compatible with modern devices
                       </p>
                     </div>
                     <div
                       onClick={() => 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"
-                          : ""
+                        "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                        selectedArchitecture === "generic" && "border-blue-400"
                       )}
                     >
-                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                        👴
-                      </h1>
-                      <h1 className="text-2xl font-semibold my-2">Generic</h1>
-                      <p className="text-muted-foreground mx-auto text-center">
+                      <h1 className="text-5xl my-2">👴</h1>
+                      <h1 className="text-xl font-semibold my-2">Generic</h1>
+                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
                         Slow but compatible with older devices.
                       </p>
                     </div>
@@ -369,39 +350,33 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Click the button below to download Zen for MacOS.
                 </FieldDescription>
-                <div className="flex items-center justify-center">
-                  <div
+                <div className="flex items-center justify-center gap-2">
+                  <button
                     onClick={() => 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"
-                        : ""
+                      selectedArchitecture === "specific" && "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      🍏
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">aarch64</h1>
-                    <p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
-                  </div>
-                  <div
+                    <h1 className="text-5xl my-2">🍏</h1>
+                    <h1 className="text-xl font-semibold my-2">aarch64</h1>
+                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                      64-bit ARM architecture, for Apple's M Series Chips
+                    </p>
+                  </button>
+                  <button
                     onClick={() => 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"
-                        : ""
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedArchitecture === "generic" && "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20">
-                      x64
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">Intel</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl font-bold my-2">x64</h1>
+                    <h1 className="text-xl font-semibold my-2">Intel</h1>
+                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
                       64-bit Intel architecture, for older Macs
                     </p>
-                  </div>
+                  </button>
                 </div>
               </FormField>
             )}
@@ -416,41 +391,35 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Windows.
                 </FieldDescription>
-                <div className="flex items-center justify-center">
-                  <div
+                <div className="flex items-center justify-center gap-2">
+                  <button
                     onClick={() => 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"
-                        : ""
+                      selectedWindowsDownloadType === "installer" &&
+                        "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      🚀
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">Installer</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl my-2">🚀</h1>
+                    <h1 className="text-xl font-semibold my-2">Installer</h1>
+                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
                       Install Zen with a setup wizard
                     </p>
-                  </div>
-                  <div
+                  </button>
+                  <button
                     onClick={() => 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"
-                        : ""
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedWindowsDownloadType === "portable" &&
+                        "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      📦
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl my-2">📦</h1>
+                    <h1 className="text-xl font-semibold my-2">Portable</h1>
+                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
                       Download Zen as a ZIP file
                     </p>
-                  </div>
+                  </button>
                 </div>
               </FormField>
             )}
@@ -465,61 +434,51 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Linux.
                 </FieldDescription>
-                <div className="flex items-center justify-center">
-                  <div
+                <div className="flex items-center justify-center gap-2">
+                  <article
                     onClick={() => 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"
-                        : ""
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
+                      selectedLinuxDownloadType === "appimage" &&
+                        "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      🚀
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">AppImage</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl">🚀</h1>
+                    <h1 className="text-xl font-semibold">AppImage</h1>
+                    <p className="text-muted-foreground text-center text-balance text-sm">
                       Install Zen with a setup wizard
                     </p>
-                  </div>
-                  <div
+                  </article>
+                  <article
                     onClick={() => 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"
-                        : ""
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
+                      selectedLinuxDownloadType === "portable" &&
+                        "border-blue-400"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      📦
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl">📦</h1>
+                    <h1 className="text-xl font-semibold">Portable</h1>
+                    <p className="text-muted-foreground text-center text-balance text-sm">
                       Download Zen as a ZIP file
                     </p>
-                  </div>
-                  <div
-                    onClick={() => changeToFlatpak()}
+                  </article>
+                  <article
+                    onClick={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"
-                        : ""
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
+                      selectedLinuxDownloadType === "flatpak" &&
+                        "border-blue-400",
+                      selectedArchitecture === "generic" &&
+                        "opacity-50 cursor-not-allowed"
                     )}
                   >
-                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
-                      🧑‍💻
-                    </h1>
-                    <h1 className="text-2xl font-semibold my-2">Flatpak</h1>
-                    <p className="text-muted-foreground mx-auto text-center">
+                    <h1 className="text-5xl">🧑‍💻</h1>
+                    <h1 className="text-xl font-semibold">Flatpak</h1>
+                    <p className="text-muted-foreground text-center text-balance text-sm">
                       Install Zen from the Flatpak repository.
                     </p>
-                  </div>
+                  </article>
                 </div>
               </FormField>
             )}
@@ -528,19 +487,13 @@ export default function DownloadPage() {
             <div className="mt-5 flex items-center justify-between">
               <Button
                 variant="ghost"
-                onClick={() => goBackFlow()}
-                className={ny(
-                  "opacity-70",
-                  platform === null ? "invisible" : ""
-                )}
+                onClick={goBackFlow}
+                className={ny("opacity-70", !platform && "invisible")}
               >
                 <ChevronLeft className="size-4" />
                 Back
               </Button>
-              <Button
-                onClick={() => continueFlow()}
-                disabled={selectedPlatform === null}
-              >
+              <Button onClick={continueFlow} disabled={!selectedPlatform}>
                 {(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
                   ? "Download 🥳"
                   : "Continue"}
@@ -549,7 +502,7 @@ export default function DownloadPage() {
           )}
           {(platform === "Linux" || platform === "Windows") &&
             flowIndex === 1 && (
-              <div className="mt-5 flex items-center">
+              <div className="mt-5 flex items-center justify-center">
                 <InfoCircledIcon className="size-4 mr-2" />
                 <p className="text-muted-foreground">
                   Confused about which build to choose?{" "}

From b3d55290804f724ca8dfa7fd907d6a7f772d1591 Mon Sep 17 00:00:00 2001
From: Bharath Lakshman Kumar <108531789+BharathxD@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:28:58 +0530
Subject: [PATCH 03/23] refactor: improve the download count increment
 management

---
 src/lib/db.ts | 60 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/lib/db.ts b/src/lib/db.ts
index 5551339..b71c737 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -1,31 +1,49 @@
 "use server";
 
-import { createClient } from '@supabase/supabase-js'
+import { createClient } from "@supabase/supabase-js";
+import { releases } from "./releases";
 
-const supabaseUrl = 'https://dmthyedfjzcysoekmyns.supabase.co'
+const supabaseUrl = "https://dmthyedfjzcysoekmyns.supabase.co";
 const supabaseKey = process.env.SUPABASE_KEY as string;
 const supabase = createClient(supabaseUrl, supabaseKey);
 
-export async function addDownload(platform: string) {
-    // Check if the download count for the platform exists
+const DOWNLOADS_TABLE = "downloads";
+const PLATFORM_COLUMN = "platform";
+const COUNT_COLUMN = "count";
+
+export async function incrementDownloadCount(platform: keyof typeof releases) {
+  try {
+    //? Check if the download count for the platform exists
     const { data, error } = await supabase
-        .from('downloads')
-        .select('count')
-        .eq('platform', platform)
-    // If it doesn't exist, create it
-    console.log(data)
-    if (data?.length === 0 || data === null) {
-        const {data, error} = await supabase
-            .from('downloads')
-            .insert([{ platform, count: 1 }]);
-        if (error) {
-            console.error(error)
-        }
+      .from(DOWNLOADS_TABLE)
+      .select(COUNT_COLUMN)
+      .eq(PLATFORM_COLUMN, platform);
+
+    if (error) throw new Error("Error fetching download count");
+
+    if (!data || data.length === 0) {
+      //? If it doesn't exist, create it
+      const { data: insertData, error: insertError } = await supabase
+        .from(DOWNLOADS_TABLE)
+        .insert([{ platform, count: 1 }]);
+
+      if (insertError) throw new Error("Error inserting download count");
+
+      return insertData;
     } else {
-        // If it exists, increment the count
-        await supabase
-            .from('downloads')
-            .update({ count: data![0].count + 1 })
-            .eq('platform', platform)
+      //? If it exists, increment the count
+      const newCount = data![0][COUNT_COLUMN] + 1;
+      const { data: updateData, error: updateError } = await supabase
+        .from(DOWNLOADS_TABLE)
+        .update({ count: newCount })
+        .eq(PLATFORM_COLUMN, platform);
+
+      if (updateError) throw new Error("Error updating download count");
+
+      return updateData;
     }
+  } catch (err) {
+    console.error("Unexpected error in addDownload:", err);
+    throw err;
+  }
 }

From 3eebb4a8cfa587444cd84db3136a9b0807c34d4f Mon Sep 17 00:00:00 2001
From: Bharath Lakshman Kumar <108531789+BharathxD@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:29:39 +0530
Subject: [PATCH 04/23] fix: add types to releases

---
 src/lib/releases.ts | 76 +++++++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/lib/releases.ts b/src/lib/releases.ts
index dea6041..4989f2a 100644
--- a/src/lib/releases.ts
+++ b/src/lib/releases.ts
@@ -1,46 +1,54 @@
-export const releases: any = {
-    WindowsInstaller: "zen.installer.exe",
-    WindowsInstallerGeneric: "zen.installer-generic.exe",
-    
-    WindowsZip: "zen.win-specific.zip",
-    WindowsZipGeneric: "zen.win-generic.zip",
+export const releases = {
+  WindowsInstaller: "zen.installer.exe",
+  WindowsInstallerGeneric: "zen.installer-generic.exe",
 
-    MacOS: "zen.macos-aarch64.dmg",
-    MacOSIntel: "zen.macos-x64.dmg",
+  WindowsZip: "zen.win-specific.zip",
+  WindowsZipGeneric: "zen.win-generic.zip",
 
-    Linux: "zen.linux-specific.tar.bz2",
-    LinuxGeneric: "zen.linux-generic.tar.bz2",
+  MacOS: "zen.macos-aarch64.dmg",
+  MacOSIntel: "zen.macos-x64.dmg",
 
-    LinuxAppImage: "zen-specific.AppImage",
-    LinuxAppImageGeneric: "zen-generic.AppImage",
-};
+  Linux: "zen.linux-specific.tar.bz2",
+  LinuxGeneric: "zen.linux-generic.tar.bz2",
+
+  LinuxAppImage: "zen-specific.AppImage",
+  LinuxAppImageGeneric: "zen-generic.AppImage",
+} as const;
 
 // platform
 //  -> arch
 //      -> file
 export const releaseTree: any = {
-    windows: {
-        specific: {
-            installer: "WindowsInstaller",
-            portable: "WindowsZip",
-        },
-        generic: {
-            installer: "WindowsInstallerGeneric",
-            portable: "WindowsZipGeneric",
-        },
+  windows: {
+    specific: {
+      installer: "WindowsInstaller",
+      portable: "WindowsZip",
     },
-    macos: {
-        generic: "MacOSIntel",
-        specific: "MacOS",
+    generic: {
+      installer: "WindowsInstallerGeneric",
+      portable: "WindowsZipGeneric",
     },
-    linux: {
-        specific: {
-            portable: "Linux",
-            appimage: "LinuxAppImage",
-        },
-        generic: {
-            portable: "LinuxGeneric",
-            appimage: "LinuxAppImageGeneric",
-        },
+  },
+  macos: {
+    generic: "MacOSIntel",
+    specific: "MacOS",
+  },
+  linux: {
+    specific: {
+      portable: "Linux",
+      appimage: "LinuxAppImage",
     },
+    generic: {
+      portable: "LinuxGeneric",
+      appimage: "LinuxAppImageGeneric",
+    },
+  },
 };
+
+type Platform = "Windows" | "MacOS" | "Linux";
+type Architecture = "specific" | "generic";
+
+type WindowsDownloadType = "installer" | "portable";
+type LinuxDownloadType = "portable" | "appimage" | "flatpak";
+
+export type { Platform, Architecture, WindowsDownloadType, LinuxDownloadType };

From 200c18f0eb0b6b88c76fa01c6ffb55624cc79749 Mon Sep 17 00:00:00 2001
From: Nima <smartnimaco@gmail.com>
Date: Fri, 23 Aug 2024 20:52:22 +0330
Subject: [PATCH 05/23] Fix Downlaod buttons not going to /download

---
 src/components/features.tsx     | 5 +++--
 src/components/release-note.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 014fdce..384f621 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -28,6 +28,7 @@ import {
   UpdateIcon,
 } from "@radix-ui/react-icons";
 import Image from "next/image";
+import Link from "next/link";
 import { Button } from './ui/button';
 import { COLORS } from './create-theme';
 import { Slider } from './ui/slider';
@@ -129,7 +130,7 @@ export default function Features() {
                   We are always looking for ways to make your experience better. With stackable themes that can be mixed and matched, you can create a browser that is truly yours. <a className="text-blue-500" href="https://docs.zen-browser.app/themes-store/themes-marketplace">Learn more</a>
                 </p>
               </div>
-              <Button className="mt-4 rounded-full p-5 ml-auto">Download zen now!</Button>
+              <Link href="/download"><Button className="mt-4 rounded-full p-5 ml-auto">Download Zen now!</Button></Link>
             </div>
             <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
               {COLORS.map((color) => (
@@ -163,7 +164,7 @@ export default function Features() {
                   Killer feature
                 </div>
               </div>
-              <Button className="mt-4 rounded-full p-5 ml-4">Download zen now!</Button>
+              <Link href="/download"><Button className="mt-4 rounded-full p-5 ml-4">Download Zen now!</Button></Link>
             </div>
             <img src="/compact-mode.png" className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600" />
           </div>
diff --git a/src/components/release-note.tsx b/src/components/release-note.tsx
index 8cf450a..9dc2c15 100644
--- a/src/components/release-note.tsx
+++ b/src/components/release-note.tsx
@@ -97,7 +97,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
       </div>
       <div className="flex flex-wrap items-center justify-center">
         <Link href="/download">
-          <Button className="mt-12 w-fit mx-auto">Download zen now!</Button>
+          <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
         </Link>
       </div>
     </div>

From da088d029266897771d54a328950d27058d296ab Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 23 Aug 2024 20:09:23 +0200
Subject: [PATCH 06/23] refactor: Disable "Create theme" button on
 CreateThemePage

This commit disables the "Create theme" button on the CreateThemePage component by adding the `disabled` attribute to the Button component. This change is made to prevent users from creating new color themes for the browser until a more accessible solution is implemented. However, users can still create their own themes and share them with the community.
---
 src/components/create-theme.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/create-theme.tsx b/src/components/create-theme.tsx
index 806be32..1d3be00 100644
--- a/src/components/create-theme.tsx
+++ b/src/components/create-theme.tsx
@@ -187,9 +187,12 @@ export default function CreateThemePage() {
               <input type="text" className="border text-gray-500 rounded-lg p-2 w-2/3" value={dialogBg} onChange={(e) => setDialogBg(e.target.value)} />
               <div className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
             </div>
+            <div className="text-md font-bold text-muted-foreground mt-8">
+              Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.
+            </div>
             <Sheet>
               <SheetTrigger asChild>
-                <Button className="mt-8">Create theme</Button>
+                <Button disabled className="mt-8">Create theme</Button>
               </SheetTrigger>
               <SheetContent className="!w-[600px] !max-w-lg">
                 <SheetHeader>

From 1c0ad13629b762f7269830e13de0872022be2995 Mon Sep 17 00:00:00 2001
From: Shawn Santhoshgeorge <32755895+ShawnGeorge03@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:03:12 -0400
Subject: [PATCH 07/23] fix: Fixed download links for Branding Assets

---
 src/components/branding-assets.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/branding-assets.tsx b/src/components/branding-assets.tsx
index fb14914..5100b07 100644
--- a/src/components/branding-assets.tsx
+++ b/src/components/branding-assets.tsx
@@ -1,3 +1,4 @@
+
 import { LOGO_COLORS } from "@/lib/logos";
 
 export function BrandingAssets() {
@@ -19,6 +20,7 @@ export function BrandingAssets() {
               <div className="flex items-center my-2">
                 <a
                   href={`/logos/zen-${color}.svg`}
+                  download={`zen-${color}.svg`}
                   className="text-blue-500 text-md ml-2"
                 >
                   {color}
@@ -40,7 +42,7 @@ export function BrandingAssets() {
               <div className="flex items-center my-2">
                 <a
                   href={`/logos/zen-alpha-${color}.svg`}
-                  download={`zen-alpha-${color}.png`}
+                  download={`zen-alpha-${color}.svg`}
                   className="text-blue-500 text-md ml-2"
                 >
                   {color}

From de147a219f9358c5d81006bb34f59b090f36cc32 Mon Sep 17 00:00:00 2001
From: busybox11 <busybox11th@gmail.com>
Date: Sat, 24 Aug 2024 01:43:09 +0200
Subject: [PATCH 08/23] fix: Use NextJS recommended config for
 styled-components

---
 next.config.mjs                        | 10 +++++----
 src/app/layout.tsx                     |  5 +++--
 src/lib/styled-components-registry.tsx | 29 ++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/styled-components-registry.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 48f03d4..431d026 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -3,17 +3,19 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'raw.githubusercontent.com',
+        protocol: "https",
+        hostname: "raw.githubusercontent.com",
       },
     ],
   },
   experimental: {
     serverActions: {
       // edit: updated to new key. Was previously `allowedForwardedHosts`
-      allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'],
+      allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
     },
-
+  },
+  compiler: {
+    styledComponents: true,
   },
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3de6cf4..971e56e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme-provider";
+import StyledComponentsRegistry from "@/lib/styled-components-registry";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,7 +26,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/lib/styled-components-registry.tsx b/src/lib/styled-components-registry.tsx
new file mode 100644
index 0000000..fa12293
--- /dev/null
+++ b/src/lib/styled-components-registry.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}

From 465b1ab524b7f2339d4d9399c01155211d01be48 Mon Sep 17 00:00:00 2001
From: camilo <camiloesteban661@gmail.com>
Date: Fri, 23 Aug 2024 21:21:14 -0500
Subject: [PATCH 09/23] fix(theme-page): resolve sidebar overlapping footer
 issue

- Fixed the issue where the sidebar was overlapping the footer by
changing `lg:fixed` to `lg:sticky` and adjusting padding/margin.
- Removed unused imports (`LoaderIcon`, `LoaderPinwheelIcon`,
`MoveLeftIcon`) from `lucide-react`.
- Moved "Go back" button to the top of the sidebar for better UX.
---
 src/components/theme-page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index b8be7fd..6a89b9d 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -4,7 +4,7 @@ import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
-import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
+import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
 
 export default function ThemePage({ theme }: { theme: ZenTheme }) {
   const [readme, setReadme] = useState<string | null>(null);
@@ -14,7 +14,11 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
-      <div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+      <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+        <div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          <h3 className="text-md">Go back</h3>
+        </div>
         <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,14 +46,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
       </div>
       <hr className="block my-4 lg:hidden" />
-      <div className="flex flex-col lg:border-l lg:min-h-96 pl-10 lg:ml-[25rem] max-w-xl lg:min-w-96 w-full">
-        <div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
-          <ChevronLeft className="w-4 h-4 mr-1" />
-          <h3 className="text-md">Go back</h3>
-        </div>
+      <div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
         <div id="policy" className="w-full">
           {readme === null ? (
-              <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
+            <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
           ) : (
             <Markdown>{`${readme}`}</Markdown>
           )}

From 0861a2f44d8afcc8f30c0aec93734dd0ae25c0f2 Mon Sep 17 00:00:00 2001
From: ayn2op <ayn2op@gmail.com>
Date: Sat, 24 Aug 2024 14:46:58 +0530
Subject: [PATCH 10/23] fix: capitalize "firefox"

---
 src/app/privacy-policy/page.tsx | 2 +-
 src/components/features.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 7a9af0a..5408dea 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -52,7 +52,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's
 # 4. Data Security
 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's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe. 
 
-* Note that most of the security measures are taken care by mozilla firefox.
+* Note that most of the security measures are taken care by Mozilla Firefox.
 
 # 5. Your Control
 ## 5.1. Data Deletion
diff --git a/src/components/features.tsx b/src/components/features.tsx
index 384f621..2b10417 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -74,7 +74,7 @@ export default function Features() {
               Goodbye bad performance
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are constantly tweak firefox's engine and settings to make it
+              We are constantly tweak Firefox's engine and settings to make it
               faster than ever. <a className="text-blue-500" href="https://github.com/zen-browser/desktop/blob/main/docs/performance.md" target='_blank'>Learn more</a>
             </p>
           </div>
@@ -102,7 +102,7 @@ export default function Features() {
               Secure by default
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are always using the latest security features from firefox to
+              We are always using the latest security features from Firefox to
               keep you safe. <a className="text-blue-500" href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe">Learn more</a>
             </p>
           </div>

From e0ba5c0fbcc0be5d4ef7d48349c3fbf719d7d3fa Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 24 Aug 2024 11:40:36 +0200
Subject: [PATCH 11/23] refactor: Remove redundant code for features layout

---
 src/components/features.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 384f621..7490690 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -118,8 +118,6 @@ export default function Features() {
           </Sticky>
         </div>
         <div className="relative md:grid border-t-2 md:border-l-2 md:col-span-2 md:grid-cols-2 row-span-2">
-          <div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
             <div className="">
               <div>
@@ -149,8 +147,6 @@ export default function Features() {
           </div>
         </div>
         <div className="relative md:grid md:border-l-2 border-t-2 md:col-span-2 grid-cols-2 row-span-2">
-          <div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
             <div className="flex flex-col md:flex-row">
               <div className='relative'>

From 9c49f996c3d289e848ce684b504bed29ca5557cb Mon Sep 17 00:00:00 2001
From: thebluedev <bluefurythebest@gmail.com>
Date: Sat, 24 Aug 2024 15:16:13 +0530
Subject: [PATCH 12/23] fix: Fix grammar in features

---
 src/components/features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 014fdce..eecd57c 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -73,7 +73,7 @@ export default function Features() {
               Goodbye bad performance
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are constantly tweak firefox's engine and settings to make it
+              We constantly tweak firefox's engine and settings to make it
               faster than ever. <a className="text-blue-500" href="https://github.com/zen-browser/desktop/blob/main/docs/performance.md" target='_blank'>Learn more</a>
             </p>
           </div>

From f49d5a8410147b35121831899d44eabe1ae3aa8a Mon Sep 17 00:00:00 2001
From: nitro <143457057+n7itro@users.noreply.github.com>
Date: Sat, 24 Aug 2024 14:52:47 +0200
Subject: [PATCH 13/23] v29 release notes

---
 src/lib/release-notes.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/lib/release-notes.ts b/src/lib/release-notes.ts
index eb4ea52..8d0cfaf 100644
--- a/src/lib/release-notes.ts
+++ b/src/lib/release-notes.ts
@@ -601,6 +601,31 @@ export const releaseNotes: ReleaseNote[] = [
         }
     ]
   },
+  {
+    version: "1.0.0-a.29",
+    date: "24/08/2024",
+    extra: "This release is the twenty-ninth alpha release of the 1.0.0-alpha series.",
+    features: [
+        "Added Spanish translations",
+        "Added documentation for contributing",
+        "Added support for multi-tab splitting with shortcuts",
+        "Fixed sidebar shortcuts"
+    ],
+    fixes: [
+        {
+            description: "Text on websites is blurry",
+            issue: 383
+        },
+        {
+            description: "Expanded compact mode triggers too early",
+            issue: 520
+        },
+        {
+            description: "Ampersand in workspace name breaks workspace menu",
+            issue: 439
+        }
+    ]
+    }
 ].reverse();
 
 export function releaseNoteIsAlpha(note: ReleaseNote) {

From f9616f47878da52e43ba2af8b59bfb8c7893a3b6 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 24 Aug 2024 23:53:16 +0200
Subject: [PATCH 14/23] feat: Add link to personal website in the head of
 RootLayout component

---
 src/app/layout.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3de6cf4..fb59c9d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,6 +18,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
+      </head>
       <body className={inter.className}>
         <ThemeProvider
           attribute="class"

From 66ab1c93ac4cf9a4dd6c28893c2d811479faf511 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 24 Aug 2024 23:57:27 +0200
Subject: [PATCH 15/23] chore: Add generateMetadata function to theme page

---
 src/app/themes/[theme]/page.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/app/themes/[theme]/page.tsx b/src/app/themes/[theme]/page.tsx
index bb2d5c2..e8edb1b 100644
--- a/src/app/themes/[theme]/page.tsx
+++ b/src/app/themes/[theme]/page.tsx
@@ -3,7 +3,40 @@ import Footer from "@/components/footer";
 import { Navigation } from "@/components/navigation";
 import ThemePage from "@/components/theme-page";
 import { getThemeFromId } from "@/lib/themes";
+import { Metadata, ResolvingMetadata } from "next";
 import { useParams } from "next/navigation";
+import { Props } from "next/script";
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const theme = params.theme
+  const themeData = await getThemeFromId(theme);
+  if (!themeData) {
+    return {
+      title: "Theme not found",
+      description: "Theme not found",
+    };
+  }
+  return {
+    title: themeData.name,
+    description: themeData.description,
+    keywords: [themeData.name, themeData.description],
+    openGraph: {
+      title: themeData.name,
+      description: themeData.description,
+      images: [
+        {
+          url: themeData.image,
+          width: 500,
+          height: 500,
+          alt: themeData.name,
+        },
+      ],
+    },
+  };
+}
 
 export default async function ThemeInfoPage() {
   const params = useParams<{ theme: string }>();

From cdf6216d795e92c800df13d3c431d96b377d68ed Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 24 Aug 2024 23:59:43 +0200
Subject: [PATCH 16/23] chore: Refactor generateMetadata function in theme page

---
 src/app/themes/[theme]/page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/themes/[theme]/page.tsx b/src/app/themes/[theme]/page.tsx
index e8edb1b..7d7b0e9 100644
--- a/src/app/themes/[theme]/page.tsx
+++ b/src/app/themes/[theme]/page.tsx
@@ -1,14 +1,13 @@
-"use client";
+
 import Footer from "@/components/footer";
 import { Navigation } from "@/components/navigation";
 import ThemePage from "@/components/theme-page";
 import { getThemeFromId } from "@/lib/themes";
 import { Metadata, ResolvingMetadata } from "next";
 import { useParams } from "next/navigation";
-import { Props } from "next/script";
 
 export async function generateMetadata(
-  { params, searchParams }: Props,
+  { params, searchParams }: any,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   const theme = params.theme

From 0e334272891e34a76e77486d3d3a72c1dbe367ce Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:01:09 +0200
Subject: [PATCH 17/23] chore: Remove unused code and fix theme page rendering

---
 src/app/themes/[theme]/page.tsx | 11 +----------
 src/components/theme-page.tsx   | 13 +++++++++++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/themes/[theme]/page.tsx b/src/app/themes/[theme]/page.tsx
index 7d7b0e9..ab32280 100644
--- a/src/app/themes/[theme]/page.tsx
+++ b/src/app/themes/[theme]/page.tsx
@@ -4,7 +4,6 @@ import { Navigation } from "@/components/navigation";
 import ThemePage from "@/components/theme-page";
 import { getThemeFromId } from "@/lib/themes";
 import { Metadata, ResolvingMetadata } from "next";
-import { useParams } from "next/navigation";
 
 export async function generateMetadata(
   { params, searchParams }: any,
@@ -38,17 +37,9 @@ export async function generateMetadata(
 }
 
 export default async function ThemeInfoPage() {
-  const params = useParams<{ theme: string }>();
-  const { theme: themeID } = params;
-
-  const theme = await getThemeFromId(themeID);
-  if (!theme) {
-    return <div>Theme not found</div>;
-  }
-
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <ThemePage theme={theme} />
+      <ThemePage />
       <Footer />  
       <Navigation /> {/* At the bottom of the page */}
     </main>
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 6a89b9d..b61c8ff 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -1,12 +1,21 @@
 import Image from "next/image";
-import { getThemeAuthorLink, getThemeMarkdown, ZenTheme } from "@/lib/themes";
+import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
 import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
+import { useParams } from "next/navigation";
+
+export default async function ThemePage() {
+  const params = useParams<{ theme: string }>();
+  const { theme: themeID } = params;
+
+  const theme = await getThemeFromId(themeID);
+  if (!theme) {
+    return <div>Theme not found</div>;
+  }
 
-export default function ThemePage({ theme }: { theme: ZenTheme }) {
   const [readme, setReadme] = useState<string | null>(null);
   useEffect(() => {
     getThemeMarkdown(theme).then(setReadme);

From 353d0af72d88ffa1236ae22f75089355d9e23d67 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:02:00 +0200
Subject: [PATCH 18/23] chore: Fix typo in theme-page.tsx

---
 src/components/theme-page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index b61c8ff..38e47ff 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -1,3 +1,4 @@
+"use cient";
 import Image from "next/image";
 import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";

From 171d759ca344070a8fa1fdf321e825a12346087d Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:02:50 +0200
Subject: [PATCH 19/23] fixed typo

---
 src/components/theme-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 38e47ff..445454d 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -1,4 +1,4 @@
-"use cient";
+"use client";
 import Image from "next/image";
 import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";

From 5a465c9e36a738e709a9b4cc1f126ed175b31f92 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:05:20 +0200
Subject: [PATCH 20/23] chore: Update ThemePage component to fetch readme
 asynchronously

---
 src/components/theme-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 445454d..a45bf17 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -9,6 +9,7 @@ import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
 import { useParams } from "next/navigation";
 
 export default async function ThemePage() {
+  const [readme, setReadme] = useState<string | null>(null);
   const params = useParams<{ theme: string }>();
   const { theme: themeID } = params;
 
@@ -17,7 +18,6 @@ export default async function ThemePage() {
     return <div>Theme not found</div>;
   }
 
-  const [readme, setReadme] = useState<string | null>(null);
   useEffect(() => {
     getThemeMarkdown(theme).then(setReadme);
   }, [theme]);

From c691a4e7e80e9aeba58e7f22c6666f36ef1078ae Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:07:33 +0200
Subject: [PATCH 21/23] chore: Update ThemePage component to fetch readme
 asynchronously

---
 src/components/theme-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index a45bf17..b5fe68b 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -20,7 +20,7 @@ export default async function ThemePage() {
 
   useEffect(() => {
     getThemeMarkdown(theme).then(setReadme);
-  }, [theme]);
+  }, []);
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">

From ba4372b91274b70f035a551ec186bae01a2628ff Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 25 Aug 2024 00:09:03 +0200
Subject: [PATCH 22/23] chore: Refactor ThemePage component to fetch readme
 asynchronously

---
 src/components/theme-page.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index b5fe68b..bfef366 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -9,7 +9,6 @@ import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
 import { useParams } from "next/navigation";
 
 export default async function ThemePage() {
-  const [readme, setReadme] = useState<string | null>(null);
   const params = useParams<{ theme: string }>();
   const { theme: themeID } = params;
 
@@ -18,9 +17,7 @@ export default async function ThemePage() {
     return <div>Theme not found</div>;
   }
 
-  useEffect(() => {
-    getThemeMarkdown(theme).then(setReadme);
-  }, []);
+  const readme = await getThemeMarkdown(theme);
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">

From 2a7dc0cae3d6f53ce89fce9572500ed1ea5f3eef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mauro=20=F0=9F=A4=99?=
 <91018726+mauro-balades@users.noreply.github.com>
Date: Sun, 25 Aug 2024 00:51:46 +0200
Subject: [PATCH 23/23] Revert "refactor: Improved platform detection, UI
 enhancements, and overall code quality"

---
 src/components/download.tsx | 467 ++++++++++++++++++++----------------
 src/lib/db.ts               |  60 ++---
 src/lib/releases.ts         |  76 +++---
 3 files changed, 312 insertions(+), 291 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 3a80113..2ab7f6e 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -1,7 +1,6 @@
 "use client";
-
-import { incrementDownloadCount } from "@/lib/db";
-import { useState, useEffect, useCallback } from "react";
+import { addDownload } from "@/lib/db";
+import { useState, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
 import { Checkbox } from "./ui/checkbox";
@@ -9,36 +8,50 @@ import { ChevronLeft } from "lucide-react";
 import { Button } from "./ui/button";
 import Particles from "./ui/particles";
 import confetti from "canvas-confetti";
-import type {
-  Architecture,
-  LinuxDownloadType,
-  Platform,
-  WindowsDownloadType,
-} from "@/lib/releases";
 import { releases, releaseTree } from "@/lib/releases";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
-import SparklesText from "./ui/sparkles-text";
-import { useRouter } from "next/navigation";
-
 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); }
+  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; }
+  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
@@ -46,59 +59,53 @@ const FormField = styled.div<{ enter: boolean; out: boolean }>`
   animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")};
 `;
 
-const FieldTitle = ({
-  children,
-  className,
-}: React.PropsWithChildren & React.HTMLAttributes<HTMLHeadElement>) => (
-  <h2 className={ny("text-xl font-medium", className)}>{children}</h2>
-);
+const FieldTitle = styled.div`
+  font-size: 1.35rem;
+  font-weight: 500;
+`;
 
-const FieldDescription = ({
-  children,
-  className,
-}: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
-  <p className={ny("text-base text-[#666] mb-4", className)}>{children}</p>
-);
-
-const platforms = {
-  Windows: { color: "blue", icon: "windows8" },
-  Linux: { color: "yellow", icon: "linux" },
-  MacOS: { color: "purple", icon: "apple" },
-};
+const FieldDescription = styled.div`
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 1rem;
+`;
 
 export default function DownloadPage() {
-  const router = useRouter();
-
-  const [platform, setPlatform] = useState<Platform | null>(null);
-  const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
+  const [platform, setPlatform] = useState<string | null>(null);
+  const [architecture, setArchitecture] = useState<string | null>(null);
+  const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
+    null
+  );
+  const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
     null
   );
 
-  const [selectedArchitecture, setSelectedArchitecture] =
-    useState<Architecture>("specific");
+  const [selectedPlatform, setSelectedPlatform] = useState("");
+  const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
   const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] =
-    useState<WindowsDownloadType>("installer");
+    useState("installer");
   const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] =
-    useState<LinuxDownloadType>("portable");
+    useState("portable");
 
-  const [hasDownloaded, setHasDownloaded] = useState<boolean>(false);
-  const [flowIndex, setFlowIndex] = useState<number>(0);
+  const [hasDownloaded, setHasDownloaded] = useState(false);
 
-  const detectPlatform = useCallback(() => {
-    if (typeof window === "undefined") return;
-
-    const userAgent = window.navigator.userAgent.toLowerCase();
-
-    if (userAgent.includes("win")) {
+  const [flowIndex, setFlowIndex] = useState(0);
+  useEffect(() => {
+    let userAgent: string = "";
+    if (typeof window !== "undefined") {
+      userAgent = window.navigator.userAgent;
+    }
+    if (userAgent.includes("Win")) {
       setSelectedPlatform("Windows");
-    } else if (userAgent.includes("mac")) {
+    }
+    if (userAgent.includes("Mac")) {
       setSelectedPlatform("MacOS");
-    } else if (userAgent.includes("linux")) {
+    }
+    if (userAgent.includes("Linux")) {
       setSelectedPlatform("Linux");
     }
   }, []);
-
-  const throwConfetti = useCallback(() => {
+  const throwConfetti = () => {
     const end = Date.now() + 3 * 1000; // 3 seconds
     const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];
     const frame = () => {
@@ -123,75 +130,68 @@ export default function DownloadPage() {
       requestAnimationFrame(frame);
     };
     frame();
-  }, []);
+  };
 
-  const getReleaseTarget = useCallback(():
-    | keyof typeof releases
-    | undefined => {
+  const startDownload = () => {
+    let releaseTarget: string;
     if (selectedLinuxDownloadType === "flatpak") {
-      router.push(
+      window.open(
         "https://dl.flathub.org/repo/appstream/io.github.zen_browser.zen.flatpakref"
       );
-      return;
+      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]}`);
     }
-
-    if (!selectedPlatform) return;
-
-    const platformReleases = releaseTree[selectedPlatform.toLowerCase()];
-
-    if (selectedPlatform === "MacOS")
-      return platformReleases[selectedArchitecture];
-
-    return platformReleases[selectedArchitecture][
-      selectedPlatform === "Windows"
-        ? selectedWindowsDownloadType
-        : selectedLinuxDownloadType
-    ];
-  }, [
-    router,
-    selectedArchitecture,
-    selectedLinuxDownloadType,
-    selectedPlatform,
-    selectedWindowsDownloadType,
-  ]);
-
-  const startDownload = useCallback(() => {
-    const releaseTarget = getReleaseTarget();
-
-    if (!releaseTarget) return;
-
-    router.push(`${BASE_URL}/${releases[releaseTarget]}`);
-
     setHasDownloaded(true);
-    incrementDownloadCount(releaseTarget);
+    addDownload(releaseTarget);
     throwConfetti();
-  }, [getReleaseTarget, router, throwConfetti]);
+  };
 
-  const continueFlow = useCallback(() => {
+  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);
-  }, [flowIndex, platform, selectedPlatform, startDownload]);
+  };
 
-  const goBackFlow = useCallback(() => {
-    if (flowIndex === 1) setPlatform(null);
-    else if (flowIndex === 3) {
+  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);
-  }, [flowIndex]);
+  };
 
-  const changeToFlatpak = useCallback(() => {
-    if (selectedArchitecture !== "specific") return;
-    setSelectedLinuxDownloadType("flatpak");
-  }, [selectedArchitecture]);
-
-  useEffect(() => {
-    detectPlatform();
-  }, [detectPlatform]);
+  const changeToFlatpak = () => {
+    if (selectedArchitecture === "specific") {
+      setSelectedLinuxDownloadType("flatpak");
+    }
+  };
 
   return (
     <>
@@ -244,52 +244,63 @@ export default function DownloadPage() {
                   <Button
                     className="mt-5"
                     onClick={() =>
-                      router.push(
-                        "https://docs.zen-browser.app/guides/install-macos"
-                      )
+                      (window.location.href =
+                        "https://docs.zen-browser.app/guides/install-macos")
                     }
                   >
-                    Read Installation Instructions
+                    Download Zen for MacOS
                   </Button>
                 </div>
               )}
             </div>
           )) || (
             <>
-              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">
-                Download <SparklesText className="mx-2" text="Zen" />
-              </h1>
+              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">Download <SparklesText className="mx-2" text="Zen" /></h1>
               <p className="text-muted-foreground mt-3">
-                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.
+                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.
               </p>
             </>
           )}
-          <div className="relative w-full pt-12">
-            {/* Platform */}
-            {!platform && (
-              <FormField enter={!platform} out={!platform}>
+          <div className="relative w-full">
+            {platform === null && (
+              <FormField enter={platform === null} out={platform !== null}>
                 <FieldTitle>Platform</FieldTitle>
                 <FieldDescription>
                   Choose the platform you want to download Zen for.
                 </FieldDescription>
-                {Object.entries(platforms).map(([plat, { color, icon }]) => (
-                  <div
-                    key={plat}
-                    onClick={() => setSelectedPlatform(plat as Platform)}
-                    className={ny(
-                      "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
-                      selectedPlatform === plat && `border-${color}-400`
-                    )}
-                  >
-                    <Checkbox checked={selectedPlatform === plat} />
-                    <i
-                      className={`devicon-${icon}-plain ml-3 p-2 border border-${color}-400 rounded-lg`}
-                    ></i>
-                    <div className="ml-2">{plat}</div>
-                  </div>
-                ))}
+                <div
+                  onClick={() => 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" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "Windows"} />
+                  <i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i>
+                  <div className="ml-2">Windows</div>
+                </div>
+                <div
+                  onClick={() => 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" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "Linux"} />
+                  <i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i>
+                  <div className="ml-2">Linux</div>
+                </div>
+                <div
+                  onClick={() => 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" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "MacOS"} />
+                  <i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i>
+                  <div className="ml-2 font-bold">MacOS</div>
+                </div>
               </FormField>
             )}
             {/* Architecture */}
@@ -311,30 +322,38 @@ export default function DownloadPage() {
                     Choose the architecture of your device, either optimized or
                     generic.
                   </FieldDescription>
-                  <div className="flex items-center justify-center gap-2">
+                  <div className="flex items-center justify-center">
                     <div
                       onClick={() => 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"
+                        selectedArchitecture === "specific"
+                          ? "border-blue-400"
+                          : ""
                       )}
                     >
-                      <h1 className="text-5xl my-2">🚀</h1>
-                      <h1 className="text-xl font-semibold my-2">Optimized</h1>
-                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                        🚀
+                      </h1>
+                      <h1 className="text-2xl font-semibold my-2">Optimized</h1>
+                      <p className="text-muted-foreground mx-auto text-center">
                         Blazing fast and compatible with modern devices
                       </p>
                     </div>
                     <div
                       onClick={() => setSelectedArchitecture("generic")}
                       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 === "generic" && "border-blue-400"
+                        "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"
+                          : ""
                       )}
                     >
-                      <h1 className="text-5xl my-2">👴</h1>
-                      <h1 className="text-xl font-semibold my-2">Generic</h1>
-                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                        👴
+                      </h1>
+                      <h1 className="text-2xl font-semibold my-2">Generic</h1>
+                      <p className="text-muted-foreground mx-auto text-center">
                         Slow but compatible with older devices.
                       </p>
                     </div>
@@ -350,33 +369,39 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Click the button below to download Zen for MacOS.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <button
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => 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"
+                      selectedArchitecture === "specific"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">🍏</h1>
-                    <h1 className="text-xl font-semibold my-2">aarch64</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
-                      64-bit ARM architecture, for Apple's M Series Chips
-                    </p>
-                  </button>
-                  <button
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🍏
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">aarch64</h1>
+                    <p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
+                  </div>
+                  <div
                     onClick={() => setSelectedArchitecture("generic")}
                     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 === "generic" && "border-blue-400"
+                      "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"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl font-bold my-2">x64</h1>
-                    <h1 className="text-xl font-semibold my-2">Intel</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20">
+                      x64
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Intel</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       64-bit Intel architecture, for older Macs
                     </p>
-                  </button>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -391,35 +416,41 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Windows.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <button
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => 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"
+                      selectedWindowsDownloadType === "installer"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">🚀</h1>
-                    <h1 className="text-xl font-semibold my-2">Installer</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🚀
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Installer</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen with a setup wizard
                     </p>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     onClick={() => setSelectedWindowsDownloadType("portable")}
                     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 === "portable" &&
-                        "border-blue-400"
+                      "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"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">📦</h1>
-                    <h1 className="text-xl font-semibold my-2">Portable</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      📦
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Download Zen as a ZIP file
                     </p>
-                  </button>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -434,51 +465,61 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Linux.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <article
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => 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 space-y-2",
-                      selectedLinuxDownloadType === "appimage" &&
-                        "border-blue-400"
+                      "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"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">🚀</h1>
-                    <h1 className="text-xl font-semibold">AppImage</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🚀
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">AppImage</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen with a setup wizard
                     </p>
-                  </article>
-                  <article
+                  </div>
+                  <div
                     onClick={() => setSelectedLinuxDownloadType("portable")}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
-                      selectedLinuxDownloadType === "portable" &&
-                        "border-blue-400"
+                      "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"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">📦</h1>
-                    <h1 className="text-xl font-semibold">Portable</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      📦
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Download Zen as a ZIP file
                     </p>
-                  </article>
-                  <article
-                    onClick={changeToFlatpak}
+                  </div>
+                  <div
+                    onClick={() => changeToFlatpak()}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
-                      selectedLinuxDownloadType === "flatpak" &&
-                        "border-blue-400",
-                      selectedArchitecture === "generic" &&
-                        "opacity-50 cursor-not-allowed"
+                      "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"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">🧑‍💻</h1>
-                    <h1 className="text-xl font-semibold">Flatpak</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🧑‍💻
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Flatpak</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen from the Flatpak repository.
                     </p>
-                  </article>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -487,13 +528,19 @@ export default function DownloadPage() {
             <div className="mt-5 flex items-center justify-between">
               <Button
                 variant="ghost"
-                onClick={goBackFlow}
-                className={ny("opacity-70", !platform && "invisible")}
+                onClick={() => goBackFlow()}
+                className={ny(
+                  "opacity-70",
+                  platform === null ? "invisible" : ""
+                )}
               >
                 <ChevronLeft className="size-4" />
                 Back
               </Button>
-              <Button onClick={continueFlow} disabled={!selectedPlatform}>
+              <Button
+                onClick={() => continueFlow()}
+                disabled={selectedPlatform === null}
+              >
                 {(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
                   ? "Download 🥳"
                   : "Continue"}
@@ -502,7 +549,7 @@ export default function DownloadPage() {
           )}
           {(platform === "Linux" || platform === "Windows") &&
             flowIndex === 1 && (
-              <div className="mt-5 flex items-center justify-center">
+              <div className="mt-5 flex items-center">
                 <InfoCircledIcon className="size-4 mr-2" />
                 <p className="text-muted-foreground">
                   Confused about which build to choose?{" "}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index b71c737..5551339 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -1,49 +1,31 @@
 "use server";
 
-import { createClient } from "@supabase/supabase-js";
-import { releases } from "./releases";
+import { createClient } from '@supabase/supabase-js'
 
-const supabaseUrl = "https://dmthyedfjzcysoekmyns.supabase.co";
+const supabaseUrl = 'https://dmthyedfjzcysoekmyns.supabase.co'
 const supabaseKey = process.env.SUPABASE_KEY as string;
 const supabase = createClient(supabaseUrl, supabaseKey);
 
-const DOWNLOADS_TABLE = "downloads";
-const PLATFORM_COLUMN = "platform";
-const COUNT_COLUMN = "count";
-
-export async function incrementDownloadCount(platform: keyof typeof releases) {
-  try {
-    //? Check if the download count for the platform exists
+export async function addDownload(platform: string) {
+    // Check if the download count for the platform exists
     const { data, error } = await supabase
-      .from(DOWNLOADS_TABLE)
-      .select(COUNT_COLUMN)
-      .eq(PLATFORM_COLUMN, platform);
-
-    if (error) throw new Error("Error fetching download count");
-
-    if (!data || data.length === 0) {
-      //? If it doesn't exist, create it
-      const { data: insertData, error: insertError } = await supabase
-        .from(DOWNLOADS_TABLE)
-        .insert([{ platform, count: 1 }]);
-
-      if (insertError) throw new Error("Error inserting download count");
-
-      return insertData;
+        .from('downloads')
+        .select('count')
+        .eq('platform', platform)
+    // If it doesn't exist, create it
+    console.log(data)
+    if (data?.length === 0 || data === null) {
+        const {data, error} = await supabase
+            .from('downloads')
+            .insert([{ platform, count: 1 }]);
+        if (error) {
+            console.error(error)
+        }
     } else {
-      //? If it exists, increment the count
-      const newCount = data![0][COUNT_COLUMN] + 1;
-      const { data: updateData, error: updateError } = await supabase
-        .from(DOWNLOADS_TABLE)
-        .update({ count: newCount })
-        .eq(PLATFORM_COLUMN, platform);
-
-      if (updateError) throw new Error("Error updating download count");
-
-      return updateData;
+        // If it exists, increment the count
+        await supabase
+            .from('downloads')
+            .update({ count: data![0].count + 1 })
+            .eq('platform', platform)
     }
-  } catch (err) {
-    console.error("Unexpected error in addDownload:", err);
-    throw err;
-  }
 }
diff --git a/src/lib/releases.ts b/src/lib/releases.ts
index 4989f2a..dea6041 100644
--- a/src/lib/releases.ts
+++ b/src/lib/releases.ts
@@ -1,54 +1,46 @@
-export const releases = {
-  WindowsInstaller: "zen.installer.exe",
-  WindowsInstallerGeneric: "zen.installer-generic.exe",
+export const releases: any = {
+    WindowsInstaller: "zen.installer.exe",
+    WindowsInstallerGeneric: "zen.installer-generic.exe",
+    
+    WindowsZip: "zen.win-specific.zip",
+    WindowsZipGeneric: "zen.win-generic.zip",
 
-  WindowsZip: "zen.win-specific.zip",
-  WindowsZipGeneric: "zen.win-generic.zip",
+    MacOS: "zen.macos-aarch64.dmg",
+    MacOSIntel: "zen.macos-x64.dmg",
 
-  MacOS: "zen.macos-aarch64.dmg",
-  MacOSIntel: "zen.macos-x64.dmg",
+    Linux: "zen.linux-specific.tar.bz2",
+    LinuxGeneric: "zen.linux-generic.tar.bz2",
 
-  Linux: "zen.linux-specific.tar.bz2",
-  LinuxGeneric: "zen.linux-generic.tar.bz2",
-
-  LinuxAppImage: "zen-specific.AppImage",
-  LinuxAppImageGeneric: "zen-generic.AppImage",
-} as const;
+    LinuxAppImage: "zen-specific.AppImage",
+    LinuxAppImageGeneric: "zen-generic.AppImage",
+};
 
 // platform
 //  -> arch
 //      -> file
 export const releaseTree: any = {
-  windows: {
-    specific: {
-      installer: "WindowsInstaller",
-      portable: "WindowsZip",
+    windows: {
+        specific: {
+            installer: "WindowsInstaller",
+            portable: "WindowsZip",
+        },
+        generic: {
+            installer: "WindowsInstallerGeneric",
+            portable: "WindowsZipGeneric",
+        },
     },
-    generic: {
-      installer: "WindowsInstallerGeneric",
-      portable: "WindowsZipGeneric",
+    macos: {
+        generic: "MacOSIntel",
+        specific: "MacOS",
     },
-  },
-  macos: {
-    generic: "MacOSIntel",
-    specific: "MacOS",
-  },
-  linux: {
-    specific: {
-      portable: "Linux",
-      appimage: "LinuxAppImage",
+    linux: {
+        specific: {
+            portable: "Linux",
+            appimage: "LinuxAppImage",
+        },
+        generic: {
+            portable: "LinuxGeneric",
+            appimage: "LinuxAppImageGeneric",
+        },
     },
-    generic: {
-      portable: "LinuxGeneric",
-      appimage: "LinuxAppImageGeneric",
-    },
-  },
 };
-
-type Platform = "Windows" | "MacOS" | "Linux";
-type Architecture = "specific" | "generic";
-
-type WindowsDownloadType = "installer" | "portable";
-type LinuxDownloadType = "portable" | "appimage" | "flatpak";
-
-export type { Platform, Architecture, WindowsDownloadType, LinuxDownloadType };