Add Footer component to Landing page

5 files changed, 239 insertions, 45 deletions

diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx
index df45aa7..9e3357b 100644
--- a/src/views/ChoreEdit/ChoreView.jsx
+++ b/src/views/ChoreEdit/ChoreView.jsx
@@ -3,15 +3,19 @@ import {
   CancelScheduleSend,
   Check,
   Checklist,
+  Edit,
+  History,
   Note,
   PeopleAlt,
   Person,
+  Timelapse,
 } from '@mui/icons-material'
 import {
   Box,
   Button,
   Card,
   Checkbox,
+  Chip,
   Container,
   FormControl,
   Grid,
@@ -84,21 +88,24 @@ const ChoreView = () => {
 
   const generateInfoCards = chore => {
     const cards = [
+      // {
+      //   size: 6,
+      //   icon: <CalendarMonth />,
+      //   text: 'Due Date',
+      //   subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'),
+      // },
       {
-        icon: <CalendarMonth />,
-        text: 'Due Date',
-        subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'),
-      },
-      {
+        size: 6,
         icon: <PeopleAlt />,
         text: 'Assigned To',
         subtext: performers.find(p => p.id === chore.assignedTo)?.displayName,
       },
-      {
-        icon: <Person />,
-        text: 'Created By',
-        subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
-      },
+      // {
+      //   size: 6,
+      //   icon: <Person />,
+      //   text: 'Created By',
+      //   subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
+      // },
       //   {
       //     icon: <TextFields />,
       //     text: 'Frequency',
@@ -107,20 +114,23 @@ const ChoreView = () => {
       //       chore.frequencyType.slice(1),
       //   },
       {
+        size: 6,
         icon: <Checklist />,
-        text: 'Total Completed',
-        subtext: `${chore.totalCompletedCount}`,
+        text: 'Completed',
+        subtext: `${chore.totalCompletedCount} times`,
       },
-      //   {
-      //     icon: <Timelapse />,
-      //     text: 'Last Completed',
-      //     subtext:
-      //       chore.lastCompletedDate &&
-      //       moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
-      //   },
       {
+        size: 6,
+        icon: <Timelapse />,
+        text: 'Last time',
+        subtext:
+          chore.lastCompletedDate &&
+          moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
+      },
+      {
+        size: 6,
         icon: <Person />,
-        text: 'Last Completed',
+        text: 'Last',
         subtext: chore.lastCompletedDate
           ? `${
               chore.lastCompletedDate &&
@@ -132,6 +142,7 @@ const ChoreView = () => {
           : 'Never',
       },
       {
+        size: 12,
         icon: <Note />,
         text: 'Recent Note',
         subtext: chore.notes || '--',
@@ -195,22 +206,43 @@ const ChoreView = () => {
         justifyContent: 'space-between',
       }}
     >
-      <Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+        }}
+      >
         <Typography
           level='h3'
-          textAlign={'center'}
+          // textAlign={'center'}
           sx={{
             mt: 2,
-            mb: 4,
+            mb: 1,
           }}
         >
           {chore.name}
         </Typography>
-
+        <Chip startDecorator={<CalendarMonth />} size='lg' sx={{ mb: 4 }}>
+          {chore.nextDueDate
+            ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}`
+            : 'N/A'}
+        </Chip>
+      </Box>
+      <Box>
         <Grid container spacing={1}>
           {infoCards.map((info, index) => (
-            <Grid key={index} item xs={12} sm={6}>
-              <Sheet sx={{ mb: 1, borderRadius: 'md', p: 1, boxShadow: 'sm' }}>
+            <Grid key={index} item xs={info.size} sm={info.size}>
+              <Sheet
+                sx={{
+                  mb: 1,
+                  borderRadius: 'lg',
+                  p: 1,
+                  boxShadow: 'sm',
+                }}
+              >
                 <ListItem>
                   <ListItemDecorator>
                     <IconCard>{info.icon}</IconCard>
@@ -227,6 +259,28 @@ const ChoreView = () => {
               </Sheet>
             </Grid>
           ))}
+          <Grid item xs={6}>
+            <Button
+              startDecorator={<History />}
+              size='lg'
+              color='success'
+              variant='outlined'
+              fullWidth
+            >
+              History
+            </Button>
+          </Grid>
+          <Grid item xs={6}>
+            <Button
+              startDecorator={<Edit />}
+              size='lg'
+              color='success'
+              variant='outlined'
+              fullWidth
+            >
+              Edit
+            </Button>
+          </Grid>
         </Grid>
       </Box>
       {/* <Divider
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>
   )
 }
diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx
index 2da09f5..d3708ae 100644
--- a/src/views/components/NavBar.jsx
+++ b/src/views/components/NavBar.jsx
@@ -21,7 +21,7 @@ import {
   Typography,
 } from '@mui/joy'
 import { useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { version } from '../../../package.json'
 import NavBarLink from './NavBarLink'
 const links = [
@@ -63,6 +63,7 @@ const links = [
 ]
 
 const NavBar = () => {
+  const navigate = useNavigate()
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [openDrawer, closeDrawer] = [
     () => setDrawerOpen(true),
@@ -89,7 +90,12 @@ const NavBar = () => {
       <IconButton size='sm' variant='plain' onClick={() => setDrawerOpen(true)}>
         <MenuRounded />
       </IconButton>
-      <Box className='flex items-center gap-2'>
+      <Box
+        className='flex items-center gap-2'
+        onClick={() => {
+          navigate('/my/chores')
+        }}
+      >
         <img component='img' src={Logo} width='34' />
         <Typography
           level='title-lg'