feat: Coming soon pages for puzzle and leaderboard

src/app/(client)/(pages)/crossword/_components/question-box.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+export default function QuestionBox() {
+  return (
+    <div className="flex gap-1">
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+    </div>
+  );
+}

src/app/(client)/(pages)/crossword/page.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import QuestionBox from "./_components/question-box";
+
+export default function Page() {
+  return (
+    <div className="w-full h-full relative bg-slate-900">
+      <Image
+        alt="Mountains"
+        src="/assets/bg-img.webp"
+        layout="fill"
+        objectFit="cover"
+      />
+      <div className="w-full h-[85vh] relative flex justify-center items-center flex-col gap-8">
+        <Image
+          alt="start"
+          src="/assets/start.png"
+          width={150}
+          height={150}
+          className="animate-bounce hover:animate-spin"
+        />
+        <h1
+          className="text-black text-5xl text-center "
+          style={{
+            textShadow:
+              "2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff",
+          }}
+        >
+          The Crossword will be available when the event starts!
+        </h1>
+        <QuestionBox />
+      </div>
+    </div>
+  );
+}

src/app/(client)/(pages)/leaderboard/_components/question-box.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+export default function QuestionBox() {
+  return (
+    <div className="flex gap-1">
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+    </div>
+  );
+}

src/app/(client)/(pages)/leaderboard/page.tsx

@@ -1,7 +1,34 @@
-import React from 'react'
+import Image from "next/image";
+import QuestionBox from "./_components/question-box";
 
-export default function LeaderboardPage() {
-    return (
-        <div>Leaderboard</div>
-    )
-}
+export default function Page() {
+  return (
+    <div className="w-full h-full relative bg-slate-900">
+      <Image
+        alt="Mountains"
+        src="/assets/bg-img.webp"
+        layout="fill"
+        objectFit="cover"
+      />
+      <div className="w-full h-[85vh] relative flex justify-center items-center flex-col gap-8">
+        <Image
+          alt="start"
+          src="/assets/start.png"
+          width={150}
+          height={150}
+          className="animate-bounce hover:animate-spin"
+        />
+        <h1
+          className="text-black text-5xl text-center "
+          style={{
+            textShadow:
+              "2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff",
+          }}
+        >
+          The Leaderboard will be available when the event starts!
+        </h1>
+        <QuestionBox />
+      </div>
+    </div>
+  );
+}

src/data/nav/nav.ts

@@ -9,8 +9,8 @@ const NavigationLinks: INavBar[] = [
   },
   {
     id: 2,
-    title: "PUZZLES",
-    link: "/",
+    title: "PUZZLE",
+    link: "/crossword",
   },
   {
     id: 3,