Landing page - new design implementation #122

Merged
b merged 45 commits from issue-21 into staging 2024-07-31 13:06:58 +00:00
4 changed files with 96 additions and 41 deletions
Showing only changes of commit e9a1b9894c - Show all commits

View 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

View 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

View File

@ -6,6 +6,8 @@ import { saveVisitedLink } from '../../utils'
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent' import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import styles from './style.module.scss' 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 = () => { export const LandingPage = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -160,49 +162,61 @@ export const LandingPage = () => {
}, [location]) }, [location])
return ( return (
<Container className={styles.container}> <div className={styles.background}>
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} /> <Container className={styles.container}>
<div className={styles.titleSection}> <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
<h1 className={styles.title}>Secure &amp; Private Document Signing</h1> <div className={styles.titleSection}>
<p className={styles.subTitle}> <h1 className={styles.title}>
An open-source and self-hostable solution for secure document signing Secure &amp; Private Document Signing
and verification. </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 &amp; private document signing service where you can
create, sign, and verify any document from any device with a browser.
</p> </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}> <Button
SIGit is a secure &amp; private document signing service where you can sx={{
create, sign, and verify any document from any device with a browser. fontSize: '22px',
</p> padding: '16px 32px',
backgroundColor: 'var(--secondary-main)'
}}
variant="contained"
onClick={onSignInClick}
>
GET STARTED
</Button>
<Button <Outlet />
sx={{ </Container>
fontSize: '22px', <div
padding: '16px 32px', className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
backgroundColor: 'var(--secondary-main)' style={{ backgroundImage: `url(${bg_l})` }}
}} ></div>
variant="contained" <div
onClick={onSignInClick} className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
> style={{ backgroundImage: `url(${bg_r})` }}
GET STARTED ></div>
</Button> </div>
<Outlet />
</Container>
) )
} }

View File

@ -1,6 +1,10 @@
@import '../../styles/colors.scss'; @import '../../styles/colors.scss';
@import '../../styles/sizes.scss'; @import '../../styles/sizes.scss';
.background {
position: relative;
}
.container { .container {
display: flex; display: flex;
gap: 45px; gap: 45px;
@ -39,3 +43,28 @@
text-align: center; text-align: center;
color: rgba(0, 0, 0, 0.5); 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;
}
}