Landing page - new design implementation #122

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

View File

@ -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;
} }

View File

@ -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>
) )
} }

View File

@ -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;
}

View File

@ -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 {

View File

@ -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 &amp; Private Document Signing</h1>
variant="h1"
sx={{
letterSpacing: '1px',
fontWeight: 'bold',
fontSize: '2.5rem',
textAlign: 'center'
}}
>
Secure &amp; 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}

View File

@ -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;

View File

@ -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;

View File

@ -1,2 +1,4 @@
$header-height: 65px; $header-height: 65px;
$body-vertical-padding: 25px; $body-vertical-padding: 25px;
$default-container-padding-inline: 10px;

View File

@ -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': {