From c4f441af2a33ac9f99b4be4b83a7a762a19d8f8d Mon Sep 17 00:00:00 2001 From: Leon Serfaty G Date: Thu, 17 Jul 2025 10:57:28 +0000 Subject: [PATCH] this is how the result page should look like --- src/app/globals.css | 5 +- src/app/layout.tsx | 2 +- .../cost-estimator/cost-estimator-form.tsx | 13 +-- .../cost-estimator/step-11-results.tsx | 93 +++++++++++++------ 4 files changed, 73 insertions(+), 40 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index f3e27f8..43bf576 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -23,13 +23,12 @@ --border: 226 30% 85%; --input: 226 30% 85%; --ring: 221 100% 58%; - --radius: 0.5rem; } .dark { --background: 222 47% 11%; --foreground: 0 0% 98%; - --card: 222 47% 11%; + --card: 224 35% 15%; --card-foreground: 0 0% 98%; --popover: 222 47% 11%; --popover-foreground: 0 0% 98%; @@ -43,7 +42,7 @@ --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 222 25% 20%; + --border: 224 35% 20%; --input: 222 25% 20%; --ring: 221 100% 58%; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c296029..d6852b2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,7 +13,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + diff --git a/src/components/cost-estimator/cost-estimator-form.tsx b/src/components/cost-estimator/cost-estimator-form.tsx index e6c9dd6..79605fe 100644 --- a/src/components/cost-estimator/cost-estimator-form.tsx +++ b/src/components/cost-estimator/cost-estimator-form.tsx @@ -107,8 +107,7 @@ export function CostEstimatorForm() { setCurrentStep(1); } - const estimatedHours = useMemo(() => calculateTotalHours(formData), [formData]); - + const { customHours, readyMadeHours } = useMemo(() => calculateTotalHours(formData), [formData]); const renderStep = () => { switch (currentStep) { @@ -203,9 +202,9 @@ export function CostEstimatorForm() { case 11: return ( ) default: @@ -218,9 +217,11 @@ export function CostEstimatorForm() { } }; + const isResultsStep = currentStep === 11; + return ( - - + + void; - estimatedHours: number; + customHours: number; + readyMadeHours: number; }; const designHoursMap = { custom: 60, mockups: 30, existing: 0 }; @@ -36,7 +37,7 @@ const shoppingCartHoursMap = { }; -export const calculateTotalHours = (formData: FormData): number => { +export const calculateTotalHours = (formData: FormData) => { const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1; const pageHours = pageVal * 6; const stageHours = Math.round((formData.projectStage / 100) * 50); @@ -67,38 +68,70 @@ export const calculateTotalHours = (formData: FormData): number => { } } - return pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH + additionalFeaturesHours + cartHours; + const customHours = pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH + additionalFeaturesHours + cartHours; + const readyMadeHours = Math.round(customHours * 0.4); + + return { customHours, readyMadeHours }; }; -const HOURLY_RATE = 75; // Example hourly rate in USD - -export function Step11Results({ formData, onReset, estimatedHours }: Step11Props) { - - const estimatedCost = estimatedHours * HOURLY_RATE; +export function Step11Results({ onReset, customHours, readyMadeHours }: Step11Props) { return (
-
- -
-

Your Estimate is Ready!

-

Based on your selections, here's our initial estimate.

+

A rough estimate of your project:

- - - Estimated Cost - This is an approximation. Final cost may vary. - - -

${estimatedCost.toLocaleString()}

-

({estimatedHours}+ hours)

- - +
+ + +
+

Develop the project using ready-made tools

+ + + + + + +

Lower cost option using pre-built templates and components.

+ + + +
+

{readyMadeHours}+ hours

+ + + + +
+

Custom development

+ + + + + + +

Higher cost option with fully custom design and features.

+ + + +
+

{customHours}+ hours

+ + +
-
- +