Phase 2, 2.1 and 2.2 complete

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

@@ -1,6 +1,6 @@
 /**
  * Step 1: Welcome
- * Introduction screen for new users
+ * Redesigned intro with cleaner cards explaining what each step accomplishes
  */
 import React from 'react';
 import Button from '../../ui/button/Button';
@@ -9,99 +9,126 @@ import {
   BoltIcon,
   FileTextIcon,
   PlugInIcon,
-  PieChartIcon,
+  CheckCircleIcon,
 } from '../../../icons';
 
 interface Step1WelcomeProps {
   onNext: () => void;
   onSkip: () => void;
+  currentStep: number;
+  totalSteps: number;
 }
 
-const FEATURES = [
+const WIZARD_STEPS = [
   {
-    icon: <FileTextIcon className="h-5 w-5" />,
-    title: 'AI Content Creation',
-    description: 'Generate high-quality articles with AI assistance',
+    step: 1,
+    icon: <FileTextIcon className="h-6 w-6" />,
+    title: 'Add Your Site',
+    description: 'Set up your first site with industry preferences',
+    outcome: 'A configured site ready for content generation',
+    color: 'brand',
   },
   {
-    icon: <PlugInIcon className="h-5 w-5" />,
-    title: 'WordPress Integration',
-    description: 'Publish directly to your WordPress site',
+    step: 2,
+    icon: <PlugInIcon className="h-6 w-6" />,
+    title: 'Connect Site',
+    description: 'Install our plugin to enable direct publishing',
+    outcome: 'One-click publishing to your site',
+    color: 'success',
+    optional: true,
   },
   {
-    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',
+    step: 3,
+    icon: <BoltIcon className="h-6 w-6" />,
+    title: 'Add Keywords',
+    description: 'Define target keywords for AI content',
+    outcome: 'Keywords ready for clustering and ideas',
+    color: 'warning',
+    optional: true,
   },
 ];
 
-export default function Step1Welcome({ onNext, onSkip }: Step1WelcomeProps) {
+export default function Step1Welcome({ onNext, onSkip, currentStep, totalSteps }: Step1WelcomeProps) {
   return (
-    <div className="text-center">
+    <div>
       {/* 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">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
           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 className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+          Let's set up your AI-powered content pipeline in just a few steps. 
+          You'll be creating SEO-optimized content in 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}
+      {/* What You'll Accomplish - Horizontal Cards */}
+      <div className="mb-10">
+        <h2 className="text-base font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-5 text-center">
+          What we'll set up together
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {WIZARD_STEPS.map((item) => (
+            <div
+              key={item.step}
+              className="flex flex-col p-5 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700"
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <div className={`size-12 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                  item.color === 'brand' 
+                    ? 'bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400'
+                    : item.color === 'success'
+                    ? 'bg-success-100 dark:bg-success-900/50 text-success-600 dark:text-success-400'
+                    : 'bg-warning-100 dark:bg-warning-900/50 text-warning-600 dark:text-warning-400'
+                }`}>
+                  {item.icon}
+                </div>
+                {item.optional && (
+                  <span className="text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
+                    Optional
+                  </span>
+                )}
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                {item.title}
+              </h3>
+              <p className="text-base text-gray-500 dark:text-gray-400 mb-3 flex-1">
+                {item.description}
+              </p>
+              <div className="flex items-center gap-2 text-sm text-success-600 dark:text-success-400">
+                <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
+                <span>{item.outcome}</span>
+              </div>
             </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>
       </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>
+      {/* Time Estimate */}
+      <div className="text-center mb-8 p-4 rounded-xl bg-brand-50 dark:bg-brand-900/20 border border-brand-100 dark:border-brand-800">
+        <p className="text-base text-brand-700 dark:text-brand-300">
+          <span className="font-semibold">⏱️ Estimated time:</span> 3-5 minutes
+        </p>
       </div>
 
       {/* Actions */}
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
         <Button
           variant="ghost"
           tone="neutral"
+          size="md"
           onClick={onSkip}
         >
           Skip for now
         </Button>
+        <span className="text-sm text-gray-500 dark:text-gray-400">
+          Step <span className="font-semibold text-gray-700 dark:text-gray-300">{currentStep}</span> of <span className="font-semibold text-gray-700 dark:text-gray-300">{totalSteps}</span>
+        </span>
         <Button
           variant="primary"
+          size="md"
           onClick={onNext}
-          endIcon={<ArrowRightIcon className="w-4 h-4" />}
+          endIcon={<ArrowRightIcon className="w-5 h-5" />}
         >
           Let's Get Started
         </Button>