1 files changed, 139 insertions, 0 deletions
diff --git a/src/views/Landing/FeaturesSection.jsx b/src/views/Landing/FeaturesSection.jsx
new file mode 100644
index 0000000..a7da1f0
--- /dev/null
+++ b/src/views/Landing/FeaturesSection.jsx
@@ -0,0 +1,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