From 5d39064edfe0e51e191886ea4c078a03ccc7930f Mon Sep 17 00:00:00 2001
From: marvelousmicheal <donatusmarvelous09@gmail.com>
Date: Thu, 31 Jul 2025 15:43:29 +0100
Subject: [PATCH 1/3] feat(project-submission): implement stepper, form layout,
 and success screen

---
 app/globals.css                               | 12 ++-
 app/stepper/page.tsx                          | 34 +++++++
 components/project/ProjectSubmissionFlow.tsx  |  0
 components/project/ProjectSubmissionForm.tsx  | 67 ++++++++++++++
 .../project/ProjectSubmissionSuccess.tsx      |  0
 components/stepper/Stepper.tsx                | 89 +++++++++++++++++++
 components/stepper/index.ts                   |  1 +
 public/cube.svg                               |  3 +
 public/select.svg                             | 10 +++
 9 files changed, 215 insertions(+), 1 deletion(-)
 create mode 100644 app/stepper/page.tsx
 create mode 100644 components/project/ProjectSubmissionFlow.tsx
 create mode 100644 components/project/ProjectSubmissionForm.tsx
 create mode 100644 components/project/ProjectSubmissionSuccess.tsx
 create mode 100644 components/stepper/Stepper.tsx
 create mode 100644 components/stepper/index.ts
 create mode 100644 public/cube.svg
 create mode 100644 public/select.svg

diff --git a/app/globals.css b/app/globals.css
index 791f0afbd..bf86263c2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,6 +6,11 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-stepper-text-inactive: var(--stepper-text-inactive);
+  --color-stepper-foreground: var(--stepper-foreground);
+  --color-stepper-border-active: var(--stepper-border-active);
+  --color-stepper-border: var(--stepper-border);
+  --color-placeholder: var(--placeholder);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -51,7 +56,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: #a7f950;
+  --primary: oklch(0.95 0.24 125);
   --primary-foreground: #020502;
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -69,6 +74,11 @@
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
+  --stepper-foreground: oklch(0.2046 0 0);
+  --stepper-border: oklch(0.2264 0 0);
+  --stepper-border-active: oklch(0.3501 0.0381 190.35);
+  --stepper-text-inactive: oklch(0.7731 0 0);
+  --placeholder: oklch(0.6567 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
diff --git a/app/stepper/page.tsx b/app/stepper/page.tsx
new file mode 100644
index 000000000..855758421
--- /dev/null
+++ b/app/stepper/page.tsx
@@ -0,0 +1,34 @@
+import ProjectSubmissionForm from '@/components/project/ProjectSubmissionForm';
+import { Stepper } from '@/components/stepper';
+import React from 'react';
+
+const submissionSteps = [
+  {
+    title: 'Initialize',
+    description: 'Submit your project idea to kickstart your campaign journey.',
+    state: 'completed' as const,
+  },
+  {
+    title: 'Project Details',
+    description: 'Provide detailed information about your project.',
+    state: 'active' as const,
+  },
+  {
+    title: 'Review & Submit',
+    description: 'Review your submission and finalize your entry.',
+    state: 'pending' as const,
+  },
+];
+
+function page() {
+  return (
+    <section className='bg-red-500'>
+      <section className='w-[1284px] h-[1035px]  bg-background border border-card/10 rounded-t-3xl'>
+        <Stepper steps={submissionSteps} />
+        <ProjectSubmissionForm />
+      </section>
+    </section>
+  );
+}
+
+export default page;
diff --git a/components/project/ProjectSubmissionFlow.tsx b/components/project/ProjectSubmissionFlow.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/project/ProjectSubmissionForm.tsx b/components/project/ProjectSubmissionForm.tsx
new file mode 100644
index 000000000..fb14e911e
--- /dev/null
+++ b/components/project/ProjectSubmissionForm.tsx
@@ -0,0 +1,67 @@
+import Image from 'next/image';
+import React from 'react';
+import { Textarea } from '../ui/textarea';
+
+function ProjectSubmissionForm() {
+  return (
+    <div className='text-white'>
+      <h5>Submit your project information</h5>
+      <form action=''>
+        <div>
+          <label htmlFor='' className='text-xs text-card font-medium'>
+            Project Title *
+          </label>
+          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <div>
+              <Image src='/cube.svg' width={20} height={20} alt='cube' />
+            </div>
+            <input
+              type='text'
+              className='font-normal text-base text-placeholder'
+              placeholder='Enter project title'
+            />
+          </div>
+        </div>
+        <div>
+          <label htmlFor='' className='text-xs text-card font-medium'>
+            Project Tagline (Short one-liner)
+          </label>
+          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <input
+              type='text'
+              className='font-normal text-base text-placeholder'
+              placeholder='Enter your one-liner'
+            />
+          </div>
+        </div>
+        <div>
+          <label htmlFor='' className='text-xs text-card font-medium'>
+            Project Description (Rich Text Editor or Markdown supported)
+          </label>
+
+          <Textarea
+            className='font-normal text-base text-placeholder rounded-[12px] bg-stepper-foreground w-full h-[172px] border border-stepper-border'
+            placeholder='Describe your project in a few words'
+          />
+        </div>
+        <div>
+          <label htmlFor='' className='text-xs text-card font-medium'>
+            Funding Goal
+          </label>
+          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <div>
+              <Image src='/cube.svg' width={20} height={20} alt='cube' />
+            </div>
+            <input
+              type='text'
+              className='font-normal text-base text-placeholder'
+              placeholder='Enter project title'
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default ProjectSubmissionForm;
diff --git a/components/project/ProjectSubmissionSuccess.tsx b/components/project/ProjectSubmissionSuccess.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/stepper/Stepper.tsx b/components/stepper/Stepper.tsx
new file mode 100644
index 000000000..748030ea5
--- /dev/null
+++ b/components/stepper/Stepper.tsx
@@ -0,0 +1,89 @@
+import { Check } from 'lucide-react';
+import React from 'react';
+
+type StepState = 'pending' | 'active' | 'completed';
+
+interface Step {
+  title: string;
+  description: string;
+  state: StepState;
+}
+
+interface StepperProps {
+  steps: Step[];
+}
+
+function Stepper({ steps }: StepperProps) {
+  const getStepStyles = (state: StepState) => {
+    switch (state) {
+      case 'completed':
+        return {
+          title: 'text-card',
+          description: 'text-white/60',
+          line: 'border-primary', // Active line for completed steps
+        };
+      case 'active':
+        return {
+          circle:
+            'bg-primary text-background border border-stepper-border-active/25',
+          title: 'text-card',
+          description: 'text-white/60',
+          line: 'border-card/30', // Inactive line for active steps
+        };
+      case 'pending':
+      default:
+        return {
+          circle:
+            'bg-stepper-foreground text-muted-foreground border border-stepper-border',
+          title: 'text-stepper-text-inactive',
+          description: 'text-white/40',
+          line: 'border-card/30', // Inactive line for pending steps
+        };
+    }
+  };
+
+  return (
+    <main className='p-8 flex flex-col w-[400px]'>
+      {steps.map((step, index) => {
+        const styles = getStepStyles(step.state);
+        const isLastStep = index === steps.length - 1;
+
+        return (
+          <figure key={index} className='flex gap-4'>
+            <div className='flex flex-col items-center'>
+              {step.state === 'completed' ? (
+                <div className='size-[46px] bg-primary/25 rounded-full flex items-center justify-center'>
+                  <div className='bg-primary size-[32px] rounded-full flex items-center justify-center'>
+                    <Check className='size-5 text-background' strokeWidth={4} />
+                  </div>
+                </div>
+              ) : (
+                <div
+                  className={`size-[46px] rounded-full flex items-center justify-center font-bold text-xl ${styles.circle}`}
+                >
+                  {index + 1}
+                </div>
+              )}
+              {!isLastStep && (
+                <div
+                  className={`h-[49px] w-[1.5px] border-dashed border-l ${styles.line}`}
+                />
+              )}
+            </div>
+
+            <div className='flex flex-col gap-2 pt-1'>
+              <h4 className={`font-base font-medium ${styles.title}`}>
+                {step.title}
+              </h4>
+              <p className={`font-normal text-sm ${styles.description}`}>
+                {step.description}
+              </p>
+            </div>
+          </figure>
+        );
+      })}
+    </main>
+  );
+}
+
+export default Stepper;
diff --git a/components/stepper/index.ts b/components/stepper/index.ts
new file mode 100644
index 000000000..f312a6227
--- /dev/null
+++ b/components/stepper/index.ts
@@ -0,0 +1 @@
+export { default as Stepper } from './Stepper';
diff --git a/public/cube.svg b/public/cube.svg
new file mode 100644
index 000000000..8816f0c97
--- /dev/null
+++ b/public/cube.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18.3334C9.31818 18.3334 8.66682 18.0582 7.36411 17.5079C4.12137 16.1381 2.5 15.4532 2.5 14.3011L2.5 5.83335M10 18.3334C10.6818 18.3334 11.3332 18.0582 12.6359 17.5079C15.8786 16.1381 17.5 15.4532 17.5 14.3011L17.5 5.83335M10 18.3334L10 9.46239M5 10L6.66667 10.8334M14.1667 3.33335L5.83333 7.50002M4.50393 6.89822L6.93827 8.07617C8.4407 8.80318 9.19191 9.16669 10 9.16669C10.8081 9.16669 11.5593 8.80318 13.0617 8.07617L15.4961 6.89823C16.832 6.25177 17.5 5.92855 17.5 5.41669C17.5 4.90483 16.832 4.5816 15.4961 3.93515L13.0617 2.7572C11.5593 2.03019 10.8081 1.66669 10 1.66669C9.19191 1.66669 8.4407 2.03019 6.93827 2.7572L4.50393 3.93515C3.16798 4.5816 2.5 4.90483 2.5 5.41669C2.5 5.92855 3.16798 6.25177 4.50393 6.89822Z" stroke="white" stroke-opacity="0.6" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/select.svg b/public/select.svg
new file mode 100644
index 000000000..597c380b8
--- /dev/null
+++ b/public/select.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2018_7662)">
+<path d="M5 1H15M3 4C3 4 11.5327 4 17 4M1.97297 7H18.027C19 7 19 7.88889 19 7.88889V17.6667C19 18.1111 19 19 17.5405 19H1.97297C1.64865 19 1 18.8222 1 18.1111V7.88889C1 7.59259 1.19459 7 1.97297 7Z" stroke="white" stroke-opacity="0.6" stroke-width="1.4" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2018_7662">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From c22c2f5250c63a2c24423e8638f130cea4b01b3d Mon Sep 17 00:00:00 2001
From: marvelousmicheal <donatusmarvelous09@gmail.com>
Date: Sat, 2 Aug 2025 05:51:34 +0100
Subject: [PATCH 2/3] feat: added functionality and created the success
 component

---
 app/stepper/page.tsx                          |   6 +-
 components/project/ProjectSubmissionForm.tsx  | 395 ++++++++++++++++--
 .../project/ProjectSubmissionSuccess.tsx      |  30 ++
 lib/utils.ts                                  |  12 +
 public/dollar-sign.svg                        |   3 +
 public/done-check.svg                         |  18 +
 public/green-circle.svg                       |   3 +
 public/tag.svg                                |   3 +
 public/upload.svg                             |   3 +
 9 files changed, 443 insertions(+), 30 deletions(-)
 create mode 100644 public/dollar-sign.svg
 create mode 100644 public/done-check.svg
 create mode 100644 public/green-circle.svg
 create mode 100644 public/tag.svg
 create mode 100644 public/upload.svg

diff --git a/app/stepper/page.tsx b/app/stepper/page.tsx
index 855758421..5e1a70160 100644
--- a/app/stepper/page.tsx
+++ b/app/stepper/page.tsx
@@ -23,9 +23,11 @@ const submissionSteps = [
 function page() {
   return (
     <section className='bg-red-500'>
-      <section className='w-[1284px] h-[1035px]  bg-background border border-card/10 rounded-t-3xl'>
+      <section className='w-[1284px] h-[1035px]   bg-background border border-card/10 rounded-t-3xl flex'>
         <Stepper steps={submissionSteps} />
-        <ProjectSubmissionForm />
+        <div className='h-full w-[884px] p-8 flex justify-center'>
+          <ProjectSubmissionForm />
+        </div>
       </section>
     </section>
   );
diff --git a/components/project/ProjectSubmissionForm.tsx b/components/project/ProjectSubmissionForm.tsx
index fb14e911e..529bb8dbd 100644
--- a/components/project/ProjectSubmissionForm.tsx
+++ b/components/project/ProjectSubmissionForm.tsx
@@ -1,64 +1,403 @@
+'use client';
+
 import Image from 'next/image';
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { Textarea } from '../ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { formatBytes } from '@/lib/utils';
+import { Badge } from '../ui/badge';
+import { Trash, X } from 'lucide-react';
+
+// Dummy data for the Select components
+const fundingGoals = [
+  { value: 'seed', label: 'Seed Round' },
+  { value: 'series-a', label: 'Series A' },
+  { value: 'public-sale', label: 'Public Sale' },
+  { value: 'community-pool', label: 'Community Pool' },
+];
+
+const projectTags = [
+  { value: 'defi', label: 'DeFi' },
+  { value: 'gaming', label: 'Gaming' },
+  { value: 'nft', label: 'NFT' },
+  { value: 'infrastructure', label: 'Infrastructure' },
+  { value: 'public-good', label: 'Public Good' },
+];
 
 function ProjectSubmissionForm() {
+  // State for all form fields
+  const [projectTitle, setProjectTitle] = useState('');
+  const [projectTagline, setProjectTagline] = useState('');
+  const [projectDescription, setProjectDescription] = useState('');
+  const [fundingGoal, setFundingGoal] = useState('');
+  const [fundAmount, setFundAmount] = useState('');
+  const [whitepaperFile, setWhitepaperFile] = useState<FileList | null>(null);
+  const [thumbnailFile, setThumbnailFile] = useState<FileList | null>(null);
+  const [tags, setTags] = useState<string[]>([]);
+
+  // Refs for file inputs
+  const whitepaperInputRef = useRef<HTMLInputElement>(null);
+  const thumbnailInputRef = useRef<HTMLInputElement>(null);
+
+  // Tag handlers
+  const handleAddTag = (tag: string) => {
+    if (tag && !tags.includes(tag)) {
+      setTags([...tags, tag]);
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter(tag => tag !== tagToRemove));
+  };
+
+  // File removal handler
+  const handleRemoveFile = (fileType: 'whitepaper' | 'thumbnail') => {
+    if (fileType === 'whitepaper') {
+      setWhitepaperFile(null);
+      if (whitepaperInputRef.current) {
+        whitepaperInputRef.current.value = '';
+      }
+    } else if (fileType === 'thumbnail') {
+      setThumbnailFile(null);
+      if (thumbnailInputRef.current) {
+        thumbnailInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Form submission handler
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = {
+      projectTitle,
+      projectTagline,
+      projectDescription,
+      fundingGoal,
+      fundAmount,
+      whitepaper: whitepaperFile?.[0],
+      thumbnail: thumbnailFile?.[0],
+      tags,
+    };
+    console.log('Form data submitted:', formData);
+  };
+
   return (
     <div className='text-white'>
       <h5>Submit your project information</h5>
-      <form action=''>
-        <div>
-          <label htmlFor='' className='text-xs text-card font-medium'>
-            Project Title *
+      <form
+        onSubmit={handleSubmit}
+        className='w-[500px] flex flex-col gap-3 pt-3 pb-6'
+      >
+        {/* Project Title */}
+        <div className='flex flex-col gap-1'>
+          <label className='text-xs text-card font-medium'>
+            Project Title <span className='text-red-500'>*</span>
           </label>
-          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
-            <div>
-              <Image src='/cube.svg' width={20} height={20} alt='cube' />
-            </div>
+          <div className='w-full h-12 flex items-center gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <Image src='/cube.svg' width={20} height={20} alt='icon' />
             <input
+              value={projectTitle}
+              onChange={e => setProjectTitle(e.target.value)}
               type='text'
-              className='font-normal text-base text-placeholder'
+              className='w-full bg-transparent font-normal text-base text-placeholder focus:outline-none'
               placeholder='Enter project title'
             />
           </div>
         </div>
-        <div>
-          <label htmlFor='' className='text-xs text-card font-medium'>
-            Project Tagline (Short one-liner)
+
+        {/* Project Tagline */}
+        <div className='flex flex-col gap-1'>
+          <label className='text-xs text-card font-medium'>
+            Project Tagline <span className='text-red-500'>*</span>
           </label>
-          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+          <div className='w-full h-12 flex items-center gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
             <input
+              value={projectTagline}
+              onChange={e => setProjectTagline(e.target.value)}
               type='text'
-              className='font-normal text-base text-placeholder'
+              className='w-full bg-transparent font-normal text-base text-placeholder focus:outline-none'
               placeholder='Enter your one-liner'
             />
           </div>
         </div>
-        <div>
-          <label htmlFor='' className='text-xs text-card font-medium'>
-            Project Description (Rich Text Editor or Markdown supported)
-          </label>
 
+        {/* Project Description */}
+        <div className='flex flex-col gap-1'>
+          <label className='text-xs text-card font-medium flex justify-between'>
+            <span>
+              Project Description <span className='text-red-500'>*</span>
+            </span>
+            <span className='text-card/60'>
+              {projectDescription.length}/400
+            </span>
+          </label>
           <Textarea
-            className='font-normal text-base text-placeholder rounded-[12px] bg-stepper-foreground w-full h-[172px] border border-stepper-border'
+            value={projectDescription}
+            onChange={e => setProjectDescription(e.target.value)}
+            maxLength={400}
+            className='resize-none font-normal text-base text-placeholder rounded-[12px] bg-stepper-foreground w-full min-h-[120px] border border-stepper-border focus-visible:ring-0'
             placeholder='Describe your project in a few words'
           />
         </div>
-        <div>
+
+        {/* Funding Goal */}
+        <div className='flex flex-col gap-1'>
+          <label className='text-xs text-card font-medium'>
+            Funding Goal <span className='text-red-500'>*</span>
+          </label>
+          <Select onValueChange={setFundingGoal} value={fundingGoal}>
+            <SelectTrigger className='w-full !h-12 flex items-center !gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border focus:ring-0'>
+              <div className='flex items-center gap-2'>
+                <Image src='/select.svg' width={20} height={20} alt='icon' />
+                <SelectValue placeholder='Select a funding goal' />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              {fundingGoals.map(goal => (
+                <SelectItem key={goal.value} value={goal.value}>
+                  {goal.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Fund Amount */}
+        <div className='flex flex-col gap-1'>
+          <label className='text-xs text-card font-medium'>
+            Fund Amount <span className='text-red-500'>*</span>
+          </label>
+          <div className='w-full h-12 flex items-center gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <Image src='/dollar-sign.svg' width={20} height={20} alt='icon' />
+            <input
+              value={fundAmount}
+              onChange={e => setFundAmount(e.target.value)}
+              type='number'
+              className='w-full bg-transparent font-normal text-base text-placeholder focus:outline-none'
+              placeholder='Enter the amount'
+            />
+          </div>
+        </div>
+
+        {/* Upload Whitepaper */}
+        <div className='flex flex-col gap-1'>
           <label htmlFor='' className='text-xs text-card font-medium'>
-            Funding Goal
+            Upload Whitepaper or Detailed Proposal{' '}
+            <span className='text-red-500'>*</span>
           </label>
-          <div className='w-full h-12 flex gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
-            <div>
-              <Image src='/cube.svg' width={20} height={20} alt='cube' />
+          <div className='w-full h-[83px] flex justify-between p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <div className='flex gap-3 items-center'>
+              <div className='bg-card size-12 rounded-full justify-center items-center flex'>
+                {whitepaperFile && whitepaperFile.length > 0 ? (
+                  <Image
+                    src='/green-circle.svg'
+                    width={24}
+                    height={24}
+                    alt='upload'
+                  />
+                ) : (
+                  <Image
+                    src='/upload.svg'
+                    width={24}
+                    height={24}
+                    alt='upload'
+                  />
+                )}
+              </div>
+              <div className='space-y-1'>
+                {whitepaperFile && whitepaperFile.length > 0 ? (
+                  <>
+                    <h5 className='font-semibold text-card text-base'>
+                      {whitepaperFile[0].name}
+                    </h5>
+                    <p className='font-normal text-sm text-[#40B869] flex gap-0.5 items-center'>
+                      Upload complete
+                      <div className='size-1 bg-placeholder rounded-full' />
+                      <span className='text-placeholder'>
+                        {formatBytes(whitepaperFile[0].size)}
+                      </span>
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <h5 className='font-semibold text-card text-base'>
+                      Upload your document
+                    </h5>
+                    <p className='font-normal text-sm text-placeholder flex gap-0.5 items-center'>
+                      PDF, Docs{' '}
+                      <span className='size-1 bg-placeholder rounded-full'></span>
+                      Max. 20MB
+                    </p>
+                  </>
+                )}
+              </div>
             </div>
             <input
-              type='text'
-              className='font-normal text-base text-placeholder'
-              placeholder='Enter project title'
+              type='file'
+              className='hidden'
+              ref={whitepaperInputRef}
+              onChange={e => setWhitepaperFile(e.target.files)}
+              accept='.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
             />
+            {whitepaperFile && whitepaperFile.length > 0 ? (
+              <button
+                type='button'
+                className='text-base font-normal text-background bg-transparent px-4 py-2 rounded-[10px]'
+                onClick={() => handleRemoveFile('whitepaper')}
+              >
+                <Trash className='text-red-500' />
+              </button>
+            ) : (
+              <button
+                type='button'
+                className='text-base font-normal text-background bg-primary px-4 py-2 rounded-[10px]'
+                onClick={() => whitepaperInputRef.current?.click()}
+              >
+                Upload
+              </button>
+            )}
           </div>
         </div>
+
+        {/* Upload Project Thumbnail */}
+        <div className='flex flex-col gap-1'>
+          <label htmlFor='' className='text-xs text-card font-medium'>
+            Upload Project Thumbnail <span className='text-red-500'>*</span>
+          </label>
+          <div className='w-full h-[83px] flex justify-between p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border'>
+            <div className='flex gap-3 items-center'>
+              <div className='bg-card size-12 rounded-full justify-center items-center flex'>
+                {thumbnailFile && thumbnailFile.length > 0 ? (
+                  <Image
+                    src='/green-circle.svg'
+                    width={24}
+                    height={24}
+                    alt='upload'
+                  />
+                ) : (
+                  <Image
+                    src='/upload.svg'
+                    width={24}
+                    height={24}
+                    alt='upload'
+                  />
+                )}
+              </div>
+              <div className='space-y-1'>
+                {thumbnailFile && thumbnailFile.length > 0 ? (
+                  <>
+                    <h5 className='font-semibold text-card text-base'>
+                      {thumbnailFile[0].name}
+                    </h5>
+                    <p className='font-normal text-sm text-[#40B869] flex gap-0.5 items-center'>
+                      Upload complete
+                      <div className='size-1 bg-placeholder rounded-full' />
+                      <span className='text-placeholder'>
+                        {formatBytes(thumbnailFile[0].size)}
+                      </span>
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <h5 className='font-semibold text-card text-base'>
+                      Upload your image
+                    </h5>
+                    <p className='font-normal text-sm text-placeholder flex gap-0.5 items-center'>
+                      JPG, PNG, GIF{' '}
+                      <span className='size-1 bg-placeholder rounded-full'></span>
+                      Max. 5MB
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+            <input
+              type='file'
+              className='hidden'
+              ref={thumbnailInputRef}
+              onChange={e => setThumbnailFile(e.target.files)}
+              accept='image/png, image/jpeg, image/gif'
+            />
+            {thumbnailFile && thumbnailFile.length > 0 ? (
+              <button
+                type='button'
+                className='text-base font-normal text-background bg-transparent px-4 py-2 rounded-[10px]'
+                onClick={() => handleRemoveFile('thumbnail')}
+              >
+                <Trash className='text-red-500' />
+              </button>
+            ) : (
+              <button
+                type='button'
+                className='text-base font-normal text-background bg-primary px-4 py-2 rounded-[10px]'
+                onClick={() => thumbnailInputRef.current?.click()}
+              >
+                Upload
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Add Tags */}
+        <div className='flex flex-col gap-2'>
+          <label className='text-xs text-card font-medium flex items-center justify-between'>
+            Add Tags <span className='text-placeholder'>Optional</span>
+          </label>
+          <div className='relative'>
+            <Select onValueChange={handleAddTag}>
+              <SelectTrigger className='w-full !h-12 flex items-center !gap-3 p-4 rounded-[12px] bg-stepper-foreground border border-stepper-border focus:ring-0'>
+                <div className='flex items-center gap-2'>
+                  <Image src='/tag.svg' width={20} height={20} alt='icon' />
+                  <SelectValue placeholder='Select a tag' />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                {projectTags.map(tag => (
+                  <SelectItem
+                    key={tag.value}
+                    value={tag.value}
+                    disabled={tags.includes(tag.value)}
+                  >
+                    {tag.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {tags.length > 0 && (
+              <div className='absolute top-1/2 left-12 -translate-y-1/2 flex flex-wrap gap-2 items-center pointer-events-none'>
+                {tags.map(tag => (
+                  <Badge
+                    key={tag}
+                    className='flex items-center gap-1 pointer-events-auto bg-background text-card'
+                  >
+                    {projectTags.find(t => t.value === tag)?.label || tag}
+                    <button
+                      type='button'
+                      className='ml-1 rounded-full outline-none hover:bg-destructive/20'
+                      onClick={() => handleRemoveTag(tag)}
+                    >
+                      <X className='size-3' />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <button
+          type='submit'
+          className='border border-stepper-border  w-[171px] mt-4 text-base font-medium text-card/30 bg-stepper-foreground px-4 py-2 rounded-[10px]'
+        >
+          Submit for Review
+        </button>
       </form>
     </div>
   );
diff --git a/components/project/ProjectSubmissionSuccess.tsx b/components/project/ProjectSubmissionSuccess.tsx
index e69de29bb..cc3683512 100644
--- a/components/project/ProjectSubmissionSuccess.tsx
+++ b/components/project/ProjectSubmissionSuccess.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import React from 'react';
+
+function ProjectSubmissionSuccess() {
+  return (
+    <main className='w-[600px] flex flex-col gap-6 items-center justify-center'>
+      <h5 className='font-medium text-xl text-card'>Project Submitted!</h5>
+      <div className=''>
+        <Image width={150} height={150} src='/done-check.svg' alt='done' />
+      </div>
+      <article>
+        <p className='text-base font-normal text-card/60 text-center'>
+          Your project has been submitted and is now under admin review. You’ll
+          receive an update within 72 hours. Once approved, your project will
+          proceed to public validation.
+        </p>
+        <p className='text-base font-normal text-card/60'>
+          You can track the status of your submission anytime on the{' '}
+          <span className='text-primary'>Projects page.</span>
+        </p>
+      </article>
+
+      <button className='  w-[198px] mt-4 text-base font-medium text-background bg-primary px-16 py-2 rounded-[10px]'>
+        Continue
+      </button>
+    </main>
+  );
+}
+
+export default ProjectSubmissionSuccess;
diff --git a/lib/utils.ts b/lib/utils.ts
index aed7c9c93..049e54e95 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -74,3 +74,15 @@ export const formatMillions = (value: number): string => {
   }
   return formatCurrency(value);
 };
+
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
diff --git a/public/dollar-sign.svg b/public/dollar-sign.svg
new file mode 100644
index 000000000..a9de442fa
--- /dev/null
+++ b/public/dollar-sign.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 13.3333C5 15.1742 6.49238 16.6666 8.33333 16.6666H11.6667C13.5076 16.6666 15 15.1742 15 13.3333C15 11.4923 13.5076 9.99996 11.6667 9.99996H8.33333C6.49238 9.99996 5 8.50758 5 6.66663C5 4.82568 6.49238 3.33329 8.33333 3.33329H11.6667C13.5076 3.33329 15 4.82568 15 6.66663M10 1.66663V18.3333" stroke="white" stroke-opacity="0.6" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/done-check.svg b/public/done-check.svg
new file mode 100644
index 000000000..9abfda01f
--- /dev/null
+++ b/public/done-check.svg
@@ -0,0 +1,18 @@
+<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_422_19709)">
+<path d="M75 137.5C109.518 137.5 137.5 109.518 137.5 75C137.5 40.4822 109.518 12.5 75 12.5C40.4822 12.5 12.5 40.4822 12.5 75C12.5 109.518 40.4822 137.5 75 137.5Z" fill="#E7F6EC"/>
+<path d="M46.875 75L65.625 93.75L103.125 56.25M137.5 75C137.5 109.518 109.518 137.5 75 137.5C40.4822 137.5 12.5 109.518 12.5 75C12.5 40.4822 40.4822 12.5 75 12.5C109.518 12.5 137.5 40.4822 137.5 75Z" stroke="#0F973D" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_422_19709" x="-4" y="0" width="158" height="158" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_19709"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_19709" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/green-circle.svg b/public/green-circle.svg
new file mode 100644
index 000000000..85379fe8a
--- /dev/null
+++ b/public/green-circle.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 26.75C21.2132 26.75 26.25 21.7132 26.25 15.5C26.25 9.2868 21.2132 4.25 15 4.25C8.7868 4.25 3.75 9.2868 3.75 15.5C3.75 21.7132 8.7868 26.75 15 26.75ZM19.5943 13.9218C20.1034 13.4555 20.1381 12.6649 19.6718 12.1557C19.2055 11.6466 18.4149 11.6119 17.9057 12.0782L13.2907 16.305L12.0943 15.2092C11.5852 14.743 10.7945 14.7777 10.3282 15.2868C9.86192 15.7959 9.89664 16.5866 10.4057 17.0529L12.4464 18.9218C12.9242 19.3594 13.6571 19.3594 14.1349 18.9218L19.5943 13.9218Z" fill="#0F973D"/>
+</svg>
diff --git a/public/tag.svg b/public/tag.svg
new file mode 100644
index 000000000..277c8891a
--- /dev/null
+++ b/public/tag.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 9.16663L11.1716 2.8382C10.7392 2.40582 10.523 2.18963 10.2707 2.03503C10.047 1.89795 9.80317 1.79694 9.54808 1.7357C9.26036 1.66663 8.95462 1.66663 8.34314 1.66663L5 1.66663M2.5 7.24996L2.5 8.89539C2.5 9.30304 2.5 9.50687 2.54605 9.69868C2.58688 9.86874 2.65422 10.0313 2.7456 10.1804C2.84867 10.3486 2.9928 10.4928 3.28105 10.781L9.78105 17.281C10.4411 17.941 10.7711 18.2711 11.1516 18.3947C11.4864 18.5035 11.847 18.5035 12.1817 18.3947C12.5622 18.2711 12.8923 17.941 13.5523 17.281L15.6144 15.2189C16.2744 14.5589 16.6044 14.2289 16.7281 13.8483C16.8368 13.5136 16.8368 13.153 16.7281 12.8183C16.6044 12.4377 16.2744 12.1077 15.6144 11.4477L9.53105 5.36434C9.2428 5.07609 9.09867 4.93196 8.93048 4.82889C8.78135 4.73751 8.61878 4.67017 8.44872 4.62934C8.25691 4.58329 8.05308 4.58329 7.64543 4.58329H5.16667C4.23325 4.58329 3.76654 4.58329 3.41002 4.76495C3.09641 4.92474 2.84145 5.17971 2.68166 5.49331C2.5 5.84983 2.5 6.31654 2.5 7.24996Z" stroke="white" stroke-opacity="0.6" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/upload.svg b/public/upload.svg
new file mode 100644
index 000000000..aa46c4ed3
--- /dev/null
+++ b/public/upload.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 16.7422C2.79401 15.935 2 14.5602 2 13C2 10.6564 3.79151 8.73129 6.07974 8.51937C6.54781 5.67213 9.02024 3.5 12 3.5C14.9798 3.5 17.4522 5.67213 17.9203 8.51937C20.2085 8.73129 22 10.6564 22 13C22 14.5602 21.206 15.935 20 16.7422M8 16.5L12 12.5M12 12.5L16 16.5M12 12.5V21.5" stroke="#1B1B1B" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From a03e720125a639b82777b2ebfd2325a8266d7e22 Mon Sep 17 00:00:00 2001
From: marvelousmicheal <donatusmarvelous09@gmail.com>
Date: Wed, 6 Aug 2025 23:48:40 +0100
Subject: [PATCH 3/3] feat: created the remanin compoents

---
 app/stepper/page.tsx                          | 36 -------
 components/layout/header.tsx                  | 69 ++++++++++++-
 components/project/ProjectSubmissionFlow.tsx  | 89 +++++++++++++++++
 components/project/ProjectSubmissionForm.tsx  | 98 ++++++++++++++++---
 .../project/ProjectSubmissionLoading.tsx      | 14 +++
 5 files changed, 254 insertions(+), 52 deletions(-)
 delete mode 100644 app/stepper/page.tsx
 create mode 100644 components/project/ProjectSubmissionLoading.tsx

diff --git a/app/stepper/page.tsx b/app/stepper/page.tsx
deleted file mode 100644
index 5e1a70160..000000000
--- a/app/stepper/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import ProjectSubmissionForm from '@/components/project/ProjectSubmissionForm';
-import { Stepper } from '@/components/stepper';
-import React from 'react';
-
-const submissionSteps = [
-  {
-    title: 'Initialize',
-    description: 'Submit your project idea to kickstart your campaign journey.',
-    state: 'completed' as const,
-  },
-  {
-    title: 'Project Details',
-    description: 'Provide detailed information about your project.',
-    state: 'active' as const,
-  },
-  {
-    title: 'Review & Submit',
-    description: 'Review your submission and finalize your entry.',
-    state: 'pending' as const,
-  },
-];
-
-function page() {
-  return (
-    <section className='bg-red-500'>
-      <section className='w-[1284px] h-[1035px]   bg-background border border-card/10 rounded-t-3xl flex'>
-        <Stepper steps={submissionSteps} />
-        <div className='h-full w-[884px] p-8 flex justify-center'>
-          <ProjectSubmissionForm />
-        </div>
-      </section>
-    </section>
-  );
-}
-
-export default page;
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 1d2c99af5..e3440755f 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -8,9 +8,71 @@ import { SidebarTrigger } from '../ui/sidebar';
 import Image from 'next/image';
 import BoundlessSheet from '../sheet/boundless-sheet';
 import WalletConnectButton from '../wallet/WalletConnectButton';
+import ProjectSubmissionForm from '../project/ProjectSubmissionForm';
+import ProjectSubmissionLoading from '../project/ProjectSubmissionLoading';
+import ProjectSubmissionSuccess from '../project/ProjectSubmissionSuccess';
+import { Stepper } from '../stepper';
+
+type Step = {
+  title: string;
+  description: string;
+  state: 'pending' | 'active' | 'completed';
+};
+
+const initialSteps: Step[] = [
+  {
+    title: 'Initialize',
+    description: 'Submit your project idea to kickstart your campaign journey.',
+    state: 'active',
+  },
+  {
+    title: 'Project Details',
+    description: 'Provide detailed information about your project.',
+    state: 'pending',
+  },
+  {
+    title: 'Review & Submit',
+    description: 'Review your submission and finalize your entry.',
+    state: 'pending',
+  },
+];
 
 const Header = () => {
   const [open, setOpen] = useState(false);
+  const [submissionStatus, setSubmissionStatus] = useState('idle');
+  const [steps, setSteps] = useState<Step[]>(initialSteps);
+
+  const handleSuccess = () => {
+    setSubmissionStatus('success');
+    setSteps(prevSteps =>
+      prevSteps.map((step, index) => {
+        if (index === 0) {
+          return { ...step, state: 'completed' };
+        }
+        if (index === 1) {
+          return { ...step, state: 'active' };
+        }
+        return step;
+      })
+    );
+  };
+
+  const renderContent = () => {
+    switch (submissionStatus) {
+      case 'submitting':
+        return <ProjectSubmissionLoading />;
+      case 'success':
+        return <ProjectSubmissionSuccess />;
+      default:
+        return (
+          <ProjectSubmissionForm
+            onSuccess={handleSuccess}
+            setSubmissionStatus={setSubmissionStatus}
+          />
+        );
+    }
+  };
+
   return (
     <header className='bg-transparent border-none flex flex-col sm:flex-row shrink-0 items-start sm:items-center gap-4 px-4 sm:px-6 lg:px-8 py-4 sm:py-6 sticky top-0 z-50'>
       {/* Mobile Menu Trigger - Only visible on mobile */}
@@ -51,7 +113,12 @@ const Header = () => {
         {/* Connect Wallet Button */}
         <WalletConnectButton />
       </div>
-      <BoundlessSheet open={open} setOpen={setOpen} />
+      <BoundlessSheet open={open} setOpen={setOpen}>
+        <div className='flex'>
+          <Stepper steps={steps} />
+          <div className='flex-1'>{renderContent()}</div>
+        </div>
+      </BoundlessSheet>
     </header>
   );
 };
diff --git a/components/project/ProjectSubmissionFlow.tsx b/components/project/ProjectSubmissionFlow.tsx
index e69de29bb..7737c8794 100644
--- a/components/project/ProjectSubmissionFlow.tsx
+++ b/components/project/ProjectSubmissionFlow.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import React, { useState } from 'react';
+import BoundlessSheet from '../sheet/boundless-sheet';
+import Stepper from '../stepper/Stepper';
+import ProjectSubmissionForm from './ProjectSubmissionForm';
+import ProjectSubmissionSuccess from './ProjectSubmissionSuccess';
+import ProjectSubmissionLoading from './ProjectSubmissionLoading';
+
+type StepState = 'active' | 'pending' | 'completed';
+
+type Step = {
+  title: string;
+  description: string;
+  state: StepState;
+};
+
+const steps: Step[] = [
+  {
+    title: 'Initialize',
+    description: 'Submit your project idea to kickstart your campaign journey.',
+    state: 'active',
+  },
+  {
+    title: 'Validate',
+    description: 'Get admin approval and gather public support through voting.',
+    state: 'pending',
+  },
+  {
+    title: 'Launch Campaign',
+    description: 'Set milestones, activate escrow, and start receiving funds.',
+    state: 'pending',
+  },
+];
+
+function ProjectSubmissionFlow() {
+  const [open, setOpen] = useState(false);
+  const [stepperState, setStepperState] = useState<Step[]>(steps);
+  const [submissionStatus, setSubmissionStatus] = useState('idle');
+
+  const handleSuccess = () => {
+    setSubmissionStatus('success');
+    const newSteps = stepperState.map((step, index) => {
+      if (index === 0) {
+        return { ...step, state: 'completed' as const };
+      }
+      if (index === 1) {
+        return { ...step, state: 'active' as const };
+      }
+      return step;
+    });
+    setStepperState(newSteps);
+  };
+
+  const renderContent = () => {
+    switch (submissionStatus) {
+      case 'submitting':
+        return <ProjectSubmissionLoading />;
+      case 'success':
+        return <ProjectSubmissionSuccess />;
+      default:
+        return (
+          <ProjectSubmissionForm
+            onSuccess={handleSuccess}
+            setSubmissionStatus={setSubmissionStatus}
+          />
+        );
+    }
+  };
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(true)}
+        className='bg-primary text-background p-2 rounded'
+      >
+        Submit Project
+      </button>
+      <BoundlessSheet open={open} setOpen={setOpen} title=''>
+        <div className='flex'>
+          <Stepper steps={stepperState} />
+          <div className='flex-1'>{renderContent()}</div>
+        </div>
+      </BoundlessSheet>
+    </div>
+  );
+}
+
+export default ProjectSubmissionFlow;
diff --git a/components/project/ProjectSubmissionForm.tsx b/components/project/ProjectSubmissionForm.tsx
index 529bb8dbd..035ebab45 100644
--- a/components/project/ProjectSubmissionForm.tsx
+++ b/components/project/ProjectSubmissionForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Image from 'next/image';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Textarea } from '../ui/textarea';
 import {
   Select,
@@ -13,6 +13,7 @@ import {
 import { formatBytes } from '@/lib/utils';
 import { Badge } from '../ui/badge';
 import { Trash, X } from 'lucide-react';
+import { toast } from 'sonner';
 
 // Dummy data for the Select components
 const fundingGoals = [
@@ -30,7 +31,15 @@ const projectTags = [
   { value: 'public-good', label: 'Public Good' },
 ];
 
-function ProjectSubmissionForm() {
+interface ProjectSubmissionFormProps {
+  onSuccess: () => void;
+  setSubmissionStatus: (status: 'idle' | 'submitting' | 'success') => void;
+}
+
+function ProjectSubmissionForm({
+  onSuccess,
+  setSubmissionStatus,
+}: ProjectSubmissionFormProps) {
   // State for all form fields
   const [projectTitle, setProjectTitle] = useState('');
   const [projectTagline, setProjectTagline] = useState('');
@@ -40,11 +49,35 @@ function ProjectSubmissionForm() {
   const [whitepaperFile, setWhitepaperFile] = useState<FileList | null>(null);
   const [thumbnailFile, setThumbnailFile] = useState<FileList | null>(null);
   const [tags, setTags] = useState<string[]>([]);
+  const [isFormValid, setIsFormValid] = useState(false);
 
   // Refs for file inputs
   const whitepaperInputRef = useRef<HTMLInputElement>(null);
   const thumbnailInputRef = useRef<HTMLInputElement>(null);
 
+  // Check form validity
+  useEffect(() => {
+    const allFieldsFilled =
+      projectTitle.trim() !== '' &&
+      projectTagline.trim() !== '' &&
+      projectDescription.trim() !== '' &&
+      fundingGoal.trim() !== '' &&
+      fundAmount.trim() !== '' &&
+      whitepaperFile !== null &&
+      whitepaperFile.length > 0 &&
+      thumbnailFile !== null &&
+      thumbnailFile.length > 0;
+    setIsFormValid(allFieldsFilled);
+  }, [
+    projectTitle,
+    projectTagline,
+    projectDescription,
+    fundingGoal,
+    fundAmount,
+    whitepaperFile,
+    thumbnailFile,
+  ]);
+
   // Tag handlers
   const handleAddTag = (tag: string) => {
     if (tag && !tags.includes(tag)) {
@@ -72,19 +105,49 @@ function ProjectSubmissionForm() {
   };
 
   // Form submission handler
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const formData = {
-      projectTitle,
-      projectTagline,
-      projectDescription,
-      fundingGoal,
-      fundAmount,
-      whitepaper: whitepaperFile?.[0],
-      thumbnail: thumbnailFile?.[0],
-      tags,
-    };
-    console.log('Form data submitted:', formData);
+    if (!isFormValid) return;
+
+    setSubmissionStatus('submitting');
+    toast.loading('Submitting your project...');
+
+    const formData = new FormData();
+    formData.append('name', projectTitle);
+    formData.append('tagline', projectTagline);
+    formData.append('description', projectDescription);
+    formData.append('funding_goal', fundingGoal);
+    formData.append('fund_amount', fundAmount);
+    formData.append('tags', JSON.stringify(tags));
+    if (whitepaperFile) {
+      formData.append('whitepaper', whitepaperFile[0]);
+    }
+    if (thumbnailFile) {
+      formData.append('thumbnail', thumbnailFile[0]);
+    }
+
+    try {
+      const response = await fetch(
+        'https://www.api.boundlessfi.xyz/api/projects',
+        {
+          method: 'POST',
+          body: formData,
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Project submission failed');
+      }
+
+      toast.dismiss();
+      toast.success('Project submitted successfully!');
+      onSuccess();
+    } catch (error) {
+      console.error('Submission error:', error);
+      toast.dismiss();
+      toast.error('Failed to submit project. Please try again.');
+      setSubmissionStatus('idle');
+    }
   };
 
   return (
@@ -394,7 +457,12 @@ function ProjectSubmissionForm() {
 
         <button
           type='submit'
-          className='border border-stepper-border  w-[171px] mt-4 text-base font-medium text-card/30 bg-stepper-foreground px-4 py-2 rounded-[10px]'
+          disabled={!isFormValid}
+          className={`w-[171px] mt-4 text-base font-medium px-4 py-2 rounded-[10px] transition-colors ${
+            isFormValid
+              ? 'bg-primary text-background border border-primary'
+              : 'bg-stepper-foreground text-card/30 border border-stepper-border cursor-not-allowed'
+          }`}
         >
           Submit for Review
         </button>
diff --git a/components/project/ProjectSubmissionLoading.tsx b/components/project/ProjectSubmissionLoading.tsx
new file mode 100644
index 000000000..7a8e3ce8f
--- /dev/null
+++ b/components/project/ProjectSubmissionLoading.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ProjectSubmissionLoading = () => {
+  return (
+    <div className='flex flex-col items-center justify-center gap-4'>
+      <div className='w-16 h-16 border-4 border-dashed rounded-full animate-spin border-primary'></div>
+      <p className='text-lg font-medium text-white'>
+        Submitting your project...
+      </p>
+    </div>
+  );
+};
+
+export default ProjectSubmissionLoading;