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