1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
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
</Typography>
<Container maxWidth={'lg'} sx={{ mb: 8 }}>
<Typography level='body-md' color='neutral'>
Navigate personal growth with genuine insights, thoughtful privacy,
and actionable steps tailored just for you.
</Typography>
</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
|
