577 lines
22 KiB
TypeScript
577 lines
22 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Container, Grid, Card, CardContent, Typography, Box, Stack, Chip } from '@mui/material';
|
|
import { CheckCircle, AutoAwesome } from '@mui/icons-material';
|
|
|
|
interface PhaseFeature {
|
|
title: string;
|
|
description: string;
|
|
details: string[];
|
|
imagePlaceholder: string;
|
|
}
|
|
|
|
interface BlogPhase {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
shortDescription: string;
|
|
features: PhaseFeature[];
|
|
technicalDetails: {
|
|
aiModel: string;
|
|
promptType: string;
|
|
outputFormat: string;
|
|
integration: string;
|
|
};
|
|
videoPlaceholder: string;
|
|
}
|
|
|
|
const BlogWriterPhasesSection: React.FC = () => {
|
|
const [activePhase, setActivePhase] = useState<number | null>(null);
|
|
|
|
const phases: BlogPhase[] = [
|
|
{
|
|
id: 'research',
|
|
name: 'Research & Strategy',
|
|
icon: '🔍',
|
|
shortDescription: 'AI-powered comprehensive research with Google Search grounding, competitor analysis, and content gap identification',
|
|
features: [
|
|
{
|
|
title: 'Google Search Grounding',
|
|
description: 'Real-time web research using Gemini\'s native Google Search integration',
|
|
details: [
|
|
'Single API call for comprehensive research',
|
|
'Live web data from credible sources',
|
|
'Automatic source extraction and citation',
|
|
'Current trends and 2024-2025 insights',
|
|
'Market analysis and forecasts'
|
|
],
|
|
imagePlaceholder: '/images/research-google-grounding.jpg'
|
|
},
|
|
{
|
|
title: 'Competitor Analysis',
|
|
description: 'Identify top players and content opportunities in your niche',
|
|
details: [
|
|
'Top competitor content analysis',
|
|
'Content gap identification',
|
|
'Unique angle discovery',
|
|
'Market positioning insights',
|
|
'Competitive advantage opportunities'
|
|
],
|
|
imagePlaceholder: '/images/research-competitor.jpg'
|
|
},
|
|
{
|
|
title: 'Keyword Intelligence',
|
|
description: 'Comprehensive keyword analysis with SEO opportunities',
|
|
details: [
|
|
'Primary, secondary, and long-tail keyword identification',
|
|
'Search volume and competition analysis',
|
|
'Keyword clustering and grouping',
|
|
'Content optimization suggestions',
|
|
'Target audience keyword mapping'
|
|
],
|
|
imagePlaceholder: '/images/research-keywords.jpg'
|
|
},
|
|
{
|
|
title: 'Content Angle Generation',
|
|
description: 'AI-generated compelling content angles for maximum engagement',
|
|
details: [
|
|
'5 unique content angle suggestions',
|
|
'Trending topic identification',
|
|
'Audience pain point mapping',
|
|
'Viral potential assessment',
|
|
'Expert opinion synthesis'
|
|
],
|
|
imagePlaceholder: '/images/research-angles.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Gemini Pro with Google Search Grounding',
|
|
promptType: 'Comprehensive research prompt',
|
|
outputFormat: 'Structured JSON with sources, keywords, trends, competitors',
|
|
integration: 'GeminiGroundedProvider via research_service.py'
|
|
},
|
|
videoPlaceholder: '/videos/phase1-research.mp4'
|
|
},
|
|
{
|
|
id: 'outline',
|
|
name: 'Intelligent Outline',
|
|
icon: '📝',
|
|
shortDescription: 'AI-generated outlines with source mapping, grounding insights, and optimization recommendations',
|
|
features: [
|
|
{
|
|
title: 'AI Outline Generation',
|
|
description: 'Comprehensive outline based on research with SEO optimization',
|
|
details: [
|
|
'Section-by-section breakdown',
|
|
'Subheadings and key points',
|
|
'Target word counts per section',
|
|
'Logical flow and progression',
|
|
'SEO-optimized structure'
|
|
],
|
|
imagePlaceholder: '/images/outline-generation.jpg'
|
|
},
|
|
{
|
|
title: 'Source Mapping & Grounding',
|
|
description: 'Connect each section to research sources with citations',
|
|
details: [
|
|
'Automatic source-to-section mapping',
|
|
'Grounding support scores',
|
|
'Citation suggestions',
|
|
'Source credibility ratings',
|
|
'Reference verification'
|
|
],
|
|
imagePlaceholder: '/images/outline-grounding.jpg'
|
|
},
|
|
{
|
|
title: 'Interactive Refinement',
|
|
description: 'Human-in-the-loop editing with AI assistance',
|
|
details: [
|
|
'Add, remove, merge sections',
|
|
'Reorder and restructure',
|
|
'AI enhancement suggestions',
|
|
'Custom instructions support',
|
|
'Multiple outline versions'
|
|
],
|
|
imagePlaceholder: '/images/outline-refine.jpg'
|
|
},
|
|
{
|
|
title: 'Title Generation',
|
|
description: 'Multiple SEO-optimized title options',
|
|
details: [
|
|
'AI-generated title variations',
|
|
'SEO score per title',
|
|
'Engagement potential analysis',
|
|
'Keyword integration',
|
|
'Click-through optimization'
|
|
],
|
|
imagePlaceholder: '/images/outline-titles.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Gemini Pro (provider-agnostic via llm_text_gen)',
|
|
promptType: 'Structured outline prompt with research context',
|
|
outputFormat: 'JSON outline with sections, headings, key_points, references',
|
|
integration: 'OutlineService via parallel_processor.py'
|
|
},
|
|
videoPlaceholder: '/videos/phase2-outline.mp4'
|
|
},
|
|
{
|
|
id: 'content',
|
|
name: 'Content Generation',
|
|
icon: '✨',
|
|
shortDescription: 'Section-by-section content generation with SEO optimization, context memory, and engagement improvements',
|
|
features: [
|
|
{
|
|
title: 'Smart Content Generation',
|
|
description: 'AI-powered section writing with context awareness',
|
|
details: [
|
|
'Section-by-section generation',
|
|
'Context memory across sections',
|
|
'Smooth transitions between sections',
|
|
'Consistent tone and style',
|
|
'Natural keyword integration'
|
|
],
|
|
imagePlaceholder: '/images/content-generation.jpg'
|
|
},
|
|
{
|
|
title: 'Continuity Analysis',
|
|
description: 'Real-time flow and coherence monitoring',
|
|
details: [
|
|
'Narrative flow assessment',
|
|
'Coherence scoring',
|
|
'Transition quality analysis',
|
|
'Tone consistency tracking',
|
|
'Content quality metrics'
|
|
],
|
|
imagePlaceholder: '/images/content-continuity.jpg'
|
|
},
|
|
{
|
|
title: 'Source Integration',
|
|
description: 'Automatic citation and source reference',
|
|
details: [
|
|
'Relevant URL selection',
|
|
'Natural citation insertion',
|
|
'Source attribution',
|
|
'Evidence-backed content',
|
|
'Reference management'
|
|
],
|
|
imagePlaceholder: '/images/content-sources.jpg'
|
|
},
|
|
{
|
|
title: 'Medium Blog Mode',
|
|
description: 'Quick generation for Medium-style articles',
|
|
details: [
|
|
'Single-call full blog generation',
|
|
'Medium-optimized formatting',
|
|
'Engagement-focused structure',
|
|
'SEO-ready output',
|
|
'Fast turnaround option'
|
|
],
|
|
imagePlaceholder: '/images/content-medium.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Provider-agnostic (Gemini/HF via main_text_generation)',
|
|
promptType: 'Context-aware section prompt with research',
|
|
outputFormat: 'Markdown content with transitions and metrics',
|
|
integration: 'EnhancedContentGenerator with ContextMemory'
|
|
},
|
|
videoPlaceholder: '/videos/phase3-content.mp4'
|
|
},
|
|
{
|
|
id: 'seo',
|
|
name: 'SEO Analysis',
|
|
icon: '📈',
|
|
shortDescription: 'Advanced SEO analysis with actionable recommendations and AI-powered optimization',
|
|
features: [
|
|
{
|
|
title: 'Comprehensive SEO Scoring',
|
|
description: 'Multi-dimensional SEO analysis across key factors',
|
|
details: [
|
|
'Overall SEO score (0-100)',
|
|
'Structure optimization score',
|
|
'Keyword optimization rating',
|
|
'Readability assessment',
|
|
'Quality metrics evaluation'
|
|
],
|
|
imagePlaceholder: '/images/seo-scoring.jpg'
|
|
},
|
|
{
|
|
title: 'Actionable Recommendations',
|
|
description: 'AI-powered improvement suggestions',
|
|
details: [
|
|
'Priority-ranked fixes',
|
|
'Specific text improvements',
|
|
'Keyword density optimization',
|
|
'Heading structure suggestions',
|
|
'Content enhancement ideas'
|
|
],
|
|
imagePlaceholder: '/images/seo-recommendations.jpg'
|
|
},
|
|
{
|
|
title: 'AI-Powered Content Refinement',
|
|
description: 'Automatically apply SEO recommendations',
|
|
details: [
|
|
'Smart content rewriting',
|
|
'Preserves original intent',
|
|
'Natural keyword integration',
|
|
'Readability improvement',
|
|
'Structure optimization'
|
|
],
|
|
imagePlaceholder: '/images/seo-apply.jpg'
|
|
},
|
|
{
|
|
title: 'Keyword Analysis',
|
|
description: 'Deep dive into keyword performance',
|
|
details: [
|
|
'Primary keyword density',
|
|
'Semantic keyword usage',
|
|
'Long-tail keyword opportunities',
|
|
'Keyword distribution heatmap',
|
|
'Optimization recommendations'
|
|
],
|
|
imagePlaceholder: '/images/seo-keywords.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Parallel non-AI analyzers + single AI call',
|
|
promptType: 'Structured SEO analysis prompt',
|
|
outputFormat: 'Comprehensive SEO report with scores and recommendations',
|
|
integration: 'BlogContentSEOAnalyzer with parallel processing'
|
|
},
|
|
videoPlaceholder: '/videos/phase4-seo.mp4'
|
|
},
|
|
{
|
|
id: 'metadata',
|
|
name: 'SEO Metadata',
|
|
icon: '🎯',
|
|
shortDescription: 'Optimized metadata generation for titles, descriptions, Open Graph, Twitter cards, and structured data',
|
|
features: [
|
|
{
|
|
title: 'Comprehensive Metadata',
|
|
description: 'All-in-one SEO metadata generation',
|
|
details: [
|
|
'SEO-optimized title (50-60 chars)',
|
|
'Meta description with CTA',
|
|
'URL slug optimization',
|
|
'Blog tags and categories',
|
|
'Social hashtags'
|
|
],
|
|
imagePlaceholder: '/images/metadata-comprehensive.jpg'
|
|
},
|
|
{
|
|
title: 'Open Graph & Twitter Cards',
|
|
description: 'Rich social media previews',
|
|
details: [
|
|
'OG title and description',
|
|
'Twitter card optimization',
|
|
'Image preview settings',
|
|
'Social engagement boost',
|
|
'Click-through optimization'
|
|
],
|
|
imagePlaceholder: '/images/metadata-social.jpg'
|
|
},
|
|
{
|
|
title: 'Structured Data',
|
|
description: 'Schema.org markup for rich snippets',
|
|
details: [
|
|
'Article schema',
|
|
'Organization markup',
|
|
'Breadcrumb schema',
|
|
'FAQ schema support',
|
|
'Enhanced search results'
|
|
],
|
|
imagePlaceholder: '/images/metadata-schema.jpg'
|
|
},
|
|
{
|
|
title: 'Multi-Format Output',
|
|
description: 'Ready-to-use metadata in all formats',
|
|
details: [
|
|
'HTML meta tags',
|
|
'JSON-LD structured data',
|
|
'WordPress export format',
|
|
'Wix integration format',
|
|
'One-click copy options'
|
|
],
|
|
imagePlaceholder: '/images/metadata-export.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Maximum 2 AI calls for comprehensive metadata',
|
|
promptType: 'Personalized metadata prompt with context',
|
|
outputFormat: 'Complete metadata package (title, desc, tags, schema)',
|
|
integration: 'BlogSEOMetadataGenerator with optimization'
|
|
},
|
|
videoPlaceholder: '/videos/phase5-metadata.mp4'
|
|
},
|
|
{
|
|
id: 'publish',
|
|
name: 'Publish & Distribute',
|
|
icon: '🚀',
|
|
shortDescription: 'Direct publishing to WordPress, Wix, Medium, and other platforms with scheduling',
|
|
features: [
|
|
{
|
|
title: 'Multi-Platform Publishing',
|
|
description: 'Publish to multiple platforms simultaneously',
|
|
details: [
|
|
'WordPress direct publishing',
|
|
'Wix blog integration',
|
|
'Medium publishing',
|
|
'Custom blog platforms',
|
|
'API integrations'
|
|
],
|
|
imagePlaceholder: '/images/publish-platforms.jpg'
|
|
},
|
|
{
|
|
title: 'Content Scheduling',
|
|
description: 'Schedule posts for optimal timing',
|
|
details: [
|
|
'Time-based scheduling',
|
|
'Timezone management',
|
|
'Bulk scheduling support',
|
|
'Calendar integration',
|
|
'Reminder notifications'
|
|
],
|
|
imagePlaceholder: '/images/publish-schedule.jpg'
|
|
},
|
|
{
|
|
title: 'Revision Management',
|
|
description: 'Track and manage content versions',
|
|
details: [
|
|
'Version history',
|
|
'Change tracking',
|
|
'Rollback capabilities',
|
|
'A/B testing support',
|
|
'Performance comparison'
|
|
],
|
|
imagePlaceholder: '/images/publish-versions.jpg'
|
|
},
|
|
{
|
|
title: 'Analytics Integration',
|
|
description: 'Post-publish performance tracking',
|
|
details: [
|
|
'View count tracking',
|
|
'Engagement metrics',
|
|
'SEO performance',
|
|
'Traffic analysis',
|
|
'Conversion tracking'
|
|
],
|
|
imagePlaceholder: '/images/publish-analytics.jpg'
|
|
}
|
|
],
|
|
technicalDetails: {
|
|
aiModel: 'Platform-specific API integrations',
|
|
promptType: 'N/A - publishing only',
|
|
outputFormat: 'Published content with URL',
|
|
integration: 'Platform APIs via Publisher component'
|
|
},
|
|
videoPlaceholder: '/videos/phase6-publish.mp4'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Box sx={{ py: 8, bgcolor: 'background.paper' }}>
|
|
<Container maxWidth="lg">
|
|
{/* Section Title */}
|
|
<Box sx={{ textAlign: 'center', mb: 6 }}>
|
|
<Typography
|
|
variant="h2"
|
|
component="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
background: 'linear-gradient(135deg, #1976d2 0%, #9c27b0 100%)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
mb: 2
|
|
}}
|
|
>
|
|
Complete AI Blog Writing Workflow
|
|
</Typography>
|
|
<Typography variant="h6" color="text.secondary" sx={{ maxWidth: '800px', mx: 'auto' }}>
|
|
Six powerful phases that transform your ideas into SEO-optimized, engaging blog content
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Phase Cards */}
|
|
<Grid container spacing={4}>
|
|
{phases.map((phase, index) => (
|
|
<Grid item xs={12} md={6} key={phase.id}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease',
|
|
border: activePhase === index ? 2 : 1,
|
|
borderColor: activePhase === index ? 'primary.main' : 'divider',
|
|
'&:hover': {
|
|
transform: 'translateY(-8px)',
|
|
boxShadow: 6,
|
|
}
|
|
}}
|
|
onClick={() => setActivePhase(activePhase === index ? null : index)}
|
|
>
|
|
<CardContent sx={{ p: 3 }}>
|
|
<Stack direction="row" spacing={2} alignItems="flex-start" mb={2}>
|
|
<Typography variant="h2" sx={{ fontSize: '3rem' }}>
|
|
{phase.icon}
|
|
</Typography>
|
|
<Box flex={1}>
|
|
<Typography variant="h5" fontWeight={600} gutterBottom>
|
|
{phase.name}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{phase.shortDescription}
|
|
</Typography>
|
|
</Box>
|
|
<Chip
|
|
label={`Phase ${index + 1}`}
|
|
size="small"
|
|
color="primary"
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
|
|
{activePhase === index && (
|
|
<Box sx={{ mt: 3, pt: 3, borderTop: 1, borderColor: 'divider' }}>
|
|
{/* Video Placeholder */}
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
aspectRatio: '16/9',
|
|
bgcolor: 'grey.200',
|
|
borderRadius: 2,
|
|
mb: 3,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
<Typography variant="body2" color="text.secondary">
|
|
🎥 Video: {phase.videoPlaceholder}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Features Grid */}
|
|
<Grid container spacing={2} mb={3}>
|
|
{phase.features.map((feature, idx) => (
|
|
<Grid item xs={12} sm={6} key={idx}>
|
|
<Card variant="outlined" sx={{ p: 2, height: '100%' }}>
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
aspectRatio: '4/3',
|
|
bgcolor: 'grey.100',
|
|
borderRadius: 1,
|
|
mb: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
<Typography variant="caption" color="text.secondary">
|
|
📷 Image
|
|
</Typography>
|
|
</Box>
|
|
<Typography variant="subtitle2" fontWeight={600} gutterBottom>
|
|
{feature.title}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary" mb={1}>
|
|
{feature.description}
|
|
</Typography>
|
|
<Stack spacing={0.5}>
|
|
{feature.details.slice(0, 3).map((detail, i) => (
|
|
<Stack key={i} direction="row" spacing={1} alignItems="flex-start">
|
|
<CheckCircle sx={{ fontSize: 16, color: 'success.main', mt: 0.5 }} />
|
|
<Typography variant="caption" color="text.secondary">
|
|
{detail}
|
|
</Typography>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
{/* Technical Details */}
|
|
<Card variant="outlined" sx={{ bgcolor: 'grey.50', p: 2 }}>
|
|
<Typography variant="subtitle2" fontWeight={600} mb={1} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<AutoAwesome sx={{ fontSize: 18 }} />
|
|
Technical Implementation
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography variant="caption" fontWeight={600}>AI Model</Typography>
|
|
<Typography variant="body2">{phase.technicalDetails.aiModel}</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography variant="caption" fontWeight={600}>Output Format</Typography>
|
|
<Typography variant="body2">{phase.technicalDetails.outputFormat}</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography variant="caption" fontWeight={600}>Prompt Type</Typography>
|
|
<Typography variant="body2">{phase.technicalDetails.promptType}</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<Typography variant="caption" fontWeight={600}>Integration</Typography>
|
|
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
|
{phase.technicalDetails.integration}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
</Box>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default BlogWriterPhasesSection;
|
|
|