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

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

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()

  useEffect(() => {
    saveVisitedLink(location.pathname, location.search)
  }, [location])

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

  return (
    <div className={styles.landingPage}>
      <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>

      {!authState?.loggedIn && (
        <div className={styles.loginBottomBar}>
          <Button
            className={styles.loginBtn}
            variant="contained"
            onClick={onSignInClick}
          >
            GET STARTED
          </Button>
        </div>
      )}
    </div>
  )
}