Move featured items to the config, and make it more responsive

Frontend/config.json

@@ -34,5 +34,19 @@
 		"Server": "/player",
 		"Mojang": "/mojang",
 		"Docs": "/docs"
-	}
+	},
+	"featuredItems": [
+		{
+			"name": "Player Lookup",
+			"description": "Wanna find a player? You can locate them here by their username or UUID.",
+			"image": "/media/featured/server.png",
+			"href": "/player"
+		},
+		{
+			"name": "Server Lookup",
+			"description": "Fugiat culpa est consequat nostrud exercitation ut id ex in.",
+			"image": "/media/featured/server.png",
+			"href": "/player"
+		}
+	]
 }

Frontend/src/app/(pages)/docs/page.tsx

@@ -1,7 +1,7 @@
 import Creeper from "@/components/creeper";
 import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { cn } from "../../lib/utils";
 
 /**
  * The documentation page.

Frontend/src/app/components/landing/featured-content.tsx

@@ -1,35 +1,41 @@
+import config from "@/config";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
+import { FeaturedItemProps } from "@/types/config";
 import Link from "next/link";
 
+/**
+ * The featured content component.
+ *
+ * @returns the featured content jsx
+ */
 const FeaturedContent = (): JSX.Element => (
 	<div className="-translate-y-14 flex justify-center items-center">
-		<div className="grid grid-cols-2 gap-5">
+		<div className="max-w-2xl flex flex-wrap justify-center gap-5">
-			<FeaturedItem
+			{config.featuredItems.map((item, index) => (
-				name="Player Lookup"
+				<FeaturedItem key={index} {...item} />
-				description="Id dolore elit mollit adipisicing adipisicing."
+			))}
-				image="/media/featured/server.png"
-				href="/player"
-			/>
 		</div>
 	</div>
 );
 
+/**
+ * A featured item component.
+ *
+ * @param props the item props
+ * @returns the item jsx
+ */
 const FeaturedItem = ({
 	name,
 	description,
 	image,
 	href,
-}: {
+}: FeaturedItemProps): JSX.Element => (
-	name: string;
-	description: string;
-	image: string;
-	href: string;
-}): JSX.Element => (
 	<Link
-		className={
+		className={cn(
-			"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu"
+			"pt-28 w-[19rem] h-80 flex flex-col gap-1 items-center rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu",
-		}
+			"bg-[url('" + image + "')] bg-center bg-cover bg-no-repeat" // Couldn't do inline variable interpolation, it threw an error
+		)}
 		href={href}
 	>
 		<h1

Frontend/src/app/not-found.tsx

@@ -1,6 +1,6 @@
-import Creeper from "./components/creeper";
+import Creeper from "@/components/creeper";
-import { minecrafter } from "./font/fonts";
+import { minecrafter } from "@/font/fonts";
-import { cn } from "./lib/utils";
+import { cn } from "@/lib/utils";
 
 /**
  * The 404 page.

Frontend/src/app/types/config.d.ts

@@ -39,4 +39,35 @@ interface Config {
 	navbarLinks: {
 		[name: string]: string;
 	};
+
+	/**
+	 * Featured items for the landing page.
+	 */
+	featuredItems: FeaturedItemProps[];
 }
+
+/**
+ * Props for a featured item
+ * on the landing page.
+ */
+type FeaturedItemProps = {
+	/**
+	 * The name of this item.
+	 */
+	name: string;
+
+	/**
+	 * The description of this item.
+	 */
+	description: string;
+
+	/**
+	 * The image for this item.
+	 */
+	image: string;
+
+	/**
+	 * The href link for this item.
+	 */
+	href: string;
+};