start work on cleaning up types and add try a player and server to their pages

src/app/(pages)/page.tsx

@@ -5,36 +5,9 @@ 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";
+import { LandingButton } from "@/app/types/landing/landing-button";
 
-type Button = {
-  /**
-   * The title of the button.
-   */
-  title: string;
-
-  /**
-   * The tooltip to display for this statistic.
-   */
-  tooltip: string;
-
-  /**
-   * The URL to go to.
-   */
-  url: string;
-
-  /**
-   * Whether clicking the button will
-   * open the link in a new tab.
-   */
-  openInNewTab?: boolean;
-
-  /**
-   * The class name to apply to the button.
-   */
-  className?: string;
-};
-
-const buttons: Button[] = [
+const buttons: LandingButton[] = [
   {
     title: "Get Started",
     tooltip: "Click to get started with the API",

src/app/(pages)/player/[[...id]]/page.tsx

@@ -12,23 +12,23 @@ import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 import { Title } from "@/app/components/title";
+import { Card } from "@/app/components/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import Link from "next/link";
+import Image from "next/image";
+import { PlayerPageParams } from "@/app/types/player/page-params";
+import { TryAPlayer } from "@/app/components/player/try-a-player";
 
 export const revalidate = 60;
 
-type Params = {
-  params: {
-    id: string;
-  };
-};
-
-export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
+export async function generateViewport({ params: { id } }: PlayerPageParams): Promise<Viewport> {
   const validPlayer = await isValidPlayer(id);
   return {
     themeColor: validPlayer ? Colors.green : Colors.red,
   };
 }
 
-export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
+export async function generateMetadata({ params: { id } }: PlayerPageParams): Promise<Metadata> {
   // No id provided
   if (!id || id.length === 0) {
     return generateEmbed({
@@ -55,7 +55,7 @@ export async function generateMetadata({ params: { id } }: Params): Promise<Meta
   }
 }
 
-export default async function Page({ params: { id } }: Params): Promise<ReactElement> {
+export default async function Page({ params: { id } }: PlayerPageParams): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let player: CachedPlayer | undefined = undefined; // The player to display
 
@@ -98,6 +98,9 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
           </ContextMenuContent>
         </ContextMenu>
       )}
+
+      {/* Try a Player */}
+      {player == null && !error && <TryAPlayer />}
     </div>
   );
 }

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -5,7 +5,6 @@ import { ServerView } from "@/app/components/server/server-view";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
 import { Colors } from "@/app/common/colors";
 import { generateEmbed } from "@/app/common/embed";
-import { formatNumber } from "@/app/common/number-utils";
 import { isValidServer } from "@/app/common/server";
 import { capitalizeFirstLetter } from "@/app/common/string-utils";
 import config from "@root/config.json";
@@ -19,16 +18,16 @@ import {
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 import { Title } from "@/app/components/title";
+import { Card } from "@/app/components/card";
+import Link from "next/link";
+import Image from "next/image";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import { TryMeServer } from "@/app/types/server/try-me-server";
+import { ServerPageParams } from "@/app/types/server/page-params";
+import { TryAServer } from "@/app/components/server/try-a-server";
 
 export const revalidate = 60;
 
-type Params = {
-  params: {
-    platform: ServerPlatform;
-    hostname: string;
-  };
-};
-
 /**
  * Gets the favicon for a server
  *
@@ -57,14 +56,14 @@ function checkPlatform(platform: ServerPlatform): boolean {
   return platform === ServerPlatform.Java || platform === ServerPlatform.Bedrock;
 }
 
-export async function generateViewport({ params: { platform, hostname } }: Params): Promise<Viewport> {
+export async function generateViewport({ params: { platform, hostname } }: ServerPageParams): Promise<Viewport> {
   const validPlayer = await isValidServer(platform, hostname);
   return {
     themeColor: validPlayer || !platform ? Colors.green : Colors.red,
   };
 }
 
-export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
+export async function generateMetadata({ params: { platform, hostname } }: ServerPageParams): Promise<Metadata> {
   if (!checkPlatform(platform)) {
     // Invalid platform
     return generateEmbed({
@@ -100,7 +99,7 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
   }
 }
 
-export default async function Page({ params: { platform, hostname } }: Params): Promise<ReactElement> {
+export default async function Page({ params: { platform, hostname } }: ServerPageParams): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined = undefined; // The server to display
   let invalidPlatform: boolean = !checkPlatform(platform); // Whether the platform is invalid
@@ -129,7 +128,10 @@ export default async function Page({ params: { platform, hostname } }: Params):
         <LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname && hostname[0]} />
       </div>
 
+      {/* An errored occurred when looking up the server */}
       {error && <ErrorCard message={error} />}
+
+      {/* The server */}
       {server != null && (
         <ContextMenu>
           <ContextMenuTrigger asChild>
@@ -147,6 +149,9 @@ export default async function Page({ params: { platform, hostname } }: Params):
           </ContextMenuContent>
         </ContextMenu>
       )}
+
+      {/* Try a Server */}
+      {server == null && !error && <TryAServer />}
     </div>
   );
 }