Releasing new design #161
@ -1,6 +1,8 @@
|
|||||||
|
@import '../../styles/sizes.scss';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
padding-inline: 10px;
|
padding-inline: $default-container-padding-inline;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import { Box } from '@mui/material'
|
|
||||||
import { ReactElement } from 'react'
|
import { ReactElement } from 'react'
|
||||||
|
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
@ -23,9 +22,7 @@ export const CardComponent = ({
|
|||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className={styles.description}>{description}</p>
|
<p className={styles.description}>{description}</p>
|
||||||
<Box mt={'auto'} textAlign={'right'}>
|
{actions ? <div className={styles.actions}>{actions}</div> : null}
|
||||||
{actions}
|
|
||||||
</Box>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -28,6 +28,11 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
transition:
|
||||||
|
color 0s,
|
||||||
|
background-color 0.2s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -37,6 +42,10 @@ a {
|
|||||||
.icon {
|
.icon {
|
||||||
color: $primary-main;
|
color: $primary-main;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@ -53,3 +62,8 @@ a {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin-top: auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@ -3,7 +3,26 @@
|
|||||||
@import '../styles/typography.scss';
|
@import '../styles/typography.scss';
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
color: $text-color;
|
// Import colors once as variables
|
||||||
|
--primary-main: #{$primary-main};
|
||||||
|
--primary-light: #{$primary-light};
|
||||||
|
--primary-dark: #{$primary-dark};
|
||||||
|
|
||||||
|
--secondary-main: #{$secondary-main};
|
||||||
|
|
||||||
|
--box-shadow-color: #{$box-shadow-color};
|
||||||
|
--border-color: #{$border-color};
|
||||||
|
|
||||||
|
--body-background-color: #{$body-background-color};
|
||||||
|
--overlay-background-color: #{$overlay-background-color};
|
||||||
|
|
||||||
|
--text-color: #{$text-color};
|
||||||
|
--input-text-color: #{$input-text-color};
|
||||||
|
|
||||||
|
--review-feedback-correct: #{$review-feedback-correct};
|
||||||
|
--review-feedback-incorrect: #{$review-feedback-incorrect};
|
||||||
|
--review-feedback-neutral: #{$review-feedback-neutral};
|
||||||
|
--review-feedback-selected-color: #{$review-feedback-selected-color};
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Box, Button, Typography } from '@mui/material'
|
import { Box, Button } from '@mui/material'
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
|
||||||
import { appPublicRoutes } from '../../routes'
|
import { appPublicRoutes } from '../../routes'
|
||||||
@ -154,30 +154,12 @@ export const LandingPage = () => {
|
|||||||
return (
|
return (
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
|
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
|
||||||
<div>
|
<div className={styles.titleSection}>
|
||||||
<Typography
|
<h1 className={styles.title}>Secure & Private Document Signing</h1>
|
||||||
variant="h1"
|
|
||||||
sx={{
|
|
||||||
letterSpacing: '1px',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
fontSize: '2.5rem',
|
|
||||||
textAlign: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Secure & Private Document Signing
|
|
||||||
</Typography>
|
|
||||||
<p className={styles.subTitle}>
|
<p className={styles.subTitle}>
|
||||||
An open-source and self-hostable solution for secure document signing
|
An open-source and self-hostable solution for secure document signing
|
||||||
and verification.
|
and verification.
|
||||||
</p>
|
</p>
|
||||||
<Typography
|
|
||||||
mt={'15px'}
|
|
||||||
sx={{
|
|
||||||
fontSize: '18px',
|
|
||||||
lineHeight: '25px',
|
|
||||||
letterSpacing: '1px'
|
|
||||||
}}
|
|
||||||
></Typography>
|
|
||||||
</div>
|
</div>
|
||||||
<Box
|
<Box
|
||||||
display={'grid'}
|
display={'grid'}
|
||||||
@ -203,7 +185,8 @@ export const LandingPage = () => {
|
|||||||
<Button
|
<Button
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: '22px',
|
fontSize: '22px',
|
||||||
padding: '16px 32px'
|
padding: '16px 32px',
|
||||||
|
backgroundColor: 'var(--secondary-main)'
|
||||||
}}
|
}}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={onSignInClick}
|
onClick={onSignInClick}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
@import '../../styles/colors.scss';
|
@import '../../styles/colors.scss';
|
||||||
|
@import '../../styles/sizes.scss';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -6,7 +7,7 @@
|
|||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-block: 50px;
|
padding-block: 50px;
|
||||||
padding-inline: 50px;
|
padding-inline: 50px + $default-container-padding-inline;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -17,6 +18,16 @@
|
|||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.titleSection {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.subTitle {
|
.subTitle {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -2,6 +2,8 @@ $primary-main: #4c82a3;
|
|||||||
$primary-light: #5e8eab;
|
$primary-light: #5e8eab;
|
||||||
$primary-dark: #447592;
|
$primary-dark: #447592;
|
||||||
|
|
||||||
|
$secondary-main: #7d54a3;
|
||||||
|
|
||||||
$box-shadow-color: rgba(0, 0, 0, 0.1);
|
$box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||||
$border-color: #27323c;
|
$border-color: #27323c;
|
||||||
|
|
||||||
|
@ -1,2 +1,4 @@
|
|||||||
$header-height: 65px;
|
$header-height: 65px;
|
||||||
$body-vertical-padding: 25px;
|
$body-vertical-padding: 25px;
|
||||||
|
|
||||||
|
$default-container-padding-inline: 10px;
|
||||||
|
@ -34,31 +34,28 @@ export const theme = extendTheme({
|
|||||||
MuiButton: {
|
MuiButton: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
transition: 'ease 0.4s',
|
|
||||||
padding: '10px 20px',
|
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 500,
|
||||||
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
|
padding: '10px 20px',
|
||||||
|
transition: 'ease 0.2s',
|
||||||
|
boxShadow: 'unset',
|
||||||
lineHeight: '1.25',
|
lineHeight: '1.25',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
':hover': {
|
':hover': {
|
||||||
transform: 'scale(1.02)',
|
background: 'var(--primary-light)',
|
||||||
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
|
boxShadow: 'unset'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
color: '#00000059',
|
color: 'inherit',
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
':hover': {
|
':hover': {
|
||||||
background: '#47cccf',
|
|
||||||
color: 'white'
|
color: 'white'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
contained: {
|
contained: {
|
||||||
background: '#47cccf',
|
background: 'var(--primary-main)',
|
||||||
':hover': {
|
color: 'white'
|
||||||
background: '#47cccf'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
outlined: {
|
outlined: {
|
||||||
':hover': {
|
':hover': {
|
||||||
|
Loading…
Reference in New Issue
Block a user