DeCleanup-Network · LuminaEnvision · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+/* Bebas Neue loaded via next/font in layout.tsx for better performance */
 @import "tailwindcss";
 
 :root {

diff --git a/app/icon.png b/app/icon.png
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,19 +14,58 @@ const bebas = Bebas_Neue({
   variable: '--font-bebas-neue',
 });
 
+const SITE_URL = "https://decleanup.net";
+
 export const metadata: Metadata = {
-  title: "DECLEANUP NETWORK",
-  description: "Empowering Cleanups. Tokenizing Impact",
+  metadataBase: new URL(SITE_URL),
+  title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+  description:
+    "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
+  alternates: { canonical: SITE_URL },
+  openGraph: {
+    title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+    description:
+      "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
+    url: SITE_URL,
+    siteName: "DeCleanup Network",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Real cleanups. Real proof. Real impact. | DeCleanup Network",
+    description:
+      "A global platform that verifies environmental cleanups and turns them into measurable, fundable impact.",
+  },
 };
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const organizationSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "DeCleanup Network",
+    url: SITE_URL,
+    logo: `${SITE_URL}/images/decleanup_logo_full.png`,
+    description:
+      "DeCleanup Network is a decentralized platform that tokenizes environmental cleanups into verifiable real-world impact.",
+    sameAs: [
+      "https://x.com/DeCleanupNet",
+      "https://github.com/DeCleanup-Network",
+      "https://t.me/EcoSynthesisX/443",
+      "https://farcaster.xyz/decleanupnet",
+    ],
+  };
+
   return (
     <html lang="en" className="overflow-x-hidden">
       <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }}
+        />
         {/* Google tag (gtag.js) */}
         <script
           async

diff --git a/components/BackedBy/BackedBy.tsx b/components/BackedBy/BackedBy.tsx
@@ -1,36 +1,76 @@
 import React from "react";
+import Image from "next/image";
 
 const backers = [
-  { name: "Giveth", logoLabel: "Giveth logo" },
-  { name: "Octant", logoLabel: "Octant logo" },
-  { name: "Gitcoin", logoLabel: "Gitcoin logo" },
-  { name: "Ethereum for the World", logoLabel: "E4W logo" },
+  {
+    name: "Ethereum for the World",
+    src: "/images/backers/ethereum.png",
+    href: "https://fortheworld.eco",
+    className: "", // Already white
+    logoScale: "scale-100"
+  },
+  {
+    name: "Giveth",
+    src: "/images/backers/giveth.png",
+    href: "https://giveth.io",
+    className: "", // Already white
+    logoScale: "scale-100"
+  },
+  {
+    name: "Gitcoin",
+    src: "/images/backers/gitcoin.jpg",
+    href: "https://www.gitcoin.co",
+    // JPG is opaque. Invert turns black->white. contrast cleans it up.
+    className: "filter grayscale brightness-200 contrast-200 invert",
+    logoScale: "scale-125"
+  },
+  {
+    name: "Octant",
+    src: "/images/backers/octant.png",
+    href: "https://octant.app",
+    // PNG transparent. Invert turns Black Content -> White Content.
+    // Wrapper bg-black handles the transparency.
+    className: "invert",
+    logoScale: "scale-100"
+  },
 ];
 
 export default function BackedBy() {
   return (
     <section className="w-full py-16 md:py-24 bg-black border-t border-gray-800">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <h2
-          className="text-2xl md:text-3xl lg:text-4xl font-normal uppercase text-white mb-6 text-center"
+          className="text-3xl font-normal uppercase leading-tight text-white mb-10 md:mb-12 text-center md:text-4xl lg:text-5xl"
           style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
         >
           Backed by
         </h2>
-        <p className="mb-10 md:mb-12 md:text-lg leading-relaxed text-gray-300 text-center max-w-2xl mx-auto">
-          DeCleanup has been supported by Giveth, Octant, Gitcoin, and Ethereum for the World.
-        </p>
-        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
+        <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
           {backers.map((backer) => (
-            <div
+            <a
               key={backer.name}
-              className="flex flex-col items-center gap-3 rounded-xl border border-white/10 bg-gray-900/50 p-6"
+              href={backer.href}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              className="group flex flex-col items-center gap-4"
             >
-              <div className="flex h-20 w-20 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5 text-gray-500">
-                <span className="text-xs">{backer.logoLabel}</span>
+              {/* Gradient Container */}
+              <div className="relative flex h-24 w-24 items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-[#58B12F] via-[#FAFF00] to-[#58B12F] animate-pulse">
+                {/* Mask Container: High Contrast Mask (Black hides, White reveals) */}
+                <div className="relative h-full w-full bg-black mix-blend-multiply">
+                  <Image
+                    src={backer.src}
+                    alt={`${backer.name} logo`}
+                    fill
+                    className={`object-contain p-4 transition-transform duration-300 ${backer.className} ${backer.logoScale}`}
+                    unoptimized
+                  />
+                </div>
               </div>
-              <span className="text-sm font-medium text-white">{backer.name}</span>
-            </div>
+              <span className="text-center text-sm font-medium text-gray-400 transition-colors duration-300 group-hover:text-[#FAFF00] group-hover:font-bold">
+                {backer.name}
+              </span>
+            </a>
           ))}
         </div>
       </div>

diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
@@ -30,28 +30,20 @@ const Hero = () => {
 
       {/* Content */}
       <div className="relative z-10 max-w-4xl px-4 sm:px-6 text-center">
-        {/* Logo - compact */}
-        <div className="mb-6 flex justify-center">
+        {/* Logo - centred */}
+        <div className="mb-8 flex justify-center">
           <Image
-            src="https://ipfs.io/ipfs/bafkreidva4g2hrnmegqkkig4t743hprwk6g3or76foe25hyrvs4zngprja"
+            src="/images/decleanup_logo_full.png"
             alt="DeCleanup Network Logo"
-            width={100}
-            height={40}
-            className="h-8 w-auto object-contain sm:h-10"
+            width={180}
+            height={60}
+            className="h-10 w-auto object-contain sm:h-12"
+            priority
             unoptimized
           />
         </div>
 
-        {/* Pill badge */}
-        <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-gray-300">
-          <span
-            className="h-2 w-2 rounded-full bg-[#58B12F] animate-pulse"
-            aria-hidden
-          />
-          CLEAN UP, SNAP, EARN
-        </div>
-
-        {/* Main title - DECLEANUP NETWORK (gradient on NETWORK + pulse) */}
+        {/* Main title */}
         <h1
           className="mb-6 text-5xl font-normal leading-tight text-white sm:text-6xl md:text-7xl lg:text-8xl"
           style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}

diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -12,7 +12,7 @@ const steps = [
 ];
 
 // Placeholder for real cleanup before/after photo
-const CLEANUP_IMAGE = "/image1.png";
+const CLEANUP_IMAGE = "/images/impact_verification.png";
 
 const TokenizeImpactSection = () => {
   return (
@@ -21,21 +21,28 @@ const TokenizeImpactSection = () => {
         {/* Section Header - increased spacing */}
         <div className="mb-12 text-center md:mb-16">
           <h2
-            className="mb-4 text-3xl font-medium uppercase tracking-wide text-white md:text-4xl lg:text-5xl"
+            className="mb-4 text-3xl font-normal uppercase leading-tight text-white md:text-4xl lg:text-5xl"
             style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
           >
             How to Tokenize Impact
           </h2>
-          <p className="mx-auto max-w-xl text-base leading-relaxed text-gray-400">
-            Three steps from cleanup to verified, tokenized impact.
-          </p>
+          {/* Clean up, snap, earn - replaces old subtitle */}
+          <div className="flex justify-center">
+            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-gray-300">
+              <span
+                className="h-2 w-2 rounded-full bg-[#58B12F] animate-pulse"
+                aria-hidden
+              />
+              CLEAN UP, SNAP, EARN
+            </div>
+          </div>
         </div>
 
-        {/* Content: Visual card (left) + 3-step flow (right) */}
-        <div className="flex flex-col gap-10 md:flex-row md:gap-12 lg:gap-16 items-start">
+        {/* Content: Visual card (left) + 3-step flow (right); mobile: full-width stacked, steps stretch */}
+        <div className="flex flex-col gap-10 md:flex-row md:gap-12 lg:gap-16 items-stretch">
           {/* Left: Card with cleanup photo + floating verification badge */}
-          <div className="w-full md:w-1/2 shrink-0">
-            <div className="relative rounded-2xl border border-white/10 bg-white/5 p-6 transition-all duration-300 hover:border-[#58B12F]/30 hover:shadow-[0_0_30px_rgba(88,177,47,0.1)]">
+          <div className="w-full min-w-0 md:w-1/2 shrink-0">
+            <div className="relative rounded-2xl border border-white/10 bg-white/5 p-4 sm:p-6 transition-all duration-300 hover:border-[#58B12F]/30 hover:shadow-[0_0_30px_rgba(88,177,47,0.1)]">
               {/* Floating badge: Photo Verified */}
               <div className="absolute bottom-4 right-4 z-10 flex items-center gap-2 rounded-full border border-white/10 bg-black/90 px-3 py-1.5 text-xs text-white shadow-lg animate-pulse" style={{ animationDuration: "2.5s" }}>
                 <span aria-hidden>✔</span>
@@ -47,7 +54,8 @@ const TokenizeImpactSection = () => {
                   alt="Cleanup result – verified impact"
                   width={600}
                   height={450}
-                  className="h-full w-full object-cover"
+                  loading="lazy"
+                  className="h-full w-full object-cover filter contrast-110 saturate-[0.85] brightness-90"
                 />
               </div>
               {/* Optional second badge: Approved Impact */}
@@ -57,12 +65,12 @@ const TokenizeImpactSection = () => {
             </div>
           </div>
 
-          {/* Right: 3-step vertical flow */}
-          <div className="flex flex-1 flex-col gap-6">
+          {/* Right: 3-step vertical flow - full width on mobile, stretched */}
+          <div className="flex w-full min-w-0 flex-1 flex-col gap-4 sm:gap-6">
             {steps.map((step, index) => (
               <div
                 key={index}
-                className="rounded-2xl border border-gray-800 bg-gray-900/80 p-6 transition-all duration-300 hover:border-[#58B12F]/30 hover:shadow-[0_0_20px_rgba(88,177,47,0.08)]"
+                className="w-full min-w-0 rounded-2xl border border-gray-800 bg-gray-900/80 p-4 sm:p-6 transition-all duration-300 hover:border-[#58B12F]/30 hover:shadow-[0_0_20px_rgba(88,177,47,0.08)]"
               >
                 <div className="flex items-center gap-4">
                   <div className="text-2xl font-semibold text-[#FAFF00] md:text-3xl" style={{ fontWeight: 500 }}>
@@ -80,42 +88,11 @@ const TokenizeImpactSection = () => {
           </div>
         </div>
 
-        {/* CTA Section */}
+        {/* Join Movement */}
         <div className="mt-16 space-y-12 text-center lg:space-y-16">
-          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
-            <Link
-              href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-xl bg-[#FAFF00] px-6 py-3 font-medium text-black transition-all duration-300 hover:bg-[#FAFF00]/90 hover:shadow-[0_0_24px_rgba(250,255,0,0.2)]"
-              style={{ fontWeight: 500 }}
-            >
-              Get started on Farcaster
-            </Link>
-            <Link
-              href="https://miniapp.decleanup.net"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-xl border border-[#FAFF00]/50 px-6 py-3 font-medium text-white transition-all duration-300 hover:border-[#FAFF00] hover:bg-[#FAFF00]/5"
-              style={{ fontWeight: 500 }}
-            >
-              Get started in web app
-            </Link>
-          </div>
-
-          <div>
-            <Link
-              href="/userguide"
-              className="text-sm font-medium text-[#58B12F] hover:text-[#58B12F]/90"
-            >
-              View User Guide →
-            </Link>
-          </div>
-
-          {/* Join Movement */}
           <div className="space-y-6">
             <h3
-              className="text-3xl font-medium uppercase tracking-wide text-white md:text-4xl"
+              className="text-3xl font-normal uppercase leading-tight text-white md:text-4xl lg:text-5xl"
               style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
             >
               Join the Movement