Update landing Get start section

1 files changed, 162 insertions, 0 deletions

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