fixed some styling with member list page

app/(main)/hunt-not-started/page.js

@@ -0,0 +1,102 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+
+export default function HuntNotStarted() {
+  const [countdown, setCountdown] = useState(10);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const teamId = searchParams.get("teamId");
+
+  useEffect(() => {
+    // Countdown timer
+    if (countdown > 0) {
+      const timer = setTimeout(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    } else {
+      // Redirect back to team page when countdown reaches 0
+      if (teamId) {
+        router.push(`/${teamId}`);
+      } else {
+        router.push("/team-selection");
+      }
+    }
+  }, [countdown, router, teamId]);
+
+  return (
+    <div className="hunt-not-started">
+      <div className="message-container">
+        <div className="message-icon">⏳</div>
+        <h1 className="message-title">Hunt Not Started Yet</h1>
+        <p className="message-text">
+          The treasure hunt has not been activated by an administrator yet.
+          Please check back later or contact an admin to start the hunt.
+        </p>
+        <p className="countdown">Redirecting back in {countdown} seconds...</p>
+        <Link href={teamId ? `/${teamId}` : "/team-selection"}>
+          <button className="back-button">Return Now</button>
+        </Link>
+      </div>
+
+      <style jsx>{`
+        .hunt-not-started {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          background-color: #f4f4f4;
+          padding: 20px;
+        }
+
+        .message-container {
+          background-color: white;
+          border-radius: 8px;
+          padding: 30px;
+          text-align: center;
+          max-width: 500px;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .message-icon {
+          font-size: 48px;
+          margin-bottom: 20px;
+        }
+
+        .message-title {
+          color: #68543c;
+          margin-bottom: 20px;
+        }
+
+        .message-text {
+          color: #555;
+          margin-bottom: 30px;
+          line-height: 1.5;
+        }
+
+        .countdown {
+          font-weight: bold;
+          color: #68543c;
+          margin-bottom: 20px;
+        }
+
+        .back-button {
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          padding: 10px 20px;
+          font-size: 16px;
+          cursor: pointer;
+        }
+
+        .back-button:hover {
+          background-color: #53402d;
+        }
+      `}</style>
+    </div>
+  );
+}