Landing page - new design implementation #122
@ -2,7 +2,6 @@ import {
|
||||
AppBar as AppBarMui,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Toolbar,
|
||||
@ -35,6 +34,7 @@ import {
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||
import { Container } from '../Container'
|
||||
|
||||
const metadataController = new MetadataController()
|
||||
|
||||
@ -122,12 +122,11 @@ export const AppBar = () => {
|
||||
position="fixed"
|
||||
className={styles.AppBar}
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
'--AppBar-height': isAuthenticated ? '60px' : ''
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="xl" disableGutters={true}>
|
||||
<Toolbar className={styles.toolbar}>
|
||||
<Container>
|
||||
<Toolbar className={styles.toolbar} disableGutters={true}>
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import '../../styles/sizes.scss';
|
||||
|
||||
.AppBar {
|
||||
background-color: $background-color !important;
|
||||
background-color: $overlay-background-color !important;
|
||||
height: $header-height;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Box, Typography } from '@mui/material'
|
||||
import { Box } from '@mui/material'
|
||||
import { ReactElement } from 'react'
|
||||
|
||||
import styles from './style.module.scss'
|
||||
@ -18,38 +18,11 @@ export const CardComponent = ({
|
||||
}: CardComponentProps) => {
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<Box
|
||||
className={styles.content}
|
||||
display={'flex'}
|
||||
gap={'20px'}
|
||||
flexDirection={'row'}
|
||||
>
|
||||
<Box className={styles.icon}>{icon}</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '24px',
|
||||
letterSpacing: '1px',
|
||||
lineHeight: '1.2'
|
||||
}}
|
||||
>
|
||||
<h3 className={styles.title}>
|
||||
<div className={styles.icon}>{icon}</div>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
mt: '10px',
|
||||
fontSize: '14px',
|
||||
lineHeight: '25px',
|
||||
letterSpacing: '1px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</h3>
|
||||
<p className={styles.description}>{description}</p>
|
||||
<Box mt={'auto'} textAlign={'right'}>
|
||||
{actions}
|
||||
</Box>
|
||||
|
||||
@ -1,44 +1,55 @@
|
||||
@import '../../../styles/colors.scss';
|
||||
|
||||
.card {
|
||||
border-radius: 32px;
|
||||
border-radius: 4px;
|
||||
padding: 25px;
|
||||
|
||||
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0);
|
||||
border: solid 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
background: #f4f4f4;
|
||||
background: $overlay-background-color;
|
||||
|
||||
transition: ease 0.4s;
|
||||
transition: ease 0.2s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
background: #ffffff;
|
||||
border: solid 1px rgba(0, 0, 0, 0.075);
|
||||
word-break: break-word;
|
||||
|
||||
.icon {
|
||||
opacity: 1;
|
||||
filter: saturate(1);
|
||||
&:hover {
|
||||
background: $primary-main;
|
||||
color: white;
|
||||
|
||||
.icon,
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 25px;
|
||||
word-break: break-word;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $accent-color;
|
||||
transition: ease 0.4s;
|
||||
color: $primary-main;
|
||||
font-size: 25px;
|
||||
opacity: 0.5;
|
||||
filter: saturate(0);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import Container from '@mui/material/Container'
|
||||
import { Event, kinds } from 'nostr-tools'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
background-color: $overlay-background-color;
|
||||
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
@ -1,31 +1,47 @@
|
||||
@import '../styles/colors.scss';
|
||||
@import '../styles/sizes.scss';
|
||||
@import '../styles/typography.scss';
|
||||
|
||||
:root {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
font-family: $font-familiy;
|
||||
letter-spacing: $letter-spacing;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $body-font-weight;
|
||||
line-height: $body-line-height;
|
||||
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $primary-main;
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: $header-height 0 0 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Avenir';
|
||||
font-weight: normal;
|
||||
src:
|
||||
local('Avenir'),
|
||||
url(../assets/avenir-font/AvenirLTStd-Roman.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Avenir';
|
||||
font-weight: bold;
|
||||
src:
|
||||
local('Avenir'),
|
||||
url(../assets/avenir-font/AvenirLTStd-Black.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Avenir';
|
||||
font-weight: lighter;
|
||||
src:
|
||||
local('Avenir'),
|
||||
url(../assets/avenir-font/AvenirLTStd-Book.otf) format('opentype');
|
||||
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Box, Button, Container, Link, Typography } from '@mui/material'
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import { useEffect } from 'react'
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { appPublicRoutes } from '../../routes'
|
||||
import { saveVisitedLink } from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
|
||||
import { Container } from '../../components/Container'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
export const LandingPage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -32,9 +33,9 @@ export const LandingPage = () => {
|
||||
description: (
|
||||
<>
|
||||
Code is MIT licenced and available at{' '}
|
||||
<Link href="https://git.nostrdev.com/sigit/sigit.io">
|
||||
<a href="https://git.nostrdev.com/sigit/sigit.io">
|
||||
https://git.nostrdev.com/sigit/sigit.io
|
||||
</Link>
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
)
|
||||
@ -151,15 +152,9 @@ export const LandingPage = () => {
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<Container
|
||||
maxWidth="xl"
|
||||
className={styles.container}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '50px'
|
||||
}}
|
||||
>
|
||||
<img src="/logo.svg" alt="Logo" width={300} />
|
||||
<Container className={styles.container}>
|
||||
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
|
||||
<div>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
@ -170,6 +165,11 @@ export const LandingPage = () => {
|
||||
}}
|
||||
>
|
||||
Secure & Private Document Signing
|
||||
</Typography>
|
||||
<p className={styles.subTitle}>
|
||||
An open-source and self-hostable solution for secure document signing
|
||||
and verification.
|
||||
</p>
|
||||
<Typography
|
||||
mt={'15px'}
|
||||
sx={{
|
||||
@ -177,11 +177,8 @@ export const LandingPage = () => {
|
||||
lineHeight: '25px',
|
||||
letterSpacing: '1px'
|
||||
}}
|
||||
>
|
||||
An open-source and self-hostable solution for secure document signing
|
||||
and verification.
|
||||
</Typography>
|
||||
</Typography>
|
||||
></Typography>
|
||||
</div>
|
||||
<Box
|
||||
display={'grid'}
|
||||
gap={'25px'}
|
||||
@ -198,16 +195,10 @@ export const LandingPage = () => {
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '18px',
|
||||
lineHeight: '25px',
|
||||
letterSpacing: '1px'
|
||||
}}
|
||||
>
|
||||
<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.
|
||||
</Typography>
|
||||
</p>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
|
||||
@ -1,9 +1,29 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 45px;
|
||||
|
||||
position: relative;
|
||||
padding: 5vh 0%;
|
||||
padding-block: 50px;
|
||||
padding-inline: 50px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@ -1,50 +1,15 @@
|
||||
$primary-main: var(--mui-palette-primary-main);
|
||||
$primary-light: var(--mui-palette-primary-light);
|
||||
$primary-dark: var(--mui-palette-primary-dark);
|
||||
|
||||
$accent-color: #41bfc2;
|
||||
$primary-main: #4c82a3;
|
||||
$primary-light: #5e8eab;
|
||||
$primary-dark: #447592;
|
||||
|
||||
$box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
$border-color: #27323c;
|
||||
|
||||
$page-background-color: #f4f4fb;
|
||||
$modal-input-background: #f4f4fb;
|
||||
$background-color: #fff;
|
||||
$body-background-color: #ededed;
|
||||
$overlay-background-color: #ffffff;
|
||||
|
||||
$text-color: #3e3e3e;
|
||||
$text-color: #434343;
|
||||
$input-text-color: #717171;
|
||||
$info-text-color: #4169e1;
|
||||
|
||||
$icon-color: #c1c1c1;
|
||||
$zap-icon-color: #ffd700;
|
||||
|
||||
$btn-background-color: $primary-main;
|
||||
$btn-color: #fff;
|
||||
|
||||
$progress-box-background-color: $primary-main;
|
||||
$progress-box-inner-background-color: $primary-dark;
|
||||
$rank-progress-background-color: #445c76;
|
||||
|
||||
$correct-answer-background-color: $primary-light;
|
||||
$incorrect-answer-background-color: #e84d67;
|
||||
$incorrect-answer-label-color: #fff;
|
||||
|
||||
$checkbox-border-color: #ccc;
|
||||
$checkbox-hover-border-color: #888;
|
||||
$checkbox-checked-background-color: $primary-main;
|
||||
$checkbox-checked-color: #fff;
|
||||
|
||||
$comment-notice-background-color: #0d6efd;
|
||||
$comment-notice-color: #fff;
|
||||
$comment-divider-color: #eee;
|
||||
|
||||
$activated-topic-background-color: var(--mui-palette-info-dark);
|
||||
|
||||
$error-msg-color: red;
|
||||
$suggestion-box-heading-color: #dfe0e0;
|
||||
|
||||
$callOut-success-background: $primary-light;
|
||||
$callOut-success-color: $primary-dark;
|
||||
|
||||
$review-feedback-correct: #178b13;
|
||||
$review-feedback-incorrect: #d82222;
|
||||
|
||||
@ -1 +1,2 @@
|
||||
$header-height: var(--AppBar-height, 78.5px);
|
||||
$header-height: 65px;
|
||||
$body-vertical-padding: 25px;
|
||||
|
||||
@ -8,7 +8,9 @@ export const theme = extendTheme({
|
||||
light: {
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#291334'
|
||||
main: '#4c82a3',
|
||||
light: '#5e8eab',
|
||||
dark: '447592'
|
||||
},
|
||||
info: {
|
||||
main: '#3abff8'
|
||||
@ -66,15 +68,20 @@ export const theme = extendTheme({
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiTypography: {
|
||||
defaultProps: {
|
||||
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
|
||||
}
|
||||
}
|
||||
},
|
||||
typography: {
|
||||
fontFamily: [
|
||||
'system-ui',
|
||||
'Avenir',
|
||||
'Helvetica',
|
||||
'Arial',
|
||||
'sans-serif'
|
||||
].join(', ')
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 600,
|
||||
md: 900,
|
||||
lg: 1200,
|
||||
xl: 1420
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user