Feature/project submission UI

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

components/layout/header.tsx

@@ -10,9 +10,70 @@ import BoundlessSheet from '../sheet/boundless-sheet';
 import { motion } from 'framer-motion';
 import { fadeInUp, slideInFromLeft, slideInFromRight } from '@/lib/motion';
 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 (
     <motion.header
@@ -96,7 +157,12 @@ const Header = () => {
         </motion.div>
       </motion.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>
     </motion.header>
   );
 };

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;