fixed a bunch of styling and component usage

made sure almost all viewer pages use the navbar component properly instead of using their hardcoded version, started to match the styling of the design for a lot of pages

app/(main)/clue/[clueId]/page.js

@@ -10,6 +10,8 @@ import {
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import { use } from "react";
+// Add missing import for NavBar component
+import NavBar from "@/components/NavBar";
 
 // Dynamically import the QR scanner component with no SSR
 const EnhancedQRScanner = dynamic(
@@ -731,25 +733,8 @@ export default function CluePage({ params }) {
         </div>
       </div>
 
-      {/* Bottom Navigation */}
-      <div className="nav-bar">
-        <Link href="/map" className="nav-item">
-          <div className="nav-icon">🗺️</div>
-          <div className="nav-label">Map</div>
-        </Link>
-        <Link href="/stats" className="nav-item">
-          <div className="nav-icon">📊</div>
-          <div className="nav-label">Stats</div>
-        </Link>
-        <Link href="/team-selection" className="nav-item">
-          <div className="nav-icon">👥</div>
-          <div className="nav-label">Team</div>
-        </Link>
-        <Link href="/leaderboard" className="nav-item">
-          <div className="nav-icon">🏆</div>
-          <div className="nav-label">Leaderboard</div>
-        </Link>
-      </div>
+      {/* Replace hardcoded navbar with NavBar component */}
+      <NavBar activeLink="clue" teamData={teamData?.team} />
 
       <style jsx>{`
         .clue-container {
@@ -1070,37 +1055,6 @@ export default function CluePage({ params }) {
           padding-bottom: 10px;
         }
 
-        .nav-bar {
-          display: flex;
-          justify-content: space-around;
-          background-color: white;
-          border-top: 1px solid #ddd;
-          padding: 10px 0;
-          position: fixed;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          z-index: 10;
-        }
-
-        .nav-item {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-decoration: none;
-          color: #666;
-          flex: 1;
-        }
-
-        .nav-icon {
-          font-size: 24px;
-          margin-bottom: 4px;
-        }
-
-        .nav-label {
-          font-size: 12px;
-        }
-
         .admin-tools {
           background-color: #f8d7da;
           border: 2px dashed #d9534f;
@@ -1133,7 +1087,10 @@ export default function CluePage({ params }) {
 
         /* Map Banner Styles */
         .map-banner {
-          background-color: #68543c;
+          background-image: url("/images/Bottom-Bar.svg");
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
           color: white;
           padding: 15px;
           display: flex;
@@ -1206,6 +1163,47 @@ export default function CluePage({ params }) {
           font-family: monospace;
           font-size: 1.1em;
         }
+
+        .clue-page {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+          background-color: #f4f4f4;
+          padding-bottom: 70px; /* Space for navbar */
+        }
+
+        .clue-banner {
+          background-image: url("/images/Bottom-Bar.svg");
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          color: white;
+          padding: 20px;
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+
+        .team-info {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .team-name {
+          margin: 0;
+          font-size: 24px;
+          font-weight: bold;
+          color: white;
+        }
+
+        .team-code {
+          font-size: 24px;
+          font-weight: bold;
+          margin-left: auto;
+          color: white;
+        }
       `}</style>
     </div>
   );