Parent: #877
Follow-up to: #924
Problem
The current hero + chart implementation has several issues:
- Countdown only shows weeks:days — needs live d:h:m:s counter
- Tagline "50,000 PLOT locked. Earn or burn." lacks context — users don't understand the mechanic
- Hero and chart are separate sections — should be combined as one cohesive unit
- Chart x-axis shows FDV scale but should show 6-month timeline instead
- Pool value calculation appears incorrect
- Missing: lock-up tx proof link, current FDV display, linear projection line
Solution: Combined Hero + Chart
The hero and chart should be ONE section — the chart IS the hero. The campaign concept is visually communicated through the chart itself.
Top Section: Title + Context + Countdown
PLOT Big or Nothing Airdrop
50,000 PLOT (5% of max supply) locked in a time-locked contract.
If PLOT FDV reaches milestone targets within 6 months, the pool
is distributed to point holders. If not, it's burned forever.
🔒 Lock-up proof: [View on Mint Club] ← link to lock tx
142 : 05 : 23 : 47
days hrs min sec
- Live countdown updating every second (days : hours : minutes : seconds)
- Expanded explanation of the mechanic (5% of max supply, milestone-based, burn if not met)
- Lock-up proof link to Mint Club Locker tx (placeholder until LOCKER_ID is set)
Chart: 6-Month Timeline with 3 Lines
Design reference: ultrasound.money — area chart with zone dividers and annotations.
X-axis: 6-month campaign timeline (Month 1 → Month 6)
Y-axis (left): Airdrop pool value in USD
Y-axis (right): FDV in USD
Three lines on the chart:
-
Airdrop Pool Value line (primary, filled area) — shows how much the locked PLOT pool is worth at current price. Steps up at each milestone threshold.
-
Linear FDV projection line (dashed, diagonal) — straight line from current FDV to the 💎 Diamond target ($100M), showing the "ideal growth path" needed to hit the final goal within 6 months.
-
Actual FDV line (solid) — real FDV over time from daily price snapshots (pl_daily_prices). Shows actual progress vs the linear projection.
Current position: Heartbeat-animated pulsing dot on the actual FDV line at today's date.
Milestone markers: Horizontal dashed lines at each FDV milestone ($1M, $10M, $50M, $100M) with emoji labels:
- 🥉 $1M — 10%
- 🥈 $10M — 30%
- 🥇 $50M — 50%
- 💎 $100M — 100%
Wireframe
┌──────────────────────────────────────────────────────────────┐
│ PLOT Big or Nothing Airdrop │
│ │
│ 50,000 PLOT (5% of max supply) locked. Distributed to │
│ point holders if FDV milestones are met. Burned if not. │
│ 🔒 View lock-up proof │
│ │
│ 142 : 05 : 23 : 47 │
│ days hrs min sec │
│ │
│ $5M ┤ ╱── 💎 100% │
│ │ ╱····/ │
│$1.25M┤ ╱····/·····── 🥇 50% │
│ │ ╱····/ │
│ $150K┤ ╱····/ ════════════════── 🥈 30% │
│ │ ╱····/ │
│ $5K┤ ╱····/ ══════════════════════════──── 🥉 10% │
│ │╱····/ │
│ $0 ┼──●────────────────────────────────────── │
│ M1 M2 M3 M4 M5 M6 │
│ │
│ ── Actual FDV ···· Linear projection ═══ Pool value │
│ ● Current FDV: $150 · Zone: Pre-Bronze │
└──────────────────────────────────────────────────────────────┘
Pool Value Calculation (fix)
if FDV >= $100M: pool_value = 50,000 × price (100% distributed)
if FDV >= $50M: pool_value = 25,000 × price (50% distributed)
if FDV >= $10M: pool_value = 15,000 × price (30% distributed)
if FDV >= $1M: pool_value = 5,000 × price (10% distributed)
if FDV < $1M: pool_value = $0 (burned)
Heartbeat animation
@keyframes heartbeat {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
.current-fdv-dot {
animation: heartbeat 1.5s ease-in-out infinite;
}
Files
src/components/airdrop/CampaignHero.tsx — combined hero + chart
src/components/airdrop/MilestoneTrack.tsx — merge into hero or keep as sub-component
Acceptance Criteria
Parent: #877
Follow-up to: #924
Problem
The current hero + chart implementation has several issues:
Solution: Combined Hero + Chart
The hero and chart should be ONE section — the chart IS the hero. The campaign concept is visually communicated through the chart itself.
Top Section: Title + Context + Countdown
Chart: 6-Month Timeline with 3 Lines
Design reference: ultrasound.money — area chart with zone dividers and annotations.
X-axis: 6-month campaign timeline (Month 1 → Month 6)
Y-axis (left): Airdrop pool value in USD
Y-axis (right): FDV in USD
Three lines on the chart:
Airdrop Pool Value line (primary, filled area) — shows how much the locked PLOT pool is worth at current price. Steps up at each milestone threshold.
Linear FDV projection line (dashed, diagonal) — straight line from current FDV to the 💎 Diamond target ($100M), showing the "ideal growth path" needed to hit the final goal within 6 months.
Actual FDV line (solid) — real FDV over time from daily price snapshots (
pl_daily_prices). Shows actual progress vs the linear projection.Current position: Heartbeat-animated pulsing dot on the actual FDV line at today's date.
Milestone markers: Horizontal dashed lines at each FDV milestone ($1M, $10M, $50M, $100M) with emoji labels:
Wireframe
Pool Value Calculation (fix)
Heartbeat animation
Files
src/components/airdrop/CampaignHero.tsx— combined hero + chartsrc/components/airdrop/MilestoneTrack.tsx— merge into hero or keep as sub-componentAcceptance Criteria