SEction 9-10

frontend/src/components/onboarding/steps/Step1Welcome.tsx

@@ -0,0 +1,112 @@
+/**
+ * Step 1: Welcome
+ * Introduction screen for new users
+ */
+import React from 'react';
+import Button from '../../ui/button/Button';
+import { 
+  ArrowRightIcon,
+  BoltIcon,
+  FileTextIcon,
+  PlugInIcon,
+  PieChartIcon,
+} from '../../../icons';
+
+interface Step1WelcomeProps {
+  onNext: () => void;
+  onSkip: () => void;
+}
+
+const FEATURES = [
+  {
+    icon: <FileTextIcon className="h-5 w-5" />,
+    title: 'AI Content Creation',
+    description: 'Generate high-quality articles with AI assistance',
+  },
+  {
+    icon: <PlugInIcon className="h-5 w-5" />,
+    title: 'WordPress Integration',
+    description: 'Publish directly to your WordPress site',
+  },
+  {
+    icon: <BoltIcon className="h-5 w-5" />,
+    title: 'Automated Pipeline',
+    description: 'Set it and forget it content scheduling',
+  },
+  {
+    icon: <PieChartIcon className="h-5 w-5" />,
+    title: 'Smart Analytics',
+    description: 'Track content performance and optimize',
+  },
+];
+
+export default function Step1Welcome({ onNext, onSkip }: Step1WelcomeProps) {
+  return (
+    <div className="text-center">
+      {/* Hero Section */}
+      <div className="mb-8">
+        <div className="inline-flex items-center justify-center size-20 rounded-2xl bg-gradient-to-br from-brand-500 to-brand-600 text-white mb-4 shadow-lg">
+          <BoltIcon className="h-10 w-10" />
+        </div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+          Welcome to IGNY8
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
+          Your complete AI-powered content creation and publishing platform. 
+          Let's get you set up in just a few minutes.
+        </p>
+      </div>
+
+      {/* Features Grid */}
+      <div className="grid grid-cols-2 gap-4 mb-8">
+        {FEATURES.map((feature, index) => (
+          <div
+            key={index}
+            className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 text-left"
+          >
+            <div className="size-10 rounded-lg bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center mb-3">
+              {feature.icon}
+            </div>
+            <h3 className="font-semibold text-gray-900 dark:text-white text-sm mb-1">
+              {feature.title}
+            </h3>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              {feature.description}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {/* What's Next */}
+      <div className="bg-brand-50 dark:bg-brand-900/20 rounded-xl p-4 mb-6">
+        <h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2">
+          What we'll do together:
+        </h3>
+        <ul className="text-sm text-brand-700 dark:text-brand-300 space-y-1">
+          <li>✓ Create your first site with optimized defaults</li>
+          <li>✓ Connect your WordPress installation</li>
+          <li>✓ Add keywords to start your content pipeline</li>
+        </ul>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <Button
+          variant="ghost"
+          onClick={onSkip}
+          className="text-gray-500"
+        >
+          Skip for now
+        </Button>
+        <Button
+          variant="primary"
+          onClick={onNext}
+          className="gap-2"
+        >
+          Let's Get Started
+          <ArrowRightIcon className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}