Move Create Your Market CTA to top (right after hero, before Rush Cars)

Was buried at bottom of page. Now immediately visible after the hero
market — compact version with 3 steps inline + Propose/Agents buttons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rushgamebase-dev

apps/web/app/page.tsx

@@ -194,6 +194,34 @@ export default function HomePage() {
         ) : null}
       </motion.div>
 
+      {/* ---- Create Your Market CTA ---- */}
+      <div
+        className="mb-4 rounded-2xl overflow-hidden"
+        style={{ border: "1px solid rgba(255,255,255,0.06)" }}
+      >
+        <div className="px-5 pt-5 pb-3 text-center" style={{ background: "linear-gradient(180deg, rgba(0,255,136,0.06) 0%, transparent 100%)" }}>
+          <h2 className="text-lg sm:text-xl font-black text-white mb-1">Create Your Own Market</h2>
+          <p className="text-xs text-gray-400">
+            Propose a market, get approved, earn <span className="font-bold" style={{ color: "#00ff88" }}>4% of every bet</span>. Humans or autonomous agents.
+          </p>
+        </div>
+        <div className="grid grid-cols-3 gap-px" style={{ background: "rgba(255,255,255,0.04)" }}>
+          <Step number="1" icon={<Lightbulb className="h-4 w-4" />} title="Propose" description="Submit your question" color="#3B82F6" />
+          <Step number="2" icon={<CheckCircle className="h-4 w-4" />} title="Approved" description="Team reviews it" color="#ffc828" />
+          <Step number="3" icon={<TrendingUp className="h-4 w-4" />} title="Earn" description="4% of the pool" color="#00ff88" />
+        </div>
+        <div className="px-5 py-3 flex flex-wrap items-center justify-center gap-2" style={{ background: "var(--surface)" }}>
+          <a href="/propose" className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-xs font-bold transition-all hover:scale-105"
+            style={{ background: "rgba(0,255,136,0.12)", border: "1px solid rgba(0,255,136,0.3)", color: "#00ff88" }}>
+            <Zap className="h-3.5 w-3.5" /> Propose <ArrowRight className="h-3.5 w-3.5" />
+          </a>
+          <a href="/agents/dashboard" className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-xs font-bold transition-all hover:scale-105"
+            style={{ background: "rgba(59,130,246,0.1)", border: "1px solid rgba(59,130,246,0.25)", color: "#3B82F6" }}>
+            <Bot className="h-3.5 w-3.5" /> Agents API
+          </a>
+        </div>
+      </div>
+
       {/* ---- Rush Cars Banner ---- */}
       <div className="mb-4">
         <RushCarsBanner />
@@ -348,86 +376,6 @@ export default function HomePage() {
         <NewsHeadlines />
       </div>
 
-      {/* ---- Create Your Market CTA ---- */}
-      <div
-        className="mt-8 rounded-2xl overflow-hidden"
-        style={{ border: "1px solid rgba(255,255,255,0.06)" }}
-      >
-        {/* Header */}
-        <div className="px-6 pt-6 pb-4 text-center" style={{ background: "linear-gradient(180deg, rgba(0,255,136,0.06) 0%, transparent 100%)" }}>
-          <h2 className="text-xl sm:text-2xl font-black text-white mb-2">
-            Create Your Own Market
-          </h2>
-          <p className="text-sm text-gray-400 max-w-lg mx-auto">
-            Anyone can propose a prediction market. Get approved and earn{" "}
-            <span className="font-bold" style={{ color: "#00ff88" }}>4% of every bet</span>{" "}
-            placed on your market.
-          </p>
-        </div>
-
-        {/* Steps */}
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-px" style={{ background: "rgba(255,255,255,0.04)" }}>
-          <Step
-            number="1"
-            icon={<Lightbulb className="h-5 w-5" />}
-            title="Propose"
-            description="Submit your question, outcomes, and resolution criteria"
-            color="#3B82F6"
-          />
-          <Step
-            number="2"
-            icon={<CheckCircle className="h-5 w-5" />}
-            title="Get Approved"
-            description="Our team reviews for clarity, fairness, and verifiability"
-            color="#ffc828"
-          />
-          <Step
-            number="3"
-            icon={<TrendingUp className="h-5 w-5" />}
-            title="Earn Fees"
-            description="Your market goes live on-chain. You earn 4% of the pool."
-            color="#00ff88"
-          />
-        </div>
-
-        {/* CTAs */}
-        <div className="px-6 py-5 flex flex-col sm:flex-row items-center justify-center gap-3" style={{ background: "var(--surface)" }}>
-          <a
-            href="/propose"
-            className="flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-bold transition-all hover:scale-105"
-            style={{ background: "rgba(0,255,136,0.12)", border: "1px solid rgba(0,255,136,0.3)", color: "#00ff88" }}
-          >
-            <Zap className="h-4 w-4" />
-            Propose a Market
-            <ArrowRight className="h-4 w-4" />
-          </a>
-          <a
-            href="/agents/dashboard"
-            className="flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-bold transition-all hover:scale-105"
-            style={{ background: "rgba(59,130,246,0.1)", border: "1px solid rgba(59,130,246,0.25)", color: "#3B82F6" }}
-          >
-            <Bot className="h-4 w-4" />
-            Autonomous Agents
-          </a>
-        </div>
-
-        {/* Agent callout */}
-        <div className="px-6 py-3 flex items-center justify-center gap-2 text-[10px] text-gray-500" style={{ background: "rgba(59,130,246,0.03)", borderTop: "1px solid rgba(255,255,255,0.03)" }}>
-          <Bot className="h-3 w-3" style={{ color: "#3B82F6" }} />
-          <span>
-            Build a bot that creates markets automatically.{" "}
-            <a
-              href="https://github.com/rushgamebase-dev/mktpredct/blob/main/AGENT_API.md"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-bold hover:text-gray-300"
-              style={{ color: "#3B82F6" }}
-            >
-              Read the Agent API docs
-            </a>
-          </span>
-        </div>
-      </div>
     </div>
   );
 }