diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 546053c..d3347ed 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -36,6 +36,7 @@ jobs: path: ./out - name: Deploy to GitHub Pages + if: github.event.pull_request.head.repo.full_name == github.repository uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} @@ -44,8 +45,15 @@ jobs: publish_branch: gh-pages - name: Comment PR with Preview URL + if: github.event.pull_request.head.repo.full_name == github.repository uses: marocchino/sticky-pull-request-comment@v2 with: header: preview-url message: | 🚀 Preview deployed: https://.github.io/pr-preview/pr-${{ github.event.pull_request.number }} + + - name: Skip deployment notice (fork) + if: github.event.pull_request.head.repo.full_name != github.repository + run: | + echo "⚠️ Deployment skipped: This workflow is running from a fork." + echo "The preview will be deployed after the PR is merged to the main repository." diff --git a/app/docs/page.tsx b/app/docs/page.tsx new file mode 100644 index 0000000..327764b --- /dev/null +++ b/app/docs/page.tsx @@ -0,0 +1,55 @@ +import type { Metadata } from "next"; +import Link from "next/link"; + +export const metadata: Metadata = { + title: "DeCleanup Network Documentation", + description: "Technical documentation for DeCleanup Network", +}; + +export default function DocsPage() { + return ( +
+
+ {/* Back Button */} +
+ + + + + Back to Home + +
+ + {/* Page Header */} +
+

+ Documentation +

+

+ Coming Soon +

+
+ +
+

+ Technical documentation will be available here soon. +

+
+
+
+ ); +} + diff --git a/app/globals.css b/app/globals.css index e06b74c..f47a2d9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,36 +1,90 @@ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); @import "tailwindcss"; - :root { - --background: #58B12F; - --foreground: #111111; + --background: #000000; + --foreground: #ffffff; --yellow: #FAFF00; + --green: #58B12F; + --green-dark: #4FA02A; + --gray-light: #1a1a1a; + --gray-medium: #2a2a2a; + --gray-dark: #111111; + + /* Font variables */ + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --font-heading: var(--font-bebas-neue); + + /* Brand colors */ + --color-brand-green: #58B12F; + --color-brand-yellow: #FAFF00; } +/* @theme is a valid Tailwind v4 directive */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-family-bebas: var(--font-bebas), sans-serif; - --font-family-nunito: var(--font-nunito), sans-serif; + --font-family-bebas: var(--font-bebas-neue), sans-serif; + --font-family-heading: var(--font-bebas-neue), sans-serif; + --font-family-geist: var(--font-geist-sans), sans-serif; } -/* @media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} */ - -*{ +* { box-sizing: border-box; } +@layer base { + html { + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; +} + body { background: var(--background); color: var(--foreground); - font-family: var(--font-bebas), sans-serif; + font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif; + overflow-x: hidden; + overflow-y: auto; + } + + /* Bebas Neue for all headings - ALL CAPS */ + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-bebas-neue), sans-serif; + font-weight: normal; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + /* Better mobile touch targets */ + button, a { + touch-action: manipulation; + } + + /* Brand colors */ + .bg-brand-green { + background-color: var(--color-brand-green); + } + + .bg-brand-yellow { + background-color: var(--color-brand-yellow); + } + + .text-brand-green { + color: var(--color-brand-green); + } + + .text-brand-yellow { + color: var(--color-brand-yellow); + } + + .border-brand-green { + border-color: var(--color-brand-green); + } + + .border-brand-yellow { + border-color: var(--color-brand-yellow); + } } /* h1 { @@ -39,13 +93,85 @@ body { line-height: 1; } */ -h2 { - font-weight: 400; - font-size: 80px; - line-height: 1; + + + +/* Animations */ +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-in { + animation: fade-in 0.8s ease-out; +} + +.animate-fade-in-up { + animation: fade-in-up 0.8s ease-out; +} + +.animation-delay-200 { + animation-delay: 0.2s; + animation-fill-mode: both; +} + +.animation-delay-400 { + animation-delay: 0.4s; + animation-fill-mode: both; +} + + +/* Card hover effects */ +.card-hover { + transition: all 0.3s ease; +} + +.card-hover:hover { + transform: translateY(-4px); +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--gray-dark); +} + +::-webkit-scrollbar-thumb { + background: var(--gray-medium); + border-radius: 4px; } +::-webkit-scrollbar-thumb:hover { + background: var(--green); +} +/* Hide scrollbar for carousel */ +.scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; +} @media (max-width: 640px) { diff --git a/app/layout.tsx b/app/layout.tsx index 0a9936a..e5e3b3e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,17 @@ import type { Metadata } from "next"; -import { Nunito, Bebas_Neue } from "next/font/google"; +import { GeistSans } from "geist/font/sans"; +import { Bebas_Neue } from "next/font/google"; import "./globals.css"; -// Configure Nunito (Google Font) -const nunito = Nunito({ - subsets: ['latin'], // Adjust subsets as needed (e.g., 'latin-ext' for extended Latin) - display: 'swap', // Prevents layout shift - variable: '--font-nunito', // CSS variable for Tailwind -}); +// Configure Geist Sans (Secondary/Body font) +// GeistSans is already configured with variable: '--font-geist-sans' -// Configure Bebas Neue (Google Font) +// Configure Bebas Neue (Heading font) const bebas = Bebas_Neue({ subsets: ['latin'], weight: '400', // Bebas Neue has only one weight display: 'swap', - variable: '--font-bebas', + variable: '--font-bebas-neue', }); export const metadata: Metadata = { @@ -30,7 +27,7 @@ export default function RootLayout({ return ( {children} diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx new file mode 100644 index 0000000..5857aad --- /dev/null +++ b/app/litepaper/page.tsx @@ -0,0 +1,383 @@ +import type { Metadata } from "next"; +import Link from "next/link"; + +export const metadata: Metadata = { + title: "DeCleanup Network Litepaper (v3.0)", + description: "DeCleanup Network Litepaper Version 3.0 — December 2025", +}; + +export default function LitepaperPage() { + return ( +
+
+ {/* Back Button */} +
+ + + + + Back to Home + +
+ + {/* Page Header */} +
+

+ Litepaper +

+

+ Version 3.0 — December 2025 +

+
+ + {/* Overview Section */} +
+

+ Overview +

+
+

+ DeCleanup Network is global infrastructure for coordinating environmental cleanups and converting them into verifiable, onchain impact. We unite individuals, communities, and organizations into a shared ecosystem where every cleanup generates a measurable digital asset: an Impact Product. +

+

+ The network now operates across two chains, each serving a clear purpose: +

+
    +
  • Base — fast, lightweight action + cleanup rewards
    • +
  • Celo — full dApp, governance, reputation, hypercerts, and advanced features
    • +
+
+
+ +
+ + {/* Mission Section */} +
+

+ Mission +

+

+ To mobilize people worldwide into measurable environmental action by transforming real cleanups into provable, composable digital impact assets. Through transparent verification, community incentives, and shared infrastructure, DeCleanup enables environmental action to become visible, rewarded, and scalable. +

+
+ +
+ + {/* The Problem Section */} +
+

+ The Problem +

+
    +
  • No lasting incentives for cleanup actions
    • +
  • No standardized way to measure or verify real-world environmental work
    • +
  • Fragmented local efforts with no shared global infrastructure
    • +
+
+ +
+ + {/* Our Solution Section */} +
+

+ Our Solution +

+
    +
  • Impact Products — dynamic soulbound NFTs representing real-world cleanup impact
    • +
  • Multichain Architecture — Base mini app for fast actions, Celo full dApp for governance & analytics
    • +
  • Verifiable Reputation — user identity grows with real contributions
    • +
  • Hypercerts Integration — automatically minted every 10 cleanups
    • +
  • Decentralized Verification — staked community verifiers
    • +
  • Global Coordination Layer — ambassadors + open infrastructure
    • +
+
+ +
+ + {/* Multichain Network Section */} +
+

+ Multichain Network: Base + Celo +

+ +
+
+

+ Base — Quick Action Layer +

+
    +
  • Farcaster Mini App
    • +
  • $bDCU reward token
    • +
  • Simple logging + stats
    • +
+
+ +
+

+ Celo — Full Impact Layer +

+
    +
  • Full-feature dApp
    • +
  • Leaderboards, streaks, dashboards
    • +
  • Claim & stake flows
    • +
  • Hypercert auto-minting
    • +
  • $cDCU governance + Gardens.fund
    • +
  • Advanced analytics
    • +
+
+
+
+ +
+ + {/* Impact Products Section */} +
+

+ Impact Products +

+

+ Dynamic soulbound NFTs representing verified environmental work. +

+ +

+ Key Characteristics: +

+
    +
  • Soulbound
    • +
  • Dynamic metadata
    • +
  • Verifiable history
    • +
  • Level progression
    • +
  • Hypercert linkage
    • +
+ +

+ Level Progression: +

+

+ Newbie → Pro → Hero → Guardian +

+
+ +
+ + {/* Hypercerts Section */} +
+

+ Hypercerts +

+

+ Every 10 verified cleanups → automatic Hypercert (ERC-1155). +

+

+ Contains: +

+
    +
  • weight removed
    • +
  • area cleaned
    • +
  • waste types
    • +
  • contributors
    • +
  • timeframes
    • +
  • cumulative metrics
    • +
+
+ +
+ + {/* Base Token Section */} +
+

+ Base Token: $bDCU +

+

+ The "action token." Used on Base for: +

+
    +
  • cleanup rewards
    • +
  • streaks
    • +
  • referrals, verifier staking
    • +
  • simple incentives
    • +
  • future staking for $REBAZ
    • +
+
+ +
+ + {/* Celo Token Section */} +
+

+ Celo Token: $cDCU +

+

+ Non-tradable first, governance & reputation token. +

+

+ Used for: +

+
    +
  • governance voting (Gardens.fund)
    • +
  • verifier staking
    • +
  • milestone rewards
    • +
+ +
+

+ Why non-tradable? +

+
    +
  • prevents speculation
    • +
  • preserves legitimacy of reputation
    • +
  • aligns incentives
    • +
+
+
+ +
+ + {/* Verification System Section */} +
+

+ Verification System +

+
    +
  • Staked verifiers - 100 $bDCU or $cDCU required to stake
    • +
  • Weighted approvals
    • +
  • Anti-fraud slashing
    • +
  • Accuracy score
    • +
  • Appeals system
    • +
+
+ +
+ + {/* User Flow Section */} +
+

+ User Flow +

+
    +
  1. Clean up
    2. +
  2. Snap evidence
    3. +
  3. Submit
    4. +
  4. Verify
    5. +
  5. Earn $bDCU or $cDCU
    6. +
  6. Impact Product updates
    7. +
  7. Hypercerts every 10 cleanups
    8. +
+
+ +
+ + {/* Use Cases Section */} +
+

+ Use Cases +

+
    +
  • HEM Japan — early partner community
    • +
  • Pesathon Nigeria — university cleanup campaign
    • +
+
+ +
+ + {/* Roadmap Section */} +
+

+ Roadmap (Updated) +

+ +
+
+

+ Phase 1 — Base Mini App (Live) +

+
    +
  • Farcaster app
    • +
  • $bDCU rewards
    • +
  • basic logging
    • +
+
+ +
+

+ Phase 2 — Celo Full dApp (In Development) +

+
    +
  • dashboards + leaderboards
    • +
  • streaks
    • +
  • Impact Products v2
    • +
  • claim & stake
    • +
  • hypercerts
    • +
  • community verification
    • +
  • $cDCU governance
    • +
+
+ +
+

+ Phase 3 — Reputation + Marketplace Layer +

+
    +
  • RWI Rank
    • +
  • Regen Bazaar staking (Impact Products → $REBAZ)
    • +
  • advanced analytics
    • +
  • partner integrations
    • +
+
+ +
+

+ Phase 4 — Multichain Expansion +

+
    +
  • unified identity
    • +
  • multichain Hypercerts
    • +
  • Base ↔ Celo syncing
    • +
  • additional EVM chains
    • +
+
+ +
+

+ Phase 5 — DeCleanup V3 +

+
    +
  • ESG partnerships
    • +
  • machine-learning verification
    • +
  • IoT integrations
    • +
  • enterprise impact reporting
    • +
  • mobile app with offline mode
    • +
+
+
+
+ +
+ + {/* Partners Section */} +
+

+ Partners +

+

+ Regen Bazaar, EcoSynthesisX, Atlantis, Hypercerts Foundation, Gardens.fund, NGOs, university partners, ReFi communities, USDGLO, DeTrash, and more. +

+
+
+
+ ); +} + diff --git a/app/page.tsx b/app/page.tsx index 3a5c079..23ffa54 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,12 +1,14 @@ 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 UseDeCleanupToday from "@/components/UseDeCleanupToday/UseDeCleanupToday"; const Page = () => { return ( -
+
+ diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx new file mode 100644 index 0000000..1507e8d --- /dev/null +++ b/app/tokenomics/page.tsx @@ -0,0 +1,55 @@ +import type { Metadata } from "next"; +import Link from "next/link"; + +export const metadata: Metadata = { + title: "DeCleanup Network Tokenomics", + description: "Tokenomics and token distribution for DeCleanup Network", +}; + +export default function TokenomicsPage() { + return ( +
+
+ {/* Back Button */} +
+ + + + + Back to Home + +
+ + {/* Page Header */} +
+

+ Tokenomics +

+

+ Coming Soon +

+
+ +
+

+ Tokenomics information will be available here soon. +

+
+
+
+ ); +} + diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx index 2ebb566..849fdf6 100644 --- a/components/HeroSection/Hero.tsx +++ b/components/HeroSection/Hero.tsx @@ -1,39 +1,52 @@ -import Button from "../ui/Button"; -import Divider from "../ui/Divider"; const Hero = () => { return (
-
- - CLEAN UP, SNAP, EARN + {/* Animated background gradient */} +
+ +
+ {/* Header with tagline on left and logo space on right */} +
+
+ + clean up, snap, earn
- -

+
+ {/* Logo space - coming soon */} +
+

+ + {/* Main Heading */} +

DECLEANUP NETWORK

- -
-
-

- + + {/* Subheading */} +

Turn environmental action into digital assets - -

-

- Join the global network of individuals and communities tokenizing environmental impact of cleanups on DeCleanup Network +

+ + {/* Description */} +

+ Join the global network of individuals and communities tokenizing environmental impact of cleanups utilizing DeCleanup Network tools

+ + {/* Stylish Breaker */} +
+
+
+
+
+
- -
- -
-
); }; diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx index e13fc88..664254c 100644 --- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx +++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx @@ -7,60 +7,63 @@ const TokenizeImpactSection = () => { { number: "1.", title: "Start or Join a Cleanup", - description: - "Find or start a cleanup in your area or join an existing one nearby. Organize environmental action together with outdoor enthusiasts.", }, { number: "2.", title: "Capture the Impact", - description: - "Take selfies and get photos with friends, upload them to our platform and get verified.", }, { number: "3.", title: "Earn Rewards", - description: - "Get impact tokens for cleanup the earth/ocean. Earning such along the way for referring to friends and consistently repeating your impactful activity.", }, ]; return ( -
-
- {/* Hero Section */} -
-
+
+
+ {/* Section Header */} +
+

How to Tokenize Impact? -

+
-
- {/* Left Content with Background Image */} -
+ + {/* Content Section - Image and Steps */} +
+ {/* Left Content with Background Image and Yellow Frame */} +
+
+
+
+
{/* Right Content - Steps */} -
+
{steps.map((step, index) => (
-
-
+
+
{step.number}
-
+

{step.title} -

-
-
- {step.description} +
))} @@ -68,38 +71,69 @@ const TokenizeImpactSection = () => {
{/* CTA Section */} -
- {/* Get Started Button */} -
- +
+ {/* Get Started Buttons */} +
+ + Get started on Farcaster + + + Get started in web app +
+ {/* Join Movement Section */} -
-
+
+

Join the Movement -

+ -

- Connect with our growing community on social media, and explore - everything you need to start contributing to a cleaner environment - today. +

+ Connect with our growing community on social media, and explore everything you need to start contributing to a cleaner environment today.

{/* Social Buttons */} -
+
- Telegram + Telegram +
+ Twitter +
+ + - Twitter + Farcaster +
diff --git a/components/NavLink/NavLink.tsx b/components/NavLink/NavLink.tsx index de7be93..3612a9d 100644 --- a/components/NavLink/NavLink.tsx +++ b/components/NavLink/NavLink.tsx @@ -1,81 +1,117 @@ import React from "react"; +import Link from "next/link"; import Divider from "../ui/Divider"; // Simple Divider component since it's imported const NavLink = () => { - const navLinks = [ - { name: "LITEPAPER", href: "https://github.com/DeCleanup-Network" }, - { name: "DOCS", href: "https://github.com/DeCleanup-Network/docs" }, + // Internal links (same domain) + const internalLinks = [ + { name: "LITEPAPER", href: "/litepaper" }, + { name: "TOKENOMICS", href: "/tokenomics" }, + { name: "DOCS", href: "/docs" }, + ]; + + // External links + const externalLinks = [ { name: "LATEST ARTICLES", href: "https://paragraph.xyz/decleanupnet" }, - { name: "KARMA-GAP", href: "https://gap.karmahq.xyz/project/decentralized-cleanup-network-decleanup-network"}, + { 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" }, ]; return ( -