Add Footer component to Landing page
This commit is contained in:
Mo Tarbin
parent
e25a6d3be9
commit
ba3331efe8
5 changed files with 239 additions and 45 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
127
src/views/Landing/Footer.jsx
Normal file
127
src/views/Landing/Footer.jsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue