add a title component

src/app/(pages)/page.tsx

@@ -4,6 +4,7 @@ import { ReactElement } from "react";
 import { Button } from "../components/ui/button";
 import { Separator } from "../components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
+import { Title } from "@/app/components/title";
 
 type Button = {
   /**
@@ -51,16 +52,18 @@ const buttons: Button[] = [
 export default function Home(): ReactElement {
   return (
     <div className="text-center flex flex-col gap-4">
-      <div className="p-4">
-        <div>
-          <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
-          <div>
-            <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="p-2">
+        <Title
+          title="Minecraft Utilities"
+          subtitle={
+            <>
+              <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="flex flex-row gap-2 justify-center mt-4 flex-wrap">
           {buttons.map((button, index) => {
@@ -84,7 +87,7 @@ export default function Home(): ReactElement {
 
       <Separator />
 
-      <div className="flex flex-col gap-4 items-center pt-4">
+      <div className="flex flex-col gap-4 items-center p-2">
         <div className="text-center">
           <p className="font-semibold text-xl">API Statistics</p>
           <p>View the statistics for the API in real-time!</p>