diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 546053c..3a1213a 100644 --- 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://.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 index 3a5c079..e3d90ad 100644 --- 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 (
- - - - +
+ + + + + + + + + + + + + + + + + + + + + + + +
); }; -export default Page; \ No newline at end of file +export default Page; diff --git a/components/CommunityImpact/CommunityImpact.tsx b/components/CommunityImpact/CommunityImpact.tsx new file mode 100644 index 0000000..3c4656c --- /dev/null +++ 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 ( +
+ {/* Gallery with responsive margins */} +
+
+ {/* Large image on left - full height */} +
+ {galleryImages[0].alt} +
+ + {/* Middle column with two stacked images */} +
+
+ {galleryImages[1].alt} +
+ +
+ {galleryImages[2].alt} +
+
+ + {/* Large image on right - full height */} +
+ {galleryImages[3].alt} +
+
+
+ + {/* Community Impact Section with responsive margins and typography */} +
+ {/* Horizontal Line Separator */} +
+ {/* Header Section - Title and Description side by side */} +
+
+

+ COMMUNITY IMPACT +

+
+
+

+ participants worldwide use DeCleanup dApp to turn real world + impact into onchain products with additional utilities within the + ecosystem in the future. +

+
+
+ + {/* Cards Section - Two cards side by side with responsive spacing */} +
+ {/* HEM Japan - shorter card */} +
+

+ HEM JAPAN +

+

+ Early partner organizing cleanups across Japan using + DeCleanup's verification system. 2024: 12 active users, 9 + cleanup events +

+
+ + {/* Pestathon - taller card */} +
+

+ PESATHON +

+

+ 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 +

+
+
+
+ {/* Horizontal Line Separator */} +
+ + {/* Quote Section with responsive typography */} +
+ {/* Opening Quote Mark */} +
+ + " + +
+ + {/* Main Quote Text */} +
+

+ DeCleanup employs the most simplified system I'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! +

+ + {/* Attribution */} +
+
+

+ YUICHI HOSOMO — NEW JAPAN +

+
+
+
+ + {/* Closing Quote Mark */} +
+ + " + +
+
+ +
+
+ ); +} diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx index 2ebb566..21e6ddb 100644 --- a/components/HeroSection/Hero.tsx +++ b/components/HeroSection/Hero.tsx @@ -3,12 +3,9 @@ import Divider from "../ui/Divider"; const Hero = () => { return ( -
-
- +
+
+ CLEAN UP, SNAP, EARN
@@ -17,21 +14,22 @@ const Hero = () => { DECLEANUP NETWORK -
+

- Turn environmental action into digital assets + Turn environmental action into digital assets

- 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

-
- +
+
diff --git a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx index e13fc88..bfac455 100644 --- a/components/HowToTokonizeImpact/TokenizeImpactSection.tsx +++ b/components/HowToTokonizeImpact/TokenizeImpactSection.tsx @@ -26,7 +26,7 @@ const TokenizeImpactSection = () => { return (
-
+
{/* Hero Section */}
diff --git a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx index 70f95f7..738a5bf 100644 --- a/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx +++ b/components/NetworkRoadmapSection/NetworkRoadmapSection.tsx @@ -1,5 +1,4 @@ import React from "react"; -import Image from "next/image"; const NetworkRoadmapSection = () => { const roadmap = [ @@ -51,530 +50,337 @@ const NetworkRoadmapSection = () => { }, ]; - 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", - }, - ]; - return ( -
- {/* Roadmap Section with responsive margins */} -
-
- {/* Header */} -
-

- NETWORK ROADMAP -

-
- - {/* Desktop Roadmap - Original Style */} -
- {/* Connecting lines - visible on larger screens */} -
-
-
-
-
-
-
-
- - {roadmap.map((item, index) => ( -
- {/* Connection dot */} -
- -
-

- {item.phase} -

-

- {item.description} -

+
+ {/* Header */} +
+

+ NETWORK ROADMAP +

+
-
-

- {item.version} -

-
    - {item.features.map((feature, idx) => ( -
  • - {feature} -
    • - ))} -
-
-
-
- ))} + {/* Desktop Roadmap - Original Style */} +
+ {/* Connecting lines - visible on larger screens */} +
+
+
+
+
+
+
- {/* Mobile/Tablet Roadmap */} -
- {/* Vertical connecting line */} -
- -
- {/* Point 1 - Foundation Phase */} -
-
-
-
-

- FOUNDATION PHASE -

-

- initial community partnerships activated -

-
-
-
- - {/* Point 2 - System Growth */} -
-
-
-
-

- SYSTEM GROWTH -

-

- collaboration with regen coordination -

-
-
-
- - {/* Point 3 - Activation */} -
-
-
-
-

- ACTIVATION -

-

- launching global ambassador program -

-
-
-
- - {/* Point 4 - Regional Scaling */} -
-
-
-
-

- REGIONAL SCALING -

-

- multi-region coordination and governance -

-
-
-
- - {/* Point 5 - DAPP V1 */} -
-
-
-
-

- DAPP V1 -

-
    -
  • BASIC POI SUBMISSION
    • -
  • IMPACT PRODUCTS
    • -
  • POINTS AND IMPACT VALUE
    • -
-
-
-
- - {/* Point 6 - DAPP V2.1 */} -
-
-
-
-

- DAPP V2.1 -

-
    -
  • IMPROVED POI SUBMISSION
    • -
  • PERSONAL DASHBOARD
    • -
  • REFERRAL SYSTEM
    • -
  • LEADERBOARD
    • -
-
-
-
+ {roadmap.map((item, index) => ( +
+ {/* Connection dot */} +
- {/* Point 7 - DAPP V2.2 */} -
-
-
-
-

- DAPP V2.2 -

-
    -
  • $DCU TOKEN LAUNCH
    • -
  • STAKING AND LOCKING
    • -
  • COMMUNITY VERIFICATION
    • -
  • IMPACT CIRCLES
    • -
  • - INTEGRATION WITH REGEN BAZAAR -
    • -
  • MULTICHAIN ROLLOUT
    • -
-
-
-
+
+

+ {item.phase} +

+

+ {item.description} +

- {/* Point 8 - DAPP V3 */} -
-
-
-
-

- DAPP V3 -

-
    -
  • NEW IMPACT PRODUCT LEVELS
    • -
  • GOVERNANCE TOOLS
    • -
  • IMPACT METRICS
    • -
  • MULTICHAIN POAPS
    • -
  • INTEGRATIONS WITH PARTNERS
    • -
-
-
+
+

+ {item.version} +

+
    + {item.features.map((feature, idx) => ( +
  • + {feature} +
    • + ))} +
-
+ ))}
- {/* Yellow Background Section */} -
- {/* Gallery with responsive margins */} -
-
- {/* Large image on left - full height */} -
- {galleryImages[0].alt} -
- - {/* Middle column with two stacked images */} -
-
- {galleryImages[1].alt} -
+ {/* Mobile/Tablet Roadmap */} +
+ {/* Vertical connecting line */} +
-
- {galleryImages[2].alt} +
+ {/* Point 1 - Foundation Phase */} +
+
+
+
+

+ FOUNDATION PHASE +

+

+ initial community partnerships activated +

+
- {/* Large image on right - full height */} -
- {galleryImages[3].alt} + {/* Point 2 - System Growth */} +
+
+
+
+

+ SYSTEM GROWTH +

+

+ collaboration with regen coordination +

+
-
- {/* Community Impact Section with responsive margins and typography */} -
- {/* Horizontal Line Separator */} -
- {/* Header Section - Title and Description side by side */} -
-
-

- COMMUNITY IMPACT -

-
-
-

- participants worldwide use DeCleanup dApp to turn real world - impact into onchain products with additional utilities within - the ecosystem in the future. -

+ {/* Point 3 - Activation */} +
+
+
+
+

+ ACTIVATION +

+

+ launching global ambassador program +

+
- {/* Cards Section - Two cards side by side with responsive spacing */} -
- {/* HEM Japan - shorter card */} -
-

- HEM JAPAN -

-

- Early partner organizing cleanups across Japan using - DeCleanup's verification system. 2024: 12 active users, 9 - cleanup events -

+ {/* Point 4 - Regional Scaling */} +
+
+
+
+

+ REGIONAL SCALING +

+

+ multi-region coordination and governance +

+
+
- {/* Pestathon - taller card */} -
-

- PESATHON -

-

- 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 -

+ {/* Point 5 - DAPP V1 */} +
+
+
+
+

+ DAPP V1 +

+
    +
  • BASIC POI SUBMISSION
    • +
  • IMPACT PRODUCTS
    • +
  • POINTS AND IMPACT VALUE
    • +
+
-
- {/* Horizontal Line Separator */} -
- {/* Quote Section with responsive typography */} -
- {/* Opening Quote Mark */} -
- - " - + {/* Point 6 - DAPP V2.1 */} +
+
+
+
+

+ DAPP V2.1 +

+
    +
  • IMPROVED POI SUBMISSION
    • +
  • PERSONAL DASHBOARD
    • +
  • REFERRAL SYSTEM
    • +
  • LEADERBOARD
    • +
+
+
- {/* Main Quote Text */} -
-

- DeCleanup employs the most simplified system I'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! -

- - {/* Attribution */} -
-
-

+

+
+
+

- YUICHI HOSOMO — NEW JAPAN -

+ DAPP V2.2 +

+
    +
  • $DCU TOKEN LAUNCH
    • +
  • STAKING AND LOCKING
    • +
  • COMMUNITY VERIFICATION
    • +
  • IMPACT CIRCLES
    • +
  • INTEGRATION WITH REGEN BAZAAR
    • +
  • MULTICHAIN ROLLOUT
    • +
- {/* Closing Quote Mark */} -
- - " - + {/* Point 8 - DAPP V3 */} +
+
+
+
+

+ DAPP V3 +

+
    +
  • NEW IMPACT PRODUCT LEVELS
    • +
  • GOVERNANCE TOOLS
    • +
  • IMPACT METRICS
    • +
  • MULTICHAIN POAPS
    • +
  • INTEGRATIONS WITH PARTNERS
    • +
+
+
- -
); diff --git a/components/ProblemAndSolution/ProblemAndSolution.tsx b/components/ProblemAndSolution/ProblemAndSolution.tsx new file mode 100644 index 0000000..e154cc9 --- /dev/null +++ b/components/ProblemAndSolution/ProblemAndSolution.tsx @@ -0,0 +1,177 @@ +import React from "react"; + +interface ProblemSectionProps { + hideHeader?: boolean; +} + +function ProblemSection({ hideHeader = false }: ProblemSectionProps) { + const problems = [ + { + title: "LACK OF INCENTIVES FOR CLEANUP ACTIONS", + }, + { + title: "LIMITS FOR RECOGNITION AND QUANTIFICATION OF PERSONAL IMPACT", + }, + { + title: "WEAK GLOBAL COORDINATION", + }, + ]; + + return ( +
+ {!hideHeader && ( +
+

+ THE PROBLEM +

+
+ )} + +
+ {problems.map((problem, index) => ( +
+

+ {problem.title} +

+
+ ))} +
+
+ ); +} + +interface SolutionSectionProps { + hideHeader?: boolean; +} + +function SolutionSection({ hideHeader = false }: SolutionSectionProps) { + const solutions = [ + { + title: "TOKENIZING IMPACT INTO IMPACT PRODUCTS", + description: + "Turn each cleanup into a dynamic onchain Impact Product - visible, growing assets tied to real action. Creates lasting value beyond the cleanup moment.", + }, + { + title: "SCALABLE PERSONAL RECOGNITION SYSTEM", + description: + "Earn visibility and status reflecting actual environmental contributions. Unlock levels, metrics, and benefits based on your actions.", + }, + { + title: "GLOBAL NETWORK OF COORDINATED ACTION", + description: + "Ambassador program + partner communities + decentralized tech = local efforts connected into one shared, scalable ecosystem", + }, + ]; + + return ( +
+ {!hideHeader && ( +
+

THE SOLUTION

+
+ )} + +
+ {solutions.map((solution, index) => ( +
+

+ {solution.title} +

+

+ {solution.description} +

+
+ ))} +
+
+ ); +} + +export default function ProblemAndSolution() { + return ( + <> +
+ {/* Horizontal Line Separator */} +
+ + {/* Problem-Solution Headers with horizontal line */} +
+
+

+ THE PROBLEM +

+
+

+ THE SOLUTION +

+
+
+ + {/* Problem-Solution Content Side by Side */} +
+
+ +
+
+ +
+
+
+ + {/* Mobile Layout: Stacked with vertical line */} +
+ {/* Mobile Problem Section */} +
+
+

+ THE PROBLEM +

+
+ + {/* Problem content with vertical line */} +
+ {/* Vertical line at the left edge */} +
+ + {/* Problem items */} +
+ +
+
+
+ + {/* Mobile Solution Section */} +
+
+

+ THE SOLUTION +

+
+ + {/* Solution content without vertical line */} +
+ +
+
+
+ + ); +} diff --git a/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx b/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx index 444796d..29db7d0 100644 --- a/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx +++ b/components/WhatIsDecleanUp/WhatIsDeCleanupNetwork.tsx @@ -1,108 +1,9 @@ import React from "react"; -interface ProblemSectionProps { - hideHeader?: boolean; -} - -function ProblemSection({ hideHeader = false }: ProblemSectionProps) { - const problems = [ - { - title: "LACK OF INCENTIVES FOR CLEANUP ACTIONS", - }, - { - title: "LIMITS FOR RECOGNITION AND QUANTIFICATION OF PERSONAL IMPACT", - }, - { - title: "WEAK GLOBAL COORDINATION", - }, - ]; - - return ( -
- {!hideHeader && ( -
-

- THE PROBLEM -

-
- )} - -
- {problems.map((problem, index) => ( -
-

- {problem.title} -

-
- ))} -
-
- ); -} - -interface SolutionSectionProps { - hideHeader?: boolean; -} - -function SolutionSection({ hideHeader = false }: SolutionSectionProps) { - const solutions = [ - { - title: "TOKENIZING IMPACT INTO IMPACT PRODUCTS", - description: - "Turn each cleanup into a dynamic onchain Impact Product - visible, growing assets tied to real action. Creates lasting value beyond the cleanup moment.", - }, - { - title: "SCALABLE PERSONAL RECOGNITION SYSTEM", - description: - "Earn visibility and status reflecting actual environmental contributions. Unlock levels, metrics, and benefits based on your actions.", - }, - { - title: "GLOBAL NETWORK OF COORDINATED ACTION", - description: - "Ambassador program + partner communities + decentralized tech = local efforts connected into one shared, scalable ecosystem", - }, - ]; - - return ( -
- {!hideHeader && ( -
-

THE SOLUTION

-
- )} - -
- {solutions.map((solution, index) => ( -
-

- {solution.title} -

-

- {solution.description} -

-
- ))} -
-
- ); -} - export default function WhatIsDeCleanupNetwork() { return ( -
-
+
+
What is DeCleanup Network? @@ -148,77 +49,6 @@ export default function WhatIsDeCleanupNetwork() {
- -
- {/* Horizontal Line Separator */} -
- - {/* Problem-Solution Headers with horizontal line */} -
-
-

- THE PROBLEM -

-
-

- THE SOLUTION -

-
-
- - {/* Problem-Solution Content Side by Side */} -
-
- -
-
- -
-
-
- - {/* Mobile Layout: Stacked with vertical line */} -
- {/* Mobile Problem Section */} -
-
-

- THE PROBLEM -

-
- - {/* Problem content with vertical line */} -
- {/* Vertical line at the left edge */} -
- - {/* Problem items */} -
- -
-
-
- - {/* Mobile Solution Section */} -
-
-

- THE SOLUTION -

-
- - {/* Solution content without vertical line */} -
- -
-
-
); diff --git a/components/ui/Section.tsx b/components/ui/Section.tsx new file mode 100644 index 0000000..fa8397e --- /dev/null +++ b/components/ui/Section.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +interface SectionProps { + children: React.ReactNode; + className?: string; +} + +// Section with consistent lateral padding +export const SectionPadded: React.FC = ({ + children, + className = "", +}) => { + return
{children}
; +}; + +// Full-width section without padding +export const SectionFull: React.FC = ({ + children, + className = "", +}) => { + return
{children}
; +}; + +// Full-width section with inner padding +export const SectionFullWithPadding: React.FC = ({ + children, + className = "", +}) => { + return ( +
+
{children}
+
+ ); +}; diff --git a/next.config.ts b/next.config.ts index 6b67621..21a9672 100644 --- a/next.config.ts +++ b/next.config.ts @@ -7,6 +7,8 @@ const nextConfig = { }, basePath: process.env.BASE_PATH || "", assetPrefix: process.env.BASE_PATH || "", + trailingSlash: true, + skipTrailingSlashRedirect: true, }; module.exports = nextConfig; diff --git a/public/.nojekyll b/public/.nojekyll new file mode 100644 index 0000000..3cb1807 --- /dev/null +++ b/public/.nojekyll @@ -0,0 +1 @@ +# This file tells GitHub Pages not to process this site with Jekyll \ No newline at end of file