the next step should look like this

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

@@ -8,6 +8,7 @@ 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 { Step8Branding } from './step-8-branding';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -18,6 +19,8 @@ export type IllustrationSelection = {
   is3dAnimated: 'static' | 'animated' | null;
 };
 
+export type BrandingSelection = 'full-cycle' | 'brush-up' | 'logo-only' | 'none' | null;
+
 export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
@@ -26,6 +29,7 @@ export type FormData = {
   pageCount: number;
   animatedElements: boolean | null;
   illustrations: IllustrationSelection;
+  branding: BrandingSelection;
 };
 
 export function CostEstimatorForm() {
@@ -43,6 +47,7 @@ export function CostEstimatorForm() {
       has3d: false,
       is3dAnimated: null,
     },
+    branding: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -125,6 +130,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+      case 8:
+        return (
+            <Step8Branding
+                onNext={handleNextStep}
+                onBack={handlePrevStep}
+                onUpdateData={handleUpdateFormData}
+                formData={formData}
+            />
+        );
       default:
         return (
           <Step1ProjectType