Skip to content

Litepaper: Why DeCleanup Network, Problem/Solution design; Get-starte… #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LuminaEnvision merged 1 commit into from
Mar 5, 2026
Merged

Litepaper: Why DeCleanup Network, Problem/Solution design; Get-starte… #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions app/litepaper/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,74 @@ export default function LitepaperPage() {
</div>
</header>

{/* Why DeCleanup – pillars (from landing) */}
<section id="why-decleanup" className="py-20 border-b border-white/5">
<div className="max-w-7xl mx-auto px-6">
<h2 className="text-5xl font-bebas text-white mb-12 text-center">Why DeCleanup Network Exists</h2>

{/* Problem → Solution (same design as main page) */}
<div className="max-w-4xl mx-auto mb-16">
<div className="grid md:grid-cols-3 gap-4 items-center">
{/* Problem */}
<div className="group relative p-6 rounded-2xl bg-white/[0.04] border border-white/10 transition-all duration-300 hover:border-white/20">
<div className="text-gray-300 mb-3 flex justify-center">
<svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<h3 className="text-gray-300 font-semibold text-lg mb-2">The Problem</h3>
<p className="text-gray-300 text-sm">Cleanups happen, but there&apos;s no credible proof or transparent coordination</p>
</div>

{/* Arrow */}
<div className="hidden md:flex justify-center">
<svg className="w-16 h-8 text-[#58B12F]/70" viewBox="0 0 64 32" fill="none">
<path d="M2 16h56m0 0l-12-12m12 12l-12 12" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>

{/* Solution */}
<div className="group relative p-6 rounded-2xl bg-[#58B12F]/[0.08] border border-[#58B12F]/20 transition-all duration-300 hover:border-[#58B12F]/30">
<div className="text-[#58B12F] mb-3 flex justify-center">
<svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="text-gray-200 font-semibold text-lg mb-2">The Solution</h3>
<p className="text-gray-300 text-sm">Verifiable, incentivized, and transparently funded environmental action</p>
</div>
</div>
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
<div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
<FileText className="text-[#58B12F] w-8 h-8 mb-4" />
<h3 className="text-white font-bebas text-xl tracking-wide mb-1">DMRV</h3>
<p className="text-[#58B12F] text-sm font-medium mb-2">Data, Measurement, Reporting, Verification</p>
<p className="text-gray-400 text-sm">Credible proof of environmental impact</p>
</div>
<div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
<Layers className="text-[#58B12F] w-8 h-8 mb-4" />
<h3 className="text-white font-bebas text-xl tracking-wide mb-1">Onchain Immutability</h3>
<p className="text-[#58B12F] text-sm font-medium mb-2">Permanent Records</p>
<p className="text-gray-400 text-sm">Blockchain-verified cleanup history</p>
</div>
<div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
<Star className="text-[#58B12F] w-8 h-8 mb-4" />
<h3 className="text-white font-bebas text-xl tracking-wide mb-1">Incentives & Reputation</h3>
<p className="text-[#58B12F] text-sm font-medium mb-2">Reward Real Work</p>
<p className="text-gray-400 text-sm">Earn recognition for environmental action</p>
</div>
<div className="p-6 rounded-2xl bg-white/[0.04] border border-white/10">
<UserCheck className="text-[#FAFF00] w-8 h-8 mb-4" />
<h3 className="text-white font-bebas text-xl tracking-wide mb-1">Open Coordination</h3>
<p className="text-[#FAFF00] text-sm font-medium mb-2">Transparent Funding</p>
<p className="text-gray-400 text-sm">Community-driven cleanup initiatives</p>
</div>
</div>
</div>
</section>

{/* 1. Overview Cards (flip on click) */}
<section id="overview" className="py-20 bg-[#0A0A0A]">
<div className="max-w-7xl mx-auto px-6">
Expand Down
39 changes: 27 additions & 12 deletions components/GetStartedFlow/GetStartedFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,11 @@ function GuideLinks({ variant }: { variant: "base" | "celo" | "wallet" }) {

export default function GetStartedFlow() {
const [step, setStep] = useState<Step>("intro");
const [diveDeeperOpen, setDiveDeeperOpen] = useState(false);

return (
<div className="space-y-6 max-w-2xl mx-auto">
{/* Step: Intro - For those who care about the planet (before flowchart) */}
{/* Step: Intro - For those who care about the planet */}
{step === "intro" && (
<div className="space-y-6">
{/* Header */}
Expand All @@ -102,10 +103,32 @@ export default function GetStartedFlow() {
For those who care about the planet
</h2>
<p className="text-gray-200 text-sm md:text-base max-w-2xl mx-auto">
Environmental action deserves recognition. Here&apos;s how DeCleanup makes it happen.
Environmental action deserves recognition. Here&apos;s what to do to get it.
</p>
</div>

<button
onClick={() => setStep("start")}
className="w-full px-6 py-4 rounded-xl bg-gradient-to-r from-[#FAFF00] to-yellow-400 text-black font-semibold hover:from-[#FAFF00]/90 hover:to-yellow-400/90 transition-all duration-300 shadow-lg shadow-[#FAFF00]/20 hover:shadow-[#FAFF00]/40 hover:scale-[1.02] flex items-center justify-center gap-2 group"
>
<span>Choose your path</span>
<svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>

<button
onClick={() => setDiveDeeperOpen(!diveDeeperOpen)}
className="w-full px-6 py-4 rounded-xl bg-gradient-to-r from-[#FAFF00] to-yellow-400 text-black font-semibold hover:from-[#FAFF00]/90 hover:to-yellow-400/90 transition-all duration-300 shadow-lg shadow-[#FAFF00]/20 hover:shadow-[#FAFF00]/40 hover:scale-[1.02] flex items-center justify-center gap-2 group"
>
<span>Dive deeper</span>
<svg className={`w-5 h-5 transition-transform ${diveDeeperOpen ? "rotate-180" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M19 9l-7 7-7-7" />
</svg>
</button>

{diveDeeperOpen && (
<div className="space-y-6">
{/* The Problem - Visual Cards */}
<div className="space-y-4">
<div className="flex items-center gap-3 mb-4">
Expand Down Expand Up @@ -364,16 +387,8 @@ export default function GetStartedFlow() {
</div>
</Card>

{/* CTA Button */}
<button
onClick={() => setStep("start")}
className="w-full px-6 py-4 rounded-xl bg-gradient-to-r from-[#FAFF00] to-yellow-400 text-black font-semibold hover:from-[#FAFF00]/90 hover:to-yellow-400/90 transition-all duration-300 shadow-lg shadow-[#FAFF00]/20 hover:shadow-[#FAFF00]/40 hover:scale-[1.02] flex items-center justify-center gap-2 group"
>
<span>Choose your path</span>
<svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
</div>
)}

<style jsx>{`
@keyframes fadeInUp {
Expand Down
2 changes: 1 addition & 1 deletion components/HowToTokonizeImpact/TokenizeImpactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const TokenizeImpactSection = () => {
How Your Cleanup Becomes Verified Impact
</h2>
<p className="text-gray-400 text-sm md:text-base max-w-xl mx-auto">
Four simple steps — from picking up litter to earning recognition.
Four simple steps from picking up litter to earning recognition.
</p>
</div>

Expand Down
106 changes: 0 additions & 106 deletions components/WhyDeCleanup/WhyDeCleanup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,6 @@
import React from "react";

export default function WhyDeCleanup() {
const features = [
{
icon: (
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
),
title: "DMRV",
subtitle: "Data, Measurement, Reporting, Verification",
description: "Credible proof of environmental impact",
accentColor: "text-[#58B12F]"
},
{
icon: (
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
title: "Onchain Immutability",
subtitle: "Permanent Records",
description: "Blockchain-verified cleanup history",
accentColor: "text-[#58B12F]"
},
{
icon: (
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
title: "Incentives & Reputation",
subtitle: "Reward Real Work",
description: "Earn recognition for environmental action",
accentColor: "text-[#58B12F]"
},
{
icon: (
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
),
title: "Open Coordination",
subtitle: "Transparent Funding",
description: "Community-driven cleanup initiatives",
accentColor: "text-[#FAFF00]"
}
];

return (
<section className="relative overflow-hidden border-t border-white/10 bg-black py-16 md:py-24">
{/* Subtle brand tint */}
Expand Down Expand Up @@ -98,66 +51,7 @@ export default function WhyDeCleanup() {
</div>
</div>
</div>

{/* Feature Cards Grid */}
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
{features.map((feature, index) => (
<div
key={index}
className="group relative"
style={{
animation: `fadeInUp 0.6s ease-out ${index * 0.1}s both`
}}
>
{/* Card */}
<div className="relative h-full p-6 rounded-2xl bg-white/[0.04] border border-white/10 transition-all duration-300 hover:border-[#58B12F]/20 overflow-hidden">
{/* Content */}
<div className="relative z-10">
{/* Icon */}
<div className={`${feature.accentColor} mb-4 opacity-90`}>
{feature.icon}
</div>

{/* Title */}
<h3 className="text-gray-200 font-semibold text-xl mb-1 tracking-wide">
{feature.title}
</h3>

{/* Subtitle */}
<p className={`${feature.accentColor} text-sm font-medium mb-3 opacity-90`}>
{feature.subtitle}
</p>

{/* Description */}
<p className="text-gray-300 text-sm leading-relaxed">
{feature.description}
</p>
</div>
</div>
</div>
))}
</div>

{/* Bottom tagline */}
<div className="mt-12 text-center">
<p className="text-gray-300 text-lg max-w-2xl mx-auto">
<span className="text-[#58B12F] font-semibold">SDG-aligned</span> technology for a cleaner, more transparent future
</p>
</div>
</div>

<style jsx>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`}</style>
</section>
);
}