this is how the next step looks like .. calcylate 7 6 hours per page sho

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

@@ -5,6 +5,7 @@ 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 { Step5PageCount } from './step-5-page-count';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -13,6 +14,7 @@ export type FormData = {
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
   projectStage: number;
   designProcess: 'custom' | 'mockups' | 'existing' | null;
+  pageCount: number;
 };
 
 export function CostEstimatorForm() {
@@ -22,6 +24,7 @@ export function CostEstimatorForm() {
     serviceType: null,
     projectStage: 0,
     designProcess: null,
+    pageCount: 0,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -77,6 +80,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+      case 5:
+        return (
+          <Step5PageCount
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType

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

@@ -56,7 +56,7 @@ export function Step2ServiceType({ onNext, onBack, onUpdateData, formData }: Ste
       <div className="mt-8 flex w-full items-center justify-between">
         <Button variant="ghost" onClick={onBack}>Back</Button>
         <div className="flex items-center gap-2">
-            <div className="w-12 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-primary rounded-full" />
             <div className="w-12 h-2 bg-primary rounded-full" />
             <div className="w-12 h-2 bg-muted rounded-full" />
             <div className="w-12 h-2 bg-muted rounded-full" />

src/components/cost-estimator/step-3-project-stage.tsx

@@ -77,8 +77,8 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
         <div className="flex items-center gap-4">
           <Button variant="ghost" onClick={onBack}>Back</Button>
           <div className="flex items-center gap-2">
-              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
-              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />

src/components/cost-estimator/step-4-design-process.tsx

@@ -68,9 +68,9 @@ export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: S
         <div className="flex items-center gap-4">
             <Button variant="ghost" onClick={onBack}>Go Back</Button>
             <div className="flex items-center gap-2">
-              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
-              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
-              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-muted rounded-full" />
             </div>

src/components/cost-estimator/step-5-page-count.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import React, { useState, useMemo } from 'react';
+import { Gauge } from 'lucide-react';
+
+type Step5Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const pageLabels = [
+    "less than 5", // 0
+    "5 - 10 pages", // 1
+    "10 - 15 pages", // 2
+    "15 - 20 pages", // 3
+    "20 - 25 pages", // 4
+    "25 - 30 pages", // 5
+    "30 - 35 pages", // 6
+    "35 - 40 pages", // 7
+    "40 - 45 pages", // 8
+    "45 - 50 pages", // 9
+    "50+", // 10
+];
+
+const designHoursMap = {
+  custom: 60,
+  mockups: 30,
+  existing: 0,
+};
+
+const calculateHours = (pageCount: number, projectStage: number, designProcess: 'custom' | 'mockups' | 'existing' | null): number => {
+    const pageHours = pageCount * 6;
+    const stageHours = Math.round((projectStage / 100) * 50);
+    const designHours = designProcess ? designHoursMap[designProcess] : 0;
+    return pageHours + stageHours + designHours;
+};
+
+
+export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5Props) {
+  const [value, setValue] = useState([formData.pageCount]);
+
+  const handleSliderChange = (newValue: number[]) => {
+    setValue(newValue);
+    onUpdateData({ pageCount: newValue[0] });
+  };
+
+  const currentLabel = useMemo(() => {
+    const index = value[0];
+    return pageLabels[index];
+  }, [value]);
+  
+  const estimatedHours = useMemo(() => {
+    const pages = value[0] === 10 ? 50 : (value[0] + 1) * 5 - 1; // Approx for calculation
+    return calculateHours(pages, formData.projectStage, formData.designProcess);
+  }, [value, formData.projectStage, formData.designProcess]);
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">How many pages/screens do you have in mind?</h2>
+      <div className="mt-16 w-full">
+        <div className="flex justify-between items-center mb-4">
+            <p className="font-medium text-muted-foreground">{pageLabels[0]}</p>
+            <p className="font-medium text-muted-foreground">{pageLabels[10]}</p>
+        </div>
+        <Slider
+          defaultValue={value}
+          onValueChange={handleSliderChange}
+          max={10}
+          step={1}
+          className="w-full"
+        />
+        <div className="text-center text-sm text-muted-foreground mt-2">
+            <span>{currentLabel}</span>
+        </div>
+      </div>
+      <div className="mt-16 flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+            <Gauge className="h-6 w-6 text-primary" />
+            <span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" onClick={onBack}>Go Back</Button>
+          <div className="flex items-center gap-2">
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+          </div>
+          <Button onClick={onNext}>
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}