From 505d90c87d919a999258b0c8096289d02cce0ceb Mon Sep 17 00:00:00 2001 From: Anastasia <142572092+LuminaEnvision@users.noreply.github.com> Date: Mon, 2 Feb 2026 18:31:25 +0700 Subject: [PATCH] Docs: keep only 'for those who coordinate' card, remove dev docs; Tokenomics: remove Tokens from intro card, move keyframes to globals (fix styled-jsx build); WhyDeCleanup: brand colors; GetStartedFlow: minor Co-authored-by: Cursor --- app/docs/page.tsx | 1246 +++++------------- app/globals.css | 22 + app/tokenomics/page.tsx | 1166 +++++++++------- components/GetStartedFlow/GetStartedFlow.tsx | 324 ++++- components/WhyDeCleanup/WhyDeCleanup.tsx | 188 ++- 5 files changed, 1410 insertions(+), 1536 deletions(-) diff --git a/app/docs/page.tsx b/app/docs/page.tsx index 8853a71..1397501 100644 --- a/app/docs/page.tsx +++ b/app/docs/page.tsx @@ -1,69 +1,8 @@ "use client"; -import { useState, useEffect, useRef } from "react"; import Link from "next/link"; -const sections = [ - { id: "quick-start", title: "Quick Start" }, - { id: "tech-stack", title: "Tech Stack" }, - { id: "architecture", title: "Architecture Overview" }, - { id: "environment", title: "Environment Setup" }, - { id: "commands", title: "Development Commands" }, - { id: "contracts", title: "Smart Contracts" }, - { id: "structure", title: "Project Structure" }, - { id: "testing", title: "Testing" }, - { id: "deployment", title: "Deployment" }, - { id: "api-routes", title: "API Routes" }, - { id: "security", title: "Security Notes" }, - { id: "troubleshooting", title: "Troubleshooting" }, - { id: "resources", title: "Resources & Links" }, -]; - export default function DocsPage() { - const [activeSection, setActiveSection] = useState("quick-start"); - const [sidebarOpen, setSidebarOpen] = useState(false); - const sectionRefs = useRef<{ [key: string]: HTMLElement | null }>({}); - - useEffect(() => { - const handleScroll = () => { - const scrollPosition = window.scrollY + 150; - - for (const section of sections) { - const element = sectionRefs.current[section.id]; - if (element) { - const offsetTop = element.offsetTop; - const offsetHeight = element.offsetHeight; - - if ( - scrollPosition >= offsetTop && - scrollPosition < offsetTop + offsetHeight - ) { - setActiveSection(section.id); - break; - } - } - } - }; - - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); - - const scrollToSection = (sectionId: string) => { - const element = sectionRefs.current[sectionId]; - if (element) { - const offset = 100; - const elementPosition = element.offsetTop; - const offsetPosition = elementPosition - offset; - - window.scrollTo({ - top: offsetPosition, - behavior: "smooth", - }); - setSidebarOpen(false); - } - }; - return (
@@ -101,927 +40,332 @@ export default function DocsPage() {
{/* For those who build and coordinate impact - intro before technical docs */} -
-

For those who build and coordinate impact

- -

The problem

-

Impact coordinators struggle with:

-
    -
  • •Fragmented data
    • -
  • •Manual reporting
    • -
  • •Trust bottlenecks
    • -
  • •No shared infrastructure for verification
    • -
  • •Hard-to-govern funding decisions
    • -
- -

What DeCleanup provides

-

DeCleanup is open DMRV infrastructure, not a closed platform. You can:

-
    -
  • •Use standardized cleanup data
    • -
  • •Participate in governance
    • -
  • •Help define verification rules
    • -
  • •Coordinate funding transparently
    • -
- -

DMRV (Data-Measurement-Reporting-Verification) as infrastructure

-

We treat DMRV as a public good layer:

-
    -
  • •Cleanup records are immutable
    • -
  • •Data structures are open and interoperable
    • -
  • •No dependency on proprietary standards
    • -
-

Compatible with:

-
    -
  • •SDG reporting
    • -
  • •Regen ecosystems
    • -
  • •Future certification layers
    • -
-

This aligns with:

-
    -
  • •Regen community tooling
    • -
  • •Open impact accounting systems
    • -
  • •Governance & coordination
    • -
- -

Governance tools live on Celo

-
    -
  • •$cDCU is used for proposals and voting
    • -
  • •Governance is coordinated via Gardens.fund
    • -
  • •Community decides: verification rules, funding priorities, new pools and experiments
    • -
- -

Example funding pools

-
    -
  • •Equipment Pool (first pool, sponsored by Ethereum for the World)
    • -
  • •Local Organizer Support Pool
    • -
  • •Logistics & Transport Pool
    • -
  • •Data & Research Pool
    • -
  • •Experimental / Pilot Pool
    • -
- -

Outcome

-
    -
  • •Coordinators spend less time proving impact
    • -
  • •Communities self-govern funding
    • -
  • •Impact data becomes reusable infrastructure
    • -
  • •Cleanups scale without centralized control
    • -
-

Coordination layer first.

-
+
+ {/* Header */} +
+

+ For those who build and coordinate impact +

+

+ Open infrastructure for transparent, scalable environmental coordination +

+
- {/* Mobile Overlay */} - {sidebarOpen && ( -
setSidebarOpen(false)} - /> - )} + {/* The Problem - Visual Cards */} +
+
+
+ + + +
+

The Problem

+
-
- {/* Sidebar Navigation */} -
- +
- {/* Mobile Sidebar Toggle */} - {!sidebarOpen && ( - - )} - - {/* Main Content */} -
- {/* Quick Start */} -
{ - sectionRefs.current["quick-start"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Quick Start -

-

- Get DeCleanup Rewards running locally in minutes. -

- -

- Prerequisites -

-
    -
  • Node.js 18+
    • -
  • Base-compatible wallet (MetaMask, Coinbase Wallet, etc.)
    • -
  • Git
    • -
+
-

- Installation -

-
- 
-                  {`git clone https://github.com/DeCleanup-Network/Farcaster-Mini-App.git
-cd Farcaster-Mini-App
-npm install
-cp .env.example .env.local
-# Edit .env.local with your configuration
-npm run dev`}
-
+ {/* What DeCleanup Provides */} +
+
+
+ + +
+

What DeCleanup Provides

+
-

- For detailed local testing instructions, see the{" "} - + DeCleanup is open DMRV infrastructure, not a closed platform. You can: +

+ +
+ {[ + { + icon: , + text: "Use standardized cleanup data" + }, + { + icon: , + text: "Participate in governance" + }, + { + icon: , + text: "Help define verification rules" + }, + { + icon: , + text: "Coordinate funding transparently" + } + ].map((item, idx) => ( +
- Local Testing Guide on GitHub - - . -

- - - {/* Tech Stack */} -
{ - sectionRefs.current["tech-stack"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Tech Stack -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Category - - Technologies -
- Frontend - - Next.js 14, TypeScript, Tailwind CSS -
- Blockchain - - Wagmi v2, Viem, Base (L2) -
- Wallet - - Farcaster SDK, WalletConnect, MetaMask, Coinbase Wallet -
- Storage - - IPFS (Pinata) -
- Smart Contracts - - Solidity 0.8.20, Hardhat -
-
-
- - {/* Architecture Overview */} -
{ - sectionRefs.current["architecture"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Architecture Overview -

-
-
-
Next.js Client
-
↓
-
Wallet Layer
-
↓
-
Domain Logic
-
↓
-
Smart Contracts
+
+ {item.icon} +
+

{item.text}

-
- -

- Key Flows -

-
    -
  • - Cleanup Submission: Photo → IPFS → On-chain -
    • -
  • - Verification: Verifier dashboard → Review → Approve/Reject -
    • -
  • - Rewards: Automatic $bDCU distribution -
    • -
  • - Impact Products: Dynamic NFT minting and level progression -
    • -
- -

- For detailed system architecture, see the{" "} - - System Architecture documentation on GitHub - - . -

-
- - {/* Environment Setup */} -
{ - sectionRefs.current["environment"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Environment Setup -

-

- Configure your environment variables for local development. Copy{" "} - - .env.example - {" "} - to{" "} - - .env.local - {" "} - and fill in your values. -

- -

- Network Configuration -

-
    -
  • Chain ID
    • -
  • RPC URLs
    • -
- -

- Contract Addresses -

-
    -
  • Impact Product NFT
    • -
  • Verification Contract
    • -
  • Reward Distributor
    • -
  • $bDCU Token
    • -
+ ))} +
+
-

- IPFS/Pinata -

-
-

- Important: Pinata keys must be server-side only. Use{" "} - PINATA_API_KEY, NOT{" "} - NEXT_PUBLIC_PINATA_API_KEY -

+ {/* DMRV as Infrastructure */} +
+
+
+ + +
-
    -
  • Server-side API keys
    • -
- -

- Farcaster -

-
    -
  • Neynar API key
    • -
  • Base App ID
    • -
- -

- WalletConnect -

-
    -
  • Project ID
    • -
+

DMRV as Infrastructure

+
-

- See the{" "} - We treat DMRV as a public good layer:

+ +
+ {[ + { icon: "🔗", text: "Cleanup records are immutable", color: "from-blue-500/10 to-blue-600/5" }, + { icon: "🌐", text: "Data structures are open and interoperable", color: "from-purple-500/10 to-purple-600/5" }, + { icon: "🆓", text: "No dependency on proprietary standards", color: "from-green-500/10 to-green-600/5" } + ].map((item, idx) => ( +
- .env.example file on GitHub - {" "} - for the complete list of required variables. -

- - - {/* Development Commands */} -
{ - sectionRefs.current["commands"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Development Commands -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Command - - Description -
- npm install - - Install dependencies -
- npm run dev - - Start dev server -
- npm run build - - Build for production -
- npm run test - - Run tests -
- npm run lint - - Lint code -
- npm run generate:metadata - - Generate NFT metadata -
-
-
+
{item.icon}
+

{item.text}

+
+ ))} +
- {/* Smart Contracts */} -
{ - sectionRefs.current["contracts"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Smart Contracts -

-

- Core Contracts -

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- Contract - - Description -
- ImpactProductNFT - - Dynamic NFT (10 levels) -
- VerificationContract - - Cleanup submissions -
- bDCURewardDistributor - - Auto token distribution -
- $bDCU Token - - ERC20 reward token -
+ {/* Compatible With */} +
+

Compatible with:

+
+ {["SDG reporting", "Regen ecosystems", "Future certification layers"].map((item, idx) => ( + + {item} + + ))}
+
-

- Reward Structure -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Action - - Reward -
Level Claim - 10 $bDCU -
Weekly Streak - 2 $bDCU -
Referral - 3 $bDCU (both parties) -
Impact Form - 5 $bDCU -
Verification - 1 $bDCU -
+ {/* Aligns With */} +
+

This aligns with:

+
+ {["Regen community tooling", "Open impact accounting systems", "Governance & coordination"].map((item, idx) => ( + + {item} + + ))}
-
+
+
- {/* Project Structure */} -
{ - sectionRefs.current["structure"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Project Structure -

-
-
    -
  • - app/ - Next.js routes -
    • -
  • - components/ - Reusable UI components -
    • -
  • - lib/ - Business logic (contracts, IPFS, verification) -
    • -
  • - contracts/ - Solidity smart contracts -
    • -
  • - scripts/ - Utility scripts -
    • -
+ {/* Governance Tools */} +
+
+
+ + +
-
- - {/* Testing */} -
{ - sectionRefs.current["testing"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Testing -

-

- For local development testing, follow the setup steps in Quick Start. Ensure your wallet is connected to Base Sepolia testnet. -

+

Governance Tools Live on Celo

+
-

- Mobile Testing -

-

- For mobile testing instructions, see the{" "} - + {[ + { + icon: "💰", + title: "$cDCU Token", + text: "Used for proposals and voting" + }, + { + icon: "🌱", + title: "Gardens.fund", + text: "Coordination platform", + link: "https://gardens.fund" + }, + { + icon: "🗳️", + title: "Community Decides", + text: "Verification rules, funding priorities, new pools" + } + ].map((item, idx) => ( +

- Local Testing Guide - - . -

- -

- Testing Checklist -

-
    -
  • Wallet connection and network switching
    • -
  • Photo upload and IPFS storage
    • -
  • Cleanup submission and verification flow
    • -
  • Reward distribution and Impact Product minting
    • -
- - - {/* Deployment */} -
{ - sectionRefs.current["deployment"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Deployment -

-

- Frontend (Vercel) -

-
    -
  1. Push code to GitHub repository
    2. -
  2. Connect repository to Vercel
    3. -
  3. Configure environment variables in Vercel dashboard
    4. -
  4. Deploy
    5. -
- -

- Smart Contracts (Hardhat) -

-
- 
-                  {`npx hardhat run scripts/deploy.js --network base`}
-
-
+
{item.icon}
+

+ {item.link ? ( + + {item.title} + + ) : ( + item.title + )} +

+

{item.text}

+
+ ))} +
-
-

- Remember: Set all required environment variables in your deployment platform before deploying. -

+ {/* Funding Pools */} +
+

+ + + + Example Funding Pools +

+
+ {[ + { name: "Equipment Pool", badge: "First Pool", sponsor: "Ethereum for the World" }, + { name: "Local Organizer Support Pool" }, + { name: "Logistics & Transport Pool" }, + { name: "Data & Research Pool" }, + { name: "Experimental / Pilot Pool" } + ].map((pool, idx) => ( +
+
+

{pool.name}

+ {pool.badge && ( + + {pool.badge} + + )} +
+ {pool.sponsor && ( +

Sponsored by {pool.sponsor}

+ )} +
+ ))}
- +
+
- {/* API Routes */} -
{ - sectionRefs.current["api-routes"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- API Routes -

-
- - - - - - - - - - - - - - - - - - - - -
- Route - - Method - - Description -
- /api/ipfs/upload - POST - Proxy IPFS uploads -
- /api/health - GET - Health check -
+ {/* Outcome */} +
+
+
+ + +
-
- - {/* Security Notes */} -
{ - sectionRefs.current["security"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Security Notes -

-
    -
  • - Pinata API keys are server-side only: Never expose API keys in client-side code. Use server-side API routes for IPFS uploads. -
    • -
  • - IPFS uploads proxied through API route: All IPFS operations go through /api/ipfs/upload to protect credentials. -
    • -
  • - Wallet connection requires user approval: All wallet operations require explicit user consent. -
    • -
  • - Network switching enforced: The app enforces Base network only to prevent transactions on wrong chains. -
    • -
-
+

The Outcome

+
- {/* Troubleshooting */} -
{ - sectionRefs.current["troubleshooting"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Troubleshooting -

-
-
-

- Wallet Connection Issues -

-

- Ensure your wallet extension is installed and unlocked. Try refreshing the page or switching networks manually. -

-
-
-

- IPFS Upload Failures -

-

- Verify your Pinata API keys are correctly set in .env.local. Check that keys are server-side only (no NEXT_PUBLIC_ prefix). -

-
-
-

- Contract Interaction Errors -

-

- Confirm you're on the correct network (Base Sepolia for testing). Verify contract addresses in your environment variables match the deployed contracts. -

+
+ {[ + { + icon: , + text: "Coordinators spend less time proving impact", + color: "text-blue-400" + }, + { + icon: , + text: "Communities self-govern funding", + color: "text-purple-400" + }, + { + icon: , + text: "Impact data becomes reusable infrastructure", + color: "text-green-400" + }, + { + icon: , + text: "Cleanups scale without centralized control", + color: "text-yellow-400" + } + ].map((outcome, idx) => ( +
+
+ {outcome.icon} +
+

{outcome.text}

-
-
- - {/* Resources & Links */} -
{ - sectionRefs.current["resources"] = el; - }} - className="mb-16 scroll-mt-24" - > -

- Resources & Links -

-

- External Resources -

- + ))} +
-

- GitHub Documentation -

- - + {/* Tagline */} +
+

+ Coordination layer first. +

+
+ +
diff --git a/app/globals.css b/app/globals.css index 2af4f75..c9fcf5d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -117,6 +117,28 @@ body { } } +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + .animate-fade-in { animation: fade-in 0.8s ease-out; } diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx index 4b97f74..a500555 100644 --- a/app/tokenomics/page.tsx +++ b/app/tokenomics/page.tsx @@ -44,539 +44,697 @@ export default function TokenomicsPage() { {/* For those who fund real-world impact - intro before token details */} -
-

For those who fund real-world impact

- -

The problem

-

Funders want:

- - -

What DeCleanup enables

-

We don't promise financial returns first. We offer verifiable impact infrastructure. Funders can:

- - -

DMRV (Data, Measurement, Reporting, Verification) from a funder's perspective

- -

Data can be:

- -

This reduces:

- - -

Tokens

-

- - $bDCU (Base) - -

- -

Governance on Celo ($cUSD)

- -

Value grows through usage, legitimacy, and adoption, not speculation.

- -

Outcome

- -

A base layer for future impact finance

-

Fund what you can verify.

-
+
+ {/* Header */} +
+

+ For those who fund real-world impact +

+

+ Verifiable impact infrastructure, not speculation +

+
- {/* Expandable: Dive into tokenomics */} -
- - Dive into tokenomics - - - - -
- {/* SECTION 1 - TWO-TOKEN OVERVIEW */} -
-
- {/* Card 1 - $bDCU - Base */} -
-

- BASE TOKEN: $bDCU -

-

- The "action token." Used on Base for: -

-
    -
  • - • - cleanup rewards -
    • -
  • - • - streaks -
    • -
  • - • - referrals -
    • -
  • - • - verifier staking -
    • -
  • - • - simple incentives -
    • -
- - View on Base - + {/* The Problem - Visual Cards */} +
+
+
+ + + +
+

The Problem

- {/* Card 2 - $cDCU - Celo */} -
-

- CELO TOKEN: $cDCU -

-

- Reputation, governance & advanced utilities -

-
    -
  • - • - Earned through verified cleanups in the Celo dApp -
    • -
  • - • - Non-tradable by design (reputation-linked) -
    • -
  • - • - Used for governance via Gardens.fund -
    • -
  • - • - Stake to access Verifier roles -
    • -
  • - • - Required for streaks, dashboard, analytics -
    • -
  • - • - Powers the Celo ReFi + governance layer -
    • -
- +

Funders want:

+ +
+ {[ + { icon: "✅", text: "Proof that money led to real action" }, + { icon: "👁️", text: "Transparency without heavy overhead" }, + { icon: "📈", text: "Repeatable, scalable funding models" }, + { icon: "🔍", text: "Less trust, more verification" } + ].map((problem, idx) => ( +
+
+ {problem.icon} +

{problem.text}

+
+
+ ))}
-
- - {/* SECTION 2 - TOKEN COMPARISON TABLE */} -
-

- Token Comparison -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- $bDCU (Base) - - $cDCU (Celo) -
ChainBaseCelo
TypeLiquid ERC-20Reputation + Governance
TransferableYesNon-tradable
Primary UseFast incentivesVerified impact + governance
Earned FromMini app cleanupsFull dApp cleanups
Staking PurposeVerifier accessVerifier access + governance
GovernanceNoYes (Gardens.fund)
HypercertsNoYes (every 10 cleanups)
MarketTradableNon-tradable
Total SupplyTBA10,000,000 fixed supply
+ + {/* Visual Arrow Transition */} +
+ + +
-
- - {/* SECTION 3 - IMPACT SYSTEM CARDS */} -
-

- Impact System -

-
- {/* Card A - Impact Products */} -
-

- Impact Products -

-
    -
  • - • - Dynamic NFTs -
    • -
  • - • - Level up with each cleanup -
    • -
  • - • - Track long-term environmental history -
    • -
-
- {/* Card B - Verifier System */} -
-

- Verifier System -

-
    -
  • - • - Stake $bDCU or $cDCU to join -
    • -
  • - • - Review Proof-of-Impact submissions -
    • -
  • - • - Earn verifier rewards -
    • -
  • - • - Slashing protects integrity -
    • -
+ {/* What DeCleanup Enables */} +
+
+
+ + + +
+

What DeCleanup Enables

- {/* Card C - Hypercerts */} -
-

- Hypercerts -

-
    -
  • - • - Minted after every 10 verified cleanups -
    • -
  • - • - Permanent ERC-1155 impact certificate -
    • -
  • - • - Used for grants, ESG reporting, identity -
    • -
+

+ We don't promise financial returns first. We offer verifiable impact infrastructure. Funders can: +

+ +
+ {[ + { + icon: , + text: "Fund cleanup pools" + }, + { + icon: , + text: "See immutable proof of execution" + }, + { + icon: , + text: "Support open verification infrastructure" + }, + { + icon: , + text: "Hold tokens connected to real-world activity" + } + ].map((item, idx) => ( +
+
+ {item.icon} +
+

{item.text}

+
+ ))}
-
- - {/* SECTION 4 - TOKEN LIFECYCLE */} -
-

- Token Lifecycle -

- -
- {/* $bDCU Lifecycle */} -
-

- $bDCU Lifecycle -

-
- {/* Vertical connector line */} -
- -
-
-
-
-
1 - Earn through the Base mini app
-
-
- -
-
-
-
2 - Stake to become a Verifier
-
-
- -
-
-
-
3 - Trade freely on Base DEXes
-
-
- -
-
-
-
4 - Participate in Base-side campaigns
-
-
+ + {/* DMRV from Funder's Perspective */} +
+
+
+ + + +
+

DMRV from a Funder's Perspective

+
+ + {/* Flow Diagram */} +
+
+
+ 💰 + Funds flow +
+ + + +
+ 🧹 + Cleanups happen +
+ + + +
+ 📋 + Proof published
+

Records are tamper-resistant

- {/* $cDCU Lifecycle */} -
-

- $cDCU Lifecycle -

-
- {/* Vertical connector line */} -
- -
-
-
-
-
1 - Earn through verified cleanups
-
-
- -
-
-
-
2 - Stake for governance and Verifier role
-
-
- -
-
-
-
3 - Grow Impact Product reputation
+ {/* Data Capabilities */} +
+
+

Data can be:

+
+ {["Audited", "Aggregated", "Reused across reports and ecosystems"].map((item, idx) => ( +
+ + + + {item}
-
- -
-
-
-
4 - Vote on proposals through Gardens.fund
+ ))} +
+
+ +
+

This reduces:

+
+ {[ + { icon: "🚫", text: "Greenwashing risk" }, + { icon: "💸", text: "Reporting costs" }, + { icon: "🤝", text: "Trust-based claims" } + ].map((item, idx) => ( +
+
{item.icon}
+

{item.text}

-
+ ))}
-
- - {/* SECTION 5 - $bDCU SUPPLY & ALLOCATION */} -
-

- supply and allocation. -

-

- $bDCU: total supply TBA -

- -
-
-

- Circulating Supply - 85% -

-

- 85% of the total supply circulates immediately -

-
- -
-

- Clanker Vault - 15% -

-

- 15% of supply is held in the Clanker Vault for burns, ecosystem rewards, and liquidity stabilization -

-
-
- -

- $cDCU: total supply 10,000,000 -

-
- - {/* SECTION 6 - $cDCU SUPPLY & ALLOCATION */} -
-
-
-

- Staking & Verifier Rewards - 35% -

-

- Supports long-term staking and review system -

-
- -
-

- Cleanup Campaign Incentives - 25% -

-

- Fuels Impact Circles, leaderboards and global events -

+ + {/* Outcome */} +
+
+
+ + + +
+

The Outcome

- -
-

- Public Distribution - 20% -

-

- Onboarding users through controlled vesting -

+ +
+ {[ + { + icon: , + text: "Funding tied to verifiable action", + color: "text-green-400" + }, + { + icon: , + text: "Better accountability", + color: "text-blue-400" + }, + { + icon: , + text: "Open infrastructure worth supporting", + color: "text-purple-400" + } + ].map((outcome, idx) => ( +
+
+ {outcome.icon} +
+

{outcome.text}

+
+ ))}
- -
-

- Team & Development - 10% -

-

- Multi-year vesting for stability and alignment + + {/* Taglines */} +

+

+ A base layer for future impact finance

-
- -
-

- Verification Treasury - 5% -

-

- Funds Proof-of-Impact validation rewards +

+ Fund what you can verify.

- -
-

- Community Incentives - 4% -

-

- Supports ambassadors, referrals, content, contributors +

+
+ + {/* Expandable: Dive into tokenomics */} +
+ + Dive into tokenomics + + + + +
+ {/* SECTION 1 - TWO-TOKEN OVERVIEW */} +
+
+ {/* Card 1 - $bDCU - Base */} +
+

+ BASE TOKEN: $bDCU +

+

+ The "action token." Used on Base for: +

+
    +
  • + • + cleanup rewards +
    • +
  • + • + streaks +
    • +
  • + • + referrals +
    • +
  • + • + verifier staking +
    • +
  • + • + simple incentives +
    • +
+ + View on Base + +
+ + {/* Card 2 - $cDCU - Celo */} +
+

+ CELO TOKEN: $cDCU +

+

+ Reputation, governance & advanced utilities +

+
    +
  • + • + Earned through verified cleanups in the Celo dApp +
    • +
  • + • + Non-tradable by design (reputation-linked) +
    • +
  • + • + Used for governance via Gardens.fund +
    • +
  • + • + Stake to access Verifier roles +
    • +
  • + • + Required for streaks, dashboard, analytics +
    • +
  • + • + Powers the Celo ReFi + governance layer +
    • +
+ +
+
+
+ + {/* SECTION 2 - TOKEN COMPARISON TABLE */} +
+

+ Token Comparison +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ $bDCU (Base) + + $cDCU (Celo) +
ChainBaseCelo
TypeLiquid ERC-20Reputation + Governance
TransferableYesNon-tradable
Primary UseFast incentivesVerified impact + governance
Earned FromMini app cleanupsFull dApp cleanups
Staking PurposeVerifier accessVerifier access + governance
GovernanceNoYes (Gardens.fund)
HypercertsNoYes (every 10 cleanups)
MarketTradableNon-tradable
Total SupplyTBA10,000,000 fixed supply
+
+
+ + {/* SECTION 3 - IMPACT SYSTEM CARDS */} +
+

+ Impact System +

+
+ {/* Card A - Impact Products */} +
+

+ Impact Products +

+
    +
  • + • + Dynamic NFTs +
    • +
  • + • + Level up with each cleanup +
    • +
  • + • + Track long-term environmental history +
    • +
+
+ + {/* Card B - Verifier System */} +
+

+ Verifier System +

+
    +
  • + • + Stake $bDCU or $cDCU to join +
    • +
  • + • + Review Proof-of-Impact submissions +
    • +
  • + • + Earn verifier rewards +
    • +
  • + • + Slashing protects integrity +
    • +
+
+ + {/* Card C - Hypercerts */} +
+

+ Hypercerts +

+
    +
  • + • + Minted after every 10 verified cleanups +
    • +
  • + • + Permanent ERC-1155 impact certificate +
    • +
  • + • + Used for grants, ESG reporting, identity +
    • +
+
+
+
+ + {/* SECTION 4 - TOKEN LIFECYCLE */} +
+

+ Token Lifecycle +

+ +
+ {/* $bDCU Lifecycle */} +
+

+ $bDCU Lifecycle +

+
+ {/* Vertical connector line */} +
+ +
+
+
+
+
1 - Earn through the Base mini app
+
+
+ +
+
+
+
2 - Stake to become a Verifier
+
+
+ +
+
+
+
3 - Trade freely on Base DEXes
+
+
+ +
+
+
+
4 - Participate in Base-side campaigns
+
+
+
+
+
+ + {/* $cDCU Lifecycle */} +
+

+ $cDCU Lifecycle +

+
+ {/* Vertical connector line */} +
+ +
+
+
+
+
1 - Earn through verified cleanups
+
+
+ +
+
+
+
2 - Stake for governance and Verifier role
+
+
+ +
+
+
+
3 - Grow Impact Product reputation
+
+
+ +
+
+
+
4 - Vote on proposals through Gardens.fund
+
+
+
+
+
+
+
+ + {/* SECTION 5 - $bDCU SUPPLY & ALLOCATION */} +
+

+ supply and allocation. +

+

+ $bDCU: total supply TBA

-
- -
-

- Liquidity - 1% -

-

- Seeds Celo-side DEX access + +

+
+

+ Circulating Supply - 85% +

+

+ 85% of the total supply circulates immediately +

+
+ +
+

+ Clanker Vault - 15% +

+

+ 15% of supply is held in the Clanker Vault for burns, ecosystem rewards, and liquidity stabilization +

+
+
+ +

+ $cDCU: total supply 10,000,000

-
-
-
+ - {/* SECTION 7 - CLOSING STATEMENT */} -
-
-

- Built for a transparent global impact economy - where every cleanup becomes verified onchain action. -

-
-
+ {/* SECTION 6 - $cDCU SUPPLY & ALLOCATION */} +
+
+
+

+ Staking & Verifier Rewards - 35% +

+

+ Supports long-term staking and review system +

+
+ +
+

+ Cleanup Campaign Incentives - 25% +

+

+ Fuels Impact Circles, leaderboards and global events +

+
+ +
+

+ Public Distribution - 20% +

+

+ Onboarding users through controlled vesting +

+
+ +
+

+ Team & Development - 10% +

+

+ Multi-year vesting for stability and alignment +

+
+ +
+

+ Verification Treasury - 5% +

+

+ Funds Proof-of-Impact validation rewards +

+
+ +
+

+ Community Incentives - 4% +

+

+ Supports ambassadors, referrals, content, contributors +

+
+ +
+

+ Liquidity - 1% +

+

+ Seeds Celo-side DEX access +

+
+
+
+ + {/* SECTION 7 - CLOSING STATEMENT */} +
+
+

+ Built for a transparent global impact economy - where every cleanup becomes verified onchain action. +

+
+
diff --git a/components/GetStartedFlow/GetStartedFlow.tsx b/components/GetStartedFlow/GetStartedFlow.tsx index 03bc4db..8126f5f 100644 --- a/components/GetStartedFlow/GetStartedFlow.tsx +++ b/components/GetStartedFlow/GetStartedFlow.tsx @@ -54,19 +54,19 @@ function GuideLinks({ variant }: { variant: "base" | "celo" | "wallet" }) { const links = variant === "base" ? [ - { label: "Get started with Base app", href: GUIDE_LINKS.baseAppGetStarted }, - { label: "Tips and tutorials", href: GUIDE_LINKS.ethForGas }, - ] + { label: "Get started with Base app", href: GUIDE_LINKS.baseAppGetStarted }, + { label: "Tips and tutorials", href: GUIDE_LINKS.ethForGas }, + ] : variant === "celo" ? [ - { label: "Download MetaMask", href: GUIDE_LINKS.metamask }, - { label: "Add Celo Sepolia network", href: GUIDE_LINKS.celoSepoliaNetwork }, - { label: "Get CELO for transactions", href: GUIDE_LINKS.celoFaucet }, - ] + { label: "Download MetaMask", href: GUIDE_LINKS.metamask }, + { label: "Add Celo Sepolia network", href: GUIDE_LINKS.celoSepoliaNetwork }, + { label: "Get CELO for transactions", href: GUIDE_LINKS.celoFaucet }, + ] : [ - { label: "MetaMask guide", href: GUIDE_LINKS.metamask }, - { label: "Farcaster setup", href: GUIDE_LINKS.farcasterDocs }, - ]; + { label: "MetaMask guide", href: GUIDE_LINKS.metamask }, + { label: "Farcaster setup", href: GUIDE_LINKS.farcasterDocs }, + ]; return (

Guides

@@ -96,51 +96,279 @@ export default function GetStartedFlow() { {/* Step: Intro - For those who care about the planet (before flowchart) */} {step === "intro" && (
+ {/* Header */} +
+

+ For those who care about the planet +

+

+ Environmental action deserves recognition. Here's how DeCleanup makes it happen. +

+
+ + {/* The Problem - Visual Cards */} +
+
+
+ + + +
+

The Problem

+
+ +

People clean beaches, rivers, forests - but:

+ +
+ {[ + { icon: "👻", text: "Their work is invisible beyond social media" }, + { icon: "📄", text: "There's no durable proof they can reuse" }, + { icon: "🎲", text: "Recognition and support are inconsistent" }, + { icon: "📉", text: "Motivation drops without feedback or continuity" } + ].map((problem, idx) => ( +
+
+ {problem.icon} +

{problem.text}

+
+
+ ))} +
+
+ + {/* Visual Arrow Transition */} +
+ + + +
+ + {/* What DeCleanup Changes - Visual Flow */} + +
+
+ + + +
+

What DeCleanup Changes

+
+ +

We give everyday people a simple flow:

+ + {/* Visual Step Flow */} +
+ {[ + { + step: "1", + icon: , + text: "Join or organize a cleanup", + color: "from-blue-500/20 to-cyan-500/10" + }, + { + step: "2", + icon: , + text: "Document the result (photos, location, basic data)", + color: "from-purple-500/20 to-pink-500/10" + }, + { + step: "3", + icon: , + text: "Publish (immutable proof onchain)", + color: "from-orange-500/20 to-yellow-500/10" + }, + { + step: "4", + icon: , + text: "Earn recognition, reputation, and rewards", + color: "from-green-500/20 to-emerald-500/10" + } + ].map((step, idx) => ( +
+
+ {step.step} +
+
+ {step.icon} +
+

{step.text}

+
+ ))} +
+ + + {/* DMRV Breakdown - Interactive Cards */} -

For those who care about the planet

+
+
+ + + +
+

DMRV Framework

+
-

The problem

-

People clean beaches, rivers, forests - but:

-
    -
  • •Their work is invisible beyond social media
    • -
  • •There's no durable proof they can reuse
    • -
  • •Recognition and support are inconsistent
    • -
  • •Motivation drops without feedback or continuity
    • -
+
+ {[ + { + letter: "D", + title: "Data", + items: ["Photos", "Location", "Cleanup type", "Waste categories"], + color: "text-blue-400", + bgColor: "from-blue-500/10 to-blue-600/5" + }, + { + letter: "M", + title: "Measurement", + items: ["Amount collected", "Frequency", "Participation"], + color: "text-purple-400", + bgColor: "from-purple-500/10 to-purple-600/5" + }, + { + letter: "R", + title: "Reporting", + items: ["Standardized records", "Readable format", "Open access"], + color: "text-orange-400", + bgColor: "from-orange-500/10 to-orange-600/5" + }, + { + letter: "V", + title: "Verification", + items: ["Onchain anchoring", "Immutable proof", "Can't be altered"], + color: "text-green-400", + bgColor: "from-green-500/10 to-green-600/5" + } + ].map((dmrv, idx) => ( +
+
+
+ {dmrv.letter} +
+

{dmrv.title}

+
+
    + {dmrv.items.map((item, i) => ( +
  • + • + {item} +
    • + ))} +
+
+ ))} +
-

What DeCleanup changes

-

We give everyday people a simple flow:

-
    -
  • •Join or organize a cleanup
    • -
  • •Document the result (photos, location, basic data)
    • -
  • •Publish (immutable proof onchain)
    • -
  • •Earn recognition, reputation, and rewards
    • -
+ {/* Key Benefit Callout */} +
+
+ + + +
+

This means:

+

+ Your cleanup can't be erased. Your contribution adds up over time. Your impact becomes provable. +

+
+
+
+ -

DMRV

-
    -
  • •Data: photos, location, cleanup type, waste categories
    • -
  • •Measurement: amount collected, frequency, participation
    • -
  • •Reporting: standardized, readable cleanup records
    • -
  • •Verification: records anchored onchain so they can't be altered
    • -
-

This means: Your cleanup can't be erased. Your contribution adds up over time. Your impact becomes provable.

+ {/* Outcome - Visual Metrics */} + +
+
+ + + +
+

The Outcome

+
-

Outcome

-
    -
  • •More people clean up, more often
    • -
  • •Contributors build an onchain impact reputation
    • -
  • •Cleanups become visible, countable, and supportable
    • -
-

Impact first. Web3 only where it helps.

+
+ {[ + { + icon: , + text: "More people clean up, more often", + color: "text-green-400" + }, + { + icon: , + text: "Contributors build an onchain impact reputation", + color: "text-purple-400" + }, + { + icon: , + text: "Cleanups become visible, countable, and supportable", + color: "text-cyan-400" + } + ].map((outcome, idx) => ( +
+
+ {outcome.icon} +
+

{outcome.text}

+
+ ))} +
- + {/* Tagline */} +
+

+ Impact first. Web3 only where it helps. +

+
+ + {/* CTA Button */} + + +
)} diff --git a/components/WhyDeCleanup/WhyDeCleanup.tsx b/components/WhyDeCleanup/WhyDeCleanup.tsx index 144d0bf..f819e09 100644 --- a/components/WhyDeCleanup/WhyDeCleanup.tsx +++ b/components/WhyDeCleanup/WhyDeCleanup.tsx @@ -1,41 +1,163 @@ +"use client"; import React from "react"; export default function WhyDeCleanup() { + const features = [ + { + icon: ( + + + + ), + title: "DMRV", + subtitle: "Data, Measurement, Reporting, Verification", + description: "Credible proof of environmental impact", + accentColor: "text-[#58B12F]" + }, + { + icon: ( + + + + ), + title: "Onchain Immutability", + subtitle: "Permanent Records", + description: "Blockchain-verified cleanup history", + accentColor: "text-[#58B12F]" + }, + { + icon: ( + + + + ), + title: "Incentives & Reputation", + subtitle: "Reward Real Work", + description: "Earn recognition for environmental action", + accentColor: "text-[#58B12F]" + }, + { + icon: ( + + + + ), + title: "Open Coordination", + subtitle: "Transparent Funding", + description: "Community-driven cleanup initiatives", + accentColor: "text-[#FAFF00]" + } + ]; + return ( -
-
-

- Why DeCleanup Exists -

-

- Environmental cleanups already happen. - What's missing is credible, open, reusable proof that they happened - and tools to coordinate, incentivize, and fund them transparently. -

-

- DeCleanup is an SDG-aligned application focused on: -

-
    -
  • - • - DMRV (Data, Measurement, Reporting, Verification) for cleanups -
    • -
  • - • - Onchain immutability of cleanup records -
    • -
  • - • - Incentives and reputation for people doing real work -
    • -
  • - • - Open coordination and funding for future cleanups -
    • -
+
+ {/* Subtle brand tint */} +
+ +
+ {/* Header */} +
+

+ Why DeCleanup Exists +

+ + {/* Visual Problem → Solution Flow */} +
+
+ {/* Problem */} +
+
+ + + +
+

The Problem

+

Cleanups happen, but there's no credible proof or transparent coordination

+
+ + {/* Arrow */} +
+ + + +
+ + {/* Solution */} +
+
+ + + +
+

The Solution

+

Verifiable, incentivized, and transparently funded environmental action

+
+
+
+
+ + {/* Feature Cards Grid */} +
+ {features.map((feature, index) => ( +
+ {/* Card */} +
+ {/* Content */} +
+ {/* Icon */} +
+ {feature.icon} +
+ + {/* Title */} +

+ {feature.title} +

+ + {/* Subtitle */} +

+ {feature.subtitle} +

+ + {/* Description */} +

+ {feature.description} +

+
+
+
+ ))} +
+ + {/* Bottom tagline */} +
+

+ SDG-aligned technology for a cleaner, more transparent future +

+
+ +
); }