Releasing new design #161
@ -1,24 +1,63 @@
|
||||
import { Box, Button, Grid, Link } from '@mui/material'
|
||||
import { Box, Button, Container, Grid, Link } from '@mui/material'
|
||||
import { Link as RouterLink } from 'react-router-dom'
|
||||
import styles from './style.module.scss'
|
||||
|
||||
export const Footer = () => (
|
||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||
<Grid
|
||||
container
|
||||
<Container
|
||||
maxWidth="xl"
|
||||
sx={{ padding: '75px 0' }}
|
||||
columnSpacing={'50px'}
|
||||
sx={{
|
||||
paddingY: '50px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
display={'grid'}
|
||||
sx={{
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
md: '0.5fr 1.75fr 0.75fr'
|
||||
},
|
||||
alignItems: {
|
||||
xs: 'center',
|
||||
md: 'start'
|
||||
}
|
||||
}}
|
||||
gap={'50px'}
|
||||
>
|
||||
<Link
|
||||
sx={{
|
||||
justifySelf: {
|
||||
xs: 'center',
|
||||
md: 'start'
|
||||
}
|
||||
}}
|
||||
component={RouterLink}
|
||||
to={'/'}
|
||||
className={styles.logo}
|
||||
>
|
||||
<Grid item xs={12} sm={2}>
|
||||
<Link component={RouterLink} to={'/'}>
|
||||
<Box className={styles.logo}>
|
||||
<img src="/logo.png" alt="Logo" />
|
||||
</Box>
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={7} component={'nav'}>
|
||||
<div className={styles.nav}>
|
||||
<Box
|
||||
display={'grid'}
|
||||
sx={{
|
||||
gap: '15px',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
xl: 'repeat(3, 1fr)'
|
||||
},
|
||||
borderBlock: {
|
||||
xs: 'solid 1px rgba(0, 0, 0, 0.1)',
|
||||
md: 'unset'
|
||||
},
|
||||
paddingY: {
|
||||
xs: '10px',
|
||||
md: 'unset'
|
||||
}
|
||||
}}
|
||||
component={'nav'}
|
||||
className={styles.nav}
|
||||
>
|
||||
<RouterLink to={'/'}>
|
||||
<Button variant={'text'} focusRipple={false}>
|
||||
Home
|
||||
@ -34,10 +73,16 @@ export const Footer = () => (
|
||||
Source
|
||||
</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3} className={styles.about}>
|
||||
<div className={styles.links}>
|
||||
</Box>
|
||||
<Box
|
||||
className={styles.links}
|
||||
sx={{
|
||||
justifySelf: {
|
||||
xs: 'center',
|
||||
md: 'end'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
|
||||
target="_blank"
|
||||
@ -57,9 +102,9 @@ export const Footer = () => (
|
||||
/>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
<div className={`${styles.borderTop} ${styles.credits}`}>
|
||||
Built by
|
||||
<Link href="https://nostrdev.com/" target="_blank">
|
||||
|
@ -15,36 +15,21 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: none;
|
||||
grid-gap: 15px;
|
||||
.links {
|
||||
font-weight: 500;
|
||||
|
||||
> a {
|
||||
min-height: 0;
|
||||
> a + a {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
button {
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
font-weight: 500;
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
> a + a {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.credits {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
Loading…
Reference in New Issue
Block a user