283 lines
9.2 KiB
JavaScript
283 lines
9.2 KiB
JavaScript
import {
|
|
Analytics,
|
|
Api,
|
|
Assignment,
|
|
AutoAwesome,
|
|
CalendarMonth,
|
|
EmojiEvents,
|
|
Groups,
|
|
Notifications,
|
|
NotificationsActive,
|
|
Psychology,
|
|
Schedule,
|
|
Security,
|
|
Settings,
|
|
Timer,
|
|
} from '@mui/icons-material'
|
|
import { Box, Card, Container, Grid, Typography, useTheme } from '@mui/joy'
|
|
|
|
const FeaturesSection = () => {
|
|
const theme = useTheme()
|
|
|
|
const features = [
|
|
{
|
|
icon: <Psychology />,
|
|
title: 'Natural Language Input',
|
|
description:
|
|
'Add tasks just by typing. Donetick understands dates, priorities, labels. you can have quickest way to add tasks.',
|
|
},
|
|
{
|
|
icon: <Groups />,
|
|
title: 'Collaboration',
|
|
description:
|
|
'Create groups for family, friends, or teams. Share, assign, and manage tasks together.',
|
|
},
|
|
{
|
|
icon: <EmojiEvents />,
|
|
title: 'Gamification and Points',
|
|
description:
|
|
'Earn points, climb leaderboards for completing tasks. You can even require admin approval for points!',
|
|
},
|
|
{
|
|
icon: <CalendarMonth />,
|
|
title: 'Visual Calendar View',
|
|
description:
|
|
'See all your tasks in a color-coded calendar. Filter by assignee, view daily agendas, and plan with ease.',
|
|
},
|
|
{
|
|
icon: <Schedule />,
|
|
title: 'Smart Scheduling',
|
|
description:
|
|
'Flexible recurring tasks: daily, weekly, monthly, or custom intervals. Choose rolling or fixed schedules and set completion windows to fit any routine.',
|
|
},
|
|
{
|
|
icon: <Assignment />,
|
|
title: 'Automatic Task Assignment',
|
|
description:
|
|
'Distribute tasks fairly using smart algorithms: round-robin, least busy, random, or custom rules. No more manual juggling.',
|
|
},
|
|
{
|
|
icon: <Timer />,
|
|
title: 'Built-in Time Tracking',
|
|
description:
|
|
'Track work sessions with a timer, review detailed logs, and analyze productivity patterns for every task.',
|
|
},
|
|
{
|
|
icon: <NotificationsActive />,
|
|
title: 'Gentle Nudges',
|
|
description:
|
|
'Manually send friendly reminders to assignees about pending tasks. Customize messages and choose who gets notified.',
|
|
},
|
|
{
|
|
icon: <AutoAwesome />,
|
|
title: 'Advanced Organization',
|
|
description:
|
|
'Break down tasks with subtasks, set priorities, add labels and tags, and use templates for quick setup.',
|
|
},
|
|
{
|
|
icon: <Settings />,
|
|
title: 'Advanced Task Settings',
|
|
description:
|
|
'Configure task-specific settings like completion windows, custom point values, and require admin approval for tasks.',
|
|
},
|
|
{
|
|
icon: <Analytics />,
|
|
title: 'Insightful Analytics',
|
|
description:
|
|
'Track progress, view completion history, and spot trends with clear reports and visualizations.',
|
|
},
|
|
{
|
|
icon: <Notifications />,
|
|
title: 'Smart Notifications',
|
|
description:
|
|
'Get timely reminders via Donetick app or other way like Telegram, push, or webhooks.',
|
|
},
|
|
|
|
{
|
|
icon: <Api />,
|
|
title: 'Seamless Integrations',
|
|
description:
|
|
'Connect with REST API, webhooks, and automation tools. Import, export, and trigger actions to fit your workflows.',
|
|
},
|
|
{
|
|
icon: <Security />,
|
|
title: 'Privacy & Security',
|
|
description:
|
|
'Open-source and transparent. For security, you can secure your account with 2FA.',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Container maxWidth='xl' sx={{ py: { xs: 6, sm: 8, md: 12 } }}>
|
|
{/* Section Header */}
|
|
<Box textAlign='center' mb={{ xs: 6, md: 8 }} data-aos='fade-up'>
|
|
<Typography
|
|
level='h2'
|
|
sx={{
|
|
fontSize: { xs: 28, sm: 36, md: 42, lg: 48 },
|
|
fontWeight: 700,
|
|
mb: { xs: 2, md: 3 },
|
|
color: 'text.primary',
|
|
lineHeight: { xs: 1.2, md: 1.1 },
|
|
background:
|
|
'linear-gradient(135deg, var(--joy-palette-primary-500) 0%, var(--joy-palette-primary-600) 100%)',
|
|
backgroundClip: 'text',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Simple Yet Powerful Features
|
|
</Typography>
|
|
<Typography
|
|
level='body-lg'
|
|
sx={{
|
|
fontSize: { xs: 16, sm: 17, md: 18, lg: 19 },
|
|
color: 'text.secondary',
|
|
maxWidth: { xs: '100%', sm: 600, md: 700 },
|
|
mx: 'auto',
|
|
lineHeight: 1.6,
|
|
px: { xs: 1, sm: 0 },
|
|
}}
|
|
>
|
|
Donetick helps you stay organized, motivated, and productive with a
|
|
suite of powerful features designed for individuals and groups.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Features Grid */}
|
|
<Grid container spacing={{ xs: 3, sm: 4, md: 4 }}>
|
|
{features.map((feature, index) => (
|
|
<Grid item xs={12} sm={6} lg={4} key={index}>
|
|
<Card
|
|
data-aos='fade-up'
|
|
data-aos-delay={index * 100}
|
|
data-aos-duration='800'
|
|
variant='outlined'
|
|
sx={{
|
|
p: { xs: 3, sm: 4, md: 4 },
|
|
height: '100%',
|
|
borderRadius: { xs: 16, md: 20 },
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
background: 'background.surface',
|
|
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
cursor: 'pointer',
|
|
minHeight: { xs: 200, sm: 220 },
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: '4px',
|
|
background:
|
|
'linear-gradient(90deg, var(--joy-palette-primary-400) 0%, var(--joy-palette-primary-600) 100%)',
|
|
transform: 'scaleX(0)',
|
|
transformOrigin: 'left',
|
|
transition: 'transform 0.4s ease',
|
|
},
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background:
|
|
'linear-gradient(135deg, rgba(6, 182, 212, 0.02) 0%, rgba(8, 145, 178, 0.04) 100%)',
|
|
opacity: 0,
|
|
transition: 'opacity 0.4s ease',
|
|
pointerEvents: 'none',
|
|
},
|
|
'@media (max-width: 600px)': {
|
|
'&:active': {
|
|
transform: 'scale(0.98)',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{/* Icon and Title Row (mobile) / Separate (desktop) */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: { xs: 'center', sm: 'flex-start' },
|
|
flexDirection: { xs: 'row', sm: 'column' },
|
|
gap: { xs: 2, sm: 0 },
|
|
mb: { xs: 1.5, sm: 0 },
|
|
}}
|
|
>
|
|
<Box
|
|
className='feature-icon'
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: { xs: 40, sm: 60 },
|
|
height: { xs: 40, sm: 60 },
|
|
borderRadius: { xs: 10, sm: 16 },
|
|
background:
|
|
'linear-gradient(135deg, var(--joy-palette-primary-50) 0%, var(--joy-palette-primary-100) 100%)',
|
|
color: 'primary.500',
|
|
mb: { xs: 0, sm: 3 },
|
|
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
flexShrink: 0,
|
|
'& svg': {
|
|
fontSize: { xs: 20, sm: 28 },
|
|
},
|
|
}}
|
|
>
|
|
{feature.icon}
|
|
</Box>
|
|
|
|
<Typography
|
|
className='feature-title'
|
|
level='title-lg'
|
|
sx={{
|
|
fontSize: { xs: 18, sm: 20 },
|
|
fontWeight: 700,
|
|
mb: { xs: 0, sm: 2 },
|
|
color: 'text.primary',
|
|
lineHeight: 1.3,
|
|
transition: 'color 0.3s ease',
|
|
flex: 1,
|
|
}}
|
|
>
|
|
{feature.title}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Description */}
|
|
<Typography
|
|
level='body-md'
|
|
sx={{
|
|
color: 'text.secondary',
|
|
lineHeight: 1.6,
|
|
fontSize: { xs: 14, sm: 15 },
|
|
flex: 1,
|
|
}}
|
|
>
|
|
{feature.description}
|
|
</Typography>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
{/* Bottom CTA Section */}
|
|
<Box
|
|
textAlign='center'
|
|
mt={{ xs: 8, sm: 10, md: 12 }}
|
|
data-aos='fade-up'
|
|
data-aos-duration='800'
|
|
></Box>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default FeaturesSection
|