import { Box, Button } from '@mui/material' import { useEffect } from 'react' import { Outlet, useLocation, useNavigate } from 'react-router-dom' import { appPublicRoutes } from '../../routes' import { saveVisitedLink } from '../../utils' import { CardComponent } from '../../components/Landing/CardComponent/CardComponent' import { Container } from '../../components/Container' import styles from './style.module.scss' import bg_l from '../../assets/images/bg_l.svg' import bg_r from '../../assets/images/bg_r.svg' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faOsi } from '@fortawesome/free-brands-svg-icons' import { faCheck, faMobileScreenButton, faShieldHeart, faSlash, faUsers, faWifi } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack' import { Footer } from '../../components/Footer/Footer' export const LandingPage = () => { const navigate = useNavigate() const location = useLocation() const onSignInClick = async () => { navigate(appPublicRoutes.nostr) } const cards = [ { icon: <FontAwesomeIcon width={25} height={25} icon={faOsi} />, title: <>Open Source</>, description: ( <> Code is MIT licenced and available at{' '} <a href="https://git.nostrdev.com/sigit/sigit.io"> https://git.nostrdev.com/sigit/sigit.io </a> . </> ) }, { icon: ( <FontAwesomeIcon width={25} height={25} icon={faMobileScreenButton} /> ), title: <>Multi-Device</>, description: ( <> Create, Sign and Verify documents and files from any device with a browser. </> ) }, { icon: <FontAwesomeIcon width={25} height={25} icon={faShieldHeart} />, title: <>Secure & Private</>, description: ( <> Documents are encrypted locally and can be accessed only by named recipients. </> ) }, { icon: <FontAwesomeIcon width={25} height={25} icon={faCheck} />, title: <>Verifiable</>, description: ( <> Thanks to Schnorr Signatures and Web of Trust, SIGit is far more auditable than traditional server-based offerings. </> ) }, { icon: ( <FontAwesomeIconStack> <FontAwesomeIcon width={25} height={25} icon={faSlash} /> <FontAwesomeIcon width={25} height={25} icon={faWifi} /> </FontAwesomeIconStack> ), title: <>Works Offline</>, description: ( <> Presuming you have a hardware signing device, it is possible to complete a SIGit round without an internet connection. </> ) }, { icon: <FontAwesomeIcon width={25} height={25} icon={faUsers} />, 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 ( <div className={styles.background}> <div className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`} style={{ backgroundImage: `url("${bg_l}")` }} ></div> <div className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`} style={{ backgroundImage: `url("${bg_r}")` }} ></div> <Container className={styles.container}> <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} /> <div className={styles.titleSection}> <h1 className={styles.title}> Secure & Private Document Signing </h1> <p className={styles.subTitle}> An open-source and self-hostable solution for secure document signing and verification. </p> </div> <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> <p className={styles.description}> SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser. </p> <Button sx={{ fontSize: '22px', padding: '16px 32px', backgroundColor: 'var(--secondary-main)' }} variant="contained" onClick={onSignInClick} > GET STARTED </Button> <Outlet /> </Container> <Footer /> </div> ) }