sigit.io/src/pages/landing/LandingPage.tsx

import {
  Box,
  Button,
  Container,
  Link,
  Typography,
  useTheme
} from '@mui/material'
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Outlet, 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

export const LandingPage = () => {
  const authState = useSelector((state: State) => state.auth)
  const navigate = useNavigate()
  const location = useLocation()

  const theme = useTheme()

  const onSignInClick = async () => {
    navigate(appPublicRoutes.login)
  }

  const cards = [
    {
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 -32 576 576"
          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="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>
        </svg>
      ),
      title: <>Open Source</>,
      description: (
        <>
          Code is MIT licenced and available at{' '}
          <Link href="https://git.nostrdev.com/sigit/sigit.io">
            https://git.nostrdev.com/sigit/sigit.io
          </Link>
          .
        </>
      )
    },
    {
      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="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.svg" alt="Logo" width={300} />
      <Typography
        variant="h1"
        sx={{
          letterSpacing: '1px',
          fontWeight: 'bold',
          fontSize: '2.5rem',
          textAlign: 'center'
        }}
      >
        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'}
        sx={{
          gridTemplateColumns: {
            xs: '1fr',
            sm: 'repeat(2, 1fr)',
            xl: 'repeat(3, 1fr)'
          }
        }}
      >
        {cards.map((c, i) => (
          <CardComponent key={i} {...c} />
        ))}
      </Box>

      <Typography
        sx={{
          fontSize: '18px',
          lineHeight: '25px',
          letterSpacing: '1px'
        }}
      >
        SIGit is a secure &amp; private document signing service where you can
        create, sign, and verify any document from any device with a browser.
      </Typography>

      <Button
        sx={{
          fontSize: '22px',
          padding: '16px 32px'
        }}
        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>
          )} */}
      <Outlet />
    </Container>
  )
}