- Each pathway is an independent theory of how one type of intervention produces lasting change.
+ From shared root to canopy: trust creation is the trunk; coordination and incentives branch in parallel; verification credibility is where institutional trust lives.
-
- {[
- {
- pathwayId: "P1",
- title: "Trust Creation",
- sub: "Simple docs - capital flows",
- accent: "green" as const,
- steps: [
- "Documentation under 60s",
- "Geotag + timestamp",
- "Verifiable onchain records",
- "Funders gain confidence",
- "Capital flows to verified cleanups",
- ],
- },
- {
- pathwayId: "P2",
- title: "Coordination Scaling",
- sub: "Shared infrastructure - network effects",
- accent: "yellow" as const,
- steps: [
- "Shared DMRV across regions",
- "Common data standards",
- "Organizers discover best practices",
- "Knowledge transfer",
- "Effectiveness improves network-wide",
- ],
- },
- {
- pathwayId: "P3",
- title: "Incentive Alignment",
- sub: "Recognition - sustained behavior",
- accent: "green" as const,
- steps: [
- "$bDCU structured recognition",
- "Tangible acknowledgment per action",
- "Episodic - sustained participation",
- "Documentation normalized",
- "Data quality improves",
- ],
- },
- {
- pathwayId: "P4",
- title: "Verification Credibility",
- sub: "AI + human - institutional trust",
- accent: "yellow" as const,
- steps: [
- "Open source waste detection model",
- "AI flags for human review",
- "Hybrid reduces fraud",
- "Quality = network reputation",
- "Partners trust for ESG reporting",
- ],
- },
- ].map((pw) => (
-
-
-
- {pw.pathwayId}
-
-
-
{pw.title}
-
{pw.sub}
+
+ {/* Root: DMRV Infrastructure */}
+
+ Shared root
+ DMRV Infrastructure
+
+
+ {/* Connector ↓ */}
+
+
+ {/* P1: Trust Creation (trunk) */}
+
+
+
P1
+
+
Trust Creation
+
Trunk — what makes everything else possible
+
+
+ {["Documentation under 60s", "Geotag + timestamp", "Verifiable onchain records", "Funders gain confidence", "Capital flows to verified cleanups"].map((s) => (
+
+
+ ))}
+
+
+
+ {/* Labeled connector: P1 enables scale */}
+
+
+
P1 Trust enables shared infrastructure to scale
+
+
+
+ {/* Branches: P2 + P3 side by side */}
+
+ {/* P2: Coordination */}
+
+
+
+
+
P2
+
+
Coordination
+
Shared infrastructure — network effects
+
+ {["Shared DMRV across regions", "Common data standards", "Organizers discover best practices", "Knowledge transfer", "Effectiveness improves network-wide"].map((s) => (
+
+
+ ))}
+
+
+ → More organizers generate more submissions
+
+
+
+
+ {/* P3: Incentives */}
+
+
-
- {pw.steps.map((s) => (
-
-
- ))}
-
-
- ))}
+
+
+
P3
+
+
Incentives
+
Recognition — sustained behavior
+
+
+ {["$bDCU structured recognition", "Tangible acknowledgment per action", "Episodic → sustained participation", "Documentation normalized", "Data quality improves"].map((s) => (
+
+
+ ))}
+
+
+ → Higher volume feeds verification pipeline
+
+
+
+
+
+ {/* Converge line */}
+
+
+
P2 + P3 converge: volume × quality feeds the verification layer
+
+
+
+ {/* P4: Verification Credibility (canopy) */}
+
+
+
P4
+
+
Verification Credibility
+
Canopy — where institutional trust lives
+
+
+ {["Open source waste detection model", "AI flags for human review", "Hybrid reduces fraud", "Quality = network reputation", "Partners trust for ESG reporting"].map((s) => (
+
+
+ ))}
+
+
+ ↺ Loops back to P1
+
+
diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx
index f580dc7..67736d9 100644
--- a/app/tokenomics/page.tsx
+++ b/app/tokenomics/page.tsx
@@ -51,9 +51,10 @@ export default function TokenomicsPage() {
-
Utility Token
+ Utility token
BASE
+
$bDCU
The "action token." Used on Base for:
- Real cleanups. Real proof. Real impact.
+ Cleanups with action. Proof under verified. Fundable impact.
{/* Subheadline */}
diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
index 44bdaca..af794e3 100644
--- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
+++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -6,9 +6,10 @@ import Link from "next/link";
import Image from "next/image";
const steps = [
- { number: "1.", title: "Start a Cleanup" },
- { number: "2.", title: "Capture the Impact" },
- { number: "3.", title: "Earn Rewards" },
+ { number: "1.", title: "Capture cleanup area" },
+ { number: "2.", title: "Complete cleanup" },
+ { number: "3.", title: "Capture the Impact" },
+ { number: "4.", title: "Claim Rewards" },
];
// Placeholder for real cleanup before/after photo
diff --git a/components/LitepaperOverviewCards/LitepaperOverviewCards.tsx b/components/LitepaperOverviewCards/LitepaperOverviewCards.tsx
new file mode 100644
index 0000000..2f1e772
--- /dev/null
+++ b/components/LitepaperOverviewCards/LitepaperOverviewCards.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState } from "react";
+import { BadgeCheck, ClipboardCheck, Users } from "lucide-react";
+
+const cards = [
+ {
+ title: "Verifiable Data",
+ icon: BadgeCheck,
+ iconColor: "text-[#58B12F]",
+ bgColor: "bg-[#58B12F]/10",
+ borderHover: "hover:border-[#58B12F]/50",
+ backContent: (
+ <>
+
+ We turn invisible cleanup efforts into standardized, onchain evidence. No more "trust me"—only "verify me."
+
+
+ Geotagged photos, timestamps, and DMRV create immutable records on Base and Celo—the foundation for rewards, impact products, and ESG reporting.
+
+
+ ),
+ },
+ {
+ title: "Auditable Impact",
+ icon: ClipboardCheck,
+ iconColor: "text-[#FAFF00]",
+ bgColor: "bg-[#FAFF00]/10",
+ borderHover: "hover:border-[#FAFF00]/50",
+ backContent: (
+ <>
+
+ Traceable impact records compatible with Hypercerts. Funders see where capital goes and what outcomes it produced.
+
+
+ AI + human verification reduces fraud; impact is attributed to real actors, building reputation and outcome-based funding.
+
+
+ ),
+ },
+ {
+ title: "Governable Funding",
+ icon: Users,
+ iconColor: "text-blue-400",
+ bgColor: "bg-blue-500/10",
+ borderHover: "hover:border-blue-400/50",
+ backContent: (
+ <>
+
+ DAO-based allocation using stable assets and impact-linked tokens. Communities and funders decide how capital flows.
+
+
+ Outcome-based pools and Gardens proposals support long-term sustainability; governance is tied to $cDCU and reputation.
+
+
+ ),
+ },
+];
+
+export default function LitepaperOverviewCards() {
+ const [flipped, setFlipped] = useState(null);
+
+ return (
+
+ {cards.map((card, index) => {
+ const isFlipped = flipped === index;
+ const Icon = card.icon;
+ return (
+
setFlipped(isFlipped ? null : index)}
+ className="relative h-[320px] w-full cursor-pointer text-left overflow-hidden rounded-2xl border border-white/5 bg-white/5 backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F]"
+ aria-label={isFlipped ? `Hide ${card.title} description` : `Show ${card.title} description`}
+ >
+ {/* Two panels stacked: show one, hide the other. No 3D = no mirroring. */}
+
+
+
+
+ {card.title}
+
+
Click to read more
+
+
{card.backContent}
+
Click to flip back
+
+ );
+ })}
+
(null);
- const touchEndX = useRef(null);
-
- const goToPrevious = () => {
- setCurrentIndex((prev) => (prev === 0 ? roadmap.length - 1 : prev - 1));
- };
-
- const goToNext = () => {
- setCurrentIndex((prev) => (prev === roadmap.length - 1 ? 0 : prev + 1));
- };
-
- // Touch handlers for mobile swipe
- const handleTouchStart = (e: React.TouchEvent) => {
- touchStartX.current = e.touches[0].clientX;
- };
-
- const handleTouchMove = (e: React.TouchEvent) => {
- touchEndX.current = e.touches[0].clientX;
- };
-
- const handleTouchEnd = () => {
- if (!touchStartX.current || !touchEndX.current) return;
-
- const distance = touchStartX.current - touchEndX.current;
- const minSwipeDistance = 50;
-
- if (distance > minSwipeDistance) {
- // Swipe left - go to next
- goToNext();
- } else if (distance < -minSwipeDistance) {
- // Swipe right - go to previous
- goToPrevious();
- }
-
- touchStartX.current = null;
- touchEndX.current = null;
- };
-
- return (
-
- {/* Container with padding to prevent border cutoff */}
-
- {/* Cards Container - Centered with stacked effect */}
-
- {roadmap.map((item, index) => {
- const isActive = index === currentIndex;
- const offset = index - currentIndex;
- const absOffset = Math.abs(offset);
-
- // Calculate position and scale for stacked cards
- let transform = "";
- let zIndex = roadmap.length - absOffset;
- let opacity = 1;
-
- if (isActive) {
- transform = "translateX(0) translateY(0)";
- zIndex = roadmap.length + 1;
- } else if (offset < 0) {
- // Cards to the left
- transform = `translateX(${-100 * absOffset - 50}px) translateY(${20 * absOffset}px) scale(${1 - absOffset * 0.1})`;
- opacity = Math.max(0.3, 1 - absOffset * 0.2);
- } else {
- // Cards to the right
- transform = `translateX(${100 * absOffset + 50}px) translateY(${20 * absOffset}px) scale(${1 - absOffset * 0.1})`;
- opacity = Math.max(0.3, 1 - absOffset * 0.2);
- }
-
- return (
-
-
!isActive && setCurrentIndex(index)}
- onClick={() => !isActive && setCurrentIndex(index)}
- style={{
- transform: isActive ? "scale(1)" : "scale(0.9)",
- }}
- >
-
- {item.phase}
-
-
- {item.bullets.map((bullet, idx) => {
- // Check if bullet contains a link
- const linkMatch = bullet.match(/\(https?:\/\/[^)]+\)/);
- if (linkMatch) {
- const url = linkMatch[0].slice(1, -1);
- const textBefore = bullet.substring(0, bullet.indexOf("("));
- return (
-
- •
-
- {textBefore}
-
-
- );
- }
- return (
-
- •
- {bullet}
-
- );
- })}
-
-
-
- );
- })}
-
-
-
- {/* Navigation Arrows - Hidden on mobile, visible on desktop */}
-
-
-
-
-
-
- {/* Dots indicator */}
-
- {roadmap.map((_, index) => (
- setCurrentIndex(index)}
- className={`w-2 h-2 rounded-full transition-all duration-300 ${
- index === currentIndex
- ? "bg-[#58B12F] w-8"
- : "bg-gray-700 hover:bg-gray-600"
- }`}
- aria-label={`Go to card ${index + 1}`}
- />
- ))}
-
-
-
-
-
-
-
-
- {/* Dots indicator for mobile - visible on mobile, hidden on desktop */}
-
- {roadmap.map((_, index) => (
- setCurrentIndex(index)}
- className={`h-2 rounded-full transition-all duration-300 ${
- index === currentIndex
- ? "bg-[#58B12F] w-8"
- : "bg-gray-700 w-2"
- }`}
- aria-label={`Go to card ${index + 1}`}
- />
- ))}
-
-
- {/* Roadmap Section with responsive margins */}
-
-
- {/* Header */}
-
-
- Network Roadmap
-
-
+ {/* Roadmap Section - litepaper-style vertical timeline */}
+
+
+
+ ROADMAP
+
+
+
+ {/* Vertical Line for mobile */}
+
+
+ {/* Phase 1 - Base blue */}
+
+
+ PHASE 1
+ Live
+
+
+
+
PHASE 1 - LIVE
+
Foundation
+
+
+
+
+
+
+
+
+ {/* Phase 2 - Celo yellow */}
+
+
+ PHASE 2
+ In Dev
+
+
+
+
PHASE 2 - IN DEV
+
Governance & Celo
+
+
+
+
+
+
+
- {/* Roadmap Carousel */}
-
+ {/* Phase 3 */}
+
+
+ PHASE 3
+ Future
+
+
+
+
PHASE 3
+
AI verification
+
+
• RWI Rank
+
• Impact Staking
+
+
+
+
+
{/* Community Impact Section */}
- Aligned with the UN Sustainable Development Goals
+ Aligned with the United Nations Sustainable Development Goals
{sdgs.map((goal) => (
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index bd17f32..10bce7f 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -39,7 +39,7 @@ const UseDeCleanupToday = () => {
className="flex-1 relative group block"
>
-
+
@@ -49,9 +49,9 @@ const UseDeCleanupToday = () => {
Mini App
-
Lightweight entry for individuals via Farcaster or Base app.
+
Lightweight entry for individuals via Farcaster or Base app.
-
+
Photo-based logging
@@ -66,7 +66,7 @@ const UseDeCleanupToday = () => {
-
@@ -80,7 +80,7 @@ const UseDeCleanupToday = () => {
className="flex-1 relative group block"
>
-
+
@@ -90,9 +90,9 @@ const UseDeCleanupToday = () => {
Full Platform
-
Full platform for individuals, NGOs and organizers. Governance and coordination.
+
Full platform for individuals, NGOs and organizers. Governance and coordination.
-
+
Geolocation and maps
@@ -107,7 +107,7 @@ const UseDeCleanupToday = () => {
-
diff --git a/components/WhoIsThisFor/WhoIsThisFor.tsx b/components/WhoIsThisFor/WhoIsThisFor.tsx
index e60c139..a70aced 100644
--- a/components/WhoIsThisFor/WhoIsThisFor.tsx
+++ b/components/WhoIsThisFor/WhoIsThisFor.tsx
@@ -2,48 +2,45 @@ import React from "react";
import Link from "next/link";
const cardBase =
- "relative rounded-2xl border bg-gray-900/80 p-6 text-left transition hover:bg-gray-900/90 card-border-glow";
+ "relative flex h-full flex-col rounded-2xl border bg-gray-900/80 p-6 text-left transition hover:bg-gray-900/90 card-border-glow";
export default function WhoIsThisFor() {
return (
-
+
Who is this for?
-
+
{/* Card 1 - Individuals and communities who clean, care and act */}
Individuals and communities who clean, care and act
-
+
For those who care about the planet
-
+
Choose how you want to use the app: within other platforms with minimum features or full experience in browser. We’ll show you what you need and where to go.
-
+
- •
+ •
Join or organize cleanup actions
- •
+ •
Take photos of the result
- •
+ •
Get recognition and rewards for real impact
Web3-native, but impact first
-
+
For those who build and coordinate impact
-
+
Use onchain tools to coordinate cleanups, rewards, and community
governance.
-