Refactor various components and configuration for mobile responsiveness. (#1679)

frontend/src/app/page.tsx

@@ -61,7 +61,7 @@ export default function Page() {
 												`inline`,
 											)}
 										>
-                    Scripts by Tteck
+											Scripts by tteck
 										</span>
 									</AnimatedGradientText>
 								</div>
@@ -70,7 +70,7 @@ export default function Page() {
 								<DialogHeader>
 									<DialogTitle>Thank You!</DialogTitle>
 									<DialogDescription>
-                  A big thank you to Tteck and the many contributors who have
+										A big thank you to tteck and the many contributors who have
 										made this project possible. Your hard work is truly
 										appreciated by the entire Proxmox community!
 									</DialogDescription>
@@ -102,29 +102,20 @@ export default function Page() {
 						</Dialog>
 
 						<div className="flex flex-col gap-4">
-            <h1 className="max-w-2xl text-center text-5xl font-semibold tracking-tighter md:text-7xl">
+							<h1 className="max-w-2xl text-center text-3xl font-semibold tracking-tighter md:text-7xl">
 								Make managing your Homelab a breeze
 							</h1>
-            <p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:text-xl">
+							<div className="max-w-2xl gap-2 flex flex-col text-center sm:text-lg text-sm leading-relaxed tracking-tight text-muted-foreground md:text-xl">
-              We are a community-driven initiative that simplifies the setup of
+								<p>
-              Proxmox Virtual Environment (VE).
+									We are a community-driven initiative that simplifies the setup
-              <br />
+									of Proxmox Virtual Environment (VE).
-              <br />
-              Originally created by{" "}
-              <a href="https://github.com/tteck" target="_blank">
-                tteck
-              </a>
-              , these scripts automate and streamline
-              <br />
-              the process of creating and configuring Linux containers (LXC) and
-              virtual machines (VMs) on Proxmox VE.
-              <br />
-              <br />
-              With 200+ scripts to help you manage your{" "}
-              <b>Proxmox VE environment</b>.<br />
-              Whether you&#39;re a seasoned user or a newcomer, we&#39;ve got
-              you covered.
 								</p>
+								<p>
+									With 200+ scripts to help you manage your{" "}
+									<b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
+									user or a newcomer, we&#39;ve got you covered.
+								</p>
+							</div>
 						</div>
 						<div className="flex flex-row gap-3">
 							<Link href="/scripts">

frontend/src/components/Footer.tsx

@@ -5,7 +5,7 @@ export default function Footer() {
   return (
     <div className="supports-backdrop-blur:bg-background/90 mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg">
       <div className="flex w-full justify-between">
-        <div className="mx-6 w-full max-w-7xl text-sm text-muted-foreground">
+        <div className="mx-6 w-full max-w-7xl text-xs sm:text-sm text-muted-foreground">
           Website built by the community. The source code is avaliable on{" "}
           <Link
             href={`https://github.com/community-scripts/${basePath}`}

frontend/src/components/Navbar.tsx

@@ -9,12 +9,7 @@ import { navbarLinks } from "@/config/siteConfig";
 import CommandMenu from "./CommandMenu";
 import StarOnGithubButton from "./ui/star-on-github-button";
 import { ThemeToggle } from "./ui/theme-toggle";
-import {
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./ui/tooltip";
 
 export const dynamic = "force-dynamic";
 
@@ -39,27 +34,30 @@ function Navbar() {
 						isScrolled ? "glass border-b bg-background/50" : ""
 					}`}
 				>
-        <div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row">
+					<div className="flex h-20 w-full max-w-7xl items-center justify-between sm:flex-row">
 						<Link
 							href={"/"}
-            className="flex cursor-pointer flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
+							className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
 						>
 							<Image
 								height={18}
 								unoptimized
 								width={18}
 								alt="logo"
-              src="logo.png"
+								src="/ProxmoxVE/logo.png"
+								className=""
 							/>
-            <span className="hidden lg:block">Proxmox VE Helper-Scripts</span>
+							<span className="hidden md:block">Proxmox VE Helper-Scripts</span>
 						</Link>
 						<div className="flex gap-2">
 							<CommandMenu />
 							<StarOnGithubButton />
-            {navbarLinks.map(({ href, event, icon, text }) => (
+							{navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
 								<TooltipProvider key={event}>
 									<Tooltip delayDuration={100}>
-                  <TooltipTrigger>
+										<TooltipTrigger
+											className={mobileHidden ? "hidden lg:block" : ""}
+										>
 											<Button variant="ghost" size={"icon"} asChild>
 												<Link
 													target="_blank"

frontend/src/config/siteConfig.tsx

@@ -1,7 +1,7 @@
 import { OperatingSystem } from "@/lib/types";
 import { MessagesSquare, Scroll } from "lucide-react";
-import { FaDiscord, FaGithub } from "react-icons/fa";
 import React from "react";
+import { FaDiscord, FaGithub } from "react-icons/fa";
 
 export const basePath = process.env.BASE_PATH;
 
@@ -25,16 +25,22 @@ export const navbarLinks = [
 		event: "Change Log",
 		icon: <Scroll className="h-4 w-4" />,
 		text: "Change Log",
+    mobileHidden: true,
 	},
-  !isMobile
+	{
-    ? {
 		href: `https://github.com/community-scripts/${basePath}/discussions`,
 		event: "Discussions",
 		icon: <MessagesSquare className="h-4 w-4" />,
 		text: "Discussions",
-      }
+    mobileHidden: true,
-    : null,
+	},
-].filter(Boolean) as { href: string; event: string; icon: React.ReactNode; text: string }[];
+].filter(Boolean) as {
+	href: string;
+	event: string;
+	icon: React.ReactNode;
+	text: string;
+	mobileHidden?: boolean;
+}[];
 
 export const mostPopularScripts = [
 	"Proxmox VE Post Install",