From abffc6361c97b93471a225b944d075a3841dbf5f Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Mon, 19 Aug 2024 23:09:41 +0200
Subject: [PATCH] refactor: Update marketplace page layout and styles

---
 src/components/features.tsx   |  6 +++---
 src/components/navigation.tsx | 26 ++++++++++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 250c093..b3f2e69 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -139,8 +139,8 @@ export default function Features() {
             />
           </div>
         </div>
-        <div className="w-full xl:mr-4 flex flex-col">
-          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 xl:mt-0 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
+        <div className="w-full flex flex-col">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105">
             <h1 className="text-5xl font-bold">Profile switching</h1>
             <p className="text-muted-foreground mt-3">
             Seamlessly switch between work and personal profiles for a focused browsing experience.
@@ -153,7 +153,7 @@ export default function Features() {
               alt=""
             />
           </div>
-          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105 mt-8">
             <h1 className="text-5xl font-bold">Side web panels</h1>
             <p className="text-muted-foreground mt-3">
             Access favorite sites and services instantly, without leaving your current page.
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index ed8191b..ae22d38 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -91,12 +91,26 @@ export function Navigation() {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <Link target="_blank" href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink" legacyBehavior passHref className="opacity-70 cursor-not-allowed">
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                <HeartIcon size={16} />
-                <span className="ml-2">Donate</span>
-              </NavigationMenuLink>
-            </Link>
+            <NavigationMenuTrigger>
+              <HeartIcon size={16} />
+              <span className="ml-2">Donate</span>
+            </NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                <ListItem
+                  title="Patreon"
+                  href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+                >
+                  Support us on Patreon and get exclusive rewards and keep the project alive.
+                </ListItem>
+                <ListItem
+                  title="Ko-fi"
+                  href="https://ko-fi.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+                >
+                  Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
+                </ListItem>
+              </ul>
+            </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
             <NavigationMenuTrigger>Useful Links</NavigationMenuTrigger>