Landing page - new design implementation #122

Merged
b merged 45 commits from issue-21 into staging 2024-07-31 13:06:58 +00:00
12 changed files with 160 additions and 177 deletions
Showing only changes of commit 9189ff33bc - Show all commits

View File

@ -2,7 +2,6 @@ import {
AppBar as AppBarMui, AppBar as AppBarMui,
Box, Box,
Button, Button,
Container,
Menu, Menu,
MenuItem, MenuItem,
Toolbar, Toolbar,
@ -35,6 +34,7 @@ import {
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { setUserRobotImage } from '../../store/userRobotImage/action' import { setUserRobotImage } from '../../store/userRobotImage/action'
import { Container } from '../Container'
const metadataController = new MetadataController() const metadataController = new MetadataController()
@ -122,12 +122,11 @@ export const AppBar = () => {
position="fixed" position="fixed"
className={styles.AppBar} className={styles.AppBar}
sx={{ sx={{
boxShadow: 'none', boxShadow: 'none'
'--AppBar-height': isAuthenticated ? '60px' : ''
}} }}
> >
<Container maxWidth="xl" disableGutters={true}> <Container>
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar} disableGutters={true}>
<Box className={styles.logoWrapper}> <Box className={styles.logoWrapper}>
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} /> <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
</Box> </Box>

View File

@ -2,7 +2,7 @@
@import '../../styles/sizes.scss'; @import '../../styles/sizes.scss';
.AppBar { .AppBar {
background-color: $background-color !important; background-color: $overlay-background-color !important;
height: $header-height; height: $header-height;
flex-direction: row !important; flex-direction: row !important;
align-items: center; align-items: center;

View File

@ -1,4 +1,4 @@
import { Box, Typography } from '@mui/material' 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'
@ -18,38 +18,11 @@ export const CardComponent = ({
}: CardComponentProps) => { }: CardComponentProps) => {
return ( return (
<div className={styles.card}> <div className={styles.card}>
<Box <h3 className={styles.title}>
className={styles.content} <div className={styles.icon}>{icon}</div>
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'
}}
>
{title} {title}
</Typography> </h3>
<Typography <p className={styles.description}>{description}</p>
sx={{
mt: '10px',
fontSize: '14px',
lineHeight: '25px',
letterSpacing: '1px',
fontWeight: '500'
}}
>
{description}
</Typography>
</Box>
</Box>
<Box mt={'auto'} textAlign={'right'}> <Box mt={'auto'} textAlign={'right'}>
{actions} {actions}
</Box> </Box>

View File

@ -1,44 +1,55 @@
@import '../../../styles/colors.scss'; @import '../../../styles/colors.scss';
.card { .card {
border-radius: 32px; border-radius: 4px;
padding: 25px; padding: 25px;
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0);
border: solid 1px rgba(0, 0, 0, 0);
position: relative; position: relative;
background: #f4f4f4; background: $overlay-background-color;
transition: ease 0.4s; transition: ease 0.2s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
&:hover { word-break: break-word;
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
background: #ffffff;
border: solid 1px rgba(0, 0, 0, 0.075);
.icon { &:hover {
opacity: 1; background: $primary-main;
filter: saturate(1); color: white;
.icon,
a {
color: inherit;
}
a:hover {
text-decoration: underline;
} }
} }
} }
.content { a {
display: flex; color: inherit;
flex-direction: column;
gap: 25px;
word-break: break-word;
} }
.icon { .icon {
color: $accent-color; color: $primary-main;
transition: ease 0.4s;
font-size: 25px; 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;
} }

View File

@ -1,4 +1,3 @@
import Container from '@mui/material/Container'
import { Event, kinds } from 'nostr-tools' import { Event, kinds } from 'nostr-tools'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'

View File

@ -1,11 +1,12 @@
@import '../../styles/colors.scss';
.modal { .modal {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: white; background-color: $overlay-background-color;
padding: 4px;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;

View File

@ -1,31 +1,47 @@
@import '../styles/colors.scss'; @import '../styles/colors.scss';
@import '../styles/sizes.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 { .main {
padding: $header-height 0 0 0;
flex-grow: 1; flex-grow: 1;
} padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
background-color: $body-background-color;
@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');
} }

View File

@ -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 { 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'
import { saveVisitedLink } from '../../utils' import { saveVisitedLink } from '../../utils'
import styles from './style.module.scss'
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent' import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
export const LandingPage = () => { export const LandingPage = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -32,9 +33,9 @@ export const LandingPage = () => {
description: ( description: (
<> <>
Code is MIT licenced and available at{' '} 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 https://git.nostrdev.com/sigit/sigit.io
</Link> </a>
. .
</> </>
) )
@ -151,15 +152,9 @@ export const LandingPage = () => {
}, [location]) }, [location])
return ( return (
<Container <Container className={styles.container}>
maxWidth="xl" <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
className={styles.container} <div>
sx={{
display: 'flex',
gap: '50px'
}}
>
<img src="/logo.svg" alt="Logo" width={300} />
<Typography <Typography
variant="h1" variant="h1"
sx={{ sx={{
@ -170,6 +165,11 @@ export const LandingPage = () => {
}} }}
> >
Secure &amp; Private Document Signing Secure &amp; Private Document Signing
</Typography>
<p className={styles.subTitle}>
An open-source and self-hostable solution for secure document signing
and verification.
</p>
<Typography <Typography
mt={'15px'} mt={'15px'}
sx={{ sx={{
@ -177,11 +177,8 @@ export const LandingPage = () => {
lineHeight: '25px', lineHeight: '25px',
letterSpacing: '1px' letterSpacing: '1px'
}} }}
> ></Typography>
An open-source and self-hostable solution for secure document signing </div>
and verification.
</Typography>
</Typography>
<Box <Box
display={'grid'} display={'grid'}
gap={'25px'} gap={'25px'}
@ -198,16 +195,10 @@ export const LandingPage = () => {
))} ))}
</Box> </Box>
<Typography <p className={styles.description}>
sx={{
fontSize: '18px',
lineHeight: '25px',
letterSpacing: '1px'
}}
>
SIGit is a secure &amp; private document signing service where you can SIGit is a secure &amp; private document signing service where you can
create, sign, and verify any document from any device with a browser. create, sign, and verify any document from any device with a browser.
</Typography> </p>
<Button <Button
sx={{ sx={{

View File

@ -1,9 +1,29 @@
@import '../../styles/colors.scss'; @import '../../styles/colors.scss';
.container { .container {
display: flex;
gap: 45px;
position: relative; position: relative;
padding: 5vh 0%; padding-block: 50px;
padding-inline: 50px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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);
}

View File

@ -1,50 +1,15 @@
$primary-main: var(--mui-palette-primary-main); $primary-main: #4c82a3;
$primary-light: var(--mui-palette-primary-light); $primary-light: #5e8eab;
$primary-dark: var(--mui-palette-primary-dark); $primary-dark: #447592;
$accent-color: #41bfc2;
$box-shadow-color: rgba(0, 0, 0, 0.1); $box-shadow-color: rgba(0, 0, 0, 0.1);
$border-color: #27323c; $border-color: #27323c;
$page-background-color: #f4f4fb; $body-background-color: #ededed;
$modal-input-background: #f4f4fb; $overlay-background-color: #ffffff;
$background-color: #fff;
$text-color: #3e3e3e; $text-color: #434343;
$input-text-color: #717171; $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-correct: #178b13;
$review-feedback-incorrect: #d82222; $review-feedback-incorrect: #d82222;

View File

@ -1 +1,2 @@
$header-height: var(--AppBar-height, 78.5px); $header-height: 65px;
$body-vertical-padding: 25px;

View File

@ -8,7 +8,9 @@ export const theme = extendTheme({
light: { light: {
palette: { palette: {
primary: { primary: {
main: '#291334' main: '#4c82a3',
light: '#5e8eab',
dark: '447592'
}, },
info: { info: {
main: '#3abff8' main: '#3abff8'
@ -66,15 +68,20 @@ export const theme = extendTheme({
} }
} }
} }
},
MuiTypography: {
defaultProps: {
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
}
} }
}, },
typography: { breakpoints: {
fontFamily: [ values: {
'system-ui', xs: 0,
'Avenir', sm: 600,
'Helvetica', md: 900,
'Arial', lg: 1200,
'sans-serif' xl: 1420
].join(', ') }
} }
}) })