Update landing Get start section

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={{