340 lines
12 KiB
TypeScript
340 lines
12 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Button,
|
|
Grid,
|
|
Chip,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Alert
|
|
} from '@mui/material';
|
|
import {
|
|
Psychology as PsychologyIcon,
|
|
CheckCircle as CheckIcon,
|
|
DataUsage as DataIcon,
|
|
SmartToy as SmartToyIcon
|
|
} from '@mui/icons-material';
|
|
|
|
interface ComingSoonSectionProps {
|
|
contentCalendar?: any[];
|
|
}
|
|
|
|
export const ComingSoonSection: React.FC<ComingSoonSectionProps> = ({
|
|
contentCalendar = []
|
|
}) => {
|
|
const [openModal, setOpenModal] = useState(false);
|
|
const [selectedFeature, setSelectedFeature] = useState<string | null>(null);
|
|
|
|
const features = [
|
|
{
|
|
id: 'test-persona',
|
|
title: 'Test Your Persona',
|
|
description: 'Generate content with different personas to see the difference',
|
|
icon: <PsychologyIcon />,
|
|
status: 'Coming Soon',
|
|
color: '#3b82f6',
|
|
details: [
|
|
'Compare content generated with and without your persona',
|
|
'Test Brand, Blog, and LinkedIn brand voices side-by-side',
|
|
'Directly apply Brand Voice to any Alwrity tool',
|
|
'AI-powered feedback on brand voice consistency'
|
|
]
|
|
},
|
|
{
|
|
id: 'deep-crawl',
|
|
title: 'Deep Website Analysis',
|
|
description: 'Crawl 10+ pages for comprehensive persona generation',
|
|
icon: <DataIcon />,
|
|
status: 'In Development',
|
|
color: '#10b981',
|
|
details: [
|
|
'Analyze multiple blog posts and pages',
|
|
'Extract comprehensive writing patterns',
|
|
'Understand content themes and topics',
|
|
'Generate more accurate personas',
|
|
'Better brand voice detection'
|
|
]
|
|
},
|
|
{
|
|
id: 'fine-tuning',
|
|
title: 'Personal AI Fine-Tuning',
|
|
description: 'Train a custom AI model specifically for your brand',
|
|
icon: <SmartToyIcon />,
|
|
status: 'Planned',
|
|
color: '#8b5cf6',
|
|
details: [
|
|
'Fine-tune Google Gemma model with your data',
|
|
'Create your personal AI marketing team',
|
|
'Learn from your website, social media, and analytics',
|
|
'Generate content that sounds authentically like you',
|
|
'Private model - your data stays secure'
|
|
]
|
|
}
|
|
];
|
|
|
|
const handleFeatureClick = (featureId: string) => {
|
|
setSelectedFeature(featureId);
|
|
setOpenModal(true);
|
|
};
|
|
|
|
const selectedFeatureData = features.find(f => f.id === selectedFeature);
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ mt: 4, mb: 2 }}>
|
|
<Typography variant="h4" sx={{ fontWeight: 700, color: '#1e293b', mb: 1.5 }}>
|
|
🚀 Coming Soon
|
|
</Typography>
|
|
<Typography variant="body1" sx={{ color: '#64748b', mb: 4, fontSize: '1.1rem' }}>
|
|
Exciting features in development to make your AI writing even more powerful
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
{features.map((feature) => (
|
|
<Grid item xs={12} md={4} key={feature.id}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease',
|
|
border: '2px solid #e2e8f0',
|
|
backgroundColor: '#ffffff',
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
boxShadow: '0 12px 30px rgba(0, 0, 0, 0.15)',
|
|
borderColor: feature.color,
|
|
'& .feature-icon': {
|
|
transform: 'scale(1.1)',
|
|
backgroundColor: `${feature.color}20`
|
|
}
|
|
}
|
|
}}
|
|
onClick={() => handleFeatureClick(feature.id)}
|
|
>
|
|
<CardContent sx={{ p: 3 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|
<Box
|
|
className="feature-icon"
|
|
sx={{
|
|
p: 2,
|
|
borderRadius: 3,
|
|
backgroundColor: `${feature.color}15`,
|
|
color: feature.color,
|
|
mr: 2,
|
|
transition: 'all 0.3s ease',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{feature.icon}
|
|
</Box>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 700, color: '#1e293b', mb: 1 }}>
|
|
{feature.title}
|
|
</Typography>
|
|
<Chip
|
|
label={feature.status}
|
|
size="small"
|
|
sx={{
|
|
backgroundColor: `${feature.color}20`,
|
|
color: feature.color,
|
|
fontWeight: 600,
|
|
fontSize: '0.75rem',
|
|
height: 24,
|
|
'& .MuiChip-label': {
|
|
px: 1.5
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="body1" sx={{ color: '#64748b', mb: 3, lineHeight: 1.6 }}>
|
|
{feature.description}
|
|
</Typography>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
size="medium"
|
|
sx={{
|
|
borderColor: feature.color,
|
|
color: feature.color,
|
|
fontWeight: 600,
|
|
px: 3,
|
|
py: 1,
|
|
borderRadius: 2,
|
|
textTransform: 'none',
|
|
'&:hover': {
|
|
backgroundColor: `${feature.color}15`,
|
|
borderColor: feature.color,
|
|
transform: 'translateY(-1px)'
|
|
}
|
|
}}
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
<Alert
|
|
severity="info"
|
|
sx={{
|
|
mt: 4,
|
|
backgroundColor: '#f0f9ff',
|
|
border: '2px solid #0ea5e9',
|
|
borderRadius: 3,
|
|
'& .MuiAlert-icon': {
|
|
color: '#0ea5e9',
|
|
fontSize: '1.5rem'
|
|
}
|
|
}}
|
|
>
|
|
<Typography variant="body1" sx={{ color: '#0c4a6e', fontWeight: 500 }}>
|
|
<strong>What's Next:</strong> These features will be available in upcoming releases.
|
|
Your current persona is already powerful and ready to use!
|
|
</Typography>
|
|
</Alert>
|
|
</Box>
|
|
|
|
{/* Feature Details Modal */}
|
|
<Dialog
|
|
open={openModal}
|
|
onClose={() => setOpenModal(false)}
|
|
maxWidth="md"
|
|
fullWidth
|
|
>
|
|
<DialogTitle sx={{ pb: 2 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
|
{selectedFeatureData && (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
p: 2,
|
|
borderRadius: 3,
|
|
backgroundColor: `${selectedFeatureData.color}20`,
|
|
color: selectedFeatureData.color,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{selectedFeatureData.icon}
|
|
</Box>
|
|
<Box>
|
|
<Typography variant="h5" sx={{ fontWeight: 700, color: '#1e293b', mb: 1 }}>
|
|
{selectedFeatureData.title}
|
|
</Typography>
|
|
<Chip
|
|
label={selectedFeatureData.status}
|
|
size="medium"
|
|
sx={{
|
|
backgroundColor: `${selectedFeatureData.color}20`,
|
|
color: selectedFeatureData.color,
|
|
fontWeight: 600,
|
|
fontSize: '0.875rem'
|
|
}}
|
|
/>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent>
|
|
{selectedFeatureData && (
|
|
<>
|
|
<Typography variant="body1" sx={{ color: '#64748b', mb: 4, fontSize: '1.1rem', lineHeight: 1.6 }}>
|
|
{selectedFeatureData.description}
|
|
</Typography>
|
|
|
|
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3, color: '#1e293b' }}>
|
|
Key Features:
|
|
</Typography>
|
|
|
|
<List sx={{ pl: 0 }}>
|
|
{selectedFeatureData.details.map((detail, index) => (
|
|
<ListItem key={index} sx={{ pl: 0, py: 1 }}>
|
|
<ListItemIcon sx={{ minWidth: 32 }}>
|
|
<CheckIcon sx={{ color: selectedFeatureData.color, fontSize: 20 }} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={detail}
|
|
primaryTypographyProps={{
|
|
variant: 'body1',
|
|
color: '#374151',
|
|
fontWeight: 500
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
|
|
{selectedFeatureData.id === 'test-persona' && (
|
|
<Box sx={{ mt: 3, p: 2, backgroundColor: '#f8fafc', borderRadius: 2 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1, color: '#1e293b' }}>
|
|
How It Works:
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: '#64748b' }}>
|
|
Select a topic from your content calendar, then generate content using different personas
|
|
to see how your AI adapts its writing style. Compare the results and provide feedback
|
|
to continuously improve your persona.
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
|
|
{selectedFeatureData.id === 'fine-tuning' && (
|
|
<Box sx={{ mt: 3, p: 2, backgroundColor: '#f0f9ff', borderRadius: 2 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1, color: '#1e293b' }}>
|
|
Privacy & Security:
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: '#64748b' }}>
|
|
Your data is used exclusively to train your private AI model. It's never shared
|
|
or used for any other purpose. You own your AI, and it works only for you.
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
|
|
<DialogActions sx={{ p: 3, pt: 1 }}>
|
|
<Button
|
|
onClick={() => setOpenModal(false)}
|
|
variant="outlined"
|
|
>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
onClick={() => setOpenModal(false)}
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: selectedFeatureData?.color || '#3b82f6',
|
|
'&:hover': {
|
|
backgroundColor: selectedFeatureData?.color || '#3b82f6',
|
|
opacity: 0.9
|
|
}
|
|
}}
|
|
>
|
|
Notify Me When Ready
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComingSoonSection;
|