DeCleanup-Network · 7xrobin · Jun 19, 2025 · Jun 22, 2025 · Jul 5, 2025 · Jul 5, 2025
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -9,8 +9,10 @@ jobs:
   build-and-deploy-preview:
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       pages: write
       id-token: write
+      pull-requests: write
 
     steps:
       - name: Checkout repo
@@ -28,24 +30,38 @@ jobs:
         run: |
           export BASE_PATH="/pr-preview/pr-${{ github.event.pull_request.number }}"
           echo "BASE_PATH=$BASE_PATH" >> $GITHUB_ENV
-          npm run build && npm run export
+          npm run build
+
+      - name: Create .nojekyll file
+        run: touch out/.nojekyll
+
+      - name: Debug build output
+        run: |
+          echo "BASE_PATH is: $BASE_PATH"
+          ls -la out/
+          echo "Checking if index.html exists:"
+          find out/ -name "index.html" -type f
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
 
+  deploy-preview:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build-and-deploy-preview
+    steps:
       - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./out
-          destination_dir: pr-preview/pr-${{ github.event.pull_request.number }}
-          publish_branch: gh-pages
+        id: deployment
+        uses: actions/deploy-pages@v4
 
       - name: Comment PR with Preview URL
         uses: marocchino/sticky-pull-request-comment@v2
         with:
           header: preview-url
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           message: |
-            🚀 Preview deployed: https://<your-username>.github.io/pr-preview/pr-${{ github.event.pull_request.number }}
+            🚀 Preview deployed: ${{ steps.deployment.outputs.page_url }}/pr-preview/pr-${{ github.event.pull_request.number }}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,17 +1,41 @@
 import WhatIsDeCleanupNetwork from "@/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork";
 import Hero from "@/components/HeroSection/Hero";
 import TokenizeImpactSection from "@/components/HowToTokonizeImpact/TokenizeImpactSection";
-import NetworkRoadmapSection from "@/components/NetworkRoadmapSection/NetworkRoadmapSection"
+import NetworkRoadmapSection from "@/components/NetworkRoadmapSection/NetworkRoadmapSection";
+import ProblemAndSolution from "@/components/ProblemAndSolution/ProblemAndSolution";
+import CommunityImpact from "@/components/CommunityImpact/CommunityImpact";
+import { SectionPadded, SectionFullWithPadding } from "@/components/ui/Section";
 
 const Page = () => {
   return (
     <main className="flex flex-col text-center uppercase">
-      <Hero />
-      <WhatIsDeCleanupNetwork />
-       <NetworkRoadmapSection/>
-      <TokenizeImpactSection />
+      <div className="mx-auto w-full flex flex-col gap-12">
+        <SectionPadded>
+          <Hero />
+        </SectionPadded>
+
+        <SectionPadded>
+          <WhatIsDeCleanupNetwork />
+        </SectionPadded>
+
+        <SectionPadded>
+          <CommunityImpact />
+        </SectionPadded>
+
+        <SectionPadded>
+          <ProblemAndSolution />
+        </SectionPadded>
+
+        <SectionFullWithPadding className="bg-[#111111]">
+          <NetworkRoadmapSection />
+        </SectionFullWithPadding>
+
+        <SectionPadded>
+          <TokenizeImpactSection />
+        </SectionPadded>
+      </div>
     </main>
   );
 };
 
-export default Page;
+export default Page;
diff --git a/components/CommunityImpact/CommunityImpact.tsx b/components/CommunityImpact/CommunityImpact.tsx
@@ -0,0 +1,188 @@
+import React from "react";
+import Image from "next/image";
+
+const galleryImages = [
+  {
+    src: "/testimonial1.jpg",
+    alt: "Community cleanup 11",
+    className: "col-span-1 row-span-2",
+  },
+  {
+    src: "/testimonial2.jpg",
+    alt: "Community cleanup 2",
+    className: "col-span-1 row-span-1",
+  },
+
+  {
+    src: "/testimonial3.jpg",
+    alt: "Community cleanup 3",
+    className: "col-span-1 row-span-1",
+  },
+  {
+    src: "/testimonial4.jpg",
+    alt: "Community cleanup 4",
+    className: "col-span-1 row-span-2",
+  },
+];
+
+export default function CommunityImpact() {
+  return (
+    <div>
+      {/* Gallery with responsive margins */}
+      <div className="pt-5 mb-4 sm:mb-4 2xl:mb-4 3xl:mb-4">
+        <div className="grid grid-cols-3 gap-2 2xl:gap-4 3xl:gap-6">
+          {/* Large image on left - full height */}
+          <div className="col-span-1 rounded-lg overflow-hidden">
+            <Image
+              width={600}
+              height={400}
+              src={galleryImages[0].src}
+              alt={galleryImages[0].alt}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          {/* Middle column with two stacked images */}
+          <div className="col-span-1 flex flex-col gap-2 2xl:gap-4 3xl:gap-6">
+            <div className="flex-1 rounded-lg overflow-hidden">
+              <Image
+                src={galleryImages[1].src}
+                alt={galleryImages[1].alt}
+                width={600}
+                height={400}
+                className="w-full h-full object-cover"
+              />
+            </div>
+
+            <div className="flex-1  rounded-lg overflow-hidden">
+              <Image
+                width={600}
+                height={400}
+                src={galleryImages[2].src}
+                alt={galleryImages[2].alt}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Large image on right - full height */}
+          <div className="col-span-1 rounded-lg overflow-hidden">
+            <Image
+              width={600}
+              height={400}
+              src={galleryImages[3].src}
+              alt={galleryImages[3].alt}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Community Impact Section with responsive margins and typography */}
+      <div className="mb-11 mt-10 lg:mt-10 lg:mb-10 2xl:mb-10 3xl:mb-10 3xl:mt-10">
+        {/* Horizontal Line Separator */}
+        <div className="w-full h-0.5 bg-black mb-2 lg:mb-7 lg:mt-11 2xl:mb-10 3xl:mb-12 3xl:mt-50"></div>
+        {/* Header Section - Title and Description side by side */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 2xl:gap-12 3xl:gap-16 mb-8 2xl:mb-12 3xl:mb-16 3xl:mt-50">
+          <div>
+            <h3 className="text-4xl sm:text-3xl inline md:block lg:text-7xl xl:text-6xl  2xl:text-7xl 3xl:text-8xl bg-[#FAFF00] md:bg-transparent  md:text-left font-light uppercase text-black md:mb-15 mt-2 md:mt-0 leading-tight">
+              COMMUNITY IMPACT
+            </h3>
+          </div>
+          <div>
+            <p
+              className="text-black text-center md:text-left  sm:text-lg lg:text-3xl 2xl:text-4xl 3xl:text-5xl font-normal mb-4 md:mt-2 leading-tight uppercase"
+              style={{
+                fontFamily: "Bebas Neue",
+                letterSpacing: "-0.02em",
+                lineHeight: "102%",
+              }}
+            >
+              participants worldwide use DeCleanup dApp to turn real world
+              impact into onchain products with additional utilities within the
+              ecosystem in the future.
+            </p>
+          </div>
+        </div>
+
+        {/* Cards Section - Two cards side by side with responsive spacing */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 2xl:gap-8 3xl:gap-12 lg:items-start">
+          {/* HEM Japan - shorter card */}
+          <div className="bg-black text-[#4FA02A] p-4 lg:p-6 2xl:p-8 3xl:p-10 rounded-none">
+            <h4 className="text-[#FAFF00] text-2xl sm:text-2xl lg:text-3xl xl:text-5xl 2xl:text-6xl 3xl:text-7xl mb-2 font-extrabold text-left leading-tight uppercase">
+              HEM JAPAN
+            </h4>
+            <p className="text-[#4FA02A] text-sm lg:text-base 2xl:text-4xl 3xl:text-xl font-extrabold leading-relaxed text-left uppercase">
+              Early partner organizing cleanups across Japan using
+              DeCleanup&apos;s verification system. 2024: 12 active users, 9
+              cleanup events
+            </p>
+          </div>
+
+          {/* Pestathon - taller card */}
+          <div className="bg-black text-[#4FA02A] p-4 lg:p-6 2xl:p-8 3xl:p-10 rounded-none">
+            <h4 className="text-[#FAFF00] text-3xl sm:text-2xl lg:text-3xl xl:text-5xl 2xl:text-6xl 3xl:text-7xl mb-2 font-black uppercase text-left">
+              PESATHON
+            </h4>
+            <p className="text-[#4FA02A] text-sm lg:text-base 2xl:text-4xl 3xl:text-xl font-extrabold leading-tight text-left uppercase">
+              UNNPloggas university campaign combining education + action.
+              Students learned environmental care while cleaning campus.
+              DeCleanup added 120 USDGLO to Atlantis Impact Miner rewards.2024:
+              9 active users, 4 cleanup events
+            </p>
+          </div>
+        </div>
+      </div>
+      {/* Horizontal Line Separator */}
+      <div className="w-full h-0.5 bg-black mb-4 lg:mb-9 2xl:mb-12 3xl:mb-16"></div>
+
+      {/* Quote Section with responsive typography */}
+      <div className=" py-6 lg:p-8 2xl:p-10 3xl:p-12 rounded-xl mb-0 relative">
+        {/* Opening Quote Mark */}
+        <div className="absolute top-4 left lg:top-6 lg:left-6">
+          <span className="text-6xl lg:text-8xl font-black text-black leading-none opacity-60">
+            &quot;
+          </span>
+        </div>
+
+        {/* Main Quote Text */}
+        <div className="relative text-black leading-relaxed pt-8 lg:pt-12">
+          <p
+            className="text-black text-left text-lg sm:text-xl lg:text-5xl xl:text-3xl 2xl:text-4xl font-normal mb-6 leading-tight uppercase tracking-tight"
+            style={{
+              fontFamily: "Bebas Neue, Arial Black, sans-serif",
+              letterSpacing: "-0.02em",
+              lineHeight: "1.1",
+            }}
+          >
+            DeCleanup employs the most simplified system I&apos;ve encountered
+            in dApps, making it easier for people to participate in
+            environmental protection activities. Even picking up a single
+            plastic bottle can transform into rewards!
+          </p>
+
+          {/* Attribution */}
+          <div className="flex justify-end items-center mt-2">
+            <div className="text-right">
+              <p
+                className="text-black font-normal text-[10px] lg:text-xl  uppercase tracking-wide"
+                style={{ fontFamily: "Bebas Neue, Arial Black, sans-serif" }}
+              >
+                YUICHI HOSOMO — NEW JAPAN
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Closing Quote Mark */}
+        <div className="absolute bottom- right-4 lg:bottom-6 lg:right-6">
+          <span className="text-6xl lg:text-8xl font-black text-black leading-none opacity-60">
+            &quot;
+          </span>
+        </div>
+      </div>
+
+      <div className="w-full h-0.5 bg-black mb-4 lg:mb-9 2xl:mb-12 3xl:mb-16"></div>
+    </div>
+  );
+}
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
@@ -3,12 +3,9 @@ import Divider from "../ui/Divider";
 
 const Hero = () => {
   return (
-    <div
-      className="min-h-screen flex flex-col justify-between items-center px-4 py-6"
-      style={{ minHeight: "100dvh" }}
-    >
-      <div className="w-full flex justify-end">
-        <span className="text-lg sm:text-2xl md:text-3xl">
+    <div className="flex flex-col items-center md:m-h-screen">
+      <div className="flex flex-col w-full items-end">
+        <span className="xl:text-[36.82px] py-2 text-2xl">
           CLEAN UP, SNAP, EARN
         </span>
       </div>
@@ -17,21 +14,22 @@ const Hero = () => {
         DECLEANUP NETWORK
       </h1>
       <Divider />
-      <div className="sm:px-5 px-2 w-full">
+      <div className="w-full">
         <div className="w-full mb-6 flex flex-col items-center sm:gap-y-2 gap-y-1">
           <p className="xl:bg-[#FAFF00] text-2xl text-center mt-8 mx-auto px-2 w-fit leading-[1]">
             <span className="bg-[#FAFF00] xl:w-fit text-3xl w-full px-1 text-center xl:bg-transparent md:text-7xl">
-            Turn environmental action into digital assets
+              Turn environmental action into digital assets
             </span>
           </p>
           <p className="text-center w-fit text-[24px] max-w-[98ch] mt-5 font-normal md:font-medium font-family-bebas md:text-5xl md:leading-14">
-          Join the global network of individuals and communities tokenizing environmental impact of cleanups on  DeCleanup Network
+            Join the global network of individuals and communities tokenizing
+            environmental impact of cleanups on DeCleanup Network
           </p>
         </div>
       </div>
       <Divider className="mt-6 md:mt-12" />
-      <div className="sm:px-5 px-2 mb-4 mt-3  w-full">
-        <Button className="hover:bg-black/80">Start my first cleanup</Button>
+      <div className="mb-4 w-full">
+        <Button className="hover:bg-black/80">GET STARTED</Button>
       </div>
       <Divider />
     </div>

diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx
@@ -26,7 +26,7 @@ const TokenizeImpactSection = () => {
 
   return (
     <div className="md:h-screen ">
-      <div className="mx-auto px-4 sm:px-6 lg:px-8 ">
+      <div className="mx-auto">
         {/* Hero Section */}
         <div className="w-full flex flex-col items-center justify-center font-black text-black uppercase leading-relaxed drop-shadow-lg mb-6">
           <div className="inline-block bg-[#FAFF00] text-2xl px-2 md:text-7xl  font-medium">