src/colors.scss

@@ -2,6 +2,8 @@ $primary-main: var(--mui-palette-primary-main);
 $primary-light: var(--mui-palette-primary-light);
 $primary-dark: var(--mui-palette-primary-dark);
 
+$accent-color: #41bfc2;
+
 $box-shadow-color: rgba(0, 0, 0, 0.1);
 $border-color: #27323c;
 

src/components/AppBar/AppBar.tsx

@@ -2,6 +2,7 @@ import {
   AppBar as AppBarMui,
   Box,
   Button,
+  Container,
   Menu,
   MenuItem,
   Toolbar,
@@ -117,112 +118,120 @@ export const AppBar = () => {
   const isAuthenticated = authState?.loggedIn === true
 
   return (
-    <AppBarMui position="fixed" className={styles.AppBar}>
+    <AppBarMui
-      <Toolbar className={styles.toolbar}>
+      position="fixed"
-        <Box className={styles.logoWrapper}>
+      className={styles.AppBar}
-          <img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
+      sx={{
-        </Box>
+        boxShadow: 'none'
+      }}
+    >
+      <Container maxWidth="xl" disableGutters={true}>
+        <Toolbar className={styles.toolbar}>
+          <Box className={styles.logoWrapper}>
+            <img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
+          </Box>
 
-        <Box className={styles.rightSideBox}>
+          <Box className={styles.rightSideBox}>
-          {!isAuthenticated && (
+            {!isAuthenticated && (
-            <Button
+              <Button
-              onClick={() => {
+                onClick={() => {
-                navigate(appPublicRoutes.login)
+                  navigate(appPublicRoutes.login)
-              }}
-              variant="contained"
-            >
-              Sign in
-            </Button>
-          )}
-
-          {isAuthenticated && (
-            <>
-              <Username
-                username={username}
-                avatarContent={userAvatar}
-                handleClick={handleOpenUserMenu}
-              />
-              <Menu
-                id="menu-appbar"
-                anchorEl={anchorElUser}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center'
                 }}
-                keepMounted
+                variant="contained"
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center'
-                }}
-                open={!!anchorElUser}
-                onClose={handleCloseUserMenu}
               >
-                <MenuItem
+                LOGIN
-                  sx={{
+              </Button>
-                    justifyContent: 'center',
+            )}
-                    display: { md: 'none' }
-                  }}
-                >
-                  <Typography variant="h6">{username}</Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={handleProfile}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Profile
-                </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    setAnchorElUser(null)
 
-                    navigate(appPrivateRoutes.settings)
+            {isAuthenticated && (
+              <>
+                <Username
+                  username={username}
+                  avatarContent={userAvatar}
+                  handleClick={handleOpenUserMenu}
+                />
+                <Menu
+                  id="menu-appbar"
+                  anchorEl={anchorElUser}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center'
                   }}
-                  sx={{
+                  keepMounted
-                    justifyContent: 'center'
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center'
                   }}
-                >
+                  open={!!anchorElUser}
-                  Settings
+                  onClose={handleCloseUserMenu}
-                </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    setAnchorElUser(null)
-
-                    navigate(appPublicRoutes.verify)
-                  }}
-                  sx={{
-                    justifyContent: 'center'
-                  }}
-                >
-                  Verify
-                </MenuItem>
-                <Link
-                  to={appPublicRoutes.source}
-                  target="_blank"
-                  style={{ color: 'inherit', textDecoration: 'inherit' }}
                 >
                   <MenuItem
+                    sx={{
+                      justifyContent: 'center',
+                      display: { md: 'none' }
+                    }}
+                  >
+                    <Typography variant="h6">{username}</Typography>
+                  </MenuItem>
+                  <MenuItem
+                    onClick={handleProfile}
                     sx={{
                       justifyContent: 'center'
                     }}
                   >
-                    Source
+                    Profile
                   </MenuItem>
-                </Link>
+                  <MenuItem
-                <MenuItem
+                    onClick={() => {
-                  onClick={handleLogout}
+                      setAnchorElUser(null)
-                  sx={{
+
-                    justifyContent: 'center'
+                      navigate(appPrivateRoutes.settings)
-                  }}
+                    }}
-                >
+                    sx={{
-                  Logout
+                      justifyContent: 'center'
-                </MenuItem>
+                    }}
-              </Menu>
+                  >
-            </>
+                    Settings
-          )}
+                  </MenuItem>
-        </Box>
+                  <MenuItem
-      </Toolbar>
+                    onClick={() => {
+                      setAnchorElUser(null)
+
+                      navigate(appPublicRoutes.verify)
+                    }}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Verify
+                  </MenuItem>
+                  <Link
+                    to={appPublicRoutes.source}
+                    target="_blank"
+                    style={{ color: 'inherit', textDecoration: 'inherit' }}
+                  >
+                    <MenuItem
+                      sx={{
+                        justifyContent: 'center'
+                      }}
+                    >
+                      Source
+                    </MenuItem>
+                  </Link>
+                  <MenuItem
+                    onClick={handleLogout}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Logout
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
+          </Box>
+        </Toolbar>
+      </Container>
     </AppBarMui>
   )
 }

src/components/AppBar/style.module.scss

@@ -1,12 +1,15 @@
 @import '../../colors.scss';
+@import '../../sizes.scss';
 
 .AppBar {
   background-color: $background-color !important;
   z-index: 1400 !important;
-  height: 60px;
+  height: $header-height;
   flex-direction: row !important;
   align-items: center;
 
+  border-bottom: solid 1px rgba(0, 0, 0, 0.075);
+
   .toolbar {
     flex-grow: 1;
     display: flex;

src/components/Footer/Footer.tsx

@@ -0,0 +1,71 @@
+import { Box, Button, Grid, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import styles from './style.module.scss'
+
+export const Footer = () => (
+  <footer className={`${styles.borderTop} ${styles.footer}`}>
+    <Grid
+      container
+      maxWidth="xl"
+      sx={{ padding: '75px 0' }}
+      columnSpacing={'50px'}
+    >
+      <Grid item xs={12} sm={2}>
+        <Link component={RouterLink} to={'/'}>
+          <Box className={styles.logo}>
+            <img src="/logo.png" alt="Logo" />
+          </Box>
+        </Link>
+      </Grid>
+      <Grid item xs={12} sm={7} component={'nav'}>
+        <div className={styles.nav}>
+          <RouterLink to={'/'}>
+            <Button variant={'text'} focusRipple={false}>
+              Home
+            </Button>
+          </RouterLink>
+          <RouterLink to={'/#'}>
+            <Button variant={'text'} focusRipple={false}>
+              Documentation
+            </Button>
+          </RouterLink>
+          <RouterLink to={'/#'}>
+            <Button variant={'text'} focusRipple={false}>
+              Source
+            </Button>
+          </RouterLink>
+        </div>
+      </Grid>
+      <Grid item xs={12} sm={3} className={styles.about}>
+        <div className={styles.links}>
+          <Link
+            href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
+            target="_blank"
+          >
+            <Button
+              sx={{
+                minWidth: '45px',
+                padding: '10px'
+              }}
+              variant={'contained'}
+            >
+              <img
+                src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
+                width="25"
+                alt="nostr logo"
+                height="25"
+              />
+            </Button>
+          </Link>
+        </div>
+      </Grid>
+    </Grid>
+    <div className={`${styles.borderTop} ${styles.credits}`}>
+      Built by&nbsp;
+      <Link href="https://nostrdev.com/" target="_blank">
+        Nostr Dev
+      </Link>{' '}
+      2024.
+    </div>
+  </footer>
+)

src/components/Footer/style.module.scss

@@ -0,0 +1,83 @@
+.borderTop {
+  border-top: solid 1px rgba(0, 0, 0, 0.075);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  letter-spacing: 1px;
+  font-size: 14px;
+  line-height: 25px;
+  word-break: break-word;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+  font-weight: 500;
+}
+
+.nav {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: none;
+  grid-gap: 15px;
+
+  > a {
+    min-height: 0;
+  }
+
+  button {
+    width: 100%;
+    justify-content: start;
+  }
+}
+
+.about {
+  font-weight: 500;
+
+  > p {
+    margin: 0;
+  }
+}
+
+.links {
+  > a + a {
+    margin-left: 25px;
+  }
+}
+
+.credits {
+  width: 100%;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 500;
+
+  > a {
+    transition: ease 0.4s;
+    color: rgba(1, 170, 173, 0.75);
+    text-decoration-color: inherit;
+
+    &:hover {
+      color: #01aaad;
+    }
+  }
+}
+
+.logo {
+  width: 100%;
+  max-width: 150px;
+  height: auto;
+
+  > img {
+    width: 100%;
+    max-width: 150px;
+    height: auto;
+  }
+}
+
+@media (max-width: 992px) {
+  .logo {
+    max-width: 200px;
+  }
+}

src/components/Landing/CardComponent/CardComponent.tsx

@@ -0,0 +1,58 @@
+import { Box, Typography } from '@mui/material'
+import { ReactElement } from 'react'
+
+import styles from './style.module.scss'
+
+interface CardComponentProps {
+  icon: ReactElement
+  title: ReactElement
+  description: ReactElement
+  actions?: ReactElement
+}
+
+export const CardComponent = ({
+  icon,
+  title,
+  description,
+  actions
+}: CardComponentProps) => {
+  return (
+    <div className={styles.card}>
+      <Box
+        className={styles.content}
+        display={'flex'}
+        gap={'20px'}
+        flexDirection={'row'}
+      >
+        <Box className={styles.icon}>{icon}</Box>
+        <Box>
+          <Typography
+            variant="h3"
+            sx={{
+              fontWeight: 'bold',
+              fontSize: '24px',
+              letterSpacing: '1px',
+              lineHeight: '1.2'
+            }}
+          >
+            {title}
+          </Typography>
+          <Typography
+            sx={{
+              mt: '10px',
+              fontSize: '14px',
+              lineHeight: '25px',
+              letterSpacing: '1px',
+              fontWeight: '500'
+            }}
+          >
+            {description}
+          </Typography>
+        </Box>
+      </Box>
+      <Box mt={'auto'} textAlign={'right'}>
+        {actions}
+      </Box>
+    </div>
+  )
+}

src/components/Landing/CardComponent/style.module.scss

@@ -0,0 +1,43 @@
+@import '../../../colors.scss';
+
+.card {
+  border-radius: 32px;
+  padding: 25px;
+
+  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0);
+  border: solid 1px rgba(0, 0, 0, 0);
+  position: relative;
+  background: #f4f4f4;
+
+  transition: ease 0.4s;
+
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  &:hover {
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
+    background: #ffffff;
+    border: solid 1px rgba(0, 0, 0, 0.075);
+
+    .icon {
+      opacity: 1;
+      filter: saturate(1);
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+
+  gap: 25px;
+}
+
+.icon {
+  color: $accent-color;
+  transition: ease 0.4s;
+  font-size: 25px;
+  opacity: 0.5;
+  filter: saturate(0);
+}

src/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -25,8 +25,6 @@ a:hover {
 
 body {
   margin: 0;
-  /* display: flex;
-  place-items: center; */
   min-width: 320px;
   min-height: 100vh;
   background-color: #f4f4fb;
@@ -70,8 +68,11 @@ button {
   }
 }
 
-.main {
+#root {
-  padding: 60px 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: white;
 }
 
 .hide-mobile {

src/layouts/Main.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material'
 import Container from '@mui/material/Container'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useState } from 'react'
@@ -28,6 +27,8 @@ import {
 } from '../utils'
 import { useAppSelector } from '../hooks'
 import { SubCloser } from 'nostr-tools/abstract-pool'
+import styles from './style.module.scss'
+import { Footer } from '../components/Footer/Footer'
 
 export const MainLayout = () => {
   const dispatch: Dispatch = useDispatch()
@@ -152,19 +153,10 @@ export const MainLayout = () => {
   return (
     <>
       <AppBar />
-
+      <main className={styles.main}>
-      <Box className="main">
+        <Outlet />
-        <Container
+      </main>
-          sx={{
+      <Footer />
-            position: 'relative',
-            maxWidth: {
-              xs: '550px'
-            }
-          }}
-        >
-          <Outlet />
-        </Container>
-      </Box>
     </>
   )
 }

src/layouts/style.module.scss

@@ -1,22 +1,31 @@
 @import '../colors.scss';
+@import '../sizes.scss';
+
+.main {
+  padding: $header-height 0 0 0;
+  flex-grow: 1;
+}
 
 @font-face {
   font-family: 'Avenir';
   font-weight: normal;
-  src: local('Avenir'),
+  src:
+    local('Avenir'),
     url(../assets/avenir-font/AvenirLTStd-Roman.otf) format('opentype');
 }
 
 @font-face {
   font-family: 'Avenir';
   font-weight: bold;
-  src: local('Avenir'),
+  src:
+    local('Avenir'),
     url(../assets/avenir-font/AvenirLTStd-Black.otf) format('opentype');
 }
 
 @font-face {
   font-family: 'Avenir';
   font-weight: lighter;
-  src: local('Avenir'),
+  src:
+    local('Avenir'),
     url(../assets/avenir-font/AvenirLTStd-Book.otf) format('opentype');
 }

src/pages/landing/LandingPage.tsx

@@ -1,11 +1,19 @@
-import { Box, Button, Typography, useTheme } from '@mui/material'
+import {
+  Box,
+  Button,
+  Container,
+  Link,
+  Typography,
+  useTheme
+} from '@mui/material'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { appPublicRoutes } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { saveVisitedLink } from '../../utils'
 import styles from './style.module.scss'
+import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
 
 const bodyBackgroundColor = document.body.style.backgroundColor
 
@@ -16,72 +24,244 @@ export const LandingPage = () => {
 
   const theme = useTheme()
 
-  useEffect(() => {
-    saveVisitedLink(location.pathname, location.search)
-  }, [location])
-
   const onSignInClick = async () => {
     navigate(appPublicRoutes.login)
   }
 
-  return (
+  const cards = [
-    <div className={styles.landingPage}>
+    {
-      <Box>
+      icon: (
-        <Typography
+        <svg
-          sx={{
+          xmlns="http://www.w3.org/2000/svg"
-            fontWeight: 'bold',
+          viewBox="0 -32 576 576"
-            marginBottom: 5,
+          width="1em"
-            color: bodyBackgroundColor
+          height="1em"
-              ? theme.palette.getContrastText(bodyBackgroundColor)
+          fill="currentColor"
-              : ''
-          }}
-          variant="h4"
         >
-          Secure Document Signing
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
-        </Typography>
+          <path d="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z"></path>
-        <Typography
+        </svg>
-          sx={{
+      ),
-            color: bodyBackgroundColor
+      title: <>Open Source</>,
-              ? theme.palette.getContrastText(bodyBackgroundColor)
+      description: (
-              : ''
+        <>
-          }}
+          Code is MIT licenced and available at{' '}
-          variant="body1"
+          <Link href="https://git.nostrdev.com/sigit/sigit.io">
-        >
+            https://git.nostrdev.com/sigit/sigit.io
-          SIGit is an open-source and self-hostable solution for secure document
+          </Link>
-          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 />
+      icon: (
-          Unlike other solutions, SIGit is totally private - files are encrypted
+        <svg
-          locally, and can only be exported by named recipients.
+          xmlns="http://www.w3.org/2000/svg"
-          <br />
+          viewBox="0 0 512 512"
-          <br />
+          width="1em"
-          Anyone can <Link to={appPublicRoutes.verify}>VERIFY</Link> the
+          height="1em"
-          exported document.
+          fill="currentColor"
+        >
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+          <path d="M256.3-.0068C261.9-.0507 267.3 1.386 272.1 4.066L476.5 90.53C487.7 95.27 495.2 105.1 495.9 118.1C501.6 213.6 466.7 421.9 272.5 507.7C267.6 510.5 261.1 512.1 256.3 512C250.5 512.1 244.9 510.5 239.1 507.7C45.8 421.9 10.95 213.6 16.57 118.1C17.28 105.1 24.83 95.27 36.04 90.53L240.4 4.066C245.2 1.386 250.7-.0507 256.3-.0068H256.3zM266.1 363.4L364.2 263.6C392.2 234.7 390.5 186.6 358.1 159.5C331.8 135.8 291.5 140.2 266.1 166.5L256.4 176.1L245.9 166.5C221.4 140.2 180.2 135.8 153 159.5C121.5 186.6 119.8 234.7 147.8 263.6L244.2 363.4C251.2 369.5 260.8 369.5 266.1 363.4V363.4z"></path>
+        </svg>
+      ),
+      title: <>Multi-Device</>,
+      description: (
+        <>
+          Create, Sign and Verify documents and files from any device with a
+          browser.
+        </>
+      )
+    },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+          <path d="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
+        </svg>
+      ),
+      title: <>Secure &amp; Private</>,
+      description: (
+        <>
+          Documents are encrypted locally and can be accessed only by named
+          recipients.
+        </>
+      )
+    },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+          <path d="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
+        </svg>
+      ),
+      title: <>Verifiable</>,
+      description: (
+        <>
+          Thanks to Schnorr Signatures and Web of Trust, SIGit is far more
+          auditable than traditional server-based offerings.
+        </>
+      )
+    },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+          <path d="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
+        </svg>
+      ),
+      title: <>Works Offline</>,
+      description: (
+        <>
+          Presuming you have a hardware signing device, it is possible to
+          complete a SIGit round without an internet connection.
+        </>
+      )
+    },
+    {
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
+          <path d="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
+        </svg>
+      ),
+      title: <>Multi-Party Signing</>,
+      description: (
+        <>
+          Choose any number of Signers and Viewers, track the signature status,
+          send reminders, get notifications on completion.
+        </>
+      )
+    }
+  ]
+
+  useEffect(() => {
+    saveVisitedLink(location.pathname, location.search)
+  }, [location])
+
+  return (
+    <Container
+      maxWidth="xl"
+      className={styles.container}
+      sx={{
+        display: 'flex',
+        gap: '50px'
+      }}
+    >
+      <img src="/logo.png" alt="Logo" width={300} />
+      <Typography
+        variant="h1"
+        sx={{
+          letterSpacing: '1px',
+          fontWeight: 'bold',
+          fontSize: '2.5rem',
+          textAlign: 'center'
+        }}
+      >
+        SIGit - Secure &amp; Private Document Signing
+        <Typography
+          mt={'15px'}
+          sx={{
+            fontSize: '18px',
+            lineHeight: '25px',
+            letterSpacing: '1px'
+          }}
+        >
+          An open-source and self-hostable solution for secure document signing
+          and verification.
         </Typography>
+      </Typography>
+      <Box display={'grid'} gap={'25px'} gridTemplateColumns="repeat(3, 1fr)">
+        {cards.map((c, i) => (
+          <CardComponent key={i} {...c} />
+        ))}
       </Box>
 
-      {!authState?.loggedIn && (
+      <Typography
-        <div className={styles.loginBottomBar}>
+        sx={{
-          <Button
+          fontSize: '18px',
-            className={styles.loginBtn}
+          lineHeight: '25px',
-            variant="contained"
+          letterSpacing: '1px'
-            onClick={onSignInClick}
+        }}
-          >
+      >
-            GET STARTED
+        SIGit is a secure &amp; private document signing service where you can
-          </Button>
+        create, sign, and verify any document from any device with a browser.
-        </div>
+      </Typography>
-      )}
+
-    </div>
+      <Button variant="contained" onClick={onSignInClick}>
+        GET STARTED
+      </Button>
+
+      {/* <Box>
+            <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.
+              <br />
+              <br />
+              Anyone can <Link to={appPublicRoutes.verify}>VERIFY</Link> the
+              exported document.
+            </Typography>
+          </Box>
+          )} */}
+    </Container>
   )
 }

src/pages/landing/style.module.scss

@@ -1,5 +1,12 @@
 @import '../../colors.scss';
 
+.container {
+  padding: 5vh 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 .landingPage {
   display: flex;
   flex-direction: column;

src/pages/login/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, TextField, Typography } from '@mui/material'
+import { Box, Button, Container, TextField, Typography } from '@mui/material'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
@@ -352,7 +352,7 @@ export const Login = () => {
   }
 
   return (
-    <>
+    <Container maxWidth={'sm'}>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <div className={styles.loginPage}>
         <Typography variant="h4">Welcome to Sigit</Typography>
@@ -375,6 +375,6 @@ export const Login = () => {
           </Button>
         </Box>
       </div>
-    </>
+    </Container>
   )
 }

src/sizes.scss

@@ -0,0 +1 @@
+$header-height: 78.5px;

src/theme/index.ts

@@ -24,11 +24,29 @@ export const theme = extendTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          borderRadius: '2rem'
+          padding: '10px 20px',
+          fontSize: '14px',
+          fontWeight: 'bold',
+          boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
+          lineHeight: '1.25',
+          borderRadius: '4px',
+          ':hover': {
+            transform: 'scale(1.02)',
+            boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
+          }
+        },
+        text: {
+          color: '#00000059',
+          background: 'transparent',
+          ':hover': {
+            background: '#47cccf',
+            color: 'white'
+          }
         },
         contained: {
+          background: '#47cccf',
           ':hover': {
-            background: '#150a1a'
+            background: '#47cccf'
           }
         },
         outlined: {
@@ -40,5 +58,14 @@ export const theme = extendTheme({
         }
       }
     }
+  },
+  typography: {
+    fontFamily: [
+      'system-ui',
+      'Avenir',
+      'Helvetica',
+      'Arial',
+      'sans-serif'
+    ].join(', ')
   }
 })