FInalising landing page

.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://<your-username>.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."

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 (
+    <main className="min-h-screen bg-black text-white">
+      <div className="max-w-[900px] mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+        {/* Back Button */}
+        <div className="mb-8">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-[#58B12F] hover:text-[#58B12F]/80 font-semibold text-sm md:text-base transition-colors duration-200 group"
+          >
+            <svg
+              className="w-5 h-5 transform group-hover:-translate-x-1 transition-transform duration-200"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span>Back to Home</span>
+          </Link>
+        </div>
+
+        {/* Page Header */}
+        <div className="text-center mb-12 md:mb-16">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-normal uppercase text-white mb-4">
+            Documentation
+          </h1>
+          <p className="text-lg md:text-xl text-gray-400">
+            Coming Soon
+          </p>
+        </div>
+
+        <div className="text-center">
+          <p className="md:text-lg leading-relaxed text-gray-300">
+            Technical documentation will be available here soon.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+

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

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 (
     <html lang="en">
       <body
-        className={`${nunito.variable} ${bebas.variable} antialiased`}
+        className={`${GeistSans.variable} ${bebas.variable} antialiased`}
       >
         {children}
       </body>