From a9d0af0cf7281ed890a3c29a620dafe2b4cb579d Mon Sep 17 00:00:00 2001
From: Anastasia <142572092+LuminaEnvision@users.noreply.github.com>
Date: Wed, 10 Dec 2025 23:57:05 +0700
Subject: [PATCH] Update user guide, litepaper, and landing page content

- Add comprehensive UserGuide component with sections for Base/Celo access, rewards breakdown, and verification
- Create /userguide page route
- Update litepaper: remove soulbound references, update token sections, verification system
- Update hero section: change tagline to uppercase with Bebas Neue font
- Update UseDeCleanupToday: fix card content and links
- Update NetworkRoadmapSection: fix attribution to Hem Japan
- Update NavLink: change USER GUIDE to internal route
---
 app/litepaper/page.tsx                        |  19 +-
 app/userguide/page.tsx                        |  43 +++
 components/HeroSection/Hero.tsx               |   4 +-
 components/NavLink/NavLink.tsx                |  18 +-
 .../NetworkRoadmapSection.tsx                 |   2 +-
 .../UseDeCleanupToday/UseDeCleanupToday.tsx   |   6 +-
 components/UserGuide/UserGuide.tsx            | 302 ++++++++++++++++++
 7 files changed, 377 insertions(+), 17 deletions(-)
 create mode 100644 app/userguide/page.tsx
 create mode 100644 components/UserGuide/UserGuide.tsx

diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
index 5857aad..aaeb671 100644
--- a/app/litepaper/page.tsx
+++ b/app/litepaper/page.tsx
@@ -96,7 +96,7 @@ export default function LitepaperPage() {
             Our Solution
           </h2>
           <ul className="space-y-3 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
-            <li><strong className="text-white">Impact Products</strong> — dynamic soulbound NFTs representing real-world cleanup impact</li>
+            <li><strong className="text-white">Impact Products</strong> — dynamic NFTs representing real-world cleanup impact</li>
             <li><strong className="text-white">Multichain Architecture</strong> — Base mini app for fast actions, Celo full dApp for governance & analytics</li>
             <li><strong className="text-white">Verifiable Reputation</strong> — user identity grows with real contributions</li>
             <li><strong className="text-white">Hypercerts Integration</strong> — automatically minted every 10 cleanups</li>
@@ -149,14 +149,13 @@ export default function LitepaperPage() {
             Impact Products
           </h2>
           <p className="md:text-lg leading-relaxed text-gray-300 mb-6">
-            Dynamic soulbound NFTs representing verified environmental work.
+            Dynamic NFTs representing verified environmental work.
           </p>
           
           <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
             Key Characteristics:
           </h3>
           <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4 mb-6">
-            <li>Soulbound</li>
             <li>Dynamic metadata</li>
             <li>Verifiable history</li>
             <li>Level progression</li>
@@ -166,9 +165,12 @@ export default function LitepaperPage() {
           <h3 className="text-xl md:text-2xl font-normal uppercase text-white mb-4">
             Level Progression:
           </h3>
-          <p className="md:text-lg leading-relaxed text-gray-300">
+          <p className="md:text-lg leading-relaxed text-gray-300 mb-2">
             Newbie → Pro → Hero → Guardian
           </p>
+          <p className="md:text-lg leading-relaxed text-gray-300">
+            1, 2, 3 - Newbie; 4, 5, 6 - Pro; 7, 8, 9 - Hero; 10 - Guardian
+          </p>
         </section>
 
         <div className="h-px bg-[#58B12F] mb-12 md:mb-16"></div>
@@ -207,9 +209,9 @@ export default function LitepaperPage() {
           <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
             <li>cleanup rewards</li>
             <li>streaks</li>
-            <li>referrals, verifier staking</li>
+            <li>referrals</li>
+            <li>verifier staking</li>
             <li>simple incentives</li>
-            <li>future staking for $REBAZ</li>
           </ul>
         </section>
 
@@ -253,10 +255,7 @@ export default function LitepaperPage() {
           </h2>
           <ul className="space-y-2 md:text-lg leading-relaxed text-gray-300 list-disc list-inside ml-4">
             <li>Staked verifiers - 100 $bDCU or $cDCU required to stake</li>
-            <li>Weighted approvals</li>
-            <li>Anti-fraud slashing</li>
-            <li>Accuracy score</li>
-            <li>Appeals system</li>
+            <li>Verifier rewards - 1 $bDCU or 1 $cDCU per valid submission</li>
           </ul>
         </section>
 
diff --git a/app/userguide/page.tsx b/app/userguide/page.tsx
new file mode 100644
index 0000000..05b059b
--- /dev/null
+++ b/app/userguide/page.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import UserGuide from "@/components/UserGuide/UserGuide";
+
+export const metadata: Metadata = {
+  title: "DeCleanup Network User Guide",
+  description: "A simple flow to start using DeCleanup today",
+};
+
+export default function UserGuidePage() {
+  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">
+          <Link
+            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>
+            <span>Back to Home</span>
+          </Link>
+        </div>
+
+        {/* User Guide Component */}
+        <UserGuide />
+      </div>
+    </main>
+  );
+}
+
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
index 7963bdb..a940810 100644
--- a/components/HeroSection/Hero.tsx
+++ b/components/HeroSection/Hero.tsx
@@ -23,8 +23,8 @@ const Hero = () => {
             />
           </div>
           <div className="text-right">
-            <span className="inline-block px-4 py-2 bg-[#FAFF00] text-black text-sm sm:text-base font-bold tracking-wider transform hover:scale-105 transition-transform duration-300 shadow-lg shadow-[#FAFF00]/20 normal-case" style={{ textTransform: 'none' }}>
-              clean up, snap, earn
+            <span className="inline-block px-4 py-2 bg-[#FAFF00] text-black text-sm sm:text-base font-normal tracking-wider transform hover:scale-105 transition-transform duration-300 shadow-lg shadow-[#FAFF00]/20 uppercase">
+              CLEAN UP, SNAP, EARN
             </span>
           </div>
         </div>
diff --git a/components/NavLink/NavLink.tsx b/components/NavLink/NavLink.tsx
index 9edfba8..92d1ac8 100644
--- a/components/NavLink/NavLink.tsx
+++ b/components/NavLink/NavLink.tsx
@@ -9,9 +9,11 @@ const NavLink = () => {
     { name: "LITEPAPER", href: "/litepaper" },
     { name: "TOKENOMICS", href: "/tokenomics" },
     { name: "DOCS", href: "/docs" },
-    { name: "USER GUIDE", href: "/user-guide" },
   ];
 
+  // User Guide (internal link)
+  const userGuideLink = { name: "USER GUIDE", href: "/userguide" };
+
   // External links
   const externalLinks = [
     { name: "LATEST ARTICLES", href: "https://paragraph.xyz/decleanupnet" },
@@ -39,6 +41,13 @@ const NavLink = () => {
                 <div className="absolute inset-0 bg-[#58B12F] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
               </Link>
             ))}
+            <Link
+              href={userGuideLink.href}
+              className="group relative bg-gray-900 text-[#58B12F] text-xs font-semibold rounded-lg px-3 py-3 text-center border-2 border-[#58B12F] hover:border-[#58B12F] hover:bg-[#58B12F]/10 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_15px_rgba(88,177,47,0.3)] overflow-hidden"
+            >
+              <span className="relative z-10">{userGuideLink.name}</span>
+              <div className="absolute inset-0 bg-[#58B12F] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
+            </Link>
           </div>
         </div>
 
@@ -54,6 +63,13 @@ const NavLink = () => {
               <div className="absolute inset-0 bg-[#58B12F] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
             </Link>
           ))}
+          <Link
+            href={userGuideLink.href}
+            className="group relative bg-gray-900 text-[#58B12F] text-base lg:text-lg font-semibold rounded-lg px-5 lg:px-6 py-3 lg:py-4 text-center border-2 border-[#58B12F] hover:border-[#58B12F] hover:bg-[#58B12F]/10 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_rgba(88,177,47,0.4)] overflow-hidden whitespace-nowrap"
+          >
+            <span className="relative z-10">{userGuideLink.name}</span>
+            <div className="absolute inset-0 bg-[#58B12F] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
+          </Link>
         </div>
       </div>
 
diff --git a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
index a70349e..2000bcd 100644
--- a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
+++ b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx
@@ -386,7 +386,7 @@ const NetworkRoadmapSection = () => {
             <div className="flex justify-end items-center">
               <div className="text-right">
                 <p className="text-base sm:text-lg font-bold text-gray-300">
-                  — Yuichi Hosomo, New Japan
+                  — Yuichi Hosomo, Hem Japan
                 </p>
               </div>
             </div>
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index d3fe7b8..9a06ba1 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -21,7 +21,7 @@ const UseDeCleanupToday = () => {
       title: "Base mini app",
       subtitle: "Fast actions, onchain rewards.",
       bullets: [
-        "Log cleanups from Farcaster",
+        "Log in and share cleanup impact",
         "Earn and use $bDCU on Base",
       ],
       buttonLabel: "Open mini app on Farcaster",
@@ -41,7 +41,7 @@ const UseDeCleanupToday = () => {
       buttonLabel: "Link – coming soon",
       buttonHref: "#",
       buttonDisabled: true,
-      note: "Link will be updated by Tuesday end of day (UTC).",
+      note: "Link will be updated as soon as token is launched.",
     },
     {
       title: "Full dApp on Celo (coming soon)",
@@ -49,7 +49,7 @@ const UseDeCleanupToday = () => {
       bullets: [
         "Full dashboard, leaderboard, streaks",
         "Recycables rewards promo, supported by DeTrash Global and Recy.App",
-        "Impact Products, claim & stake flows",
+        "Impact Products and $cDCU rewards, staking",
         "Governance with $cDCU on Gardens.fund",
         "Hypercerts: 1 cleanup hypercert after every 10 verified cleanups",
       ],
diff --git a/components/UserGuide/UserGuide.tsx b/components/UserGuide/UserGuide.tsx
new file mode 100644
index 0000000..0534128
--- /dev/null
+++ b/components/UserGuide/UserGuide.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+
+const UserGuide = () => {
+  return (
+    <section id="user-guide" className="w-full bg-black text-white py-10 md:py-16">
+      <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* SECTION TITLE */}
+        <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">
+            USER GUIDE
+          </h1>
+          <p className="text-lg md:text-xl text-gray-300">
+            A simple flow to start using DeCleanup today.
+          </p>
+        </div>
+
+        {/* SECTION 1 — BASE MINI APP ACCESS */}
+        <section className="mb-12 md:mb-16">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {/* CARD 1 — Use on Farcaster */}
+            <div className="bg-[#0A0A0A] border-l-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:scale-105 transition-transform duration-300 hover:shadow-[0_0_30px_rgba(250,255,0,0.2)]">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 bg-gradient-to-br from-[#FAFF00] to-[#58B12F] rounded-lg flex items-center justify-center">
+                  <span className="text-black font-bold text-lg">F</span>
+                </div>
+                <h2 className="text-xl md:text-2xl font-semibold text-white">
+                  Use on Farcaster
+                </h2>
+              </div>
+              <a
+                href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block w-full text-center bg-[#FAFF00] hover:bg-[#FAFF00]/90 text-black font-bold text-sm sm:text-base tracking-wider transition-colors duration-200 border-2 border-[#FAFF00] normal-case hover:scale-105 hover:shadow-[0_0_20px_rgba(250,255,0,0.4)] transition-all duration-300 px-4 py-2.5 rounded-lg mb-4"
+                style={{ textTransform: 'none', fontFamily: 'var(--font-geist-sans), system-ui, -apple-system, sans-serif' }}
+              >
+                Open on Farcaster
+              </a>
+              <p className="text-gray-300 text-base leading-relaxed mb-6">
+                Use the DeCleanup Mini App directly inside Farcaster. Smooth, instant, easy wallet connect
+              </p>
+              <div className="mt-auto">
+                <p className="text-sm text-gray-400 mb-2">Wallets:</p>
+                <ul className="space-y-1 mb-3">
+                  <li className="text-gray-300 text-sm flex items-center">
+                    <span className="text-[#FAFF00] mr-2">•</span>
+                    Farcaster Wallet is preferable...
+                  </li>
+                </ul>
+                <p className="text-xs text-gray-500 italic">
+                  Note: currently other wallet work unstable in farcaster app, use native wallet for best experience
+                </p>
+              </div>
+            </div>
+
+            {/* CARD 2 — Use on Web */}
+            <div className="bg-[#0A0A0A] border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:scale-105 transition-transform duration-300 hover:shadow-[0_0_30px_rgba(88,177,47,0.2)]">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-lg">W</span>
+                </div>
+                <h2 className="text-xl md:text-2xl font-semibold text-white">
+                  Use on Web
+                </h2>
+              </div>
+              <a
+                href="https://miniapp.decleanup.net"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block w-full text-center bg-[#58B12F] hover:bg-[#58B12F]/90 text-black font-bold text-sm sm:text-base tracking-wider transition-colors duration-200 border-2 border-[#58B12F] normal-case hover:scale-105 hover:shadow-[0_0_20px_rgba(88,177,47,0.4)] transition-all duration-300 px-4 py-2.5 rounded-lg mb-4"
+                style={{ textTransform: 'none', fontFamily: 'var(--font-geist-sans), system-ui, -apple-system, sans-serif' }}
+              >
+                Open Web App
+              </a>
+              <p className="text-gray-300 text-base leading-relaxed mb-6">
+                Open the same Mini App in a browser on mobile or desktop and connect any Base-compatible wallet.
+              </p>
+              <div className="mt-auto">
+                <p className="text-sm text-gray-400 mb-2">Wallets:</p>
+                <ul className="space-y-1">
+                  <li className="text-gray-300 text-sm flex items-center">
+                    <span className="text-[#58B12F] mr-2">•</span>
+                    Rainbow
+                  </li>
+                  <li className="text-gray-300 text-sm flex items-center">
+                    <span className="text-[#58B12F] mr-2">•</span>
+                    Base account
+                  </li>
+                  <li className="text-gray-300 text-sm flex items-center">
+                    <span className="text-[#58B12F] mr-2">•</span>
+                    Metamask
+                  </li>
+                  <li className="text-gray-300 text-sm flex items-center">
+                    <span className="text-[#58B12F] mr-2">•</span>
+                    Wallet Connect
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* SECTION 2 — HOW IT WORKS (3-STEP FLOW) */}
+        <section className="mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
+            How It Works
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+            {/* Step 1 */}
+            <div className="bg-gray-900 border-t-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center mb-4 mx-auto">
+                <span className="text-2xl">🧹</span>
+              </div>
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-3 text-center">
+                Clean Up
+              </h3>
+              <p className="text-gray-300 text-base leading-relaxed text-center">
+                Find a polluted spot and remove the trash.
+              </p>
+            </div>
+
+            {/* Step 2 */}
+            <div className="bg-gray-900 border-t-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(250,255,0,0.2)] transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-[#FAFF00] to-[#58B12F] rounded-lg flex items-center justify-center mb-4 mx-auto">
+                <span className="text-2xl">📷</span>
+              </div>
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-3 text-center">
+                Snap Proof
+              </h3>
+              <p className="text-gray-300 text-base leading-relaxed text-center">
+                Take before & after photos with location enabled.
+              </p>
+            </div>
+
+            {/* Step 3 */}
+            <div className="bg-gray-900 border-t-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <div className="w-16 h-16 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center mb-4 mx-auto">
+                <span className="text-2xl">✓</span>
+              </div>
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-3 text-center">
+                Submit & Earn
+              </h3>
+              <p className="text-gray-300 text-base leading-relaxed text-center">
+                Upload proof, get verified, earn rewards.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* SECTION 3 — REWARDS OVERVIEW (3 FEATURE CARDS) */}
+        <section className="mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
+            Rewards Overview
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {/* Card A — Impact Product */}
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <div className="w-14 h-14 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center mb-4">
+                <span className="text-2xl">🎯</span>
+              </div>
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-3">
+                Impact Product
+              </h3>
+              <p className="text-gray-300 text-base leading-relaxed">
+                Your permanent, evolving environmental profile.
+              </p>
+            </div>
+
+            {/* Card B — $bDCU Rewards */}
+            <div className="bg-gray-900 border-l-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col h-full hover:shadow-[0_0_30px_rgba(250,255,0,0.2)] transition-all duration-300">
+              <div className="w-14 h-14 bg-gradient-to-br from-[#FAFF00] to-[#58B12F] rounded-lg flex items-center justify-center mb-4">
+                <span className="text-2xl">💰</span>
+              </div>
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-3">
+                $bDCU Rewards
+              </h3>
+              <p className="text-gray-300 text-base leading-relaxed">
+                Earn $bDCU for every approved cleanup, streaks, referrals and submitting Impact Reports in the Mini App.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* SECTION 4 — REWARDS BREAKDOWN */}
+        <section className="mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
+            Rewards Breakdown
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 mb-6">
+            {/* Cleanups */}
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-2">
+                Cleanups
+              </h3>
+              <p className="text-gray-400 text-sm mb-3">
+                Claims of Impact Product
+              </p>
+              <p className="text-[#58B12F] text-2xl md:text-3xl font-bold">
+                10 $bDCU
+              </p>
+            </div>
+
+            {/* Referrals */}
+            <div className="bg-gray-900 border-l-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col hover:shadow-[0_0_30px_rgba(250,255,0,0.2)] transition-all duration-300">
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-2">
+                Referrals
+              </h3>
+              <p className="text-gray-400 text-sm mb-3">
+                Rewards for referring new users
+              </p>
+              <p className="text-[#FAFF00] text-2xl md:text-3xl font-bold">
+                3 $bDCU for the referrer and the referred
+              </p>
+            </div>
+
+            {/* Streak */}
+            <div className="bg-gray-900 border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-2">
+                Streak
+              </h3>
+              <p className="text-gray-400 text-sm mb-3">
+                Weekly streak maintenance rewards
+              </p>
+              <p className="text-[#58B12F] text-2xl md:text-3xl font-bold">
+                2 $bDCU
+              </p>
+            </div>
+
+            {/* Impact Reports */}
+            <div className="bg-gray-900 border-l-4 border-[#FAFF00] rounded-xl p-6 lg:p-8 flex flex-col hover:shadow-[0_0_30px_rgba(250,255,0,0.2)] transition-all duration-300">
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-2">
+                Impact Reports
+              </h3>
+              <p className="text-gray-400 text-sm mb-3">
+                Submission of impact reports
+              </p>
+              <p className="text-[#FAFF00] text-2xl md:text-3xl font-bold">
+                5 $bDCU
+              </p>
+            </div>
+          </div>
+          <div className="text-center">
+            <p className="text-sm text-gray-500 italic">
+              Note: Rewards are subject to change upon the actual token price.
+            </p>
+          </div>
+        </section>
+
+        {/* SECTION 5 — VERIFICATION SYSTEM (SPLIT LAYOUT) */}
+        <section className="mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-normal uppercase text-white mb-8 text-center">
+            Verification System
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {/* LEFT SIDE — Text block */}
+            <div className="flex flex-col justify-center">
+              <p className="text-gray-300 text-base md:text-lg leading-relaxed">
+                Your cleanup will be reviewed by community verifiers, who are $bDCU stakers. If the submission has geolocation, photos are clear and authentic, it gets approved. If not, it&apos;s rejected. Submitting Impact Report helps to validate submissions and builds your profile.
+              </p>
+            </div>
+
+            {/* RIGHT SIDE — Illustration placeholder */}
+            <div className="bg-[#0A0A0A] border-2 border-[#58B12F] rounded-xl p-8 flex items-center justify-center aspect-video hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300">
+              <div className="w-full h-full bg-gradient-to-br from-[#58B12F]/20 to-[#FAFF00]/20 rounded-lg flex items-center justify-center">
+                <span className="text-4xl">🔍</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* SECTION 6 — CELO FULL APP COMING SOON (FINAL CARD) */}
+        <section className="mb-12 md:mb-16">
+          <div className="max-w-3xl mx-auto">
+            <div className="bg-[#0A0A0A] border-l-4 border-[#58B12F] rounded-xl p-6 lg:p-8 flex flex-col items-center text-center hover:shadow-[0_0_30px_rgba(88,177,47,0.2)] transition-all duration-300 opacity-90">
+              <div className="w-16 h-16 bg-gradient-to-br from-[#58B12F] to-[#FAFF00] rounded-lg flex items-center justify-center mb-4">
+                <span className="text-2xl">🌱</span>
+              </div>
+              <h3 className="text-2xl md:text-3xl font-semibold text-white mb-4">
+                Full Celo dApp — Coming Soon
+              </h3>
+              <p className="text-gray-300 text-base md:text-lg leading-relaxed mb-6 max-w-2xl">
+                The complete DeCleanup experience is launching soon on Celo with full dashboard, leaderboard, streaks, governance, Impact Product management, and Hypercert generation.
+              </p>
+              <button
+                disabled
+                className="bg-gray-800 text-gray-500 cursor-not-allowed px-8 py-3 text-base font-semibold tracking-wider opacity-50 pointer-events-none rounded-lg"
+              >
+                Coming Soon
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </section>
+  );
+};
+
+export default UserGuide;
+