aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Landing
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/Landing')
-rw-r--r--src/views/Landing/CookiePermissionSnackbar.jsx40
-rw-r--r--src/views/Landing/FeaturesSection.jsx12
-rw-r--r--src/views/Landing/Footer.jsx30
-rw-r--r--src/views/Landing/GettingStarted.jsx171
-rw-r--r--src/views/Landing/HomeHero.jsx13
-rw-r--r--src/views/Landing/Landing.jsx6
6 files changed, 232 insertions, 40 deletions
diff --git a/src/views/Landing/CookiePermissionSnackbar.jsx b/src/views/Landing/CookiePermissionSnackbar.jsx
new file mode 100644
index 0000000..7fe3724
--- /dev/null
+++ b/src/views/Landing/CookiePermissionSnackbar.jsx
@@ -0,0 +1,40 @@
+import { Button, Snackbar } from '@mui/joy'
+import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
+
+const CookiePermissionSnackbar = () => {
+ useEffect(() => {
+ const cookiePermission = Cookies.get('cookies_permission')
+
+ if (cookiePermission !== 'true') {
+ setOpen(true)
+ }
+ }, [])
+
+ const [open, setOpen] = useState(false)
+ const handleClose = () => {
+ Cookies.set('cookies_permission', 'true')
+ setOpen(false)
+ }
+
+ return (
+ <Snackbar
+ open={open}
+ anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+ onClose={(event, reason) => {
+ if (reason === 'clickaway') {
+ return
+ }
+ // Cookies.set('cookies_permission', 'true')
+ handleClose()
+ }}
+ >
+ We use cookies to ensure you get the best experience on our website.
+ <Button variant='soft' onClick={handleClose}>
+ Accept
+ </Button>
+ </Snackbar>
+ )
+}
+
+export default CookiePermissionSnackbar
diff --git a/src/views/Landing/FeaturesSection.jsx b/src/views/Landing/FeaturesSection.jsx
index 32dcbc8..dbabd43 100644
--- a/src/views/Landing/FeaturesSection.jsx
+++ b/src/views/Landing/FeaturesSection.jsx
@@ -111,18 +111,6 @@ function FeaturesSection() {
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>
diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx
index 11a011a..d8cd4a4 100644
--- a/src/views/Landing/Footer.jsx
+++ b/src/views/Landing/Footer.jsx
@@ -4,6 +4,7 @@ import Box from '@mui/joy/Box'
import Link from '@mui/joy/Link'
import Typography from '@mui/joy/Typography'
import * as React from 'react'
+import { version } from '../../../package.json'
function Footer() {
return (
@@ -47,17 +48,6 @@ function Footer() {
tick✓
</span>
</Typography>
- <span
- style={{
- fontSize: 12,
- fontWeight: 700,
- position: 'relative',
- top: 12,
- right: 45,
- }}
- >
- Beta
- </span>
</Box>
</Box>
<Box>
@@ -65,11 +55,11 @@ function Footer() {
Github
</Typography>
<Link
- href='https://github.com/donetick/core'
+ href='https://github.com/donetick/donetick'
level='body2'
sx={{ display: 'block' }}
>
- Core(Backend)
+ Donetick
</Link>
<Link
href='https://github.com/donetick/frontend'
@@ -86,11 +76,18 @@ function Footer() {
Home Assistant Addon
</Link>
<Link
- href='https://github.com/orgs/Donetick/packages'
+ href='https://github.com/orgs/donetick/packages'
+ level='body2'
+ sx={{ display: 'block' }}
+ >
+ Docker Images
+ </Link>
+ <Link
+ href='https://github.com/donetick/donetick/releases'
level='body2'
sx={{ display: 'block' }}
>
- Packages
+ Releases
</Link>
</Box>
<Box>
@@ -107,6 +104,9 @@ function Footer() {
<Link disabled={true} level='body2' sx={{ display: 'block' }}>
Changelog(soon)
</Link>
+ <Link disabled={true} level='body2' sx={{ display: 'block' }}>
+ V{version}
+ </Link>
</Box>
{/* <Box>
<Typography level='body2' fontWeight='bold' mb={1}>
diff --git a/src/views/Landing/GettingStarted.jsx b/src/views/Landing/GettingStarted.jsx
new file mode 100644
index 0000000..ede365d
--- /dev/null
+++ b/src/views/Landing/GettingStarted.jsx
@@ -0,0 +1,171 @@
+import {
+ AddHome,
+ AutoAwesome,
+ Cloud,
+ GitHub,
+ InstallMobile,
+ Storage,
+} from '@mui/icons-material'
+import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy'
+import { useNavigate } from 'react-router-dom'
+const IconContainer = styled('div')({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: '50%',
+ minWidth: '60px',
+ height: '60px',
+ marginRight: '16px',
+})
+
+const ButtonContainer = styled('div')({
+ display: 'flex',
+ justifyContent: 'center',
+ marginTop: 'auto',
+})
+
+function StartOptionCard({ icon: Icon, title, description, button, index }) {
+ return (
+ <Card
+ variant='plain'
+ sx={{
+ p: 2,
+ display: 'flex',
+ minHeight: '300px',
+ py: 4,
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ }}
+ data-aos-delay={100 * index}
+ data-aos-anchor='[data-aos-id-getting-started-container]'
+ data-aos='fade-up'
+ >
+ {/* Changes are within this div */}
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <IconContainer>{Icon}</IconContainer>
+
+ <Typography level='h4' textAlign={'center'}>
+ {title}
+ </Typography>
+ </Box>
+
+ <Typography level='body-md' color='neutral' lineHeight={1.6}>
+ {description}
+ </Typography>
+
+ <ButtonContainer>{button}</ButtonContainer>
+ </Card>
+ )
+}
+
+const GettingStarted = () => {
+ const navigate = useNavigate()
+ const information = [
+ {
+ title: 'Donetick Web',
+ icon: <Cloud style={{ fontSize: '48px' }} />,
+ description:
+ 'The easiest way! just create account and start using DoneTick',
+ button: (
+ <Button
+ size='lg'
+ fullWidth
+ startDecorator={<AutoAwesome />}
+ onClick={() => {
+ navigate('/my/chores')
+ }}
+ >
+ Start Now!
+ </Button>
+ ),
+ },
+ {
+ title: 'Selfhosted',
+ icon: <Storage style={{ fontSize: '48px' }} />,
+ description: 'Download the binary and manage your own DoneTick instance',
+ button: (
+ <Button
+ size='lg'
+ fullWidth
+ startDecorator={<GitHub />}
+ onClick={() => {
+ window.open(
+ 'https://github.com/donetick/donetick/releases',
+ '_blank',
+ )
+ }}
+ >
+ Github Releases
+ </Button>
+ ),
+ },
+ {
+ title: 'Hassio Addon',
+ icon: <AddHome style={{ fontSize: '48px' }} />,
+ description:
+ 'have Home Assistant? install DoneTick as a Home Assistant Addon with single click',
+ button: (
+ <Button
+ size='lg'
+ fullWidth
+ startDecorator={<InstallMobile />}
+ onClick={() => {
+ window.open(
+ 'https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2Fdonetick%2Fhassio-addons',
+ )
+ }}
+ >
+ Add Addon
+ </Button>
+ ),
+ },
+ ]
+ return (
+ <Box
+ sx={{
+ alignContent: 'center',
+ textAlign: 'center',
+ display: 'flex',
+ flexDirection: 'column',
+ mt: 2,
+ }}
+ >
+ <Typography level='h4' mt={2} mb={4}>
+ Getting Started
+ </Typography>
+
+ <Box maxWidth={'lg'} sx={{ mb: 8 }}>
+ <Typography level='body-md' color='neutral'>
+ you can start using DoneTick in multiple ways, easiest way is to use
+ Donetick Web and you can start in seconds, or if you are into
+ selfhosting you can download the binary and run it on your own server,
+ or if you are using Home Assistant you can install DoneTick as a Home
+ Assistant Addon
+ </Typography>
+ <div data-aos-id-getting-started-container>
+ <Grid container spacing={4} mt={4}>
+ {information.map((info, index) => (
+ <Grid item xs={12} md={4} key={index}>
+ <StartOptionCard
+ icon={info.icon}
+ title={info.title}
+ description={info.description}
+ button={info.button}
+ />
+ </Grid>
+ ))}
+ </Grid>
+ </div>
+ </Box>
+ </Box>
+ )
+}
+
+export default GettingStarted
diff --git a/src/views/Landing/HomeHero.jsx b/src/views/Landing/HomeHero.jsx
index 644c9cc..35286ec 100644
--- a/src/views/Landing/HomeHero.jsx
+++ b/src/views/Landing/HomeHero.jsx
@@ -61,17 +61,6 @@ const HomeHero = () => {
>
tick
</span>
- <span
- style={{
- fontSize: 20,
- fontWeight: 700,
- position: 'relative',
- top: 12,
- right: 45,
- }}
- >
- Beta
- </span>
</Typography>
</Box>
)
@@ -167,7 +156,7 @@ const HomeHero = () => {
className='hover:scale-105'
onClick={() => {
// new window open to https://github.com/Donetick:
- window.open('https://github.com/donetick', '_blank')
+ window.open('https://github.com/donetick/donetick', '_blank')
}}
startDecorator={<GitHub />}
>
diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx
index 4ca1b60..a323ecc 100644
--- a/src/views/Landing/Landing.jsx
+++ b/src/views/Landing/Landing.jsx
@@ -3,12 +3,14 @@ import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
+import CookiePermissionSnackbar from './CookiePermissionSnackbar'
import DemoAssignee from './DemoAssignee'
import DemoHistory from './DemoHistory'
import DemoMyChore from './DemoMyChore'
import DemoScheduler from './DemoScheduler'
import FeaturesSection from './FeaturesSection'
import Footer from './Footer'
+import GettingStarted from './GettingStarted'
import HomeHero from './HomeHero'
const Landing = () => {
const Navigate = useNavigate()
@@ -39,6 +41,8 @@ const Landing = () => {
<DemoHistory />
</Grid>
<FeaturesSection />
+ <GettingStarted />
+
{/* <PricingSection /> */}
<Box
sx={{
@@ -49,7 +53,7 @@ const Landing = () => {
mb: 5,
}}
></Box>
-
+ <CookiePermissionSnackbar />
<Footer />
</Container>
)
generated by cgit (git 2.34.1) at 2024-10-16 14:13:26 +0000