the slider on thep 3 goes from 0%=0 hours to 100% 50hours

This commit is contained in:
Leon Serfaty G
2025-07-17 10:12:40 +00:00
parent 97ede75eee
commit 6631391a6f
@@ -14,39 +14,22 @@ type Step3Props = {
}; };
const stageLabels = [ const stageLabels = [
"From scratch", // 0 "0%", // 0
"Idea & concept", // 10 "10%", // 10
"Prototype ready", // 20 "20%", // 20
"Design ready", // 30 "30%", // 30
"In development", // 40 "40%", // 40
"MVP ready", // 50 "50%", // 50
"Live product", // 60 "60%", // 60
"Re-design", // 70 "70%", // 70
"Adding features", // 80 "80%", // 80
"Ongoing support", // 90 "90%", // 90
"100%", // 100
]; ];
const calculateHours = (projectType: FormData['projectType'], serviceType: FormData['serviceType'], projectStage: number): number => { const calculateHours = (projectStage: number): number => {
let baseHours = 0; // Scale hours linearly from 0 to 50 as projectStage goes from 0 to 100.
switch (projectType) { return Math.round((projectStage / 100) * 50);
case 'website': baseHours = 100; break;
case 'mobile-app': baseHours = 200; break;
case 'platform': baseHours = 400; break;
default: baseHours = 50;
}
switch (serviceType) {
case 'entire-project': baseHours *= 1; break;
case 'development': baseHours *= 0.6; break;
case 'ui-ux-design': baseHours *= 0.3; break;
case 'identity-branding': baseHours *= 0.1; break;
}
// A higher projectStage means less work, so we reduce the hours.
// The logic here is that if a project is 90% complete, only 10% of work remains.
const completionMultiplier = 1 - (projectStage / 100);
return Math.max(52, Math.round(baseHours * completionMultiplier));
}; };
export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: Step3Props) { export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: Step3Props) {
@@ -63,8 +46,8 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
}, [value]); }, [value]);
const estimatedHours = useMemo(() => { const estimatedHours = useMemo(() => {
return calculateHours(formData.projectType, formData.serviceType, value[0]); return calculateHours(value[0]);
}, [formData.projectType, formData.serviceType, value]); }, [value]);
return ( return (
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
@@ -72,12 +55,12 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
<div className="mt-16 w-full"> <div className="mt-16 w-full">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<p className="font-medium">{currentLabel}</p> <p className="font-medium">{currentLabel}</p>
<p className="text-muted-foreground">{value[0] === 90 ? "90+%" : `${value[0]}%`}</p> <p className="text-muted-foreground">{value[0]}%</p>
</div> </div>
<Slider <Slider
defaultValue={value} defaultValue={value}
onValueChange={handleSliderChange} onValueChange={handleSliderChange}
max={90} max={100}
step={10} step={10}
className="w-full" className="w-full"
/> />
@@ -89,7 +72,7 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
<div className="mt-16 flex w-full items-center justify-between"> <div className="mt-16 flex w-full items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Gauge className="h-6 w-6 text-primary" /> <Gauge className="h-6 w-6 text-primary" />
<span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span> <span className="font-headline text-lg font-bold">{estimatedHours} hours</span>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Button variant="ghost" onClick={onBack}>Go Back</Button> <Button variant="ghost" onClick={onBack}>Go Back</Button>