Add server recommendations

Frontend/src/app/(pages)/server/[[...slug]]/page.tsx

@@ -16,6 +16,7 @@ import {
     type RestfulMCAPIError,
     ServerPlatform,
 } from "restfulmc-lib";
+import ServerRecommendations from "@/components/server/server-recommendations";
 
 /**
  * The page to lookup a server.
@@ -43,8 +44,10 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 
     // Render the page
     return (
-        <main className="px-3 h-screen flex justify-center items-center">
+        <main className="px-3 h-screen flex flex-col gap-7 justify-center items-center">
             <div className="flex flex-col gap-7">
+                {/* Header */}
+                <div className="relative flex flex-col gap-7">
                     <h1
                         className={cn(
                             "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
@@ -67,14 +70,17 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
                         {/* Search */}
                         <ServerSearch platform={platform} hostname={hostname} />
                     </div>
+                </div>
+            </div>
 
-                {/* Server Result */}
+            {/* Server Result & Recommendations */}
-                {result && (
+            {result ? (
                 <div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
                     <ServerResult server={result} />
                 </div>
+            ) : (
+                <ServerRecommendations />
             )}
-            </div>
         </main>
     );
 };

Frontend/src/app/components/server/server-recommendations.tsx

@@ -0,0 +1,66 @@
+import { ReactElement } from "react";
+import { cn } from "@/lib";
+import { minecrafter } from "@/font/fonts";
+import { ServerPlatform } from "restfulmc-lib";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+/**
+ * The recommendations for a server.
+ */
+const RECOMMENDATIONS: {
+    [hostname: string]: ServerPlatform;
+} = {
+    "hypixel.net": ServerPlatform.JAVA,
+    "cubecraft.net": ServerPlatform.JAVA,
+    "wildprison.net": ServerPlatform.JAVA,
+    "wildprison.bedrock.minehut.gg": ServerPlatform.BEDROCK,
+    "play.lbsg.net": ServerPlatform.BEDROCK,
+};
+
+/**
+ * The recommendations for
+ * a server to test.
+ *
+ * @return the recommendations jsx
+ */
+const ServerRecommendations = (): ReactElement => (
+    <div className="p-4 flex flex-col gap-2.5 items-center bg-muted rounded-xl">
+        {/* Header */}
+        <h1
+            className={cn(
+                "text-xl text-minecraft-green-3",
+                minecrafter.className
+            )}
+        >
+            Try A Server
+        </h1>
+
+        {/* Recommendations */}
+        <div className="max-w-2xl flex flex-wrap gap-2 justify-center">
+            {Object.entries(RECOMMENDATIONS).map(
+                (
+                    [hostname, platform]: [string, ServerPlatform],
+                    index: number
+                ): ReactElement => (
+                    <Link key={index} href={`/server/${platform}/${hostname}`}>
+                        <Button
+                            className="px-10 flex gap-2.5 font-semibold hover:opacity-85 transition-all transform-gpu"
+                            variant="outline"
+                        >
+                            <Image
+                                src={`/media/platform/${platform}.png`}
+                                alt=""
+                                width={26}
+                                height={26}
+                            />
+                            <span>{hostname}</span>
+                        </Button>
+                    </Link>
+                )
+            )}
+        </div>
+    </div>
+);
+export default ServerRecommendations;

Frontend/src/app/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                    "border border-zinc-700 bg-transparent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",