salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SEction 9-10

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 08:10:24 +00:00
parent 0340016932
commit 41e124d8e8
11 changed files with 2180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/components/onboarding/steps/Step5Complete.tsx Normal file
View File

@@ -0,0 +1,167 @@
/**
* Step 5: Complete
* Success screen with next steps
*/
import React from 'react';
import Button from '../../ui/button/Button';
import { Card } from '../../ui/card';
import {
CheckCircleIcon,
ArrowRightIcon,
BoltIcon,
FileTextIcon,
PieChartIcon,
BoxCubeIcon,
} from '../../../icons';
import type { WizardData } from '../OnboardingWizard';
interface Step5CompleteProps {
data: WizardData;
onComplete: () => void;
isLoading: boolean;
}
export default function Step5Complete({
data,
onComplete,
isLoading
}: Step5CompleteProps) {
const NEXT_STEPS = [
{
icon: <BoltIcon className="w-5 h-5" />,
title: 'Run Automation',
description: 'Start your content pipeline to generate articles',
link: data.createdSiteId ? `/sites/${data.createdSiteId}/automation` : '/automation',
},
{
icon: <FileTextIcon className="w-5 h-5" />,
title: 'Add More Keywords',
description: 'Expand your content strategy with more target keywords',
link: '/planner/keywords',
},
{
icon: <PieChartIcon className="w-5 h-5" />,
title: 'View Dashboard',
description: 'Monitor your content pipeline and metrics',
link: '/dashboard',
},
{
icon: <BoxCubeIcon className="w-5 h-5" />,
title: 'Customize Settings',
description: 'Fine-tune publishing schedules and preferences',
link: data.createdSiteId ? `/sites/${data.createdSiteId}/settings` : '/account/settings',
},
];
return (
<div className="text-center">
{/* Success Animation */}
<div className="mb-6">
<div className="inline-flex items-center justify-center size-20 rounded-full bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 mb-4">
<CheckCircleIcon className="h-10 w-10" />
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
You're All Set! 🎉
</h1>
<p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
Your content pipeline is ready to go. IGNY8 will start processing your keywords and generating content automatically.
</p>
</div>
{/* Summary */}
<Card className="p-4 mb-6 bg-gray-50 dark:bg-gray-800 text-left">
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">
What we set up:
</h3>
<ul className="space-y-2">
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">
Site: <span className="font-medium">{data.siteName || 'Your Site'}</span>
</span>
</li>
{data.integrationTested && (
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">
WordPress integration connected
</span>
</li>
)}
{data.keywordsAdded && (
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">
{data.keywordsCount} keyword{data.keywordsCount !== 1 ? 's' : ''} added to pipeline
</span>
</li>
)}
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">
Auto-approval & auto-publish enabled
</span>
</li>
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">
Daily automation scheduled
</span>
</li>
</ul>
</Card>
{/* Expected Timeline */}
<Card className="p-4 mb-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 text-left">
<h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2">
📅 What to expect:
</h3>
<ul className="text-sm text-brand-700 dark:text-brand-300 space-y-1">
<li>• First content ideas: Within 24 hours</li>
<li>• First articles ready: 2-3 days</li>
<li>• First published to site: Based on your schedule</li>
</ul>
<p className="text-xs text-brand-600 dark:text-brand-400 mt-2">
Run automation manually anytime to speed things up.
</p>
</Card>
{/* Next Steps */}
<div className="mb-6">
<h3 className="font-semibold text-gray-900 dark:text-white mb-3 text-left">
What's next:
</h3>
<div className="grid grid-cols-2 gap-3">
{NEXT_STEPS.map((step, index) => (
<div
key={index}
className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
>
<div className="size-8 rounded-lg bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center mb-2">
{step.icon}
</div>
<h4 className="font-medium text-gray-900 dark:text-white text-sm">
{step.title}
</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">
{step.description}
</p>
</div>
))}
</div>
</div>
{/* CTA */}
<Button
variant="primary"
size="lg"
onClick={onComplete}
disabled={isLoading}
className="gap-2 w-full"
>
{isLoading ? 'Loading...' : 'Go to Dashboard'}
<ArrowRightIcon className="w-4 h-4" />
</Button>
</div>
);
}