this is how the next step should look like.

option 1: Custom interface

src/components/cost-estimator/cost-estimator-form.tsx

@@ -4,6 +4,7 @@ import React, { useState, useTransition } from 'react';
 import { Step1ProjectType } from './step-1-project-type';
 import { Step2ServiceType } from './step-2-service-type';
 import { Step3ProjectStage } from './step-3-project-stage';
+import { Step4DesignProcess } from './step-4-design-process';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -11,6 +12,7 @@ export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
   projectStage: number;
+  designProcess: 'custom' | 'mockups' | 'existing' | null;
 };
 
 export function CostEstimatorForm() {
@@ -19,6 +21,7 @@ export function CostEstimatorForm() {
     projectType: null,
     serviceType: null,
     projectStage: 0,
+    designProcess: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -65,6 +68,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+      case 4:
+        return (
+          <Step4DesignProcess
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType