139 lines
4.8 KiB
TypeScript
139 lines
4.8 KiB
TypeScript
/**
|
|
* Step 1: Welcome
|
|
* Redesigned intro with cleaner cards explaining what each step accomplishes
|
|
*/
|
|
import React from 'react';
|
|
import Button from '../../ui/button/Button';
|
|
import {
|
|
ArrowRightIcon,
|
|
BoltIcon,
|
|
FileTextIcon,
|
|
PlugInIcon,
|
|
CheckCircleIcon,
|
|
} from '../../../icons';
|
|
|
|
interface Step1WelcomeProps {
|
|
onNext: () => void;
|
|
onSkip: () => void;
|
|
currentStep: number;
|
|
totalSteps: number;
|
|
}
|
|
|
|
const WIZARD_STEPS = [
|
|
{
|
|
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',
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
{
|
|
step: 3,
|
|
icon: <BoltIcon className="h-6 w-6" />,
|
|
title: 'Add Target 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, currentStep, totalSteps }: Step1WelcomeProps) {
|
|
return (
|
|
<div>
|
|
{/* Hero Section */}
|
|
<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-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>
|
|
|
|
{/* 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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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 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-5 h-5" />}
|
|
>
|
|
Let's Get Started
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|