Update landing Get start section
This commit is contained in:
Mo Tarbin
parent
9e34cc8b3a
commit
b7ee1c0f26
6 changed files with 177 additions and 50 deletions
|
|
@ -110,18 +110,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>
|
||||
|
|
|
|||
|
|
@ -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' }}
|
||||
>
|
||||
Packages
|
||||
Docker Images
|
||||
</Link>
|
||||
<Link
|
||||
href='https://github.com/donetick/donetick/releases'
|
||||
level='body2'
|
||||
sx={{ display: 'block' }}
|
||||
>
|
||||
Releases
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
|
|
|
|||
162
src/views/Landing/GettingStarted.jsx
Normal file
162
src/views/Landing/GettingStarted.jsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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 />}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
|
|
|
|||
|
|
@ -114,17 +114,6 @@ const NavBar = () => {
|
|||
tick✓
|
||||
</span>
|
||||
</Typography>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
position: 'relative',
|
||||
top: 12,
|
||||
right: 45,
|
||||
}}
|
||||
>
|
||||
Beta
|
||||
</span>
|
||||
</Box>
|
||||
<Drawer
|
||||
open={drawerOpen}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue