aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Landing
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/views/Landing/FeaturesSection.jsx12
-rw-r--r--src/views/Landing/Footer.jsx26
-rw-r--r--src/views/Landing/GettingStarted.jsx162
-rw-r--r--src/views/Landing/HomeHero.jsx13
-rw-r--r--src/views/Landing/Landing.jsx3
5 files changed, 177 insertions, 39 deletions
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..3047554 100644
--- a/src/views/Landing/Footer.jsx
+++ b/src/views/Landing/Footer.jsx
@@ -47,17 +47,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 +54,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 +75,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>
diff --git a/src/views/Landing/GettingStarted.jsx b/src/views/Landing/GettingStarted.jsx
new file mode 100644
index 0000000..44aa532
--- /dev/null
+++ b/src/views/Landing/GettingStarted.jsx
@@ -0,0 +1,162 @@
+import {
+ AddHome,
+ AutoAwesome,
+ Cloud,
+ GitHub,
+ InstallMobile,
+ Storage,
+} from '@mui/icons-material'
+import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy'
+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 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 />}>
+ 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..7e70a03 100644
--- a/src/views/Landing/Landing.jsx
+++ b/src/views/Landing/Landing.jsx
@@ -9,6 +9,7 @@ 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 +40,8 @@ const Landing = () => {
<DemoHistory />
</Grid>
<FeaturesSection />
+ <GettingStarted />
+
{/* <PricingSection /> */}
<Box
sx={{
generated by cgit (git 2.34.1) at 2024-11-23 23:23:52 +0000