Updated app

2025-07-17 10:06:15 +00:00
parent 771048d9f8
commit 4b7d3b2b3d
14 changed files with 376 additions and 64 deletions
@@ -0,0 +1,74 @@
+"use client";
+
+import React, { useState, useTransition } from 'react';
+import { Step1ProjectType } from './step-1-project-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
+};
+
+export function CostEstimatorForm() {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [formData, setFormData] = useState<FormData>({
+    projectType: null,
+  });
+  const [isPending, startTransition] = useTransition();
+
+  const handleNextStep = () => {
+    startTransition(() => {
+        setCurrentStep((prev) => prev + 1);
+    });
+  };
+
+  const handleUpdateFormData = (newData: Partial<FormData>) => {
+    setFormData((prev) => ({ ...prev, ...newData }));
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <Step1ProjectType
+            onNext={handleNextStep}
+            onUpdateData={handleUpdateFormData}
+          />
+        );
+      case 2:
+        return (
+            <div className="flex flex-col items-center text-center">
+              <h2 className="font-headline text-3xl font-bold tracking-tight">Step 2: Define Your Project</h2>
+              <p className="mt-2 text-muted-foreground">This is where AI will help you define scope.</p>
+              <p className="mt-4 text-sm font-medium">You selected: <span className="text-primary">{formData.projectType}</span></p>
+            </div>
+        )
+      default:
+        return (
+          <Step1ProjectType
+            onNext={handleNextStep}
+            onUpdateData={handleUpdateFormData}
+          />
+        );
+    }
+  };
+
+  return (
+    <Card className="mt-8 w-full max-w-4xl shadow-2xl overflow-hidden">
+      <CardContent className="p-4 sm:p-8">
+        <AnimatePresence mode="wait">
+            <motion.div
+                key={currentStep}
+                initial={{ opacity: 0, x: 50 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -50 }}
+                transition={{ duration: 0.3 }}
+            >
+                {renderStep()}
+            </motion.div>
+        </AnimatePresence>
+      </CardContent>
+    </Card>
+  );
+}