Updated app

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

@@ -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>
+  );
+}

src/components/cost-estimator/step-1-project-type.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Monitor, Smartphone, Layers } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import React from 'react';
+
+type Step1Props = {
+  onNext: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+};
+
+const projectTypes = [
+  {
+    id: 'website',
+    title: 'Website',
+    description: 'A responsive and engaging online presence.',
+    icon: <Monitor className="h-8 w-8 text-primary" />,
+  },
+  {
+    id: 'mobile-app',
+    title: 'Mobile App',
+    description: 'An iOS or Android application for users on the go.',
+    icon: <Smartphone className="h-8 w-8 text-primary" />,
+  },
+  {
+    id: 'platform',
+    title: 'Platform',
+    description: 'A complex system with multiple user types.',
+    icon: <Layers className="h-8 w-8 text-primary" />,
+  },
+];
+
+export function Step1ProjectType({ onNext, onUpdateData }: Step1Props) {
+  const handleSelect = (projectType: 'website' | 'mobile-app' | 'platform') => {
+    onUpdateData({ projectType });
+    onNext();
+  };
+
+  return (
+    <div className="flex flex-col items-center text-center">
+      <h2 className="font-headline text-3xl font-bold tracking-tight">What are you looking to build?</h2>
+      <p className="mt-2 text-muted-foreground">Select a project type to get started.</p>
+      <div className="mt-8 grid w-full grid-cols-1 gap-6 md:grid-cols-3">
+        {projectTypes.map((type) => (
+          <Card
+            key={type.id}
+            onClick={() => handleSelect(type.id as any)}
+            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"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                handleSelect(type.id as any);
+              }
+            }}
+          >
+            <CardHeader className="items-center">
+              <div className="rounded-full bg-primary/10 p-4 mb-4">{type.icon}</div>
+              <CardTitle className="font-headline text-xl">{type.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-muted-foreground">{type.description}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}