Skip to content

Commit 38389ca

Browse files
buzzracharyeah-rejanbuzzracharyeah-rejan
committed
feat: setup footer
1 parent 7bee674 commit 38389ca

File tree

8 files changed

+158
-17
lines changed

8 files changed

+158
-17
lines changed

‎src/App.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,14 @@ const App = () => {
1414

1515
return (
1616
<BrowserRouter>
17-
<ThemeProvider theme={theme}>
18-
<CssBaseline />
19-
<Routes>
20-
<Route element={<Layout />}>
21-
<Route path='/' element={<Navigate to='/dashboard' replace />} />
22-
<Route path='/dashboard' element={<Dashboard />} />
23-
</Route>
24-
</Routes>
25-
</ThemeProvider>
17+
<CssBaseline />
18+
<Routes>
19+
<Route element={<Layout />}>
20+
<Route path='/' element={<Navigate to='/dashboard' replace />} />
21+
<Route path='/dashboard' element={<Dashboard />} />
22+
</Route>
23+
</Routes>
24+
<ThemeProvider theme={theme}></ThemeProvider>
2625
</BrowserRouter>
2726
);
2827
};

‎src/assets/heroImage.png

1.02 MB
Loading

‎src/components/FlexBetween/index.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import { Box } from '@mui/material';
1+
import { Box, SxProps } from '@mui/material';
22
import React from 'react';
33

44
type Props = {
55
children: React.ReactNode;
6+
className?: string;
7+
sx?: SxProps;
68
};
7-
const FlexBetween = ({ children }: Props) => {
9+
const FlexBetween = ({ className, children, sx }: Props) => {
810
return (
9-
<Box display='flex' justifyContent='space-between' alignItems='center' gap='1.5rem'>
11+
<Box
12+
display='flex'
13+
justifyContent='space-between'
14+
alignItems='center'
15+
gap='1.5rem'
16+
className={className}
17+
sx={sx}
18+
>
1019
{children}
1120
</Box>
1221
);

‎src/components/Navbar/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import {
1616
const Navbar = () => {
1717
return (
1818
<AppBar
19-
sx={{ position: 'static', background: 'none', boxShadow: 'none', padding: '1.25rem 2rem' }}
19+
sx={{ position: 'static', background: 'none', boxShadow: 'none', padding: '1.25rem 3.5rem' }}
2020
>
21-
<Toolbar sx={{ display: 'flex', justifyContent: 'space-around' }}>
21+
<Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
2222
<Box
2323
component='img'
2424
alt='profile'

‎src/components/Navbar/navbar.styles.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
font-style: normal;
55
font-weight: 500;
66
line-height: normal;
7+
text-decoration: none !important;
78
}
89

910
.nav-item:hover {
10-
text-decoration: none !important;
1111
}

‎src/scenes/Footer/footer.styles.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.footer {
2+
width: 100%;
3+
height: 505px;
4+
}
5+
6+
.footer__meta-title {
7+
color: #000;
8+
font-size: 24px;
9+
font-weight: 700;
10+
}
11+
12+
.footer__meta-content {
13+
display: flex;
14+
width: 285px;
15+
flex-direction: column;
16+
flex-shrink: 0;
17+
color: #9f9f9f;
18+
font-size: 16px;
19+
}
20+
21+
.subtitle {
22+
font-size: 1rem !important;
23+
color: #9f9f9f !important;
24+
letter-spacing: 1.25px !important;
25+
}

‎src/scenes/Footer/index.tsx

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { Box, Divider, Link, Button, InputBase, Typography, useTheme } from '@mui/material';
2+
import { Link as RouterLink } from 'react-router-dom';
3+
4+
import FlexBetween from '../../components/FlexBetween';
5+
6+
import './footer.styles.css';
7+
8+
const Footer = () => {
9+
return (
10+
<>
11+
<Divider />
12+
<Box p='48px 100px 38px 100px'>
13+
<FlexBetween className='footer' sx={{ alignItems: 'flex-start' }}>
14+
<Box className='footer__meta' display='flex' flexDirection='column' gap='4.5rem'>
15+
<Typography variant='h4' className='footer__meta-title'>
16+
Funiro.
17+
</Typography>
18+
<Typography variant='body1' className='footer__meta-content'>
19+
400 University Drive Suite 200 Coral Gables, FL 33134 USA
20+
</Typography>
21+
</Box>
22+
23+
<Box display='flex' flexDirection='column' gap='3.5rem'>
24+
<Typography variant='subtitle2' className='subtitle'>
25+
Links
26+
</Typography>
27+
<Box component='nav' display='flex' flexDirection='column' gap='1.5rem'>
28+
<Link component={RouterLink} to='/' className='nav-item'>
29+
Home
30+
</Link>
31+
<Link component={RouterLink} to='/' className='nav-item'>
32+
Shop
33+
</Link>
34+
<Link component={RouterLink} to='/' className='nav-item'>
35+
About
36+
</Link>
37+
<Link component={RouterLink} to='/' className='nav-item'>
38+
Contact
39+
</Link>
40+
</Box>
41+
</Box>
42+
43+
<Box display='flex' flexDirection='column' gap='3.5rem'>
44+
<Typography variant='subtitle2' className='subtitle'>
45+
Help
46+
</Typography>
47+
<Box component='nav' display='flex' flexDirection='column' gap='1.5rem'>
48+
<Link component={RouterLink} to='/' className='nav-item'>
49+
Payment Options
50+
</Link>
51+
<Link component={RouterLink} to='/' className='nav-item'>
52+
Returns
53+
</Link>
54+
<Link component={RouterLink} to='/' className='nav-item'>
55+
Policies
56+
</Link>
57+
</Box>
58+
</Box>
59+
60+
<Box display='flex' flexDirection='column' gap='2.5rem'>
61+
<Typography variant='subtitle2' className='subtitle'>
62+
Newsletter
63+
</Typography>
64+
<Box display='flex' flexDirection='row' gap='1rem'>
65+
<InputBase
66+
placeholder='Enter Your Email Address'
67+
sx={{
68+
'& .MuiInputBase-input': {
69+
p: '0.4rem 0.85rem',
70+
borderBottom: '1px solid #000',
71+
borderRadius: '0.35rem',
72+
},
73+
'& .MuiInputBase-input:focus': {
74+
border: '1px solid #f3f3f3',
75+
borderBottom: '1px solid #000',
76+
},
77+
}}
78+
/>
79+
<Button
80+
variant='text'
81+
sx={{
82+
'&.MuiButton-text': {
83+
borderBottom: '1px solid #000',
84+
color: '#000',
85+
letterSpacing: '1.25px',
86+
},
87+
}}
88+
>
89+
Subscribe
90+
</Button>
91+
</Box>
92+
</Box>
93+
</FlexBetween>
94+
<Divider />
95+
<Typography variant='subtitle2' sx={{ p: '2.1rem 2.5rem' }}>
96+
2023 furino. All rights reverved
97+
</Typography>
98+
</Box>
99+
</>
100+
);
101+
};
102+
103+
export default Footer;

‎src/scenes/Layout/index.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { Box } from '@mui/material';
2-
import React from 'react';
1+
import { Box, Container } from '@mui/material';
2+
import { Outlet } from 'react-router-dom';
33
import FlexBetween from '../../components/FlexBetween';
44
import Navbar from '../../components/Navbar';
5+
import Footer from '../Footer';
56

67
const Layout = () => {
78
return (
89
<Box>
910
<FlexBetween>
1011
<Navbar />
1112
</FlexBetween>
13+
<Container maxWidth='xl'>
14+
<Outlet />
15+
</Container>
16+
<Footer />
1217
</Box>
1318
);
1419
};

0 commit comments

Comments
 (0)