Landing page - new design implementation #122
6
src/assets/images/bg_l.svg
Normal file
6
src/assets/images/bg_l.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path d="M113.31,3.31C73.23,10.93,35.28,18.5,0,24.8V307.11c30.14,8.31,61.89,12.76,94.68,12.76,30.67,0,60.43-3.88,88.82-11.19C378.31,258.56,310.93-34.23,113.31,3.31Z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 364 B |
6
src/assets/images/bg_r.svg
Normal file
6
src/assets/images/bg_r.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 319.87">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<path d="M205.32,0c-30.67,0-60.43,3.88-88.82,11.19C-78.31,61.31-10.93,354.1,186.69,316.56c40.08-7.61,78.02-15.18,113.31-21.49V12.76C269.86,4.45,238.11,0,205.32,0Z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 362 B |
@ -6,6 +6,8 @@ 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'
|
||||
|
||||
export const LandingPage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -160,49 +162,61 @@ export const LandingPage = () => {
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<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.
|
||||
<div className={styles.background}>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
fontSize: '22px',
|
||||
padding: '16px 32px',
|
||||
backgroundColor: 'var(--secondary-main)'
|
||||
}}
|
||||
variant="contained"
|
||||
onClick={onSignInClick}
|
||||
>
|
||||
GET STARTED
|
||||
</Button>
|
||||
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Outlet />
|
||||
</Container>
|
||||
<div
|
||||
className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
|
||||
style={{ backgroundImage: `url(${bg_l})` }}
|
||||
></div>
|
||||
<div
|
||||
className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
|
||||
style={{ backgroundImage: `url(${bg_r})` }}
|
||||
></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,10 @@
|
||||
@import '../../styles/colors.scss';
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.background {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 45px;
|
||||
@ -39,3 +43,28 @@
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.backgroundBlob {
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
width: 13%;
|
||||
height: 349px;
|
||||
pointer-events: none;
|
||||
background: no-repeat center / contain;
|
||||
|
||||
&Right {
|
||||
top: 50px;
|
||||
right: 0;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
&Left {
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user