Skip to content

Airdrop: redesign hero — bold 'Growing Pool' concept with burn visualization #1011

@realproject7

Description

@realproject7

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

  • Bold headline communicating stakes
  • Burn bar showing current burn/distribute split
  • "What happens as PLOT grows" — 4 rows with FDV, unlock%, PLOT amount, pool value, burn%, CMC rank
  • No tier names (no Bronze/Silver/Gold/Diamond)
  • Responsive without separate mobile view
  • All values from config (test/prod)
  • Countdown + lock-up link preserved
  • SVG chart + StatsRow + MilestoneTrack removed

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions