From e8000a1fbc1d66493ffb03b4eeb80eaa531dfec5 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 21 Apr 2024 12:33:30 -0400
Subject: [PATCH] Make the nav and hero more mobile responsive

---
 Frontend/src/app/components/github-star-button.tsx | 2 +-
 Frontend/src/app/components/landing/hero.tsx       | 4 ++--
 Frontend/src/app/components/navbar.tsx             | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx
index 312a432..05a2415 100644
--- a/Frontend/src/app/components/github-star-button.tsx
+++ b/Frontend/src/app/components/github-star-button.tsx
@@ -45,7 +45,7 @@ const GitHubStarButton = (): ReactElement => {
             rel="noopener noreferrer"
             target="_blank"
         >
-            <MinecraftButton className="flex gap-1.5 items-center group/star">
+            <MinecraftButton className="px-3 xs:px-5 flex gap-1.5 items-center group/star">
                 {/* Star Count */}
                 <Suspense
                     fallback={<Skeleton className="w-4 h-5 rounded-md" />}
diff --git a/Frontend/src/app/components/landing/hero.tsx b/Frontend/src/app/components/landing/hero.tsx
index e9def42..a2af413 100644
--- a/Frontend/src/app/components/landing/hero.tsx
+++ b/Frontend/src/app/components/landing/hero.tsx
@@ -29,9 +29,9 @@ const Hero = (): ReactElement => (
         </div>
 
         {/* Links */}
-        <div className="flex gap-5 xs:gap-10">
+        <div className="flex gap-3.5 xs:gap-5 sm:gap-10">
             <Link href="/docs">
-                <MinecraftButton className="w-44 h-12">
+                <MinecraftButton className="w-36 xs:w-44 h-12">
                     Get Started
                 </MinecraftButton>
             </Link>
diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx
index 299c68f..fb37f64 100644
--- a/Frontend/src/app/components/navbar.tsx
+++ b/Frontend/src/app/components/navbar.tsx
@@ -17,8 +17,8 @@ import { ReactElement } from "react";
 const Navbar = (): ReactElement => {
     const path: string = usePathname(); // Get the current path
     return (
-        <nav className="fixed inset-x-0 flex h-16 px-2.5 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
-            <div className="relative w-full flex justify-between items-center">
+        <nav className="fixed inset-x-0 flex h-16 px-3 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
+            <div className="w-full flex justify-between items-center">
                 {/* App Branding - Left */}
                 <Link
                     className={cn(
@@ -41,7 +41,7 @@ const Navbar = (): ReactElement => {
                 </Link>
 
                 {/* Center - Links */}
-                <div className="absolute inset-x-0 md:left-20 lg:left-0 flex justify-center md:justify-start lg:justify-center">
+                <div className="ml-auto absolute right-3 xs:inset-x-0 md:left-28 lg:left-0 flex justify-center md:justify-start lg:justify-center">
                     <div className="flex gap-7">
                         {Object.entries(config.navbarLinks).map(
                             (link: [string, string], index: number) => {