import {
AutoAwesomeMosaicOutlined,
AutoAwesomeRounded,
CodeRounded,
GroupRounded,
HistoryRounded,
Webhook,
} from '@mui/icons-material'
import Card from '@mui/joy/Card'
import Container from '@mui/joy/Container'
import Typography from '@mui/joy/Typography'
import { styled } from '@mui/system'
const FeatureIcon = styled('div')({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f0f0f0', // Adjust the background color as needed
borderRadius: '50%',
minWidth: '60px',
height: '60px',
marginRight: '16px',
})
const CardData = [
{
title: 'Open Source & Transparent',
headline: 'Built for the Community',
description:
'Donetick is a community-driven, open-source project. Contribute, customize, and make task management truly yours.',
icon: CodeRounded,
},
{
title: 'Circles: Your Task Hub',
headline: 'Share & Conquer Together',
description:
'Create circles for your family, friends, or team. Easily share tasks and track progress within each group.',
icon: GroupRounded,
},
{
title: 'Track Your Progress',
headline: "See Who's Done What",
description:
'View a history of task completion for each member of your circles. Celebrate successes and stay on top of your goals.',
icon: HistoryRounded,
},
{
title: 'Automated Chore Scheduling',
headline: 'Fully Customizable Recurring Tasks',
description:
'Set up chores to repeat daily, weekly, or monthly. Donetick will automatically assign and track each task for you.',
icon: AutoAwesomeMosaicOutlined,
},
{
title: 'Automated Task Assignment',
headline: 'Share Responsibilities Equally',
description:
'can automatically assigns tasks to each member of your circle. Randomly or based on past completion.',
icon: AutoAwesomeRounded,
},
{
title: 'Integrations & Webhooks',
headline: 'API & 3rd Party Integrations',
description:
'Connect Donetick with your favorite apps and services. Trigger tasks based on events from other platforms.',
icon: Webhook,
},
]
function Feature2({ icon: Icon, title, headline, description, index }) {
return (
<Card
variant='plain'
sx={{ textAlign: 'left', p: 2 }}
data-aos-delay={100 * index}
data-aos-anchor='[data-aos-id-features2-blocks]'
data-aos='fade-up'
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<FeatureIcon>
<Icon
color='primary'
style={{ Width: '30px', height: '30px' }}
stroke={1.5}
/>
</FeatureIcon>
<div>
{/* Changes are within this div */}
<Typography level='h4' mt={1} mb={0.5}>
{title}
</Typography>
<Typography level='body-sm' color='neutral' lineHeight={1.4}>
{headline}
</Typography>
</div>
</div>
<Typography level='body-md' color='neutral' lineHeight={1.6}>
{description}
</Typography>
</Card>
)
}
function FeaturesSection() {
const features = CardData.map((feature, index) => (
<Feature2
icon={feature.icon}
title={feature.title}
headline={feature.headline}
description={feature.description}
index={index}
key={index}
/>
))
return (
<Container sx={{ textAlign: 'center' }}>
<Typography level='h4' mt={2} mb={4}>
Donetick is under development
</Typography>
<Container maxWidth={'lg'} sx={{ mb: 8 }}>
<Typography level='body-md' color='neutral'>
Donetick is beta software. and is still under development. thing may
change, break, or disappear at any time. Please use it at your own
risk and discretion. I will do my best to keep the service running
</Typography>
</Container>
<Typography level='h4' mt={2} mb={4}>
Features Overview
</Typography>
<Container maxWidth={'lg'} sx={{ mb: 8 }}></Container>
<div
className='align-center mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
data-aos-id-features2-blocks
>
{features}
</div>
</Container>
)
}
export default FeaturesSection
