Add Footer component to Landing page

3 files changed, 151 insertions, 17 deletions

diff --git a/src/views/Landing/FeaturesSection.jsx b/src/views/Landing/FeaturesSection.jsx
index 4133d0a..32dcbc8 100644
--- a/src/views/Landing/FeaturesSection.jsx
+++ b/src/views/Landing/FeaturesSection.jsx
@@ -25,44 +25,39 @@ const FeatureIcon = styled('div')({
 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.',
+      'Donetick is open source software. You can view, modify, and contribute to the code on GitHub.',
     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.',
+      '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',
-    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.',
+      'View a history of completed tasks. or use things to track simply things!',
     icon: HistoryRounded,
   },
   {
-    title: 'Automated Chore Scheduling',
-    headline: 'Fully Customizable Recurring Tasks',
+    title: 'Automated Task Scheduling',
     description:
-      'Set up chores to repeat daily, weekly, or monthly. Donetick will automatically assign and track each task for you.',
+      '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',
-    headline: 'Share Responsibilities Equally',
     description:
-      'can automatically assigns tasks to each member of your circle. Randomly or based on past completion.',
+      'For shared tasks, Donetick can randomly rotate assignments or choose based on last completion or least assigned.',
     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.',
+      '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,
   },
 ]
@@ -80,7 +75,7 @@ function Feature2({ icon: Icon, title, headline, description, index }) {
         <FeatureIcon>
           <Icon
             color='primary'
-            style={{ Width: '30px', height: '30px' }}
+            style={{ Width: '30px', height: '30px', fontSize: '30px' }}
             stroke={1.5}
           />
         </FeatureIcon>
@@ -106,7 +101,7 @@ function FeaturesSection() {
     <Feature2
       icon={feature.icon}
       title={feature.title}
-      headline={feature.headline}
+      // headline={feature.headline}
       description={feature.description}
       index={index}
       key={index}
@@ -128,7 +123,7 @@ function FeaturesSection() {
       </Container>
 
       <Typography level='h4' mt={2} mb={4}>
-        Features Overview
+        Why Donetick?
       </Typography>
 
       <Container maxWidth={'lg'} sx={{ mb: 8 }}></Container>
diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx
new file mode 100644
index 0000000..11a011a
--- /dev/null
+++ b/src/views/Landing/Footer.jsx
@@ -0,0 +1,127 @@
+import LogoSVG from '@/assets/logo.svg'
+import { Card, Grid } from '@mui/joy'
+import Box from '@mui/joy/Box'
+import Link from '@mui/joy/Link'
+import Typography from '@mui/joy/Typography'
+import * as React from 'react'
+
+function Footer() {
+  return (
+    <Card
+      data-aos-landing-footer
+      data-aos-delay={200}
+      data-aos-anchor='[data-aos-landing-footer]'
+      data-aos='zoom-in-up'
+    >
+      <Grid
+        container
+        component='footer'
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          p: 4,
+          // borderTop: '1px solid',
+          bottom: 0,
+          width: '100%',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <div className='logo'>
+            <img src={LogoSVG} alt='logo' width='64px' height='64px' />
+          </div>
+          <Box className='flex items-center gap-2'>
+            <Typography
+              level='title-lg'
+              sx={{
+                fontWeight: 700,
+                fontSize: 24,
+              }}
+            >
+              Done
+              <span
+                style={{
+                  color: '#06b6d4',
+                  fontWeight: 600,
+                }}
+              >
+                tick✓
+              </span>
+            </Typography>
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                position: 'relative',
+                top: 12,
+                right: 45,
+              }}
+            >
+              Beta
+            </span>
+          </Box>
+        </Box>
+        <Box>
+          <Typography level='body2' fontWeight='bold' mb={1}>
+            Github
+          </Typography>
+          <Link
+            href='https://github.com/donetick/core'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
+            Core(Backend)
+          </Link>
+          <Link
+            href='https://github.com/donetick/frontend'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
+            Frontend
+          </Link>
+          <Link
+            href='https://github.com/donetick/hassio-addons'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
+            Home Assistant Addon
+          </Link>
+          <Link
+            href='https://github.com/orgs/Donetick/packages'
+            level='body2'
+            sx={{ display: 'block' }}
+          >
+            Packages
+          </Link>
+        </Box>
+        <Box>
+          <Typography level='body2' fontWeight='bold' mb={1}>
+            Links
+          </Typography>
+
+          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+            Roadmap(soon)
+          </Link>
+          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+            Documentation(soon)
+          </Link>
+          <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+            Changelog(soon)
+          </Link>
+        </Box>
+        {/* <Box>
+        <Typography level='body2' fontWeight='bold' mb={1}>
+          Others
+        </Typography>
+        <Link href='#' level='body2' sx={{ display: 'block' }}>
+          Telegram Integration
+        </Link>
+        <Link href='#' level='body2' sx={{ display: 'block' }}>
+          Slash Commands
+        </Link>
+      </Box> */}
+      </Grid>
+    </Card>
+  )
+}
+
+export default Footer
diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx
index a8b650d..4ca1b60 100644
--- a/src/views/Landing/Landing.jsx
+++ b/src/views/Landing/Landing.jsx
@@ -1,4 +1,4 @@
-import { Container, Grid } from '@mui/joy'
+import { Box, Container, Grid } from '@mui/joy'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
 import { useEffect } from 'react'
@@ -8,6 +8,7 @@ import DemoHistory from './DemoHistory'
 import DemoMyChore from './DemoMyChore'
 import DemoScheduler from './DemoScheduler'
 import FeaturesSection from './FeaturesSection'
+import Footer from './Footer'
 import HomeHero from './HomeHero'
 const Landing = () => {
   const Navigate = useNavigate()
@@ -39,6 +40,17 @@ const Landing = () => {
       </Grid>
       <FeaturesSection />
       {/* <PricingSection /> */}
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 5,
+          mb: 5,
+        }}
+      ></Box>
+
+      <Footer />
     </Container>
   )
 }