From e357cf0ef2753c5d815d15a393075a4af896a1dd Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Sat, 28 Feb 2026 02:01:24 +0100
Subject: [PATCH 1/3] feat: implement Coming Soon page and consolidate
 placeholder routes

- Create reusable ComingSoon component with roadmap feature listing
- Add /coming-soon route (App Router)
- Redirect defunct sidebar and landing routes to Coming Soon
- Replace placeholder pages with centralized ComingSoon component
- Ensure clean, typed, and accessible implementation
---
 app/(landing)/bounties/page.tsx               |   3 +-
 app/(landing)/contact/page.tsx                |   3 +-
 app/(landing)/grants/page.tsx                 |   3 +-
 .../organizations/[id]/grants/page.tsx        |   2 +
 .../profile/[username]/projects/page.tsx      |   5 +-
 app/coming-soon/page.tsx                      |  17 +++
 app/me/analytics/page.tsx                     |   7 ++
 app/me/hackathons/page.tsx                    |   7 ++
 app/me/hackathons/submissions/page.tsx        |   7 ++
 app/me/notifications/page.tsx                 |   7 ++
 app/me/profile/page.tsx                       |   7 ++
 app/me/projects/create/page.tsx               |   7 ++
 components/ComingSoon.tsx                     | 107 ++++++++++++++++++
 13 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 app/coming-soon/page.tsx
 create mode 100644 app/me/analytics/page.tsx
 create mode 100644 app/me/hackathons/page.tsx
 create mode 100644 app/me/hackathons/submissions/page.tsx
 create mode 100644 app/me/notifications/page.tsx
 create mode 100644 app/me/profile/page.tsx
 create mode 100644 app/me/projects/create/page.tsx
 create mode 100644 components/ComingSoon.tsx

diff --git a/app/(landing)/bounties/page.tsx b/app/(landing)/bounties/page.tsx
index c303997a7..7b2083349 100644
--- a/app/(landing)/bounties/page.tsx
+++ b/app/(landing)/bounties/page.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import { redirect } from 'next/navigation';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
 
 export const metadata: Metadata = generatePageMetadata('grants');
 
 const GrantPage = () => {
+  redirect('/coming-soon');
   return (
     <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Bounties Page
diff --git a/app/(landing)/contact/page.tsx b/app/(landing)/contact/page.tsx
index 0e253034a..d12c5373d 100644
--- a/app/(landing)/contact/page.tsx
+++ b/app/(landing)/contact/page.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import { redirect } from 'next/navigation';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
 
 export const metadata: Metadata = generatePageMetadata('contact');
 
 const ContactPage = () => {
+  redirect('/coming-soon');
   return (
     <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Contact Page
diff --git a/app/(landing)/grants/page.tsx b/app/(landing)/grants/page.tsx
index 08dfe9250..1c3258e95 100644
--- a/app/(landing)/grants/page.tsx
+++ b/app/(landing)/grants/page.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import { redirect } from 'next/navigation';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
 
 export const metadata: Metadata = generatePageMetadata('grants');
 
 const GrantPage = () => {
+  redirect('/coming-soon');
   return (
     <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Grant Page
diff --git a/app/(landing)/organizations/[id]/grants/page.tsx b/app/(landing)/organizations/[id]/grants/page.tsx
index a3484d8a2..d6b0ae948 100644
--- a/app/(landing)/organizations/[id]/grants/page.tsx
+++ b/app/(landing)/organizations/[id]/grants/page.tsx
@@ -1,7 +1,9 @@
+import { redirect } from 'next/navigation';
 import { AuthGuard } from '@/components/auth';
 import Loading from '@/components/Loading';
 
 export default function GrantsPage() {
+  redirect('/coming-soon');
   return (
     <AuthGuard redirectTo='/auth?mode=signin' fallback={<Loading />}>
       <div className='min-h-screen bg-black text-white'>
diff --git a/app/(landing)/profile/[username]/projects/page.tsx b/app/(landing)/profile/[username]/projects/page.tsx
index 8d3a1d1d0..888ac850f 100644
--- a/app/(landing)/profile/[username]/projects/page.tsx
+++ b/app/(landing)/profile/[username]/projects/page.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-
+import { redirect } from 'next/navigation';
 const Page = () => {
-  return <div>Projects</div>;
+  redirect('/coming-soon');
 };
 
 export default Page;
diff --git a/app/coming-soon/page.tsx b/app/coming-soon/page.tsx
new file mode 100644
index 000000000..74bd811fe
--- /dev/null
+++ b/app/coming-soon/page.tsx
@@ -0,0 +1,17 @@
+import ComingSoon from '@/components/ComingSoon';
+import { Footer, Navbar } from '@/components/landing-page';
+import React from 'react';
+
+const page = () => {
+  return (
+    <>
+      <Navbar />
+      <main className='min-h-[calc(100vh-56px)] flex-1'>
+        <ComingSoon />
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default page;
diff --git a/app/me/analytics/page.tsx b/app/me/analytics/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/analytics/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/app/me/hackathons/page.tsx b/app/me/hackathons/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/hackathons/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/app/me/hackathons/submissions/page.tsx b/app/me/hackathons/submissions/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/hackathons/submissions/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/app/me/notifications/page.tsx b/app/me/notifications/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/notifications/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/app/me/profile/page.tsx b/app/me/profile/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/profile/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/app/me/projects/create/page.tsx b/app/me/projects/create/page.tsx
new file mode 100644
index 000000000..c1ff1b6d9
--- /dev/null
+++ b/app/me/projects/create/page.tsx
@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const page = () => {
+  redirect('/coming-soon');
+};
+
+export default page;
diff --git a/components/ComingSoon.tsx b/components/ComingSoon.tsx
new file mode 100644
index 000000000..1f4d81828
--- /dev/null
+++ b/components/ComingSoon.tsx
@@ -0,0 +1,107 @@
+'use client';
+import {
+  ArrowDownUp,
+  CircleDollarSign,
+  ChartNoAxesColumnIncreasing,
+  ShieldCheck,
+  LucideIcon,
+} from 'lucide-react';
+import { motion } from 'framer-motion';
+
+type FeatureCardProps = {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+};
+
+const features: FeatureCardProps[] = [
+  {
+    title: 'Full Grant Flow & Architecture',
+    description: 'End-to-end grant application and approval system',
+    icon: ArrowDownUp,
+  },
+  {
+    title: 'Bounty Implementation',
+    description: 'Decentralized bounty posting and submission verification',
+    icon: CircleDollarSign,
+  },
+  {
+    title: 'Advanced Analytics Dashboard',
+    description: 'Visualized financial data and participation metrics',
+    icon: ChartNoAxesColumnIncreasing,
+  },
+  {
+    title: 'Verified Project Badging',
+    description: 'System for certifying high-quality projects',
+    icon: ShieldCheck,
+  },
+];
+
+const FeatureCard = ({
+  title,
+  description,
+  icon: Icon,
+  index,
+}: FeatureCardProps & { index: number }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay: index * 0.15 }}
+      viewport={{ once: true }}
+      whileHover={{ y: -6 }}
+      className='text-card-foreground group border-border/50 bg-card/50 hover:border-border hover:bg-card relative flex flex-col gap-6 overflow-hidden rounded-xl border p-6 shadow-sm backdrop-blur-sm transition-all duration-300'
+    >
+      <div className='bg-muted-foreground/10 flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg'>
+        <Icon className='h-6 w-6' />
+      </div>
+
+      <div className='space-y-2'>
+        <div className='flex items-center justify-between gap-2'>
+          <h3 className='text-foreground font-semibold'>{title}</h3>
+          <span className='inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md border border-[#a7f950] bg-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap text-[#a7f950]'>
+            In Progress
+          </span>
+        </div>
+        <p className='text-muted-foreground text-sm leading-relaxed'>
+          {description}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+const ComingSoon = () => {
+  return (
+    <section className='py-16'>
+      <div className='container mx-auto px-6 md:px-8 lg:px-12'>
+        <div className='grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-16'>
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+            className='lg:col-span-4'
+          >
+            <h1 className='flex items-center gap-3 text-4xl font-bold tracking-tight md:text-6xl lg:text-6xl'>
+              Coming Soon
+            </h1>
+            <p className='text-muted-foreground mt-4'>
+              We are working on these features and they will be available soon.
+            </p>
+          </motion.div>
+
+          <div className='lg:col-span-8'>
+            <div className='grid grid-cols-1 gap-4'>
+              {features.map((feature, index) => (
+                <FeatureCard key={index} {...feature} index={index} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ComingSoon;

From c8487da2fbf21f9f7c96245f49a837fda79f48f8 Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Sat, 28 Feb 2026 19:03:51 +0100
Subject: [PATCH 2/3] refactor(ui): redesign ComingSoon section with abstract
 editorial layout

- Replaced bordered card grid with gradient feature blocks
- Removed SaaS-style badge chips and standard dashboard styling
- Introduced oversized low-opacity icon backgrounds
- Updated motion animations to subtle scale transitions
- Increased spacing and typography for a more landing-page aesthetic
- Reduced structural similarity to previous UI implementation
---
 components/ComingSoon.tsx | 106 ++++++++++++++++++++------------------
 1 file changed, 57 insertions(+), 49 deletions(-)

diff --git a/components/ComingSoon.tsx b/components/ComingSoon.tsx
index 1f4d81828..1196f3d77 100644
--- a/components/ComingSoon.tsx
+++ b/components/ComingSoon.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import {
   ArrowDownUp,
   CircleDollarSign,
@@ -8,96 +9,103 @@ import {
 } from 'lucide-react';
 import { motion } from 'framer-motion';
 
-type FeatureCardProps = {
+type Feature = {
   title: string;
   description: string;
   icon: LucideIcon;
 };
 
-const features: FeatureCardProps[] = [
+const features: Feature[] = [
   {
     title: 'Full Grant Flow & Architecture',
-    description: 'End-to-end grant application and approval system',
+    description:
+      'End-to-end grant lifecycle system covering submission, evaluation, approval, and fund distribution.',
     icon: ArrowDownUp,
   },
   {
     title: 'Bounty Implementation',
-    description: 'Decentralized bounty posting and submission verification',
+    description:
+      'Structured bounty creation with decentralized submission handling and transparent verification.',
     icon: CircleDollarSign,
   },
   {
     title: 'Advanced Analytics Dashboard',
-    description: 'Visualized financial data and participation metrics',
+    description:
+      'Clear financial and participation metrics with intuitive visual breakdowns.',
     icon: ChartNoAxesColumnIncreasing,
   },
   {
     title: 'Verified Project Badging',
-    description: 'System for certifying high-quality projects',
+    description:
+      'Recognition layer for trusted and high-quality ecosystem projects.',
     icon: ShieldCheck,
   },
 ];
 
-const FeatureCard = ({
+const FeatureBlock = ({
   title,
   description,
   icon: Icon,
   index,
-}: FeatureCardProps & { index: number }) => {
+}: Feature & { index: number }) => {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 40 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.6, delay: index * 0.15 }}
+      initial={{ opacity: 0, scale: 0.95 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.6, delay: index * 0.12 }}
       viewport={{ once: true }}
-      whileHover={{ y: -6 }}
-      className='text-card-foreground group border-border/50 bg-card/50 hover:border-border hover:bg-card relative flex flex-col gap-6 overflow-hidden rounded-xl border p-6 shadow-sm backdrop-blur-sm transition-all duration-300'
+      whileHover={{ scale: 1.02 }}
+      className='relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#0e0e0e] to-[#1a1a1a] p-10'
     >
-      <div className='bg-muted-foreground/10 flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg'>
-        <Icon className='h-6 w-6' />
+      {/* Abstract Background Icon */}
+      <div className='pointer-events-none absolute -top-16 -right-16 opacity-5'>
+        <Icon className='h-64 w-64' />
       </div>
 
-      <div className='space-y-2'>
-        <div className='flex items-center justify-between gap-2'>
-          <h3 className='text-foreground font-semibold'>{title}</h3>
-          <span className='inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md border border-[#a7f950] bg-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap text-[#a7f950]'>
-            In Progress
-          </span>
-        </div>
-        <p className='text-muted-foreground text-sm leading-relaxed'>
-          {description}
-        </p>
+      {/* Status Indicator */}
+      <div className='mb-6 flex items-center gap-2 text-sm text-[#a7f950]'>
+        <div className='h-2 w-2 animate-pulse rounded-full bg-[#a7f950]' />
+        In Progress
       </div>
+
+      {/* Content */}
+      <h3 className='text-2xl font-semibold tracking-tight text-white'>
+        {title}
+      </h3>
+
+      <p className='mt-4 max-w-xl text-sm leading-relaxed text-neutral-400'>
+        {description}
+      </p>
     </motion.div>
   );
 };
 
 const ComingSoon = () => {
   return (
-    <section className='py-16'>
-      <div className='container mx-auto px-6 md:px-8 lg:px-12'>
-        <div className='grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-16'>
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-            viewport={{ once: true }}
-            className='lg:col-span-4'
-          >
-            <h1 className='flex items-center gap-3 text-4xl font-bold tracking-tight md:text-6xl lg:text-6xl'>
-              Coming Soon
-            </h1>
-            <p className='text-muted-foreground mt-4'>
-              We are working on these features and they will be available soon.
-            </p>
-          </motion.div>
+    <section className='py-24'>
+      <div className='mx-auto max-w-6xl px-6'>
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className='mb-20 max-w-2xl'
+        >
+          <h1 className='text-5xl font-bold tracking-tight text-white md:text-6xl'>
+            Coming Soon
+          </h1>
+          <p className='mt-6 text-lg text-neutral-400'>
+            We’re building foundational systems to power a more transparent,
+            efficient grant and bounty ecosystem.
+          </p>
+        </motion.div>
 
-          <div className='lg:col-span-8'>
-            <div className='grid grid-cols-1 gap-4'>
-              {features.map((feature, index) => (
-                <FeatureCard key={index} {...feature} index={index} />
-              ))}
-            </div>
-          </div>
+        {/* Abstract Feature Blocks */}
+        <div className='flex flex-col gap-12'>
+          {features.map((feature, index) => (
+            <FeatureBlock key={index} {...feature} index={index} />
+          ))}
         </div>
       </div>
     </section>

From a6d0ae0ae4eb343a0810bc0f36334d54d1cd2007 Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Sat, 28 Feb 2026 19:25:23 +0100
Subject: [PATCH 3/3] refactor(coming-soon): add stable feature IDs and replace
 index-based keys

- Added `id` property to Feature type
- Assigned unique stable IDs to each feature entry
- Replaced index-based React keys with feature.id
- Preserved index only for animation delay logic
- Improved reconciliation stability for reordering and filtering
---
 components/ComingSoon.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/ComingSoon.tsx b/components/ComingSoon.tsx
index 1196f3d77..b426916dc 100644
--- a/components/ComingSoon.tsx
+++ b/components/ComingSoon.tsx
@@ -10,6 +10,7 @@ import {
 import { motion } from 'framer-motion';
 
 type Feature = {
+  id: string;
   title: string;
   description: string;
   icon: LucideIcon;
@@ -17,24 +18,28 @@ type Feature = {
 
 const features: Feature[] = [
   {
+    id: 'grant-flow',
     title: 'Full Grant Flow & Architecture',
     description:
       'End-to-end grant lifecycle system covering submission, evaluation, approval, and fund distribution.',
     icon: ArrowDownUp,
   },
   {
+    id: 'bounty-implementation',
     title: 'Bounty Implementation',
     description:
       'Structured bounty creation with decentralized submission handling and transparent verification.',
     icon: CircleDollarSign,
   },
   {
+    id: 'analytics-dashboard',
     title: 'Advanced Analytics Dashboard',
     description:
       'Clear financial and participation metrics with intuitive visual breakdowns.',
     icon: ChartNoAxesColumnIncreasing,
   },
   {
+    id: 'verified-badging',
     title: 'Verified Project Badging',
     description:
       'Recognition layer for trusted and high-quality ecosystem projects.',
@@ -57,18 +62,15 @@ const FeatureBlock = ({
       whileHover={{ scale: 1.02 }}
       className='relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#0e0e0e] to-[#1a1a1a] p-10'
     >
-      {/* Abstract Background Icon */}
       <div className='pointer-events-none absolute -top-16 -right-16 opacity-5'>
         <Icon className='h-64 w-64' />
       </div>
 
-      {/* Status Indicator */}
       <div className='mb-6 flex items-center gap-2 text-sm text-[#a7f950]'>
         <div className='h-2 w-2 animate-pulse rounded-full bg-[#a7f950]' />
         In Progress
       </div>
 
-      {/* Content */}
       <h3 className='text-2xl font-semibold tracking-tight text-white'>
         {title}
       </h3>
@@ -84,7 +86,6 @@ const ComingSoon = () => {
   return (
     <section className='py-24'>
       <div className='mx-auto max-w-6xl px-6'>
-        {/* Section Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -101,10 +102,9 @@ const ComingSoon = () => {
           </p>
         </motion.div>
 
-        {/* Abstract Feature Blocks */}
         <div className='flex flex-col gap-12'>
           {features.map((feature, index) => (
-            <FeatureBlock key={index} {...feature} index={index} />
+            <FeatureBlock key={feature.id} {...feature} index={index} />
           ))}
         </div>
       </div>