this is how the next step should look like. extra options should be disp

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

@@ -7,9 +7,17 @@ import { Step3ProjectStage } from './step-3-project-stage';
 import { Step4DesignProcess } from './step-4-design-process';
 import { Step5PageCount } from './step-5-page-count';
 import { Step6Animations } from './step-6-animations';
+import { Step7Illustrations } from './step-7-illustrations';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
+export type IllustrationSelection = {
+  has2d: boolean;
+  is2dAnimated: 'static' | 'animated' | null;
+  has3d: boolean;
+  is3dAnimated: 'static' | 'animated' | null;
+};
+
 export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
@@ -17,6 +25,7 @@ export type FormData = {
   designProcess: 'custom' | 'mockups' | 'existing' | null;
   pageCount: number;
   animatedElements: boolean | null;
+  illustrations: IllustrationSelection;
 };
 
 export function CostEstimatorForm() {
@@ -28,6 +37,12 @@ export function CostEstimatorForm() {
     designProcess: null,
     pageCount: 0,
     animatedElements: null,
+    illustrations: {
+      has2d: false,
+      is2dAnimated: null,
+      has3d: false,
+      is3dAnimated: null,
+    },
   });
   const [isPending, startTransition] = useTransition();
 
@@ -101,6 +116,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+       case 7:
+        return (
+          <Step7Illustrations
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType