this is how step 2 should look like

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

@@ -2,18 +2,20 @@
 
 import React, { useState, useTransition } from 'react';
 import { Step1ProjectType } from './step-1-project-type';
+import { Step2ServiceType } from './step-2-service-type';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
 export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
-  // Add more fields for subsequent steps
+  serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
 };
 
 export function CostEstimatorForm() {
   const [currentStep, setCurrentStep] = useState(1);
   const [formData, setFormData] = useState<FormData>({
     projectType: null,
+    serviceType: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -38,12 +40,11 @@ export function CostEstimatorForm() {
         );
       case 2:
         return (
-            <div className="flex flex-col items-center text-center">
-              <h2 className="font-headline text-3xl font-bold tracking-tight">Step 2: Define Your Project</h2>
-              <p className="mt-2 text-muted-foreground">This is where AI will help you define scope.</p>
-              <p className="mt-4 text-sm font-medium">You selected: <span className="text-primary">{formData.projectType}</span></p>
-            </div>
-        )
+          <Step2ServiceType
+            onNext={handleNextStep}
+            onUpdateData={handleUpdateFormData}
+          />
+        );
       default:
         return (
           <Step1ProjectType