the next step should look like this

2025-07-17 10:31:26 +00:00
parent b07f7af30c
commit db77e86302
8 changed files with 133 additions and 0 deletions
@@ -0,0 +1,113 @@
+"use client";
+
+import type { FormData, BrandingSelection } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Gauge, Compass, PaintBrush, Zap, X } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+
+type Step8Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const brandingOptions = [
+    { id: 'full-cycle', title: 'I need a full-cycle branding for my project', hours: 80, icon: <Compass className="h-10 w-10 text-primary" /> },
+    { id: 'brush-up', title: 'I need to brush up on my existing project', hours: 40, icon: <PaintBrush className="h-10 w-10 text-primary" /> },
+    { id: 'logo-only', title: 'I just need a logo', hours: 20, icon: <Zap className="h-10 w-10 text-primary" /> },
+    { id: 'none', title: "No, I'm better off without it", hours: 0, icon: <X className="h-10 w-10 text-primary" /> },
+];
+
+const designHoursMap = { custom: 60, mockups: 30, existing: 0 };
+const illustrationHours = { '2d_static': 10, '2d_animated': 25, '3d_static': 20, '3d_animated': 40 };
+
+const calculateHours = (
+    formData: FormData,
+    branding: BrandingSelection
+): number => {
+    const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1;
+    const pageHours = pageVal * 6;
+    const stageHours = Math.round((formData.projectStage / 100) * 50);
+    const designHours = formData.designProcess ? designHoursMap[formData.designProcess] : 0;
+    const animationHours = formData.animatedElements ? 30 : 0;
+
+    let illustrationTotalHours = 0;
+    if (formData.illustrations.has2d) {
+        if (formData.illustrations.is2dAnimated === 'static') illustrationTotalHours += illustrationHours['2d_static'];
+        if (formData.illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHours['2d_animated'];
+    }
+    if (formData.illustrations.has3d) {
+        if (formData.illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHours['3d_static'];
+        if (formData.illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHours['3d_animated'];
+    }
+
+    const brandingH = branding ? (brandingOptions.find(b => b.id === branding)?.hours ?? 0) : 0;
+
+    return pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH;
+};
+
+
+export function Step8Branding({ onNext, onBack, onUpdateData, formData }: Step8Props) {
+  const [selected, setSelected] = useState<BrandingSelection>(formData.branding);
+
+  const handleSelect = (option: BrandingSelection) => {
+    setSelected(option);
+    onUpdateData({ branding: option });
+    onNext();
+  };
+  
+  const estimatedHours = useMemo(() => {
+    return calculateHours(formData, selected);
+  }, [selected, formData]);
+
+
+  return (
+    <div className="flex flex-col items-center text-center">
+      <h2 className="font-headline text-3xl font-bold tracking-tight">Have you thought about branding?</h2>
+      <div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {brandingOptions.map((option) => (
+          <Card
+            key={option.id}
+            onClick={() => handleSelect(option.id as BrandingSelection)}
+            className={`cursor-pointer transition-all duration-300 ease-in-out hover:shadow-accent/20 hover:shadow-lg hover:-translate-y-1 hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${selected === option.id ? 'border-primary shadow-lg' : ''}`}
+            tabIndex={0}
+             onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                handleSelect(option.id as any);
+              }
+            }}
+          >
+            <CardContent className="flex flex-col items-center justify-center p-6 gap-4">
+                <div className="rounded-full bg-primary/10 p-4">{option.icon}</div>
+                <p className="font-medium text-center">{option.title}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </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 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} disabled={selected === null}>
+              See Results
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+}