Stats counter

Frontend/package.json

@@ -23,6 +23,7 @@
     "next-plausible": "^3.12.0",
     "next-themes": "^0.3.0",
     "react": "^18",
+    "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "restfulmc-lib": "^1.1.2",

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

@@ -1,5 +1,6 @@
 import FeaturedContent from "@/components/landing/featured-content";
 import Hero from "@/components/landing/hero";
+import StatisticCounters from "@/components/landing/statistic-counters";
 
 /**
  * The landing page.
@@ -10,6 +11,7 @@ const LandingPage = (): JSX.Element => (
 	<main className="px-3">
 		<Hero />
 		<FeaturedContent />
+		<StatisticCounters />
 	</main>
 );
 export default LandingPage;

Frontend/src/app/components/counter.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import CountUp from "react-countup";
+
+/**
+ * Props for the counter.
+ */
+type CounterProps = {
+	/**
+	 * The name of the counter.
+	 */
+	name: string;
+
+	/**
+	 * The amount to count up to.
+	 */
+	amount: number;
+
+	/**
+	 * The optional duration of the count up.
+	 * <p>
+	 * Uses the default duration if not provided.
+	 * </p>
+	 */
+	duration?: number | undefined;
+};
+
+/**
+ * A counter component.
+ *
+ * @param amount the amount to count up to
+ * @param duration the optional duration of the count up
+ * @returns the counter jsx
+ */
+const Counter = ({ name, amount, duration }: CounterProps): JSX.Element => (
+	<div className="flex flex-col items-center gap-4">
+		<h1
+			className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
+		>
+			{name}
+		</h1>
+		<h2 className="text-4xl font-semibold uppercase">
+			<CountUp start={0} end={amount} duration={duration} />
+		</h2>
+	</div>
+);
+export default Counter;

Frontend/src/app/components/footer.tsx

@@ -0,0 +1,2 @@
+const Footer = (): JSX.Element => <footer>FOOTER</footer>;
+export default Footer;

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

@@ -10,7 +10,7 @@ import Link from "next/link";
  * @returns the featured content jsx
  */
 const FeaturedContent = (): JSX.Element => (
-	<div className="-translate-y-14 flex justify-center items-center">
+	<div className="flex justify-center items-center">
 		<div className="max-w-2xl flex flex-wrap justify-center gap-5">
 			{config.featuredItems.map((item, index) => (
 				<FeaturedItem key={index} {...item} />

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

@@ -10,11 +10,11 @@ import Link from "next/link";
  * @returns the hero jsx
  */
 const Hero = (): JSX.Element => (
-	<div className="h-[70vh] flex flex-col gap-8 justify-center items-center">
+	<div className="pt-56 pb-40 flex flex-col gap-8 justify-center items-center">
 		<div className="flex flex-col gap-4 items-center text-center">
 			{/* Title */}
 			<h1
-				className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
+				className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
 			>
 				{config.siteName}
 			</h1>

Frontend/src/app/components/landing/statistic-counters.tsx

@@ -0,0 +1,18 @@
+import Counter from "@/components/counter";
+
+/**
+ * The statistic counters component.
+ *
+ * @returns the counters jsx
+ */
+const StatisticCounters = (): JSX.Element => (
+	<div className="py-56 flex justify-center items-center">
+		<div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24">
+			<Counter name="Testing" amount={1_000_000} />
+			<Counter name="Testing" amount={1_000_000} />
+			<Counter name="Testing" amount={1_000_000} />
+			<Counter name="Testing" amount={1_000_000} />
+		</div>
+	</div>
+);
+export default StatisticCounters;

Frontend/src/app/components/player/player-search.tsx

@@ -25,7 +25,7 @@ const PlayerSearch = ({
 			action={handleRedirect}
 		>
 			<div className="w-full flex flex-col gap-3">
-				<Label>Username or UUID</Label>
+				<Label htmlFor="query">Username or UUID</Label>
 				<Input
 					type="search"
 					name="query"

Frontend/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import Footer from "@/components/footer";
 import Navbar from "@/components/navbar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import config from "@/config";
@@ -42,6 +43,7 @@ const RootLayout = ({
 					<TooltipProvider>
 						<Navbar />
 						{children}
+						<Footer />
 					</TooltipProvider>
 				</ThemeProvider>
 			</body>