aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Landing/FeaturesSection.jsx
blob: 32dcbc877644f6e726b5e1084982d10ebc395db7 (plain) (blame)
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
140
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}>
        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}>
        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