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">
+          <Step2ServiceType
-              <h2 className="font-headline text-3xl font-bold tracking-tight">Step 2: Define Your Project</h2>
+            onNext={handleNextStep}
-              <p className="mt-2 text-muted-foreground">This is where AI will help you define scope.</p>
+            onUpdateData={handleUpdateFormData}
-              <p className="mt-4 text-sm font-medium">You selected: <span className="text-primary">{formData.projectType}</span></p>
+          />
-            </div>
+        );
-        )
       default:
         return (
           <Step1ProjectType

src/components/cost-estimator/step-2-service-type.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+type Step2Props = {
+  onNext: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+};
+
+const serviceTypes = [
+  {
+    id: 'entire-project',
+    title: 'Entire project',
+  },
+  {
+    id: 'development',
+    title: 'Development',
+  },
+  {
+    id: 'ui-ux-design',
+    title: 'UI/UX design',
+  },
+  {
+    id: 'identity-branding',
+    title: 'Identity & branding',
+  },
+];
+
+export function Step2ServiceType({ onNext, onUpdateData }: Step2Props) {
+  const [selectedService, setSelectedService] = React.useState<string | null>(null);
+
+  const handleSelect = (serviceId: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding') => {
+    setSelectedService(serviceId);
+    onUpdateData({ serviceType: serviceId });
+  };
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight">Choose Service</h2>
+      <div className="mt-8 grid w-full grid-cols-1 gap-4">
+        {serviceTypes.map((type) => (
+          <Button
+            key={type.id}
+            variant={selectedService === type.id ? 'default' : 'outline'}
+            className="w-full justify-start p-6 text-lg"
+            onClick={() => handleSelect(type.id as any)}
+          >
+            {type.title}
+          </Button>
+        ))}
+      </div>
+      <div className="mt-8 flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+            <div className="w-16 h-2 bg-primary rounded-full" />
+            <div className="w-16 h-2 bg-muted rounded-full" />
+            <div className="w-16 h-2 bg-muted rounded-full" />
+        </div>
+        <Button onClick={onNext} disabled={!selectedService}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}