From 698b153177c4dfabf3f1f3cdc9cae0a45fa555d9 Mon Sep 17 00:00:00 2001
From: project7 <project7@emilees-mbp.lan>
Date: Mon, 4 May 2026 11:51:17 +0900
Subject: [PATCH] Add milestone cards with prod values, status icons, and CMC
 rank (#1027)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add 4-column milestone card grid ($1M/$10M/$50M/$100M) below the
headline/countdown. Each card shows a checkmark or pending icon,
MCap target, approximate CMC rank, and unlock percentage. Cards
use hardcoded prod values regardless of test mode. Responsive
2×2 on mobile, 4-col on desktop.

Bump version: 1.3.2 → 1.3.3

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                            |  2 +-
 src/components/airdrop/CampaignHero.tsx | 40 +++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 84d9bc6..d638764 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/components/airdrop/CampaignHero.tsx b/src/components/airdrop/CampaignHero.tsx
index f683bfa..4cea95c 100644
--- a/src/components/airdrop/CampaignHero.tsx
+++ b/src/components/airdrop/CampaignHero.tsx
@@ -24,6 +24,13 @@ interface StatusData {
   lockerTx: string | null;
 }
 
+const MILESTONE_CARDS = [
+  { mcap: 1_000_000, label: "$1M", cmcRank: "#1900", pct: 10, key: "bronze" as const },
+  { mcap: 10_000_000, label: "$10M", cmcRank: "#950", pct: 30, key: "silver" as const },
+  { mcap: 50_000_000, label: "$50M", cmcRank: "#400", pct: 50, key: "gold" as const },
+  { mcap: 100_000_000, label: "$100M", cmcRank: "#250", pct: 100, key: "diamond" as const },
+];
+
 /* ─── Helpers ─── */
 
 function useAirdropStatus() {
@@ -126,6 +133,39 @@ export function CampaignHero() {
         </div>
       )}
 
+      {/* ── Milestone cards ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+        {MILESTONE_CARDS.map((ms) => {
+          const reached = data.currentFdv >= ms.mcap;
+          return (
+            <div
+              key={ms.key}
+              className={`rounded border px-3 py-3 space-y-1.5 ${
+                reached ? "border-accent" : "border-border opacity-60"
+              }`}
+            >
+              <div className="text-sm">
+                {reached ? (
+                  <span className="text-accent">&#x2705;</span>
+                ) : (
+                  <span className="text-muted">&#x25CB;</span>
+                )}
+              </div>
+              <div className={`text-sm font-bold text-center ${reached ? "text-accent" : "text-foreground"}`}>
+                {ms.label}
+              </div>
+              <div className="text-muted text-[10px] text-center">
+                ≈ CMC {ms.cmcRank}
+              </div>
+              <div className="text-muted text-[10px] text-center">unlocks</div>
+              <div className={`text-xs font-bold text-center ${reached ? "text-accent" : "text-foreground"}`}>
+                {ms.pct}%
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
       {/* ── Participant count ── */}
       <div className="text-center text-muted text-xs">
         {data.totalParticipants > 0