src/pages/landing/LandingPage.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Typography, useTheme } from '@mui/material'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { appPublicRoutes } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { saveVisitedLink } from '../../utils'
@@ -25,85 +25,63 @@ export const LandingPage = () => {
   }
 
   return (
-    <>
-      <div className={styles.landingPage}>
-        <Box
-          mt={10}
+    <div className={styles.landingPage}>
+      <Box>
+        <Typography
           sx={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexDirection: { xs: 'column', md: 'row' }
+            fontWeight: 'bold',
+            marginBottom: 5,
+            color: bodyBackgroundColor
+              ? theme.palette.getContrastText(bodyBackgroundColor)
+              : ''
           }}
+          variant="h4"
         >
-          <Box
-            sx={{
-              mr: {
-                xs: 0,
-                md: 5
-              },
-              mb: {
-                xs: 5,
-                md: 0
-              }
-            }}
+          Secure Document Signing
+        </Typography>
+        <Typography
+          sx={{
+            color: bodyBackgroundColor
+              ? theme.palette.getContrastText(bodyBackgroundColor)
+              : ''
+          }}
+          variant="body1"
+        >
+          SIGit is an open-source and self-hostable solution for secure document
+          signing and verification. Code is MIT licenced and available at{' '}
+          <a
+            className="bold-link"
+            target="_blank"
+            href="https://git.sigit.io/sig/it"
           >
-            <Typography
-              sx={{
-                fontWeight: 'bold',
-                marginBottom: 5,
-                color: bodyBackgroundColor
-                  ? theme.palette.getContrastText(bodyBackgroundColor)
-                  : ''
-              }}
-              variant="h4"
-            >
-              Secure Document Signing
-            </Typography>
-            <Typography
-              sx={{
-                color: bodyBackgroundColor
-                  ? theme.palette.getContrastText(bodyBackgroundColor)
-                  : ''
-              }}
-              variant="body1"
-            >
-              SIGit is an open-source and self-hostable solution for secure
-              document signing and verification. Code is MIT licenced and
-              available at{' '}
-              <a
-                className="bold-link"
-                target="_blank"
-                href="https://git.sigit.io/sig/it"
-              >
-                https://git.sigit.io/sig/it
-              </a>
-              .
-              <br />
-              <br />
-              SIGit lets you Create, Sign and Verify from any device with a
-              browser.
-              <br />
-              <br />
-              Unlike other solutions, SIGit is totally private - files are
-              encrypted locally, and can only be exported by named recipients.
-            </Typography>
-          </Box>
-        </Box>
+            https://git.sigit.io/sig/it
+          </a>
+          .
+          <br />
+          <br />
+          SIGit lets you Create, Sign and Verify from any device with a browser.
+          <br />
+          <br />
+          Unlike other solutions, SIGit is totally private - files are encrypted
+          locally, and can only be exported by named recipients.
+          <br />
+          <br />
+          Anyone can <Link to={appPublicRoutes.verify}>VERIFY</Link> the
+          exported document.
+        </Typography>
+      </Box>
 
-        {!authState?.loggedIn && (
-          <div className={styles.loginBottomBar}>
-            <Button
-              className={styles.loginBtn}
-              variant="contained"
-              onClick={onSignInClick}
-            >
-              GET STARTED
-            </Button>
-          </div>
-        )}
-      </div>
-    </>
+      {!authState?.loggedIn && (
+        <div className={styles.loginBottomBar}>
+          <Button
+            className={styles.loginBtn}
+            variant="contained"
+            onClick={onSignInClick}
+          >
+            GET STARTED
+          </Button>
+        </div>
+      )}
+    </div>
   )
 }