Wire ModeCards CTA links to real routes and implement coming-soon sta…

src/components/ModeCards.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 export default function ModeCards() {
   return (
     <section className="py-16 px-4 sm:px-6 lg:px-8" aria-labelledby="modes-title">
@@ -9,37 +11,69 @@ export default function ModeCards() {
       </p>
 
       <div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
-        <article className="glass-card rounded-2xl border-2 border-[#2C4BFD]/40 p-8">
-          <div className="mb-4 inline-flex rounded-full bg-[#2C4BFD]/15 px-3 py-1 text-xs font-bold uppercase tracking-wider text-[#BEC7FE]">
-            Directional
-          </div>
-          <h3 className="text-2xl font-bold text-white">UP/DOWN Mode</h3>
-          <p className="mt-4 text-sm leading-relaxed text-gray-400">
-            Forecast price direction before the round closes. The majority side splits the pool —
-            fast rounds for market sentiment reads.
-          </p>
-          <ul className="mt-6 space-y-2 text-sm text-gray-300">
-            <li>• 5-minute resolution windows</li>
-            <li>• Pool split by consensus</li>
-            <li>• Ideal for macro trend calls</li>
-          </ul>
-        </article>
+        <Link
+          to="/dashboard"
+          className="group glass-card rounded-2xl border-2 border-[#2C4BFD]/40 p-8 transition-all hover:border-[#2C4BFD]/70 hover:bg-[#2C4BFD]/5"
+        >
+          <article>
+            <div className="mb-4 inline-flex rounded-full bg-[#2C4BFD]/15 px-3 py-1 text-xs font-bold uppercase tracking-wider text-[#BEC7FE]">
+              Directional
+            </div>
+            <h3 className="text-2xl font-bold text-white">UP/DOWN Mode</h3>
+            <p className="mt-4 text-sm leading-relaxed text-gray-400">
+              Forecast price direction before the round closes. The majority side splits the pool —
+              fast rounds for market sentiment reads.
+            </p>
+            <ul className="mt-6 space-y-2 text-sm text-gray-300">
+              <li>• 5-minute resolution windows</li>
+              <li>• Pool split by consensus</li>
+              <li>• Ideal for macro trend calls</li>
+            </ul>
+            <div className="mt-8 inline-flex items-center gap-2 rounded-lg bg-[#2C4BFD]/20 px-4 py-3 text-sm font-semibold text-[#BEC7FE] transition-colors group-hover:bg-[#2C4BFD]/30">
+              Start Trading
+              <svg
+                className="h-4 w-4 transition-transform group-hover:translate-x-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </div>
+          </article>
+        </Link>
 
-        <article className="glass-card accent-border-teal rounded-2xl border-2 p-8">
-          <div className="mb-4 inline-flex rounded-full bg-cyan-500/15 px-3 py-1 text-xs font-bold uppercase tracking-wider text-cyan-300">
-            Precision
-          </div>
-          <h3 className="text-2xl font-bold text-white">Precision Mode</h3>
-          <p className="mt-4 text-sm leading-relaxed text-gray-400">
-            Submit an exact price target at round close. Closest forecast wins the pool — built for
-            traders who read the tape.
-          </p>
-          <ul className="mt-6 space-y-2 text-sm text-gray-300">
-            <li>• 15-minute analysis windows</li>
-            <li>• Closest prediction wins</li>
-            <li>• Higher skill ceiling</li>
-          </ul>
-        </article>
+        <Link
+          to="/dashboard"
+          className="group glass-card accent-border-teal rounded-2xl border-2 p-8 transition-all hover:border-cyan-500/70 hover:bg-cyan-500/5"
+        >
+          <article>
+            <div className="mb-4 inline-flex rounded-full bg-cyan-500/15 px-3 py-1 text-xs font-bold uppercase tracking-wider text-cyan-300">
+              Precision
+            </div>
+            <h3 className="text-2xl font-bold text-white">Precision Mode</h3>
+            <p className="mt-4 text-sm leading-relaxed text-gray-400">
+              Submit an exact price target at round close. Closest forecast wins the pool — built for
+              traders who read the tape.
+            </p>
+            <ul className="mt-6 space-y-2 text-sm text-gray-300">
+              <li>• 15-minute analysis windows</li>
+              <li>• Closest prediction wins</li>
+              <li>• Higher skill ceiling</li>
+            </ul>
+            <div className="mt-8 inline-flex items-center gap-2 rounded-lg bg-cyan-500/20 px-4 py-3 text-sm font-semibold text-cyan-300 transition-colors group-hover:bg-cyan-500/30">
+              Start Trading
+              <svg
+                className="h-4 w-4 transition-transform group-hover:translate-x-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </div>
+          </article>
+        </Link>
       </div>
     </section>
   );

src/pages/ComingSoon.tsx

@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom';
+
+interface ComingSoonProps {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+}
+
+export default function ComingSoon({ title, description, icon }: ComingSoonProps) {
+  return (
+    <div className="xelma-grid-bg min-h-screen px-4 py-20 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-2xl text-center">
+        {/* Decorative background elements */}
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(44,75,253,0.15),_transparent_70%)]" />
+        <div className="pointer-events-none absolute -left-32 top-40 h-80 w-80 rounded-full bg-cyan-500/10 blur-3xl" />
+        <div className="pointer-events-none absolute -right-32 bottom-40 h-96 w-96 rounded-full bg-[#2C4BFD]/10 blur-3xl" />
+
+        <div className="relative">
+          {/* Icon */}
+          {icon ? (
+            <div className="mb-6 flex justify-center text-6xl">{icon}</div>
+          ) : (
+            <div className="mb-6 inline-flex items-center justify-center rounded-full bg-[#2C4BFD]/20 p-6">
+              <svg
+                className="h-16 w-16 text-cyan-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </div>
+          )}
+
+          {/* Title and Description */}
+          <h1 className="text-4xl font-black text-white sm:text-5xl">{title}</h1>
+
+          <p className="mx-auto mt-6 max-w-xl text-lg text-gray-400">{description}</p>
+
+          {/* Waitlist Info */}
+          <div className="mt-12 rounded-2xl border border-[#2C4BFD]/30 bg-[#2C4BFD]/10 p-8">
+            <p className="mb-2 text-sm font-semibold uppercase tracking-wider text-cyan-300">
+              Launch Timeline
+            </p>
+            <p className="text-base text-gray-300">
+              We're building something special. Check back soon for updates.
+            </p>
+          </div>
+
+          {/* Back to Home */}
+          <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+            <Link to="/" className="btn-primary rounded-xl px-8 py-4 text-base font-bold">
+              Back to Home
+            </Link>
+            <a href="#" className="btn-ghost rounded-xl px-8 py-4 text-base font-semibold">
+              Notify Me
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}