Make the nav and landing page better on mobile

Frontend/src/app/components/landing/hero.tsx

@@ -14,7 +14,10 @@ const Hero = (): JSX.Element => (
 		<div className="flex flex-col gap-4 items-center text-center">
 			{/* Title */}
 			<h1
-				className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
+				className={cn(
+					"text-5xl sm:text-6xl text-minecraft-green-3",
+					minecrafter.className
+				)}
 			>
 				{config.siteName}
 			</h1>

Frontend/src/app/components/navbar.tsx

@@ -20,20 +20,20 @@ import { Suspense } from "react";
 const Navbar = (): JSX.Element => {
 	const path: string = usePathname(); // Get the current path
 	return (
-		<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
+		<nav className="fixed inset-x-0 flex h-16 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
 			{/* Left */}
-			<div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
+			<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
 				{/* App Branding */}
 				<Link
 					className={cn(
-						"hidden sm:flex text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
+						"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
 						minecrafter.className
 					)}
 					href="/"
 				>
 					{/* Small Screens */}
 					<Image
-						className="hidden sm:flex lg:hidden"
+						className="lg:hidden"
 						src="/media/logo.webp"
 						alt="Site Logo"
 						width={42}