Litepaper redesign, footer updates, token cards alignment, ecosystem …

app/page.tsx

@@ -4,7 +4,6 @@ import TokenizeImpactSection from "@/components/HowToTokonizeImpact/TokenizeImpa
 import UseDeCleanupToday from "@/components/UseDeCleanupToday/UseDeCleanupToday";
 import CommunityImpactSection from "@/components/CommunityImpactSection/CommunityImpactSection";
 import TotalImpactSection from "@/components/TotalImpactSection/TotalImpactSection";
-import AppendixSection from "@/components/AppendixSection/AppendixSection";
 import JoinTheMovementSection from "@/components/JoinTheMovementSection/JoinTheMovementSection";
 import NavLink from "@/components/NavLink/NavLink";
 
@@ -17,7 +16,6 @@ const Page = () => {
       <UseDeCleanupToday />
       <CommunityImpactSection />
       <TotalImpactSection />
-      <AppendixSection />
       <JoinTheMovementSection />
       <NavLink variant="full" />
     </main>

components/HeroSection/Hero.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import StartCleaningChoice from "@/components/StartCleaningChoice/StartCleaningChoice";
 
 const Hero = () => {
   return (
@@ -46,19 +47,14 @@ const Hero = () => {
           Join volunteers worldwide turning trash pickup into verified, rewarded impact.
         </p>
 
-        {/* CTAs - primary: Get Started, secondary: How It Works */}
+        {/* CTAs - primary: Start Cleaning (modal), secondary: How it works */}
         <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <Link
-            href="/get-started"
-            className="rounded-xl bg-white px-6 py-3.5 font-semibold text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)] min-h-[44px] flex items-center justify-center"
-          >
-            Start Cleaning
-          </Link>
+          <StartCleaningChoice />
           <Link
             href="/userguide"
             className="rounded-xl border border-white/20 px-6 py-3.5 font-medium text-white transition-all duration-300 hover:border-white/40 hover:bg-white/5 min-h-[44px] flex items-center justify-center"
           >
-            See How It Works
+            How it works
           </Link>
         </div>
       </div>

components/HowToTokonizeImpact/TokenizeImpactSection.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import Image from "next/image";
 
 const steps = [
-  { number: "1.", title: "Find your spot" },
-  { number: "2.", title: "Do the work" },
+  { number: "1.", title: "Find your spot and take photo" },
+  { number: "2.", title: "Do the cleanup work" },
   { number: "3.", title: "Photograph the result" },
   { number: "4.", title: "Earn your reward" },
 ];

components/LitepaperNav/LitepaperNav.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+
+const sections = [
+  { href: "#why-decleanup", label: "Why DeCleanup Network Exists" },
+  { href: "#mission", label: "The Mission" },
+  { href: "#dmrv", label: "How Cleanups Become Proof" },
+  { href: "#ecosystem", label: "The Ecosystem" },
+  { href: "#tokenomics", label: "Two Tokens" },
+  { href: "#theoryofchange", label: "From Action to Infrastructure" },
+  { href: "#toc", label: "Theory of Change" },
+  { href: "#roadmap", label: "Where We Are and Where We're Going" },
+  { href: "#coordinate", label: "For Coordinators" },
+  { href: "#forfunders", label: "For Funders" },
+];
+
+export default function LitepaperNav() {
+  return (
+    <nav
+      className="sticky top-16 z-40 bg-[#0A0A0A]/95 backdrop-blur-md border-b border-white/5 py-3"
+      aria-label="Litepaper sections"
+    >
+      <div className="max-w-7xl mx-auto px-6 flex flex-wrap items-center justify-center gap-3 md:gap-4 text-xs md:text-sm">
+        <Link href="#top" className="text-gray-400 hover:text-white transition-colors whitespace-nowrap">
+          Top
+        </Link>
+        {sections.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            className="text-gray-300 hover:text-white transition-colors"
+          >
+            {label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}

components/LitepaperWhyPillarCards/LitepaperWhyPillarCards.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from "react";
+
+const cards = [
+  {
+    title: "DMRV",
+    subtitle: "Data, Measurement, Reporting, Verification",
+    frontLine: "Credible proof of environmental impact.",
+    backContent: "Every cleanup is captured with photos, location, and waste estimates; scored by AI and verified by the community; then minted as a permanent impact record. This creates a shared, machine-readable evidence base for funders, ESG reporting, and impact accounting.",
+  },
+  {
+    title: "Onchain Immutability",
+    subtitle: "Permanent Records",
+    frontLine: "Blockchain-verified cleanup history.",
+    backContent: "Records live on Base and Celo. They cannot be altered after verification, so funders and partners can trust that impact data is real and attributable. This forms the backbone for rewards, Hypercerts, and future certification layers.",
+  },
+  {
+    title: "Incentives & Reputation",
+    subtitle: "Reward Real Work",
+    frontLine: "Earn recognition for environmental action.",
+    backContent: "Participants earn $bDCU for verified cleanups and build reputation through streaks and verification activity. $cDCU on Celo ties reputation to governance, so long-term contributors have a voice in how the network and funding evolve.",
+  },
+  {
+    title: "Open Coordination",
+    subtitle: "Transparent Funding",
+    frontLine: "Community-driven cleanup initiatives.",
+    backContent: "Campaigns, proposals, and funding pools are governed transparently. Communities decide priorities; funders can trace capital to verified outcomes. No single gatekeeper - coordination and funding are open and auditable.",
+  },
+];
+
+export default function LitepaperWhyPillarCards() {
+  const [flipped, setFlipped] = useState<number | null>(null);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+      {cards.map((card, index) => {
+        const isFlipped = flipped === index;
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => setFlipped(isFlipped ? null : index)}
+            className="relative min-h-[200px] w-full cursor-pointer text-left overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58B12F] transition-colors"
+            aria-label={isFlipped ? `Hide ${card.title} description` : `Show ${card.title} description`}
+          >
+            <div
+              className={`absolute inset-0 p-6 rounded-2xl flex flex-col transition-opacity duration-300 ${!isFlipped ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"}`}
+            >
+              <h3 className="text-white font-bebas text-xl tracking-wide mb-1">{card.title}</h3>
+              <p className="text-[#58B12F] text-sm font-medium mb-2">{card.subtitle}</p>
+              <p className="text-gray-400 text-sm">{card.frontLine}</p>
+              <p className="text-xs text-gray-500 mt-4">Click to read more</p>
+            </div>
+            <div
+              className={`absolute inset-0 p-5 rounded-2xl flex flex-col justify-between bg-neutral-900/95 border border-white/10 transition-opacity duration-300 ${isFlipped ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"}`}
+            >
+              <div className="flex-1 min-h-0 overflow-y-auto">
+                <h3 className="text-white font-bebas text-lg tracking-wide mb-2">{card.title}</h3>
+                <p className="text-gray-300 text-sm leading-relaxed">{card.backContent}</p>
+              </div>
+              <p className="text-xs text-gray-500 mt-3 shrink-0">Click to flip back</p>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

components/NavLink/NavLink.tsx

@@ -16,39 +16,34 @@ const NavLink = ({ variant = "full" }: { variant?: NavLinkVariant }) => {
         <>
           <Divider className="mt-6 bg-gray-800" />
 
-          {/* Footer - 4 columns per brief */}
+          {/* Footer - Resources, Technical, Support */}
           <footer className="mt-6 pt-8 border-t border-gray-800">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-              <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Product</h4>
-                <ul className="space-y-2">
-                  <li><Link href="/get-started" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Get Started</Link></li>
-                  <li><a href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Open App</a></li>
-                </ul>
-              </div>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-8 mb-8">
               <div>
                 <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Resources</h4>
                 <ul className="space-y-2">
                   <li><Link href="/litepaper" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Litepaper</Link></li>
                   <li><Link href="/tokenomics" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Tokenomics</Link></li>
-                  <li><Link href="/docs" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Dev docs</Link></li>
-                  <li><Link href="/get-started" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">User guide</Link></li>
+                  <li><Link href="/toc" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Theory of change</Link></li>
+                  <li><a href="https://paragraph.com/@decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Publications</a></li>
                 </ul>
               </div>
               <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Community</h4>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Technical</h4>
                 <ul className="space-y-2">
-                  <li><a href="https://x.com/DeCleanupNet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Twitter</a></li>
-                  <li><a href="https://farcaster.xyz/decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Farcaster</a></li>
-                  <li><a href="https://t.me/EcoSynthesisX/443" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Telegram</a></li>
                   <li><a href="https://github.com/DeCleanup-Network" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">GitHub</a></li>
+                  <li><Link href="/docs" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Dev docs</Link></li>
+                  <li><Link href="/userguide" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">User guide</Link></li>
+                  <li><span className="text-gray-500 text-sm">Terms of service (coming soon)</span></li>
                 </ul>
               </div>
               <div>
                 <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">Support</h4>
                 <ul className="space-y-2">
-                  <li><a href="#" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Gardens.fund</a></li>
-                  <li><a href="#" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Donate on Giveth</a></li>
+                  <li><a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Gardens.fund (coming soon)</a></li>
+                  <li><a href="https://giveth.io/project/decentralized-cleanup-network" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Donate on Giveth</a></li>
+                  <li><a href="https://www.crowdwalrus.xyz/campaigns/decleanupnet" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Fund on CrowdWalrus</a></li>
+                  <li><a href="https://app.uniswap.org/swap?chain=base&inputCurrency=ETH&outputCurrency=0x30171b7014c02229497CdE6745DD3aD821F12b07" target="_blank" rel="noopener noreferrer" className="text-gray-200 hover:text-[#58B12F] transition-colors text-sm">Invest in token</a></li>
                 </ul>
               </div>
             </div>

components/StartCleaningChoice/StartCleaningChoice.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+
+const LINKS = {
+  farcaster: "https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards",
+  base: "https://base.app/app/miniapp.decleanup.net",
+  full: "https://dapp.decleanup.net",
+};
+
+type Variant = "default" | "litepaper";
+
+export default function StartCleaningChoice({ variant = "default" }: { variant?: Variant }) {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, right: 0 });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const isLitepaper = variant === "litepaper";
+
+  useEffect(() => {
+    if (!open || !isLitepaper || !buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const gap = 8;
+    setPosition({
+      top: rect.bottom + gap,
+      right: Math.max(16, window.innerWidth - rect.right),
+    });
+  }, [open, isLitepaper]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen(true)}
+        className={
+          isLitepaper
+            ? "border border-[#FAFF00]/50 text-[#FAFF00] px-4 py-1.5 rounded-full text-xs font-bold hover:bg-[#FAFF00] hover:text-black transition-all min-h-[36px] flex items-center justify-center"
+            : "rounded-xl bg-white px-6 py-3.5 font-semibold text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)] min-h-[44px] flex items-center justify-center"
+        }
+      >
+        {isLitepaper ? "LAUNCH APP" : "Start Cleaning"}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 p-4 bg-black/70 backdrop-blur-sm"
+          onClick={() => setOpen(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="start-cleaning-title"
+          style={
+            isLitepaper
+              ? { display: "block" }
+              : { display: "flex", alignItems: "center", justifyContent: "center" }
+          }
+        >
+          <div
+            className={
+              isLitepaper
+                ? "absolute w-full max-w-[320px] rounded-2xl border border-[#58B12F]/30 bg-gray-900 p-6 shadow-xl"
+                : "relative w-full max-w-md rounded-2xl border border-[#58B12F]/30 bg-gray-900 p-6 shadow-xl"
+            }
+            style={
+              isLitepaper
+                ? { top: position.top, right: position.right, left: "auto" }
+                : undefined
+            }
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h2 id="start-cleaning-title" className="text-xl font-bold text-white">
+                {isLitepaper ? "Launch app" : "Where do you want to start?"}
+              </h2>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded-lg p-1.5 text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+                aria-label="Close"
+              >
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <a
+                href={LINKS.farcaster}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                Mini app on Farcaster
+              </a>
+              <a
+                href={LINKS.base}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                Mini app on Base app
+              </a>
+              <a
+                href={LINKS.full}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full rounded-xl border border-[#58B12F]/30 bg-white/5 px-4 py-3.5 text-left text-white font-medium hover:border-[#58B12F]/60 hover:bg-white/10 transition-colors"
+              >
+                {isLitepaper ? "Full platform on Celo (testing phase)" : "Full platform"}
+              </a>
+            </div>
+
+            <p className="mt-4 text-xs text-gray-400 text-center">
+              Opens in a new tab
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

components/TheoryOfChange/TheoryOfChange.tsx

@@ -9,7 +9,9 @@ import {
     ArrowRight
 } from "lucide-react";
 
-export default function TheoryOfChange() {
+type TheoryOfChangeProps = { hideAppendix?: boolean };
+
+export default function TheoryOfChange({ hideAppendix }: TheoryOfChangeProps) {
     return (
         <div className="w-full relative py-8">
             {/* Background Grid */}
@@ -22,10 +24,13 @@ export default function TheoryOfChange() {
             ></div>
 
             <div className="max-w-7xl mx-auto px-4 relative z-10">
+                {!hideAppendix && (
                 <div className="flex items-center gap-3 mb-12">
                     <span className="text-xs font-mono text-gray-300 border border-gray-800 px-2 py-1 rounded">APPENDIX A</span>
                     <h2 className="text-3xl text-white font-bebas tracking-wide">THEORY OF <span className="text-[#58B12F]">CHANGE</span></h2>
                 </div>
+                )}
+                {hideAppendix && <div className="mb-8" />}
 
                 {/* Flow Container */}
                 <div className="flex flex-col lg:flex-row items-stretch justify-between gap-0 relative">