Landing page - new design implementation #122
@ -1,13 +1,13 @@
|
|||||||
import { Box, Button, Container, Link as LinkMui } from '@mui/material'
|
import { Box, Button, Link as LinkMui } from '@mui/material'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
import { Container } from '../Container'
|
||||||
|
|
||||||
export const Footer = () => (
|
export const Footer = () => (
|
||||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||||
<Container
|
<Container
|
||||||
maxWidth="xl"
|
style={{
|
||||||
sx={{
|
paddingBlock: '50px'
|
||||||
paddingY: '50px'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -58,13 +58,43 @@ export const Footer = () => (
|
|||||||
component={'nav'}
|
component={'nav'}
|
||||||
className={styles.nav}
|
className={styles.nav}
|
||||||
>
|
>
|
||||||
<Button component={Link} to={'/'} variant={'text'}>
|
<Button
|
||||||
|
sx={{
|
||||||
|
justifyContent: {
|
||||||
|
xs: 'center',
|
||||||
|
sm: 'start'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
component={Link}
|
||||||
|
to={'/'}
|
||||||
|
variant={'text'}
|
||||||
|
>
|
||||||
Home
|
Home
|
||||||
</Button>
|
</Button>
|
||||||
<Button component={Link} to={'/#'} variant={'text'}>
|
<Button
|
||||||
|
sx={{
|
||||||
|
justifyContent: {
|
||||||
|
xs: 'center',
|
||||||
|
sm: 'start'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
component={Link}
|
||||||
|
to={'/#'}
|
||||||
|
variant={'text'}
|
||||||
|
>
|
||||||
Documentation
|
Documentation
|
||||||
</Button>
|
</Button>
|
||||||
<Button component={Link} to={'/#'} variant={'text'}>
|
<Button
|
||||||
|
sx={{
|
||||||
|
justifyContent: {
|
||||||
|
xs: 'center',
|
||||||
|
sm: 'start'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
component={Link}
|
||||||
|
to={'/#'}
|
||||||
|
variant={'text'}
|
||||||
|
>
|
||||||
Source
|
Source
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
@ -99,9 +129,9 @@ export const Footer = () => (
|
|||||||
</Container>
|
</Container>
|
||||||
<div className={`${styles.borderTop} ${styles.credits}`}>
|
<div className={`${styles.borderTop} ${styles.credits}`}>
|
||||||
Built by
|
Built by
|
||||||
<LinkMui href="https://nostrdev.com/" target="_blank">
|
<a href="https://nostrdev.com/" target="_blank">
|
||||||
Nostr Dev
|
Nostr Dev
|
||||||
</LinkMui>{' '}
|
</a>{' '}
|
||||||
2024.
|
2024.
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import '../../styles/colors.scss';
|
||||||
|
|
||||||
.borderTop {
|
.borderTop {
|
||||||
border-top: solid 1px rgba(0, 0, 0, 0.075);
|
border-top: solid 1px rgba(0, 0, 0, 0.075);
|
||||||
}
|
}
|
||||||
@ -7,16 +9,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 25px;
|
|
||||||
word-break: break-word;
|
|
||||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
> a + a {
|
> a + a {
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
@ -24,9 +22,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
button {
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: start;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -40,29 +39,22 @@
|
|||||||
|
|
||||||
> a {
|
> a {
|
||||||
transition: ease 0.4s;
|
transition: ease 0.4s;
|
||||||
color: rgba(1, 170, 173, 0.75);
|
|
||||||
|
color: $primary-main;
|
||||||
text-decoration-color: inherit;
|
text-decoration-color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #01aaad;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 150px;
|
max-width: 300px;
|
||||||
height: auto;
|
|
||||||
|
|
||||||
> img {
|
> img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 150px;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.logo {
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user