361 lines
15 KiB
TypeScript
361 lines
15 KiB
TypeScript
import React from 'react';
|
|
import { ThemeProvider } from '@mui/material/styles';
|
|
import { Box, Container, Paper, Typography, Grid, CssBaseline } from '@mui/material';
|
|
import { backstoryTheme } from 'BackstoryTheme';
|
|
|
|
const BackstoryUIOverviewPage: React.FC = () => {
|
|
return (
|
|
<ThemeProvider theme={backstoryTheme}>
|
|
<CssBaseline />
|
|
<Box sx={{ bgcolor: 'background.default', overflow: "hidden", py: 4 }}>
|
|
<Container maxWidth="lg">
|
|
<Paper sx={{ p: 4, borderRadius: 2, boxShadow: 2 }}>
|
|
{/* Header */}
|
|
<Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
|
|
<Typography variant="h4" component="h1" sx={{ fontWeight: 'bold', color: 'primary.main', mb: 1 }}>
|
|
Backstory UI Architecture
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary">
|
|
A visual overview of the dual-purpose application serving candidates and employers
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* User Types */}
|
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
|
<Grid size={{xs: 12, md: 6}}>
|
|
<Box sx={{
|
|
p: 3,
|
|
bgcolor: 'rgba(74, 122, 125, 0.1)',
|
|
borderRadius: 2,
|
|
border: '1px solid',
|
|
borderColor: 'rgba(74, 122, 125, 0.3)',
|
|
height: '100%'
|
|
}}>
|
|
<Typography variant="h6" sx={{ color: 'secondary.main', mb: 2, fontWeight: 'bold' }}>
|
|
Candidate Experience
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
|
{[
|
|
'Create comprehensive professional profiles',
|
|
'Configure AI assistant for employer Q&A',
|
|
'Generate tailored resumes for specific jobs',
|
|
'Track profile engagement metrics'
|
|
].map((item, index) => (
|
|
<Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
|
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'secondary.main' }} />
|
|
<Typography variant="body2">{item}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 6}}>
|
|
<Box sx={{
|
|
p: 3,
|
|
bgcolor: 'rgba(26, 37, 54, 0.1)',
|
|
borderRadius: 2,
|
|
border: '1px solid',
|
|
borderColor: 'rgba(26, 37, 54, 0.3)',
|
|
height: '100%'
|
|
}}>
|
|
<Typography variant="h6" sx={{ color: 'primary.main', mb: 2, fontWeight: 'bold' }}>
|
|
Employer Experience
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
|
{[
|
|
'Search for candidates with specific skills',
|
|
'Interact with candidate AI assistants',
|
|
'Generate position-specific candidate resumes',
|
|
'Manage talent pools and job listings'
|
|
].map((item, index) => (
|
|
<Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
|
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'primary.main' }} />
|
|
<Typography variant="body2">{item}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* UI Components */}
|
|
<Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
|
|
<Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
|
|
Key UI Components
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
{[
|
|
{ title: 'Dashboards', description: 'Role-specific dashboards with card-based metrics and action items' },
|
|
{ title: 'Profile Editors', description: 'Comprehensive forms for managing professional information' },
|
|
{ title: 'Resume Builder', description: 'AI-powered tools for creating tailored resumes' },
|
|
{ title: 'Q&A Interface', description: 'Chat-like interface for employer-candidate AI interaction' },
|
|
{ title: 'Search & Filters', description: 'Advanced search with multiple filter categories' },
|
|
{ title: 'Analytics Dashboards', description: 'Visual metrics for tracking engagement and performance' }
|
|
].map((component, index) => (
|
|
<Grid size={{xs: 12, sm: 6, md: 4}} key={index}>
|
|
<Box sx={{
|
|
p: 2,
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
borderRadius: 1,
|
|
height: '100%',
|
|
transition: 'all 0.2s ease-in-out',
|
|
'&:hover': {
|
|
bgcolor: 'rgba(212, 160, 23, 0.05)',
|
|
borderColor: 'action.active',
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: 1
|
|
}
|
|
}}>
|
|
<Typography variant="h6" sx={{ color: 'secondary.main', mb: 1, fontWeight: 'medium' }}>
|
|
{component.title}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{component.description}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
|
|
{/* Navigation Structure */}
|
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
|
{[
|
|
{
|
|
title: 'Candidate Navigation',
|
|
items: ['Dashboard', 'Profile', 'Backstory', 'Resumes', 'Q&A Setup', 'Analytics', 'Settings'],
|
|
color: 'secondary.main',
|
|
borderColor: 'secondary.main'
|
|
},
|
|
{
|
|
title: 'Employer Navigation',
|
|
items: ['Dashboard', 'Search', 'Saved', 'Jobs', 'Company', 'Analytics', 'Settings'],
|
|
color: 'primary.main',
|
|
borderColor: 'primary.main'
|
|
},
|
|
{
|
|
title: 'Public Navigation',
|
|
items: ['Home', 'Docs', 'Pricing', 'Login', 'Register'],
|
|
color: 'custom.highlight',
|
|
borderColor: 'custom.highlight'
|
|
}
|
|
].map((nav, index) => (
|
|
<Grid size={{xs:12, md:4}} key={index}>
|
|
<Box sx={{
|
|
p: 3,
|
|
bgcolor: 'background.paper',
|
|
borderRadius: 2,
|
|
boxShadow: 1,
|
|
height: '100%'
|
|
}}>
|
|
<Typography variant="h6" sx={{ color: 'text.primary', mb: 2, fontWeight: 'bold' }}>
|
|
{nav.title}
|
|
</Typography>
|
|
<Box sx={{
|
|
borderLeft: 3,
|
|
borderColor: nav.borderColor,
|
|
pl: 2,
|
|
py: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 1.5
|
|
}}>
|
|
{nav.items.map((item, idx) => (
|
|
<Typography key={idx} sx={{ color: nav.color, fontWeight: 'medium' }}>
|
|
{item}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
{/* Connection Points */}
|
|
<Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, mb: 4, boxShadow: 1 }}>
|
|
<Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
|
|
System Connection Points
|
|
</Typography>
|
|
<Box sx={{ position: 'relative', py: 2 }}>
|
|
{/* Connection line */}
|
|
<Box sx={{
|
|
position: 'absolute',
|
|
left: '50%',
|
|
top: 0,
|
|
bottom: 0,
|
|
width: 1,
|
|
borderColor: 'divider',
|
|
zIndex: 0,
|
|
borderLeft: "1px solid",
|
|
overflow: "hidden",
|
|
}} />
|
|
|
|
{/* Connection points */}
|
|
{[
|
|
{ left: 'Candidate Profile', right: 'Employer Search' },
|
|
{ left: 'Q&A Setup', right: 'Q&A Interface' },
|
|
{ left: 'Resume Generator', right: 'Job Posts' }
|
|
].map((connection, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
mb: index < 2 ? 5 : 0,
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
|
|
}}
|
|
>
|
|
<Box sx={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
pr: 3
|
|
}}>
|
|
<Box sx={{
|
|
display: 'inline-block',
|
|
bgcolor: 'rgba(74, 122, 125, 0.1)',
|
|
p: 2,
|
|
borderRadius: 2,
|
|
color: 'secondary.main',
|
|
fontWeight: 'medium',
|
|
border: '1px solid',
|
|
borderColor: 'rgba(74, 122, 125, 0.3)'
|
|
}}>
|
|
{connection.left}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box sx={{
|
|
width: 16,
|
|
height: 16,
|
|
borderRadius: '50%',
|
|
bgcolor: 'custom.highlight',
|
|
zIndex: 2,
|
|
boxShadow: 2,
|
|
}} />
|
|
|
|
<Box sx={{
|
|
flex: 1,
|
|
pl: 3,
|
|
}}>
|
|
<Box sx={{
|
|
display: 'inline-block',
|
|
bgcolor: 'rgba(26, 37, 54, 0.1)',
|
|
p: 2,
|
|
borderRadius: 2,
|
|
color: 'primary.main',
|
|
fontWeight: 'medium',
|
|
border: '1px solid',
|
|
borderColor: 'rgba(26, 37, 54, 0.3)',
|
|
}}>
|
|
{connection.right}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Mobile Adaptation */}
|
|
<Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
|
|
<Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
|
|
Mobile Adaptation
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Box sx={{
|
|
width: 200,
|
|
height: 400,
|
|
border: '4px solid',
|
|
borderColor: 'text.primary',
|
|
borderRadius: 5,
|
|
p: 1,
|
|
bgcolor: 'background.default'
|
|
}}>
|
|
<Box sx={{
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
borderRadius: 4,
|
|
overflow: 'hidden'
|
|
}}>
|
|
{/* Mobile header */}
|
|
<Box sx={{
|
|
bgcolor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
p: 1,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Typography sx={{ fontWeight: 'bold', fontSize: '0.875rem' }}>BACKSTORY</Typography>
|
|
<Box>☰</Box>
|
|
</Box>
|
|
|
|
{/* Mobile content */}
|
|
<Box sx={{
|
|
flex: 1,
|
|
p: 1.5,
|
|
overflow: 'auto',
|
|
fontSize: '0.75rem'
|
|
}}>
|
|
<Typography sx={{ mb: 1, fontWeight: 'medium' }}>Welcome back, [Name]!</Typography>
|
|
<Typography sx={{ fontSize: '0.675rem', mb: 2 }}>Profile: 75% complete</Typography>
|
|
|
|
<Box sx={{
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
borderRadius: 1,
|
|
p: 1.5,
|
|
mb: 2,
|
|
bgcolor: 'background.paper'
|
|
}}>
|
|
<Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', mb: 0.5 }}>Resume Builder</Typography>
|
|
<Typography sx={{ fontSize: '0.675rem' }}>3 custom resumes</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
borderRadius: 1,
|
|
p: 1.5,
|
|
bgcolor: 'background.paper'
|
|
}}>
|
|
<Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', mb: 0.5 }}>Recent Activity</Typography>
|
|
<Typography sx={{ fontSize: '0.675rem' }}>• 5 profile views</Typography>
|
|
<Typography sx={{ fontSize: '0.675rem' }}>• 2 downloads</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Mobile footer */}
|
|
<Box sx={{
|
|
bgcolor: 'background.default',
|
|
p: 1,
|
|
display: 'flex',
|
|
justifyContent: 'space-around',
|
|
borderTop: '1px solid',
|
|
borderColor: 'divider'
|
|
}}>
|
|
<Typography sx={{ fontWeight: 'bold', fontSize: '0.75rem', color: 'secondary.main' }}>Home</Typography>
|
|
<Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>Profile</Typography>
|
|
<Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>More</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
</Box>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export {
|
|
BackstoryUIOverviewPage
|
|
}; |