DeCleanup-Network · JamesVictor-O · May 4, 2025 · Apr 25, 2025 · Apr 25, 2025 · Apr 29, 2025
diff --git a/next.config.ts b/next.config.ts
@@ -6,5 +6,11 @@ const config: NextConfig = {
   transpilePackages: ['next-mdx-remote'],
   output: 'export',
   images: { unoptimized: true },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 export default config
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -1,15 +1,17 @@
-import Link from 'next/link';
+import Link from 'next/link'
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 text-center">
-      <h1 className="text-4xl font-bold mb-4">Welcome to Decleanup Journey!</h1>
-      <p className="text-lg mb-8">Complete all levels and share your achievement!</p>
-      <Link href="/game">
-        <a className="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition">
+    <div className='flex min-h-screen flex-col items-center justify-center bg-gray-100 text-center'>
+      <h1 className='mb-4 text-4xl font-bold'>Welcome to Decleanup Journey!</h1>
+      <p className='mb-8 text-lg'>
+        Complete all levels and share your achievement!
+      </p>
+      <Link href='/game'>
+        <span className='rounded-lg bg-green-500 px-6 py-3 text-white transition hover:bg-green-600'>
           Go to Game Completion
-        </a>
+        </span>
       </Link>
     </div>
-  );
+  )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,8 +2,8 @@ import Header from '@/components/Header'
 import Footer from '@/components/Footer'
 
 import { ContextProvider } from '@/context/ContextApi'
-import { ThirdwebProvider } from "thirdweb/react";
-import {SessionProvider} from "@/components/SessionProvider"
+import { ThirdwebProvider } from 'thirdweb/react'
+import { SessionProvider } from '@/components/SessionProvider'
 import { Providers } from './provider'
 
 import '@/app/globals.css'
@@ -21,20 +21,20 @@ export default function RootLayout({
   return (
     <html lang='en' className='h-full'>
       <body className='h-full'>
-        <div className='border-8 border-black h-screen flex flex-col'>
+        <div className='flex h-screen flex-col border-black md:border-8'>
           <ThirdwebProvider>
-          <ContextProvider>
-            <Providers>
-              <Header />
-              <main className='flex-1 overflow-y-auto bg-[#58B12F]'>
-                {children}
-              </main>
-              <Footer />
-            </Providers>
-          </ContextProvider>
+            <ContextProvider>
+              <Providers>
+                <Header />
+                <main className='md:overflow-y-none flex-1 bg-[#58B12F] xs:overflow-x-hidden xs:overflow-y-scroll md:overflow-y-auto'>
+                  {children}
+                </main>
+                <Footer />
+              </Providers>
+            </ContextProvider>
           </ThirdwebProvider>
         </div>
       </body>
     </html>
   )
-}
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,11 @@
-import Login from "@/components/Login";
-
+import Login from '@/components/Login'
 
 const Page = () => {
   return (
     <div>
       <Login />
     </div>
-  );
-};
+  )
+}
 
-export default Page;
+export default Page
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,31 +1,31 @@
-import React from "react";
-import Image from "next/image";
-
-import StellarIcon from "@/public/stellar.png";
+import React from 'react'
+import Image from 'next/image'
 
+import StellarIcon from '@/public/stellar.png'
 
 const Footer: React.FC = () => {
-    return (
-     <div className="bg-[#58B12F] text-[#111111] lg:font-bebas border-t border-black  px-5 py-5 flex flex-col md:flex-row justify-between md:items-center text-sm lg:text-2xl">
-       <p>2025©</p>
-       <div className="flex flex-col  space-y-2 md:flex-row md:justify-center md:items-center md:space-y-0 md:space-x-3">
-        <a href="" className="block">
-          TELEGRAM</a>
-          <a href="" className="block">
-            GITHUB</a>
-            <a href="" className="block">
-              LITEPAPER
-            </a>
-            <a href="" className="block">
-              BUG REPORT
-            </a>
-       </div>
-       <div className='flex justify-end md:justify-start'>
-          <Image src={StellarIcon} alt="" />
-       </div>
-     </div>
-    );
-  };
-
-  export default Footer;
-
+  return (
+    <div className='flex flex-col items-center justify-between gap-5 border-t border-black bg-[#58B12F] px-5 py-5 font-sans text-2xl xs:text-sm sm:text-lg sm:font-semibold md:flex-row'>
+      <p>2025©</p>
+      <div className='flex flex-wrap justify-center gap-3 font-normal'>
+        <a href='#!' className=''>
+          TELEGRAM
+        </a>
+        <a href='#!' className=''>
+          GITHUB
+        </a>
+        <a href='#!' className=''>
+          LITEPAPER
+        </a>
+        <a href='#!' className='whitespace-nowrap'>
+          BUG REPORT
+        </a>
+      </div>
+      <div>
+        <Image src={StellarIcon} alt='' className='w-28 md:w-auto' />
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,50 +1,55 @@
-"use client"
+'use client'
 import React, { useState } from 'react'
+import { Menu, X } from 'lucide-react'
 interface HeaderProps {
   connectWallet: () => Promise<void>
 }
 
 const Header: React.FC = () => {
   const [menuOpen, setMenuOpen] = useState(false)
   return (
-    <div className='bg-[#58B12F] p-4 flex justify-between items-center border-b-black border-b  font-bebas'>
-      <p className="bg-[#FAFF00] text-2xl p-2">DECLEANUP NETWORK</p>
+    <div className='flex items-center justify-between border-b border-b-black bg-[#58B12F] p-4 font-bebas'>
+      <p className='bg-[#FAFF00] p-2 text-2xl'>DECLEANUP NETWORK</p>
 
-      <div className='mr-4 flex items-center justify-end md:hidden'>
-          <button
-            onClick={() => setMenuOpen(!menuOpen)}
-            className='focus:outline-none'
-          >
-            <div className='mb-1 h-1 w-8 bg-black'></div>
-            <div className='mb-1 h-1 w-8 bg-black'></div>
-            <div className='h-1 w-8 bg-black'></div>
-          </button>
-        </div>
+      <div className='mr-2 flex items-center justify-end md:hidden'>
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className='focus:outline-none'
+        >
+          {menuOpen ? (
+            <X size={24} color='black' />
+          ) : (
+            <Menu size={24} color='black' />
+          )}
+        </button>
+      </div>
 
-        {/* Dropdown Menu (Visible on Mobile) */}
-        {menuOpen && (
-          <div className='absolute right-0 mt-2 w-full rounded border border-gray-300 bg-[#FAFF00] shadow-lg md:hidden'>
-            <a
-              href='#'
-              className='block px-4 py-2 text-black hover:border-l-4 hover:border-green-500'
-            >
-              DASHBOARD
-            </a>
-            <a
-              href='#'
-              className='block px-4 py-2 text-black hover:border-l-4 hover:border-green-500'
-            >
-              LEADERBOARD
-            </a>
-            <a
-              href='#'
-              className='block px-4 py-2 text-black hover:border-l-4 hover:border-green-500'
-            >
-              APPLY WITH CLEANUP RESULTS
-            </a>
-          </div>
-        )}
-      <p className="text-[36.82px] hidden md:flex">CLEAN UP, SNAP, EARN</p>
+      {/* Dropdown Menu (Visible on Mobile) */}
+      <div
+        className={`absolute right-0 top-16 mt-2 h-96 w-full overflow-hidden text-2xl transition-all duration-300 ease-in-out md:hidden ${
+          menuOpen ? 'max-h-[300px] opacity-100' : 'max-h-0 opacity-0'
+        } rounded border border-gray-300 bg-[#FAFF00] shadow-lg`}
+      >
+        <a
+          href='#!'
+          className='block px-4 py-2 text-black transition-all hover:border-l-4 hover:border-green-500'
+        >
+          DASHBOARD
+        </a>
+        <a
+          href='#!'
+          className='block px-4 py-2 text-black transition-all hover:border-l-4 hover:border-green-500'
+        >
+          LEADERBOARD
+        </a>
+        <a
+          href='#!'
+          className='block px-4 py-2 text-black transition-all hover:border-l-4 hover:border-green-500'
+        >
+          APPLY WITH CLEANUP RESULTS
+        </a>
+      </div>
+      <p className='hidden text-[36.82px] md:flex'>CLEAN UP, SNAP, EARN</p>
     </div>
   )
 }

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -14,25 +14,73 @@ const Login: React.FC = () => {
     return `${address.slice(0, 4)}...${address.slice(-4)}`
   }
 
+  const lines = ['FIRST DAPP TO SELF-TOKENIZE ENVIRONMENTAL', 'CLEANUP EFFORTS']
+  const linesMd = [
+    'FIRST DAPP TO SELF-TOKENIZE',
+    'ENVIRONMENTAL CLEANUP EFFORTS',
+  ]
+  const linesLg = [
+    'FIRST DAPP TO SELF-TOKENIZE ENVIRONMENTAL',
+    'CLEANUP EFFORTS',
+  ]
+
   return (
-    <div className='flex flex-1 flex-col'>
+    <div className='flex flex-1 flex-col bg-[#58B12F]'>
       {/* Main Content */}
       <div className='flex h-[calc(95vh-160px)] min-h-[calc(98vh-160px)] flex-col items-center'>
         {/* Heading */}
-        <div className='flex w-full items-center justify-center'>
-          <h2 className='text-center font-bebas text-[105px] font-normal leading-none md:text-[140px] xl:text-[200px]'>
-            DECLEANUP REWARDS
-          </h2>
-        </div>
+        <h2 className='w-full py-5 text-center font-bebas font-semibold xs:text-[90px] xs:leading-[6rem] sm:text-[120px] md:text-[150px] md:font-normal md:leading-[8rem] lg:text-[200px] lg:leading-[10rem]'>
+          DECLEANUP REWARDS
+        </h2>
 
-        <hr className='my-4 w-full border-t-2 border-black' />
+        <hr className='mb-4 w-full border-t-2 border-black' />
 
         {/* Subheading and Description */}
-        <div className='flex flex-col items-center px-4 py-2 text-center'>
-          <p className='mb-4 bg-[#FAFF00] p-2 font-bebas text-lg font-normal sm:text-xl md:text-6xl'>
+        <div className='flex flex-col items-center py-2 text-center xs:px-2 sm:px-4'>
+          <p className='mb-4 bg-[#FAFF00] p-2 font-bebas text-lg font-normal xs:hidden sm:text-xl md:text-6xl xl:block'>
             FIRST DAPP TO SELF-TOKENIZE ENVIRONMENTAL CLEANUP EFFORTS
           </p>
-          <p className='mb-6 font-bebas text-xl font-normal sm:text-2xl md:text-6xl'>
+          <div className='mb-3 md:hidden'>
+            <div className='font-bebas leading-none text-black xs:text-xl xs:leading-none sm:text-3xl md:text-[3.1rem] md:leading-snug'>
+              {lines.map((line, index) => (
+                <div
+                  key={index}
+                  className='inline-block bg-[#FAFF00] px-2 py-1'
+                >
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Tablet */}
+          <div className='mb-5 xs:hidden md:block lg:hidden xl:hidden'>
+            <div className='font-bebas text-6xl leading-none text-black'>
+              {linesMd.map((line, index) => (
+                <div
+                  key={index}
+                  className='inline-block bg-[#FAFF00] px-2 py-1'
+                >
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Laptop screen */}
+          <div className='mb-5 xs:hidden lg:block xl:hidden'>
+            <div className='font-bebas text-6xl leading-none text-black'>
+              {linesLg.map((line, index) => (
+                <div
+                  key={index}
+                  className='inline-block bg-[#FAFF00] px-2 py-1'
+                >
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
+          <p className='mb-6 font-bebas text-xl font-normal sm:text-3xl md:text-6xl'>
             APPLY WITH YOUR CLEANUP RESULTS TO RECEIVE A DECLEANUP IMPACT
             PRODUCT, PROGRESS THROUGH LEVELS AND EARN POINTS, REDEEMABLE IN THE
             FUTURE
@@ -45,14 +93,24 @@ const Login: React.FC = () => {
         <div className='w-full px-4 py-4'>
           {!isConnected ? (
             <div className='flex h-24 w-full items-center justify-center rounded bg-black py-3 font-bold text-[#FAFF00] transition-all hover:bg-gray-800'>
-                <ConnectButton
-                  client={client}
-                  appMetadata={{
-                    name: 'Example App',
-                    url: 'https://example.com',
-                  }}
-                />
-
+              <ConnectButton.Custom>
+                {({ account, openAccountModal, openConnectModal, mounted }) => {
+                  const connected = mounted && account
+
+                  return (
+                    <div>
+                      <button
+                        onClick={openConnectModal}
+                        className='flex h-full w-full items-center justify-center'
+                      >
+                        <span className='font-bebas font-medium text-[#FAFF00] xs:text-2xl sm:text-4xl md:text-7xl'>
+                          Connect Wallet
+                        </span>
+                      </button>
+                    </div>
+                  )
+                }}
+              </ConnectButton.Custom>
             </div>
           ) : (
             <div className='w-full space-y-4'>