From 3493fdca5f71319e1dabaec922a75ec49095b25b Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Mon, 2 Sep 2024 22:47:28 +0200
Subject: [PATCH] feat: Add language switcher component to footer

Enhance user experience by adding a language switcher component to the footer. This allows users to easily change the language of the website. The code changes include:
- Adding the `LocaleSwitcher` component to the footer.
- Updating the footer layout to accommodate the language switcher.
- Importing the `LocaleSwitcher` component in the `Footer` component.
---
 src/components/mobile-nav.tsx | 25 ++++++++++++++++++-------
 src/components/navigation.tsx | 20 ++++++++++----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 396df02..99c9ef4 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -37,31 +37,41 @@ export function MobileNav() {
             >
                <Logo withText />
             </MobileLink>
-            <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+            <ScrollArea className="mt-4 h-[calc(100vh-8rem)] pl-6">
                <div className="flex flex-col space-y-3">
                   <MobileLink
                      href="/download"
                     onOpenChange={setOpen}
                   >
-                    Download
+                    <div>Download</div>
+                     <p className="opacity-60 text-xs">
+                        Get the latest version of Zen Browser.
+                     </p>
                   </MobileLink>
                   <MobileLink
                      href="/themes"
                     onOpenChange={setOpen}
                   >
-                    Theme Store
+                    <div>Theme Store</div>
+                     <p className="opacity-60 text-xs">
+                        Customize your browsing experience.
+                     </p>
                   </MobileLink>
                   <MobileLink
                      href="/release-notes"
                     onOpenChange={setOpen}
                   >
-                    Release Notes
+                    <div>Release Notes</div>
+                     <p className="opacity-60 text-xs">
+                        Stay up to date with the latest changes.
+                     </p>
                   </MobileLink>
                   <MobileLink
                      href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
                      onOpenChange={setOpen}
                   >
-                     Donate {"<"}3
+                     <div>Donate {"<"}3</div>
+                     <p className="opacity-60 text-xs">Support the project</p>
                   </MobileLink>
                   {components.map(({title, href, description}) => (
                      <MobileLink
@@ -69,7 +79,8 @@ export function MobileNav() {
                         key={href}
                         onOpenChange={setOpen}
                      >
-                        {title}
+                        <div>{title}</div>
+                        <p className='opacity-60 text-xs'>{description}</p>
                      </MobileLink>
                   ))}
                 </div>
@@ -100,7 +111,7 @@ function MobileLink({
             router.push(href.toString())
             onOpenChange?.(false)
          }}
-         className={ny(className)}
+         className={ny(className, "my-4")}
          {...props}
       >
          {children}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index edbcc39..849a2cb 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -20,29 +20,29 @@ import { HeartFilledIcon } from "@radix-ui/react-icons"
  
 export const components: { title: string; href: string; description: string }[] = [
   {
-    title: "nav-components-privacy-policy",
+    title: "Privacy Policy",
     href: "/privacy-policy",
-    description: "nav-components-privacy-policy-text",
+    description: "Read our privacy policy to learn more about how we handle your data."
   },
   {
-    title: "nav-components-discord",
+    title: "Discord",
     href: "https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748",
-    description: "nav-components-discord-text"
+    description: "Join our Discord server to chat with the community and get support."
   },
   {
-    title: "nav-components-source-code",
+    title: "Source Code",
     href: "https://github.com/zen-browser",
-    description: "nav-components-source-code-text"
+    description: "View the source code on GitHub and contribute to the project."
   },
   {
-    title: "nav-components-branding-assets",
+    title: "Branding Assets",
     href: "/branding-assets",
-    description: "nav-components-branding-assets-text"
+    description: "Download our branding assets to use in your projects."
   },
   {
-    title: "nav-components-documentation",
+    title: "Documentation",
     href: "https://docs.zen-browser.app/",
-    description: "nav-components-documentation-text"
+    description: "Read the documentation to learn more about Zen Browser."
   }
 ]