From 046c3133730f6445a400f3307bfbf84b04724e67 Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Mon, 2 Sep 2024 17:27:46 +0200
Subject: [PATCH] feat: Update footer with social media links and improve
 layout

The code changes include:
- Adding social media icons for GitHub, Discord, and Mastodon.
- Updating the layout of the footer to display the logo and follow us section.
- Updating the links in the footer to point to the correct pages.
---
 src/components/footer.tsx         | 112 +++++++++++++++++++++++++++---
 src/components/icons/mastodon.tsx |   7 ++
 2 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 src/components/icons/mastodon.tsx

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index c020ebf..980c725 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,18 +1,112 @@
+
 import Link from "next/link";
 import Logo from "./logo";
 import TextReveal from "./ui/text-reveal";
+import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+import { MastodonLogo } from "./icons/mastodon";
+import { Button } from "./ui/button";
 
 export default function Footer() {
   return (
-    <div className="font-medium flex-col md:flex-row px-10 md:px-0 border-t w-full border-grey py-10 mt-10 flex justify-center align-center">
-      Zen Browser © {new Date().getFullYear()} - Made with ❤️ by the Zen team.
-      <a
-        href={"https://github.com/zen-browser"}
-        target="_blank"
-        className="mt-5 md:mt-0 md:ml-2 font-bold"
-      >
-        Source Code
-      </a>
+    <div className="font-medium px-10 md:px-0 border-t w-full border-grey py-10 mt-10 flex align-center flex-col">
+      <div className="flex mx-auto border-b pb-10 justify-between pt-10 w-full lg:!w-2/3">
+        <div className="flex flex-col">
+          <Logo />
+          <div className="mt-auto">
+            <h1 className="text-2xl font-bold opacity-80">Zen Browser</h1>
+            <h2 className="text-md font-bold opacity-80 mt-6">Follow Us</h2>
+            <div className="flex mt-4 opacity-70">
+              <a href="https://github.com/zen-browser">
+                <GitHubLogoIcon className="w-5 h-5" />
+              </a>
+              <a href="discord.com/servers/mauro-s-little-sweatshop-1088172780480114748" className="ml-5">
+                <DiscordLogoIcon className="w-5 h-5" />
+              </a>
+              <a href="https://fosstodon.org/@zenbrowser" className="ml-5">
+                <MastodonLogo className="w-5 h-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col lg:flex-row">
+          <div>
+            <h2 className="text-md font-bold opacity-80">Get Started</h2>
+            <ul className="mt-4 opacity-70 font-normal">
+              <li>
+                <a href="/themes">
+                  Themes
+                </a>
+              </li>
+              <li className="mt-2">
+                <a href="/download">
+                  Download
+                </a>
+              </li>
+              <li className="mt-2">
+                <a href="/create-theme">
+                  Create a Theme
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="lg:ml-24">
+            <h2 className="text-md font-bold opacity-80">Get Help</h2>
+            <ul className="mt-4 opacity-70 font-normal">
+              <li>
+                <a href="https://discord.com/invite/mauro-s-little-sweatshop">
+                  Discord
+                </a>
+              </li>
+              <li className="mt-2 font-normal">
+                <a href="https://github.com/zen-browser/desktop/issues">
+                  Report an Issue
+                </a>
+              </li>
+            </ul>
+            <h2 className="text-md font-bold opacity-80 mt-8">About</h2>
+            <ul className="mt-4 opacity-70 font-normal">
+              <li className="mt-2">
+                <a href="/about">
+                  About Us
+                </a>
+              </li>
+              <li className="mt-2">
+                <a href="/privacy-policy">Privacy Policy</a>
+              </li>
+            </ul>
+          </div>
+          <div className="lg:ml-24">
+            <h2 className="text-md font-bold opacity-80">Resources</h2>
+            <ul className="mt-4 opacity-70 font-normal">
+              <li>
+                <a href="/branding-assets">Branding Assets</a>
+              </li>
+              <li className="mt-2">
+                <a href="https://github.com/zen-browser/desktop">Source Code</a>
+              </li>
+              <li className="mt-2">
+                <a href="https://docs.zen-browser.app">Documentation</a>
+              </li>
+              <li className="mt-2">
+                <a href="/release-notes">Release Notes</a>
+              </li>
+            </ul>
+            <h2 className="text-md font-bold opacity-80 mt-8">Support Us</h2>
+            <ul className="mt-4 opacity-70 font-normal">
+              <li>
+                <a href="https://patreon.com/zen_browser">Patreon</a>
+              </li>
+              <li className="mt-2">
+                <a href="https://ko-fi.com/zen_browser">Ko-fi</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="flex w-full pt-10 pr-5 pl-3 mx-auto lg:!w-2/3 items-center">
+        <p className="text-xs font-normal opacity-30">Crafted with ❤️ by the community - Copyright © {new Date().getFullYear()} Zen Browser</p>
+        <Button onClick={() => window.open("/download")} className="ml-auto">Download</Button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/icons/mastodon.tsx b/src/components/icons/mastodon.tsx
new file mode 100644
index 0000000..915ba5c
--- /dev/null
+++ b/src/components/icons/mastodon.tsx
@@ -0,0 +1,7 @@
+export const MastodonLogo = (props: any) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" {...props}>
+
+  <path fill="currentColor" d="M184 32H72a40 40 0 0 0-40 40v120a40 40 0 0 0 40 40h88a8 8 0 0 0 0-16H72a24 24 0 0 1-24-24v-8h136a40 40 0 0 0 40-40V72a40 40 0 0 0-40-40m24 112a24 24 0 0 1-24 24H48V72a24 24 0 0 1 24-24h112a24 24 0 0 1 24 24Zm-24-40v32a8 8 0 0 1-16 0v-32a16 16 0 0 0-32 0v32a8 8 0 0 1-16 0v-32a16 16 0 0 0-32 0v32a8 8 0 0 1-16 0v-32a32 32 0 0 1 56-21.13A32 32 0 0 1 184 104"></path>
+
+</svg>
+)
\ No newline at end of file