3
This commit is contained in:
alorig
275
frontend/src/components/onboarding/WorkflowGuide.tsx
Normal file
275
frontend/src/components/onboarding/WorkflowGuide.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
/**
|
||||
* WorkflowGuide Component
|
||||
* Inline welcome/guide screen for new users
|
||||
* Shows complete workflow explainer with visual flow maps
|
||||
*/
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card } from '../ui/card';
|
||||
import Button from '../ui/button/Button';
|
||||
import Badge from '../ui/badge/Badge';
|
||||
import {
|
||||
CloseIcon,
|
||||
ArrowRightIcon,
|
||||
GridIcon,
|
||||
PlugInIcon,
|
||||
FileIcon,
|
||||
CheckCircleIcon,
|
||||
BoltIcon,
|
||||
ListIcon,
|
||||
GroupIcon,
|
||||
FileTextIcon,
|
||||
} from '../../icons';
|
||||
import { useOnboardingStore } from '../../store/onboardingStore';
|
||||
import { useSiteStore } from '../../store/siteStore';
|
||||
|
||||
export default function WorkflowGuide() {
|
||||
const navigate = useNavigate();
|
||||
const { isGuideVisible, dismissGuide } = useOnboardingStore();
|
||||
const { activeSite } = useSiteStore();
|
||||
|
||||
if (!isGuideVisible) return null;
|
||||
|
||||
const hasSite = !!activeSite;
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<Card className="rounded-2xl border-2 border-orange-200 bg-gradient-to-br from-orange-50 to-white dark:from-orange-950/20 dark:to-gray-900 dark:border-orange-800 p-6 md:p-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white shadow-lg">
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Welcome to IGNY8
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Your complete AI-powered content creation workflow
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={dismissGuide}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<CloseIcon className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Main Workflow Options */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
{/* Build New Site */}
|
||||
<Card className="p-6 border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-colors">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
|
||||
<GridIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">
|
||||
Build New Site
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Create a new website from scratch with IGNY8
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/sites/builder?type=wordpress');
|
||||
dismissGuide();
|
||||
}}
|
||||
className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<PlugInIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-gray-900 dark:text-white">
|
||||
WordPress Self-Hosted Site
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Build and sync to your WordPress installation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/sites/builder?type=igny8');
|
||||
dismissGuide();
|
||||
}}
|
||||
className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<GridIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-gray-900 dark:text-white">
|
||||
IGNY8-Powered IGNY8-Hosted Site
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Fully managed site hosted by IGNY8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Integrate Existing Site */}
|
||||
<Card className="p-6 border-2 border-green-200 dark:border-green-800 hover:border-green-400 dark:hover:border-green-600 transition-colors">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white flex-shrink-0">
|
||||
<PlugInIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">
|
||||
Integrate Existing Site
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Connect your existing website to IGNY8
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/sites?action=integrate&platform=wordpress');
|
||||
dismissGuide();
|
||||
}}
|
||||
className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 bg-white dark:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<PlugInIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-gray-900 dark:text-white">
|
||||
Integrate WordPress/Shopify
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Sync content with your existing site
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/sites?action=integrate&platform=custom');
|
||||
dismissGuide();
|
||||
}}
|
||||
className="w-full flex items-center justify-between p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 bg-white dark:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<FileIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-gray-900 dark:text-white">
|
||||
Custom Site
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Connect any custom website
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-gray-400 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Workflow Steps */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Your Content Creation Workflow
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ icon: <ListIcon />, label: 'Discover Keywords', gradient: 'from-blue-500 to-blue-600', path: '/planner/keywords' },
|
||||
{ icon: <GroupIcon />, label: 'Cluster Keywords', gradient: 'from-purple-500 to-purple-600', path: '/planner/clusters' },
|
||||
{ icon: <BoltIcon />, label: 'Generate Ideas', gradient: 'from-orange-500 to-orange-600', path: '/planner/ideas' },
|
||||
{ icon: <FileTextIcon />, label: 'Create Content', gradient: 'from-green-500 to-green-600', path: '/writer/content' },
|
||||
].map((step, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => navigate(step.path)}
|
||||
className="flex items-center gap-3 p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-[var(--color-primary)] dark:hover:border-[var(--color-primary)] bg-white dark:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div className={`size-10 rounded-lg bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white flex-shrink-0`}>
|
||||
{React.cloneElement(step.icon as React.ReactElement, { className: 'w-5 h-5' })}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-sm text-gray-900 dark:text-white group-hover:text-[var(--color-primary)]">
|
||||
{step.label}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator (if user has started) */}
|
||||
{hasSite && (
|
||||
<div className="flex items-center gap-2 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800">
|
||||
<CheckCircleIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-sm text-blue-900 dark:text-blue-100">
|
||||
Great! You've created your first site
|
||||
</div>
|
||||
<div className="text-xs text-blue-700 dark:text-blue-300 mt-1">
|
||||
Continue with keyword research and content planning
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
navigate('/planner/keywords');
|
||||
dismissGuide();
|
||||
}}
|
||||
>
|
||||
Get Started
|
||||
<ArrowRightIcon className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
You can always access this guide from the header
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
navigate('/sites');
|
||||
dismissGuide();
|
||||
}}
|
||||
>
|
||||
View All Sites
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
navigate('/planner/keywords');
|
||||
dismissGuide();
|
||||
}}
|
||||
>
|
||||
Start Planning
|
||||
<ArrowRightIcon className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user