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
|
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',
description:
'Donetick is open source software. You can view, modify, and contribute to the code on GitHub.',
icon: CodeRounded,
},
{
title: 'Circles: Your Task Hub',
description:
'build with sharing in mind. invite other to the circle and you can assign tasks to each other. and only see the tasks the should be shared',
icon: GroupRounded,
},
{
title: 'Track Your Progress',
description:
'View a history of completed tasks. or use things to track simply things!',
icon: HistoryRounded,
},
{
title: 'Automated Task Scheduling',
description:
'Set up Tasks to repeat daily, weekly, or monthly, or maybe specifc day in specifc months? Donetick have a flexible scheduling system',
icon: AutoAwesomeMosaicOutlined,
},
{
title: 'Automated Task Assignment',
description:
'For shared tasks, Donetick can randomly rotate assignments or choose based on last completion or least assigned.',
icon: AutoAwesomeRounded,
},
{
title: 'Integrations & Webhooks',
description:
'Donetick can update things programmatically with API call. you can update things from other services like IFTTT, Homeassistant or even your own service',
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', fontSize: '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}>
Why Donetick?
</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
|
