diff --git a/auto-claude-ui/src/renderer/components/onboarding/WelcomeStep.tsx b/auto-claude-ui/src/renderer/components/onboarding/WelcomeStep.tsx new file mode 100644 index 00000000..1d2e3108 --- /dev/null +++ b/auto-claude-ui/src/renderer/components/onboarding/WelcomeStep.tsx @@ -0,0 +1,118 @@ +import { Sparkles, Zap, Brain, FileCode } from 'lucide-react'; +import { Button } from '../ui/button'; +import { Card, CardContent } from '../ui/card'; + +interface WelcomeStepProps { + onGetStarted: () => void; + onSkip: () => void; +} + +interface FeatureCardProps { + icon: React.ReactNode; + title: string; + description: string; +} + +function FeatureCard({ icon, title, description }: FeatureCardProps) { + return ( + + +
+
+ {icon} +
+
+

{title}

+

{description}

+
+
+
+
+ ); +} + +/** + * Welcome step component for the onboarding wizard. + * Displays a welcome message with a feature overview and actions to get started or skip. + */ +export function WelcomeStep({ onGetStarted, onSkip }: WelcomeStepProps) { + const features = [ + { + icon: , + title: 'AI-Powered Development', + description: 'Generate code and build features using Claude Code agents' + }, + { + icon: , + title: 'Spec-Driven Workflow', + description: 'Define tasks with clear specifications and let Auto Claude handle the implementation' + }, + { + icon: , + title: 'Memory & Context', + description: 'Optional Graphiti integration for persistent memory across sessions' + }, + { + icon: , + title: 'Parallel Execution', + description: 'Run multiple agents in parallel for faster development cycles' + } + ]; + + return ( +
+
+ {/* Hero Section */} +
+

+ Welcome to Auto Claude +

+

+ Build software autonomously with AI-powered agents +

+
+ + {/* Features Grid */} +
+ {features.map((feature, index) => ( + + ))} +
+ + {/* Description */} +
+

+ This wizard will help you set up your environment in just a few steps. + You can configure your Claude OAuth token, optionally set up memory features, + and create your first task. +

+
+ + {/* Action Buttons */} +
+ + +
+
+
+ ); +}