Supersedes the chart/card approach in #1005. This ticket redefines the entire hero section.
Problem
The current hero section (CampaignHero.tsx) is overloaded:
- Complex SVG chart that nobody reads
- "Bronze/Silver/Gold/Diamond" tier names add cognitive load without meaning — users don't care about tier names, they care about how much they get
- StatsRow duplicates info already shown elsewhere
- The core message is buried: "your airdrop grows as PLOT grows, or it all burns"
Design Concept: "The Growing Pool"
The hero should feel like a live dashboard for a ticking bomb. 5% of the entire PLOT supply is locked. The clock is running. Either the market grows and the pool gets distributed — or it all burns. This tension is the entire brand.
Wireframe
┌─────────────────────────────────────────────────────────────┐
│ │
│ 5% OF ALL PLOT — LOCKED │
│ GROW THE MARKET. OR WATCH IT BURN. │
│ │
│ ───── 142d 08h 35m 12s ───── │
│ 🔒 Verified on Basescan │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ IF THE CAMPAIGN ENDED RIGHT NOW... │ │
│ │ │ │
│ │ [🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥] │ │
│ │ ← 100% BURNED 0% yours → │ │
│ │ │ │
│ │ Current FDV: $1,200 │ │
│ │ Pool value right now: $0 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ── What happens as PLOT grows ────────────────────────── │
│ │
│ FDV $1M 10% unlocked 5,000 PLOT Pool ~$5K │
│ ≈ CMC #1900 90% burned │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ FDV $10M 30% unlocked 15,000 PLOT Pool ~$150K │
│ ≈ CMC #950 70% burned │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ FDV $50M 50% unlocked 25,000 PLOT Pool ~$1.3M │
│ ≈ CMC #400 50% burned │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ FDV $100M 100% unlocked 50,000 PLOT Pool ~$5M │
│ ≈ CMC #250 0% burned ← FULL DISTRIBUTION │
│ │
│ ─── XX participants earning ─── │
│ │
└─────────────────────────────────────────────────────────────┘
Key design decisions
1. No tier names
Remove Bronze/Silver/Gold/Diamond entirely. They're decoration — the real info is the FDV target and what you get. Just show rows: "$1M → 10% unlocked → $5K pool". Clean, scannable.
2. Burn bar as the emotional anchor
The top section shows "IF THE CAMPAIGN ENDED RIGHT NOW" with a burn bar. When FDV is low, it's all fire — 100% burned, $0 for you. As FDV crosses thresholds, the bar shifts: fire recedes, green grows. This is visceral and immediate.
The burn bar is a gradient:
- Left side (burned): red/orange 🔥
- Right side (distributed): accent green
- The split point moves as FDV crosses milestones
- At $0 FDV: all red. At $100M FDV: all green.
3. "What happens as PLOT grows" — flat rows, not cards
No cards, no table headers that repeat. Just 4 clean rows, each showing:
- FDV target + CMC rank (muted)
- Unlock % + burn %
- PLOT amount + pool USD value
Dashed separator between rows. The last row ($100M) gets a subtle accent highlight ("FULL DISTRIBUTION").
4. Bold headline
"5% OF ALL PLOT — LOCKED. GROW THE MARKET. OR WATCH IT BURN." — this is the entire pitch in one line. Not "PLOT Big or Nothing Airdrop" (too generic). The headline should make you feel the stakes.
5. Participant count at bottom
Simple "XX participants earning" line — replaces the StatsRow. No separate FDV box (already shown in burn section) or progress bar (replaced by burn bar).
Burn bar behavior
| Current FDV |
Bar state |
Label |
| < $1M |
100% fire |
"100% BURNED · $0 yours" |
| $1M–$10M |
90% fire / 10% green |
"90% burned · 10% distributed" |
| $10M–$50M |
70% fire / 30% green |
"70% burned · 30% distributed" |
| $50M–$100M |
50% fire / 50% green |
"50% burned · 50% distributed" |
| ≥ $100M |
0% fire / 100% green |
"FULL DISTRIBUTION" |
What gets removed
TimelineChart sub-component (SVG chart, ~340 lines)
StatsRow sub-component
MilestoneTrack.tsx component entirely
- Mobile-specific simplified view (new design is responsive by default)
- Tier emoji names (Bronze/Silver/Gold/Diamond)
- Daily prices API dependency (was for chart)
- Linear target projection
What stays
Files to modify
src/components/airdrop/CampaignHero.tsx — full rewrite
src/components/airdrop/MilestoneTrack.tsx — delete
src/app/airdrop/page.tsx — remove MilestoneTrack import if used
Acceptance Criteria
Problem
The current hero section (CampaignHero.tsx) is overloaded:
Design Concept: "The Growing Pool"
The hero should feel like a live dashboard for a ticking bomb. 5% of the entire PLOT supply is locked. The clock is running. Either the market grows and the pool gets distributed — or it all burns. This tension is the entire brand.
Wireframe
Key design decisions
1. No tier names
Remove Bronze/Silver/Gold/Diamond entirely. They're decoration — the real info is the FDV target and what you get. Just show rows: "$1M → 10% unlocked → $5K pool". Clean, scannable.
2. Burn bar as the emotional anchor
The top section shows "IF THE CAMPAIGN ENDED RIGHT NOW" with a burn bar. When FDV is low, it's all fire — 100% burned, $0 for you. As FDV crosses thresholds, the bar shifts: fire recedes, green grows. This is visceral and immediate.
The burn bar is a gradient:
3. "What happens as PLOT grows" — flat rows, not cards
No cards, no table headers that repeat. Just 4 clean rows, each showing:
Dashed separator between rows. The last row ($100M) gets a subtle accent highlight ("FULL DISTRIBUTION").
4. Bold headline
"5% OF ALL PLOT — LOCKED. GROW THE MARKET. OR WATCH IT BURN." — this is the entire pitch in one line. Not "PLOT Big or Nothing Airdrop" (too generic). The headline should make you feel the stakes.
5. Participant count at bottom
Simple "XX participants earning" line — replaces the StatsRow. No separate FDV box (already shown in burn section) or progress bar (replaced by burn bar).
Burn bar behavior
What gets removed
TimelineChartsub-component (SVG chart, ~340 lines)StatsRowsub-componentMilestoneTrack.tsxcomponent entirelyWhat stays
/api/airdrop/status(config-driven, test/prod)Files to modify
src/components/airdrop/CampaignHero.tsx— full rewritesrc/components/airdrop/MilestoneTrack.tsx— deletesrc/app/airdrop/page.tsx— remove MilestoneTrack import if usedAcceptance Criteria