From 94ec0bd4d271a45b696bf22c7ed2b8b01b366a5e Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Thu, 2 May 2024 13:51:57 +0200
Subject: [PATCH] Update landing page layout and content

---
 app/page.tsx               |  1 -
 components/LandingPage.tsx | 56 ++++++++++++++++++++------------------
 components/Navbar.tsx      |  2 +-
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 5d7ec5a..bfd006b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,7 +15,6 @@ function page() {
           </div>
       </div>
       <div className="h-screen">
-
       </div>
     </div>
   );
diff --git a/components/LandingPage.tsx b/components/LandingPage.tsx
index 5cc4a50..b86e1e1 100644
--- a/components/LandingPage.tsx
+++ b/components/LandingPage.tsx
@@ -6,33 +6,35 @@ import Link from "next/link";
 
 export default function LandingPage() {
   return (
-    <div className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex  h-[50rem] w-full flex-col items-center justify-center">
-      <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
-      <div className="animate-fade-up flex flex-col items-center justify-center">
-        <Image src="/logo.png" alt="proxmox" width={150} height={150} />
-        <h1 className="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-4 text-4xl font-bold text-transparent sm:text-5xl">
-          Proxmox VE Helper-Scripts
-        </h1>
-        <p className="bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text text-xl">
-          {" "}
-          Proxmox VE Scripts for{" "}
-          <Typewriter
-            words={["Streamlining", "Automating", "Simplifying", "Optimizing"]}
-            loop={false}
-            cursor={true}
-            typeSpeed={70}
-            deleteSpeed={50}
-            delaySpeed={1250}
-          />
-          Your Homelab
-        </p>
-        <div className="flex gap-2 py-4">
-          <Button asChild>
-            <Link href="/scripts">Get Started</Link>
-          </Button>
-          <Button variant="secondary" asChild>
-            <Link href="/about">Learn More</Link>
-          </Button>
+    <div className="flex justify-center">
+      <div className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex h-[50rem] w-5/6 flex-col items-center justify-center">
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
+        <div className="animate-fade-up flex flex-col items-center justify-center">
+          <Image src="/logo.png" alt="proxmox" width={150} height={150} />
+          <h1 className="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-4 text-4xl font-bold text-transparent sm:text-5xl">
+            Proxmox VE Helper-Scripts
+          </h1>
+          <p className="bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text text-xl">
+            {" "}
+            Proxmox VE Scripts for{" "}
+            <Typewriter
+              words={["Streamlining", "Automating", "Simplifying", "Optimizing"]}
+              loop={false}
+              cursor={true}
+              typeSpeed={70}
+              deleteSpeed={50}
+              delaySpeed={1250}
+            />
+            Your Homelab
+          </p>
+          <div className="flex gap-2 py-4">
+            <Button asChild>
+              <Link href="/scripts">Get Started</Link>
+            </Button>
+            <Button variant="secondary" asChild>
+              <Link href="/about">Learn More</Link>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index ab27003..202b228 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -27,7 +27,7 @@ function Navbar() {
   return (
     <>
       <div
-        className={`sticky left-0 top-0 z-50 flex w-full justify-center duration-200 ease-in-out ${isScrolled ? "border-b backdrop-blur-lg" : ""}`}
+        className={`fixed left-0 top-0 z-50 flex w-full justify-center duration-200 ease-in-out ${isScrolled ? "border-b backdrop-blur-lg" : ""}`}
       >
         <div className="flex h-20 w-full max-w-7xl items-center justify-between">
           <h1 className="font-semibold ">