From c233ae0aa8a5d7163cf52a9db387ea3043bf76f7 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Wed, 13 Mar 2024 22:05:43 +0100
Subject: [PATCH] update navbar to show links

---
 src/components/home/LaunchAppButton.jsx    |  5 ++-
 src/components/mobile/AppleStoreButton.jsx | 33 +++++++++++++++++
 src/components/mobile/GooglePlayButton.jsx | 34 +++++++++++++++++
 src/components/mobile/Hero.jsx             | 43 ++--------------------
 src/components/navbar/Navbar.jsx           |  8 +++-
 5 files changed, 82 insertions(+), 41 deletions(-)
 create mode 100644 src/components/mobile/AppleStoreButton.jsx
 create mode 100644 src/components/mobile/GooglePlayButton.jsx

diff --git a/src/components/home/LaunchAppButton.jsx b/src/components/home/LaunchAppButton.jsx
index 34a2225..7153f4e 100644
--- a/src/components/home/LaunchAppButton.jsx
+++ b/src/components/home/LaunchAppButton.jsx
@@ -7,7 +7,10 @@ const LaunchAppButton = () => {
 
   return (
     <>
-      <Button link={alphadayApp} className={`bg-lightblue`}>
+      <Button
+        link={alphadayApp}
+        className={`bg-lightblue whitespace-nowrap !text-black pt-2.5`}
+      >
         Launch app
       </Button>
     </>
diff --git a/src/components/mobile/AppleStoreButton.jsx b/src/components/mobile/AppleStoreButton.jsx
new file mode 100644
index 0000000..8c84dc2
--- /dev/null
+++ b/src/components/mobile/AppleStoreButton.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import AppleSVG from "../../assets/svg/apple.svg";
+import CONFIG from "../../config";
+import { twMerge } from "tailwind-merge";
+
+const AppleStoreButton = ({ type }) => {
+  return (
+    <a href={CONFIG.appStore.apple}>
+      <button
+        type="button"
+        class={twMerge(
+          "flex items-center shadow-xl font-montserrat justify-center px-1 min-w-[150px] mt-3 text-black bg-transparent border-2 border-black pt-1 rounded-lg",
+          type === "sm" &&
+            "min-w-[40px] py-1.5 border-0 mt-0 bg-lightblue drop-shadow-eclipse hover:opacity-80 transition-all duration-300"
+        )}
+      >
+        <div class={twMerge("mr-2", type === "sm" && "mr-0")}>
+          <img src={AppleSVG} className="w-7 h-7 self-center" />
+        </div>
+        {type !== "sm" && (
+          <div>
+            <div class="text-xs text-left tracking-tighter">
+              Download on the
+            </div>
+            <div class="-mt-1 text-base text-left font-semibold">App Store</div>
+          </div>
+        )}
+      </button>
+    </a>
+  );
+};
+
+export default AppleStoreButton;
diff --git a/src/components/mobile/GooglePlayButton.jsx b/src/components/mobile/GooglePlayButton.jsx
new file mode 100644
index 0000000..ed181f7
--- /dev/null
+++ b/src/components/mobile/GooglePlayButton.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import GooglePlaySVG from "../../assets/svg/google-play.svg";
+import CONFIG from "../../config";
+import { twMerge } from "tailwind-merge";
+
+// type: "sm" | "base"
+const GooglePlayButton = ({ type }) => {
+  return (
+    <a className="ml-2" href={CONFIG.appStore.google}>
+      <button
+        type="button"
+        class={twMerge(
+          "flex items-center shadow-xl font-montserrat justify-center px-1 min-w-[150px] mt-3 text-black bg-transparent border-2 border-black pt-1 rounded-lg",
+          type === "sm" &&
+            "min-w-[40px] py-1.5 border-0 mt-0 bg-lightblue drop-shadow-eclipse hover:opacity-80 transition-all duration-300"
+        )}
+      >
+        <div class={twMerge("mr-2", type === "sm" && "mr-0")}>
+          <img src={GooglePlaySVG} className="w-7 h-7 self-baseline" />
+        </div>
+        {type !== "sm" && (
+          <div>
+            <div class="text-xs text-left tracking-tighter">Android app on</div>
+            <div class="-mt-1 text-base text-left font-semibold">
+              Google Play
+            </div>
+          </div>
+        )}
+      </button>
+    </a>
+  );
+};
+
+export default GooglePlayButton;
diff --git a/src/components/mobile/Hero.jsx b/src/components/mobile/Hero.jsx
index f8c6f31..2f4438b 100644
--- a/src/components/mobile/Hero.jsx
+++ b/src/components/mobile/Hero.jsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { Section } from "../../shared";
-import AppleSVG from "../../assets/svg/apple.svg";
-import GooglePlaySVG from "../../assets/svg/google-play.svg";
 import ArrowDownSVG from "../../assets/svg/arrow-down.svg";
-import CONFIG from "../../config";
+import GooglePlayButton from "./GooglePlayButton";
+import AppleStoreButton from "./AppleStoreButton";
 
 export default function () {
   return (
@@ -22,42 +21,8 @@ export default function () {
           effortlessly.
         </div>
         <div className="text-lg text-black mt-5 flex">
-          <a href={CONFIG.appStore.apple}>
-            <button
-              type="button"
-              class="flex items-center shadow-xl font-montserrat justify-center px-1 min-w-[150px] mt-3 text-black bg-transparent border-2 border-black pt-1 rounded-lg"
-            >
-              <div class="mr-2">
-                <img src={AppleSVG} className="w-7 h-7 self-center" />
-              </div>
-              <div>
-                <div class="text-xs text-left tracking-tighter">
-                  Download on the
-                </div>
-                <div class="-mt-1 text-base text-left font-semibold">
-                  App Store
-                </div>
-              </div>
-            </button>
-          </a>
-          <a className="ml-2" href={CONFIG.appStore.google}>
-            <button
-              type="button"
-              class="flex items-center shadow-xl font-montserrat justify-center px-1 min-w-[150px] mt-3 text-black bg-transparent border-2 border-black pt-1 rounded-lg"
-            >
-              <div class="mr-2">
-                <img src={GooglePlaySVG} className="w-7 h-7 self-baseline" />
-              </div>
-              <div>
-                <div class="text-xs text-left tracking-tighter">
-                  Android app on
-                </div>
-                <div class="-mt-1 text-base text-left font-semibold">
-                  Google Play
-                </div>
-              </div>
-            </button>
-          </a>
+          <AppleStoreButton />
+          <GooglePlayButton />
         </div>
         <div className="flex justify-center mt-20 mb-10">
           <img src={ArrowDownSVG} className="w-8 h-8 animate-bounce" />
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 278617e..22bcbfe 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -5,6 +5,8 @@ import LaunchAppButton from "../home/LaunchAppButton";
 import discordLogo from "../../images/socials/discord.svg";
 import twitterLogo from "../../images/socials/twitter.svg";
 import config from "../../config";
+import AppleStoreButton from "../mobile/AppleStoreButton";
+import GooglePlayButton from "../mobile/GooglePlayButton";
 
 function Navbar({ isPrivacyPolicy }) {
   const { twitter, discord } = config;
@@ -76,8 +78,12 @@ function Navbar({ isPrivacyPolicy }) {
                   <img src={twitterLogo} alt="twitter" />
                 </a>
               </div>
-              <div ref={element} className="scroll-hide absolute mb-1">
+              <div ref={element} className="scroll-hide absolute mb-1 flex">
                 <LaunchAppButton />
+                <div className="flex ml-2">
+                  <AppleStoreButton type="sm" />
+                  <GooglePlayButton type="sm" />
+                </div>
               </div>
             </div>
           </div>