More content

Frontend/config.json

@@ -32,6 +32,7 @@
 	"navbarLinks": {
 		"Player": "/player",
 		"Server": "/player",
-		"Mojang": "/mojang"
+		"Mojang": "/mojang",
+		"Docs": "/docs"
 	}
 }

Frontend/package.json

@@ -27,13 +27,14 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.1"
+    "eslint-config-next": "14.2.1",
+    "postcss": "^8",
+    "sleep-promise": "^9.1.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

Frontend/src/app/(pages)/layout.tsx

@@ -1,11 +1,11 @@
 import Navbar from "@/components/navbar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import config from "@/config";
+import { notoSans } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import ThemeProvider from "@/provider/theme-provider";
 import type { Metadata, Viewport } from "next";
 import PlausibleProvider from "next-plausible";
-import { Noto_Sans } from "next/font/google";
 import "../globals.css";
 
 /**
@@ -14,11 +14,6 @@ import "../globals.css";
 export const metadata: Metadata = config.metadata;
 export const viewport: Viewport = config.viewport;
 
-/**
- * The default Minecraft font to use.
- */
-const notoSans = Noto_Sans({ subsets: ["latin"] });
-
 /**
  * The root layout for this site.
  *

Frontend/src/app/components/github-star-count.tsx

@@ -0,0 +1,28 @@
+/**
+ * The github star count component.
+ *
+ * @returns the star count jsx
+ */
+const GitHubStarCount = async (): Promise<JSX.Element> => {
+	const stars: number = await getStarCount(); // Get the repo star count
+	return (
+		<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
+	);
+};
+
+/**
+ * Get the amount of stars
+ * the repository has.
+ *
+ * @returns the star count
+ */
+const getStarCount = async (): Promise<number> => {
+	const response: Response = await fetch(
+		"https://api.github.com/repos/Rainnny7/RESTfulMC",
+		{ next: { revalidate: 300 } } // Revalidate every 5 minutes
+	);
+	const json: any = await response.json(); // Get the JSON response
+	return json.stargazers_count; // Return the stars
+};
+
+export default GitHubStarCount;

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

@@ -3,30 +3,12 @@ import { cn } from "@/lib/utils";
 import Link from "next/link";
 
 const FeaturedContent = (): JSX.Element => (
-	<div className="-translate-y-40 flex justify-center items-center">
+	<div className="-translate-y-14 flex justify-center items-center">
 		<div className="grid grid-cols-2 gap-5">
 			<FeaturedItem
 				name="Player Lookup"
 				description="Id dolore elit mollit adipisicing adipisicing."
-				image="/media/test.avif"
+				image="/media/featured/server.png"
-				href="/player"
-			/>
-			<FeaturedItem
-				name="Player Lookup"
-				description="Id dolore elit mollit adipisicing adipisicing."
-				image="/media/test.avif"
-				href="/player"
-			/>
-			<FeaturedItem
-				name="Player Lookup"
-				description="Id dolore elit mollit adipisicing adipisicing."
-				image="/media/test.avif"
-				href="/player"
-			/>
-			<FeaturedItem
-				name="Player Lookup"
-				description="Id dolore elit mollit adipisicing adipisicing."
-				image="/media/test.avif"
 				href="/player"
 			/>
 		</div>
@@ -46,7 +28,7 @@ const FeaturedItem = ({
 }): JSX.Element => (
 	<Link
 		className={
-			"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-[.99] transition-all transform-gpu"
+			"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"
 		}
 		href={href}
 	>

Frontend/src/app/components/landing/hero.tsx

@@ -1,18 +1,34 @@
+import MinecraftButton from "@/components/minecraft-button";
 import config from "@/config";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 
+/**
+ * The hero content.
+ *
+ * @returns the hero jsx
+ */
 const Hero = (): JSX.Element => (
-	<div className="h-[85vh] flex flex-col gap-4 justify-center items-center pointer-events-none">
+	<div className="h-[70vh] flex flex-col gap-8 justify-center items-center">
-		{/* Title */}
+		<div className="flex flex-col gap-4 items-center">
-		<h1
+			{/* Title */}
-			className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
+			<h1
-		>
+				className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
-			{config.siteName}
+			>
-		</h1>
+				{config.siteName}
+			</h1>
 
-		{/* Subtitle */}
+			{/* Subtitle */}
-		<h2 className="text-xl">{config.metadata.description}</h2>
+			<h2 className="text-xl">{config.metadata.description}</h2>
+		</div>
+
+		{/* Links */}
+		<div className="flex gap-10">
+			<MinecraftButton className="w-44 h-12">
+				<Link href="/docs">Get Started</Link>
+			</MinecraftButton>
+		</div>
 	</div>
 );
 export default Hero;

Frontend/src/app/components/navbar.tsx

@@ -1,10 +1,13 @@
+import GitHubStarCount from "@/components/github-star-count";
 import MinecraftButton from "@/components/minecraft-button";
+import { Skeleton } from "@/components/ui/skeleton";
 import config from "@/config";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import { StarIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
+import { Suspense } from "react";
 
 /**
  * The navbar for the site.
@@ -25,7 +28,7 @@ const Navbar = (): JSX.Element => (
 			>
 				{/* Small Screens */}
 				<Image
-					className="flex md:hidden"
+					className="hidden sm:flex lg:hidden"
 					src="/media/logo.webp"
 					alt="Site Logo"
 					width={42}
@@ -33,7 +36,7 @@ const Navbar = (): JSX.Element => (
 				/>
 
 				{/* Large Screens */}
-				<span className="hidden md:flex">{config.siteName}</span>
+				<span className="hidden lg:flex">{config.siteName}</span>
 			</Link>
 
 			{/* Links */}
@@ -51,14 +54,23 @@ const Navbar = (): JSX.Element => (
 		</div>
 
 		{/* Social Buttons */}
-		<div className="hidden sm:flex">
+		<div className="hidden md:flex">
 			{/* Star on Github <3 */}
-			<MinecraftButton>
+			<MinecraftButton className="group/star">
 				<Link
 					className="flex gap-1.5 items-center"
 					href="https://github.com/Rainnny7/RESTfulMC"
 				>
-					<StarIcon width={22} height={22} />
+					{/* Star Count */}
+					<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
+						<GitHubStarCount />
+					</Suspense>
+
+					<StarIcon
+						className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
+						width={22}
+						height={22}
+					/>
 					<span>Star on GitHub</span>
 				</Link>
 			</MinecraftButton>

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

@@ -0,0 +1,15 @@
+import { cn } from "@/app/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

Frontend/src/app/font/fonts.ts

@@ -1,8 +1,15 @@
+import { NextFont } from "next/dist/compiled/@next/font";
+import { Noto_Sans } from "next/font/google";
 import localFont from "next/font/local";
 
 /**
- * The title font to use to brand the site.
+ * The default font to use for the site.
  */
-export const minecrafter = localFont({
+export const notoSans: NextFont = Noto_Sans({ subsets: ["latin"] });
+
+/**
+ * The Minecraft font to use for the site.
+ */
+export const minecrafter: NextFont = localFont({
 	src: "../font/Minecrafter.ttf",
 });