Skip to content

Docs, user guide, tokenomics, get-started flow updates #57

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
Feb 8, 2026
Merged

Docs, user guide, tokenomics, get-started flow updates #57

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
2 changes: 1 addition & 1 deletion app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Metadata } from "next";

export const metadata: Metadata = {
title: "DeCleanup Network Developer Documentation",
title: "DeCleanup Network Documentation",
description: "Technical documentation for DeCleanup Rewards - Quick start guide, architecture, smart contracts, and API reference",
};

Expand Down
194 changes: 83 additions & 111 deletions app/docs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,107 @@

"use client";

import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
title: "DeCleanup Network Documentation",
description: "Guides and resources for the DeCleanup Network. Tech stack and where to find more.",
};

export default function DocsPage() {
return (
<main className="min-h-screen bg-black text-white">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
{/* Back Button */}
<div className="mb-8">
<div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#58B12F] selection:text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
{/* Back + Header */}
<div className="mb-12 md:mb-16">
<Link
href="/#tokenize"
href="/"
className="inline-flex items-center gap-2 text-[#58B12F] hover:text-[#58B12F]/80 font-semibold text-sm md:text-base transition-colors duration-200 group"
>
<svg
className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
<svg className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
<span>Back to Home</span>
</Link>
</div>

{/* Page Header */}
<div className="text-center mb-12 md:mb-16">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-normal uppercase text-white mb-4">
Developer Documentation
</h1>
<p className="text-lg md:text-xl text-gray-200">
Technical guides and resources for the DeCleanup Network
</p>
</div>

{/* Developer Sections */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
{/* Contracts */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-[#58B12F]/50 transition-colors group">
<div className="mb-4">
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<div className="text-center mt-10">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs font-mono mb-4">
<span className="w-1.5 h-1.5 rounded-full bg-[#FAFF00] animate-pulse" />
DOCS
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#58B12F] transition-colors">Smart Contracts</h3>
<p className="text-gray-200 mb-4 text-sm">
Explore the core contracts powering DeCleanup, cleanups verification, and token logic.
<h1 className="text-5xl md:text-7xl lg:text-8xl text-white leading-tight tracking-tighter mb-4 font-bebas">
NETWORK <span className="text-[#58B12F]">DOCUMENTATION</span>
</h1>
<p className="text-lg md:text-xl text-gray-200 max-w-xl mx-auto font-light">
Guides and resources for the DeCleanup Network.
</p>
<a href="https://github.com/DeCleanup-Network/contracts" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] text-sm font-medium hover:underline">
View on GitHub →
</a>
</div>

{/* Subgraph */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-[#FAFF00]/50 transition-colors group">
<div className="mb-4">
<svg className="w-10 h-10 text-[#FAFF00]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.152A10.962 10.962 0 0112 21c-2.578 0-4.95-.903-6.855-2.43M6.551 16.5A10.964 10.964 0 013 11.25c0-1.879.468-3.649 1.289-5.21M17.449 16.5A10.964 10.964 0 0021 11.25c0-1.879-.468-3.649-1.289-5.21" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#FAFF00] transition-colors">Indexing & Subgraphs</h3>
<p className="text-gray-200 mb-4 text-sm">
Query DeCleanup data for integrations, analytics and governance apps.
</p>
<div className="flex gap-4">
<span className="text-gray-200 text-sm cursor-not-allowed">Coming soon</span>
</div>
</div>
</div>

{/* Frontend */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-cyan-400/50 transition-colors group">
<div className="mb-4">
<svg className="w-10 h-10 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-cyan-400 transition-colors">Frontend & Mini Apps</h3>
<p className="text-gray-200 mb-4 text-sm">
Contribute to the user interfaces, PWA, and Farcaster frames.
{/* Tech stack / What we build with */}
<section className="py-16 md:py-24 border-t border-white/5">
<div className="max-w-7xl mx-auto px-0">
<h2 className="text-4xl md:text-5xl text-center mb-4 font-bebas text-gray-200">TECH STACK</h2>
<p className="text-center text-gray-400 mb-12 max-w-2xl mx-auto">
A simple overview of what powers DeCleanup. For full technical docs and source code, see GitHub.
</p>
<a href="https://github.com/DeCleanup-Network" target="_blank" rel="noopener noreferrer" className="text-cyan-400 text-sm font-medium hover:underline">
Explore Repos →
</a>
</div>

{/* Verification AI */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-purple-400/50 transition-colors group">
<div className="mb-4">
<svg className="w-10 h-10 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-[#58B12F]/30 transition-colors">
<h3 className="text-xl font-bebas tracking-wide text-[#58B12F] mb-2">Smart contracts</h3>
<p className="text-sm text-gray-200 mb-4">Verification, tokens, and core logic on Base and Celo.</p>
<div className="flex flex-wrap gap-3">
<a href="https://github.com/DeCleanup-Network/Farcaster-Mini-App/tree/main/contracts/contracts" target="_blank" rel="noopener noreferrer" className="text-sm text-[#58B12F] hover:text-[#FAFF00] font-medium">
Base →
</a>
<a href="https://github.com/DeCleanup-Network/decleanup-main-celo/tree/main/contracts/contracts" target="_blank" rel="noopener noreferrer" className="text-sm text-[#58B12F] hover:text-[#FAFF00] font-medium">
Celo →
</a>
</div>
</div>
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-[#FAFF00]/30 transition-colors">
<h3 className="text-xl font-bebas tracking-wide text-[#FAFF00] mb-2">Frontend & mini apps</h3>
<p className="text-sm text-gray-200 mb-4">Web app, PWA, and Farcaster mini app.</p>
<div className="flex flex-wrap gap-3">
<a href="https://github.com/DeCleanup-Network/Farcaster-Mini-App/tree/main/app" target="_blank" rel="noopener noreferrer" className="text-sm text-[#58B12F] hover:text-[#FAFF00] font-medium">
Base →
</a>
<a href="https://github.com/DeCleanup-Network/decleanup-main-celo/tree/main/frontend" target="_blank" rel="noopener noreferrer" className="text-sm text-[#58B12F] hover:text-[#FAFF00] font-medium">
Celo →
</a>
</div>
</div>
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-[#58B12F]/30 transition-colors">
<h3 className="text-xl font-bebas tracking-wide text-white mb-2">Indexing & subgraphs</h3>
<p className="text-sm text-gray-200 mb-4">Query cleanup and token data for apps and analytics.</p>
<span className="text-sm text-gray-500">Coming soon</span>
</div>
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-[#58B12F]/30 transition-colors">
<h3 className="text-xl font-bebas tracking-wide text-white mb-2">AI verification</h3>
<p className="text-sm text-gray-200 mb-4">Computer vision for verifying cleanup impact.</p>
<span className="text-sm text-gray-500">Docs coming soon</span>
</div>
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-[#FAFF00]/30 transition-colors md:col-span-2">
<h3 className="text-xl font-bebas tracking-wide text-[#FAFF00] mb-2">Governance</h3>
<p className="text-sm text-gray-200 mb-4">Funding pools and voting on Celo via Gardens.</p>
<span className="text-sm text-gray-500">Coming soon</span>
</div>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-purple-400 transition-colors">AI Verification</h3>
<p className="text-gray-200 mb-4 text-sm">
Learn about the computer vision models used for verifying cleanup impact.
</p>
<a href="#" className="text-purple-400 text-sm font-medium hover:underline opacity-50 cursor-not-allowed">
Docs coming soon
</a>
</div>

{/* Governance */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-pink-400/50 transition-colors group">
<div className="mb-4">
<svg className="w-10 h-10 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
</svg>
<div className="mt-12 text-center">
<a
href="https://github.com/DeCleanup-Network"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-semibold rounded-xl transition-colors"
>
DeCleanup on GitHub →
</a>
<p className="text-sm text-gray-400 mt-4 max-w-md mx-auto">
Full technical docs, source code, and contribution guides are on GitHub.
</p>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-pink-400 transition-colors">Governance</h3>
<p className="text-gray-200 mb-4 text-sm">
Technical details on how funding pools and voting mechanisms work.
</p>
<a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-pink-400 text-sm font-medium hover:underline">
Visit Gardens →
</a>
</div>
</div>

<div className="mt-16 text-center">
<p className="text-gray-200">
Looking for the impact coordination guide? <Link href="/coordinate" className="text-[#58B12F] hover:underline">Click here</Link>.
</p>
</div>
</section>

</div>
</main>
</div>
);
}
Loading