DeCleanup-Network · LuminaEnvision · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/app/globals.css b/app/globals.css
@@ -135,6 +135,19 @@ body {
   animation-fill-mode: both;
 }
 
+/* Slow spin for DMRV concentric circles */
+@keyframes spin-60s {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-\[spin_60s_linear_infinite\] {
+  animation: spin-60s 60s linear infinite;
+}
 
 /* Card hover effects */
 .card-hover {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,7 +25,24 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="overflow-x-hidden">
+      <head>
+        {/* Google tag (gtag.js) */}
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-R92BBYP0F8"
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'G-R92BBYP0F8');
+            `,
+          }}
+        />
+      </head>
       <body
         className={`${GeistSans.variable} ${bebas.variable} antialiased`}
       >

diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,14 +3,21 @@ import Hero from "@/components/HeroSection/Hero";
 import TokenizeImpactSection from "@/components/HowToTokonizeImpact/TokenizeImpactSection";
 import NetworkRoadmapSection from "@/components/NetworkRoadmapSection/NetworkRoadmapSection";
 import UseDeCleanupToday from "@/components/UseDeCleanupToday/UseDeCleanupToday";
+import WhoIsThisFor from "@/components/WhoIsThisFor/WhoIsThisFor";
 
 const Page = () => {
   return (
-    <main className="flex flex-col text-center">
+    <main className="flex min-w-0 flex-col overflow-x-hidden text-center">
+      {/* Aura-style hero: gradient orbs + badge + CTAs */}
       <Hero />
+      {/* Who is this for? – Aura glow cards */}
+      <WhoIsThisFor />
+      {/* Earn DeCleanup Rewards – Base/Celo CTA cards with hover glow */}
       <UseDeCleanupToday />
+      {/* Transparent, Verifiable Digital Impact / DMRV – two-column + progress bar */}
       <WhatIsDeCleanupNetwork />
-       <NetworkRoadmapSection/>
+      <NetworkRoadmapSection />
+      {/* How to Tokenize Impact – 3-step + photo verified card */}
       <TokenizeImpactSection />
     </main>
   );

diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
@@ -1,63 +1,97 @@
 import Image from "next/image";
+import Link from "next/link";
 
 const Hero = () => {
   return (
-    <div
-      className="min-h-screen flex flex-col justify-center items-center px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20 relative overflow-hidden"
+    <section
+      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black"
       style={{ minHeight: "100dvh" }}
     >
-      {/* Animated background gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-[#58B12F]/5 via-transparent to-[#FAFF00]/5 animate-pulse"></div>
+      {/* Aura-style background: gradient orbs + grid overlay */}
+      <div className="absolute inset-0 z-0">
+        <div
+          className="absolute top-1/4 left-1/4 w-[480px] h-[480px] rounded-full blur-3xl animate-pulse"
+          style={{ background: "rgba(88, 177, 47, 0.1)" }}
+        />
+        <div
+          className="absolute bottom-1/4 right-1/4 w-[360px] h-[360px] rounded-full blur-3xl"
+          style={{ background: "rgba(250, 255, 0, 0.08)" }}
+        />
+        {/* Grid overlay */}
+        <div
+          className="absolute inset-0 opacity-[0.03]"
+          style={{
+            backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
+            backgroundSize: "100px 100px",
+          }}
+        />
+      </div>
+
+      {/* 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">
+          <Image
+            src="https://ipfs.io/ipfs/bafkreidva4g2hrnmegqkkig4t743hprwk6g3or76foe25hyrvs4zngprja"
+            alt="DeCleanup Network Logo"
+            width={100}
+            height={40}
+            className="h-8 w-auto object-contain sm:h-10"
+            unoptimized
+          />
+        </div>
 
-      <div className="max-w-5xl mx-auto text-center relative z-10">
-        {/* Header with logo on left and tagline on right */}
-        <div className="w-full flex flex-col sm:flex-row justify-center sm:justify-between items-center gap-3 sm:gap-0 mb-6 sm:mb-8 animate-fade-in px-4">
-          <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-20 xl:h-20 object-contain"
-              unoptimized
-            />
-          </div>
-          <div className="text-center sm:text-right">
-            <span className="inline-block px-3 py-1.5 sm:px-4 sm:py-2 bg-[#FAFF00] text-black text-xs sm:text-sm md:text-base font-normal tracking-wider transform hover:scale-105 transition-transform duration-300 shadow-lg shadow-[#FAFF00]/20 uppercase whitespace-nowrap">
-              CLEAN UP, SNAP, EARN
-            </span>
-          </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 Heading */}
-        <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl xl:text-[10rem] font-normal mb-6 sm:mb-8 leading-tight text-white animate-fade-in-up">
-          DECLEANUP NETWORK
+        {/* Main title — DECLEANUP NETWORK (gradient on NETWORK + pulse) */}
+        <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" }}
+        >
+          <span className="bg-gradient-to-r from-[#58B12F] via-[#FAFF00] to-[#58B12F] bg-clip-text text-transparent animate-pulse">
+            DECLEANUP
+          </span>{" "}
+          NETWORK
         </h1>
 
-        {/* Subheading */}
-        <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl text-gray-300 mb-4 sm:mb-6 font-light max-w-3xl mx-auto animate-fade-in-up animation-delay-200">
-          Turn environmental action into digital assets
+        {/* Headline */}
+        <p className="mx-auto mb-4 max-w-2xl text-xl font-medium leading-tight text-white md:text-2xl lg:text-3xl">
+          Real cleanups. Real proof. Real impact.
         </p>
 
-        {/* Description */}
-        <p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-12 max-w-2xl mx-auto leading-relaxed animate-fade-in-up animation-delay-400">
-          Join the global network of individuals and communities tokenizing
-          environmental impact of cleanups utilizing DeCleanup Network tools
+        {/* Subheadline */}
+        <p className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-gray-400 md:text-xl">
+          A global platform that verifies environmental cleanups and turns them
+          into measurable, fundable impact.
         </p>
 
-        {/* Stylish Breaker */}
-        <div className="flex items-center justify-center gap-4 my-8 sm:my-12 lg:my-16 animate-fade-in-up animation-delay-600">
-          <div className="h-px w-16 sm:w-24 bg-gradient-to-r from-transparent via-[#58B12F] to-transparent"></div>
-          <div className="w-2 h-2 rounded-full bg-[#FAFF00] animate-pulse"></div>
-          <div className="h-px w-16 sm:w-24 bg-gradient-to-r from-transparent via-[#FAFF00] to-transparent"></div>
-          <div
-            className="w-2 h-2 rounded-full bg-[#58B12F] animate-pulse"
-            style={{ animationDelay: "0.5s" }}
-          ></div>
-          <div className="h-px w-16 sm:w-24 bg-gradient-to-r from-transparent via-[#58B12F] to-transparent"></div>
+        {/* CTAs */}
+        <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-white px-6 py-3 font-medium text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)]"
+          >
+            Start Earning
+          </Link>
+          <Link
+            href="/litepaper"
+            className="rounded-xl border border-white/20 px-6 py-3 font-medium text-white transition-all duration-300 hover:border-white/40 hover:bg-white/5"
+          >
+            Read Litepaper
+          </Link>
         </div>
       </div>
-    </div>
+    </section>
   );
 };