From af724187720726c3f5581560a72aae8e0a087232 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 02:54:16 +0100
Subject: [PATCH] update landing page spacing

---
 src/app/(pages)/page.tsx | 58 +++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx
index 71bd8b0..7b4f769 100644
--- a/src/app/(pages)/page.tsx
+++ b/src/app/(pages)/page.tsx
@@ -29,37 +29,41 @@ const buttons: Button[] = [
 
 export default function Home(): ReactElement {
   return (
-    <div className="text-center flex flex-col gap-4 mt-4">
-      <div>
-        <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
-        <div className="text-lg">
-          <p>Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.</p>
-          <p>We offer you a simple and easy to use API.</p>
+    <div className="text-center flex flex-col gap-4">
+      <div className="p-4">
+        <div>
+          <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
+          <div className="text-lg">
+            <p>
+              Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
+            </p>
+            <p>We offer you a simple and easy to use API.</p>
+          </div>
+        </div>
+
+        <div className="flex flex-row gap-2 justify-center mt-4">
+          {buttons.map((button, index) => {
+            return (
+              <Tooltip key={index}>
+                <TooltipTrigger asChild>
+                  <Button key={index}>
+                    <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
+                      <p>{button.title}</p>
+                    </Link>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{button.tooltip}</p>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
         </div>
       </div>
 
-      <div className="flex flex-row gap-2 justify-center mt-4">
-        {buttons.map((button, index) => {
-          return (
-            <Tooltip key={index}>
-              <TooltipTrigger asChild>
-                <Button key={index}>
-                  <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
-                    <p>{button.title}</p>
-                  </Link>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{button.tooltip}</p>
-              </TooltipContent>
-            </Tooltip>
-          );
-        })}
-      </div>
+      <Separator />
 
-      <Separator className="mt-6 mb-6" />
-
-      <div className="flex flex-col gap-4 items-center">
+      <div className="flex flex-col gap-4 items-center p-4">
         <div className="text-center">
           <p className="font-semibold text-xl">API Statistics</p>
           <p>View the statistics for the API in real-time!</p>