From 546298852960479b6c1b01bc5cf1e5bdb0b675b4 Mon Sep 17 00:00:00 2001
From: Anastasia <142572092+LuminaEnvision@users.noreply.github.com>
Date: Wed, 10 Dec 2025 18:10:04 +0700
Subject: [PATCH 1/2] feat: add DCU logo to header, move tagline to right, add
 user guide to internal links, rename Twitter to X

---
 app/user-guide/page.tsx                       | 55 ++++++++++++
 components/HeroSection/Hero.tsx               | 20 +++--
 .../TokenizeImpactSection.tsx                 |  2 +-
 components/NavLink/NavLink.tsx                |  6 +-
 .../UseDeCleanupToday/UseDeCleanupToday.tsx   | 86 +++++++++++++------
 5 files changed, 133 insertions(+), 36 deletions(-)
 create mode 100644 app/user-guide/page.tsx

diff --git a/app/user-guide/page.tsx b/app/user-guide/page.tsx
new file mode 100644
index 0000000..8fcdbad
--- /dev/null
+++ b/app/user-guide/page.tsx
@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "DeCleanup Network User Guide",
+  description: "User guide for DeCleanup Network",
+};
+
+export default function UserGuidePage() {
+  return (
+    <main className="min-h-screen bg-black text-white">
+      <div className="max-w-[900px] 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>
+
+        {/* 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">
+            User Guide
+          </h1>
+          <p className="text-lg md:text-xl text-gray-400">
+            Coming Soon
+          </p>
+        </div>
+
+        <div className="text-center">
+          <p className="md:text-lg leading-relaxed text-gray-300">
+            The user guide will be available here soon.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
index 849fdf6..7963bdb 100644
--- a/components/HeroSection/Hero.tsx
+++ b/components/HeroSection/Hero.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 const Hero = () => {
   return (
@@ -9,15 +10,22 @@ const Hero = () => {
       <div className="absolute inset-0 bg-gradient-to-br from-[#58B12F]/5 via-transparent to-[#FAFF00]/5 animate-pulse"></div>
       
       <div className="max-w-5xl mx-auto text-center relative z-10">
-        {/* Header with tagline on left and logo space on right */}
+        {/* Header with logo on left and tagline on right */}
         <div className="w-full flex justify-between items-center mb-6 sm:mb-8 animate-fade-in px-4">
-          <div className="text-left">
+          <div className="flex items-center">
+            <Image
+              src="https://ipfs.io/ipfs/bafkreidva4g2hrnmegqkkig4t743hprwk6g3or76foe25hyrvs4zngprja"
+              alt="DeCleanup Network Logo"
+              width={120}
+              height={48}
+              className="w-auto h-8 sm:h-10 lg:h-12 object-contain"
+              unoptimized
+            />
+          </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>
-      </div>
-          <div className="w-24 h-12 bg-transparent">
-            {/* Logo space - coming soon */}
+            </span>
           </div>
         </div>
 
diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
index 664254c..8fdfbed 100644
--- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
+++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -123,7 +123,7 @@ const TokenizeImpactSection = () => {
                 rel="noopener noreferrer"
                 className="group relative px-8 py-4 bg-gradient-to-r from-gray-900 to-gray-800 text-[#FAFF00] font-semibold text-base sm:text-lg border-2 border-[#FAFF00] hover:border-[#58B12F] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_rgba(250,255,0,0.3)] text-center overflow-hidden"
               >
-                <span className="relative z-10">Twitter</span>
+                <span className="relative z-10">X</span>
                 <div className="absolute inset-0 bg-[#FAFF00] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
               </Link>
               <Link
diff --git a/components/NavLink/NavLink.tsx b/components/NavLink/NavLink.tsx
index 3612a9d..9edfba8 100644
--- a/components/NavLink/NavLink.tsx
+++ b/components/NavLink/NavLink.tsx
@@ -9,6 +9,7 @@ const NavLink = () => {
     { name: "LITEPAPER", href: "/litepaper" },
     { name: "TOKENOMICS", href: "/tokenomics" },
     { name: "DOCS", href: "/docs" },
+    { name: "USER GUIDE", href: "/user-guide" },
   ];
 
   // External links
@@ -16,8 +17,7 @@ const NavLink = () => {
     { name: "LATEST ARTICLES", href: "https://paragraph.xyz/decleanupnet" },
     { name: "KARMA GAP", href: "https://gap.karmahq.xyz/project/decentralized-cleanup-network-decleanup-network"},
     { name: "GITHUB", href: "https://github.com/DeCleanup-Network" },
-    { name: "USER GUIDE", href: "https://giveth.io/project/decentralized-cleanup-network"},
-    { name: "BUG REPORT", href: "https://tally.so/r/mRBlbl" },
+    { name: "BUG REPORT", href: "https://docs.google.com/forms/d/e/1FAIpQLSfWCK4WmO9T-WJOOZwuDiG3yEJVX23RX_AkIa6tZHZ0J9Tf3w/viewform?usp=header" },
   ];
 
   return (
@@ -28,7 +28,7 @@ const NavLink = () => {
       <div className="mb-6">
         {/* Mobile Layout - Internal Links */}
         <div className="block md:hidden mb-4">
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid grid-cols-2 gap-3">
             {internalLinks.map((link, index) => (
               <Link
                 key={index}
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index 118f259..28df2ff 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -1,18 +1,21 @@
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 const UseDeCleanupToday = () => {
   const apps = [
     {
-      title: "Base mini app on Farcaster",
+      title: "Base mini app",
       subtitle: "Fast actions, onchain rewards.",
       bullets: [
         "Log cleanups from Farcaster",
         "Earn and use $bDCU on Base",
       ],
-      buttonLabel: "Open mini app",
-      buttonHref: "https://farcaster.xyz/miniapps/njiQzfqas3yN/decleanup-rewards",
+      buttonLabel: "Open mini app on Farcaster",
+      buttonHref: "https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards",
       buttonDisabled: false,
+      secondButtonLabel: "Open web app",
+      secondButtonHref: "https://miniapp.decleanup.net",
       note: null,
     },
     {
@@ -73,9 +76,24 @@ const UseDeCleanupToday = () => {
                   <span className="text-sm font-medium text-gray-400 tracking-wider">base</span>
                 </div>
               
-                {/* Title */}
+                {/* Image (if present) */}
+                {app.imageUrl && (
+                  <div className="mb-4 flex justify-center">
+                    <Image
+                      src={app.imageUrl}
+                      alt={index === 0 ? "DCU Icon" : "DCU Token Logo"}
+                      width={120}
+                      height={120}
+                      className="w-auto h-24 object-contain"
+                      unoptimized
+                    />
+                  </div>
+                )}
+
+                {/* Title - Secondary font, normal case */}
                 <h3
-                  className="text-xl sm:text-2xl lg:text-3xl font-normal uppercase mb-3 text-white"
+                  className="text-xl sm:text-2xl lg:text-3xl font-medium mb-3 text-white normal-case"
+                  style={{ fontFamily: 'var(--font-geist-sans), system-ui, -apple-system, sans-serif' }}
                 >
                   {app.title}
                 </h3>
@@ -102,25 +120,40 @@ const UseDeCleanupToday = () => {
                   </p>
                 )}
 
-                {/* Button */}
-                {app.buttonDisabled ? (
-                  <button
-                    disabled
-                    className="w-full bg-gray-800 text-gray-500 cursor-not-allowed px-6 py-3 text-sm sm:text-base font-semibold tracking-wider opacity-50 pointer-events-none"
-                  >
-                    {app.buttonLabel}
-                  </button>
-                ) : (
-                  <Link
-                    href={app.buttonHref}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="w-full bg-[#FAFF00] text-black font-bold text-sm sm:text-base tracking-wider hover:bg-[#FAFF00]/90 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 text-center block px-6 py-3"
-                    style={{ textTransform: 'none' }}
-                  >
-                    {app.buttonLabel}
-                  </Link>
-                )}
+                {/* Buttons */}
+                <div className="space-y-3">
+                  {app.buttonDisabled ? (
+                    <button
+                      disabled
+                      className="w-full bg-gray-800 text-gray-500 cursor-not-allowed px-6 py-3 text-sm sm:text-base font-semibold tracking-wider opacity-50 pointer-events-none"
+                    >
+                      {app.buttonLabel}
+                    </button>
+                  ) : (
+                    <Link
+                      href={app.buttonHref}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-full bg-[#FAFF00] text-black font-bold text-sm sm:text-base tracking-wider hover:bg-[#FAFF00]/90 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 text-center block px-6 py-3"
+                      style={{ textTransform: 'none' }}
+                    >
+                      {app.buttonLabel}
+                    </Link>
+                  )}
+                  
+                  {/* Second button (if present) */}
+                  {app.secondButtonLabel && app.secondButtonHref && (
+                    <Link
+                      href={app.secondButtonHref}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-full bg-black text-[#FAFF00] font-bold text-sm sm:text-base tracking-wider hover:bg-gray-900 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 text-center block px-6 py-3"
+                      style={{ textTransform: 'none' }}
+                    >
+                      {app.secondButtonLabel}
+                    </Link>
+                  )}
+                </div>
               </div>
             ))}
           </div>
@@ -133,9 +166,10 @@ const UseDeCleanupToday = () => {
                   <span className="text-sm font-medium text-gray-400 tracking-wider">celo</span>
                 </div>
             
-              {/* Title */}
+              {/* Title - Secondary font, normal case */}
               <h3
-                className="text-xl sm:text-2xl lg:text-3xl font-normal uppercase mb-3 text-white"
+                className="text-xl sm:text-2xl lg:text-3xl font-medium mb-3 text-white normal-case"
+                style={{ fontFamily: 'var(--font-geist-sans), system-ui, -apple-system, sans-serif' }}
               >
                 {apps[2].title}
               </h3>

From 4f7172a40d1bcab06514217d6169987e275cdf4b Mon Sep 17 00:00:00 2001
From: Anastasia <142572092+LuminaEnvision@users.noreply.github.com>
Date: Wed, 10 Dec 2025 18:18:35 +0700
Subject: [PATCH 2/2] fix: add TypeScript interface for AppConfig to fix
 imageUrl property error

---
 .../UseDeCleanupToday/UseDeCleanupToday.tsx       | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index 28df2ff..d3fe7b8 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -2,8 +2,21 @@ import React from "react";
 import Link from "next/link";
 import Image from "next/image";
 
+interface AppConfig {
+  title: string;
+  subtitle: string;
+  bullets: string[];
+  buttonLabel: string;
+  buttonHref: string;
+  buttonDisabled: boolean;
+  secondButtonLabel?: string;
+  secondButtonHref?: string;
+  note: string | null;
+  imageUrl?: string;
+}
+
 const UseDeCleanupToday = () => {
-  const apps = [
+  const apps: AppConfig[] = [
     {
       title: "Base mini app",
       subtitle: "Fast actions, onchain rewards.",