feat:setup banner

Author: buzzracharyeah-rejan

src/assets/heroImage.png public/assets/heroImage.png

@@ -15,13 +15,14 @@ const App = () => {
   return (
     <BrowserRouter>
       <CssBaseline />
-      <Routes>
-        <Route element={<Layout />}>
-          <Route path='/' element={<Navigate to='/dashboard' replace />} />
-          <Route path='/dashboard' element={<Dashboard />} />
-        </Route>
-      </Routes>
-      <ThemeProvider theme={theme}></ThemeProvider>
+      <ThemeProvider theme={theme}>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route path='/' element={<Navigate to='/dashboard' replace />} />
+            <Route path='/dashboard' element={<Dashboard />} />
+          </Route>
+        </Routes>
+      </ThemeProvider>
     </BrowserRouter>
   );
 };

src/assets/logo.png public/assets/logo.png

@@ -1,7 +1,7 @@
 import { AppBar, Box, IconButton, Link, Toolbar } from '@mui/material';
 import React from 'react';
 import FlexBetween from '../FlexBetween';
-import logo from '../../assets/logo.png';
+import logo from '/assets/logo.png';
 import { Link as RouterLink } from 'react-router-dom';
 
 /* ASSETS */

src/assets/profileIcon.png public/assets/profileIcon.png

@@ -0,0 +1,18 @@
+.banner-main__title {
+}
+
+.banner-main__desc {
+}
+
+.banner-box {
+  width: 643px;
+  height: 443px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 1.5rem 2.5rem;
+  position: absolute;
+  bottom: 150px;
+  right: 60px;
+}

src/assets/react.svg public/assets/react.svg

@@ -1,7 +1,86 @@
 import React from 'react';
+import { Box, Button, Typography, useTheme } from '@mui/material';
+
+import './dashboard.styles.css';
 
 const Dashboard = () => {
-  return <div>Dashboard</div>;
+  const theme = useTheme();
+  const classes = {
+    bannerContainer: {
+      height: '1007.93px',
+      background: "url('/assets/heroImage.png')",
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      opacity: '0.85',
+      position: 'relative',
+      zIndex: 1,
+    },
+    bannerAdv: {
+      letterSpacing: '3px',
+      fontWeight: '600',
+      fontSize: '16px',
+      '&.MuiTypography-subtitle1': {},
+    },
+    bannerTitle: {
+      color: '#B88E2F',
+      fontSize: '52px',
+      fontStyle: 'normal',
+      fontWeight: '700',
+      lineHeight: '65px',
+      '&.MuiTypography-h6': {},
+    },
+    bannerDesc: {
+      width: '546px',
+      fontSize: '18px',
+      fontWeight: '500',
+      lineHeight: '24px',
+      letterSpacing: '1.2px',
+      m: '1rem 0',
+      '&.MuiTypography-body1': {},
+    },
+    button: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.primary.main,
+      p: '1.7rem 4rem',
+      width: '190px',
+      height: '24px',
+      textAlign: 'center',
+      borderRadius: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.secondary[400],
+        color: theme.palette.primary.main,
+      },
+    },
+  };
+  return (
+    <Box component='main' sx={classes.bannerContainer}>
+      <Box
+        display='flex'
+        flexDirection='column'
+        gap='1.5rem'
+        className='banner-box'
+        sx={{ backgroundColor: theme.palette.secondary[100] }}
+      >
+        <Box width='559px'>
+          <Typography variant='subtitle1' sx={classes.bannerAdv}>
+            New Arrival
+          </Typography>
+          <Typography variant='h6' sx={classes.bannerTitle}>
+            Discover Our New Collection
+          </Typography>
+          <Typography variant='body1' className='banner-main__desc' sx={classes.bannerDesc}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
+            ullamcorper mattis.
+          </Typography>
+        </Box>
+
+        <Button variant='contained' size='small' sx={classes.button}>
+          Buy Now
+        </Button>
+      </Box>
+    </Box>
+  );
 };
 
 export default Dashboard;

src/App.tsx

@@ -10,9 +10,7 @@ const Layout = () => {
       <FlexBetween>
         <Navbar />
       </FlexBetween>
-      <Container maxWidth='xl'>
-        <Outlet />
-      </Container>
+      <Outlet />
       <Footer />
     </Box>
   );

src/components/Navbar/index.tsx

@@ -8,6 +8,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  --primary: '#B88E2F';
+  --font-color: '#333';
+}
+
 html,
 body {
   width: 100%;

src/scenes/Dashboard/dashboard.styles.css

@@ -28,15 +28,15 @@ const shades = {
     900: '#333333',
   },
   secondary: {
-    100: '#cecfd1',
-    200: '#9d9fa3',
-    300: '#6b6e76',
-    400: '#3a3e48',
-    500: '#090e1a',
-    600: '#070b15',
-    700: '#050810',
-    800: '#04060a',
-    900: '#020305',
+    100: '#FFF3E3',
+    200: '#e3d2ac',
+    300: '#d4bb82',
+    400: '#c6a559',
+    500: '#b88e2f',
+    600: '#937226',
+    700: '#6e551c',
+    800: '#4a3913',
+    900: '#251c09',
   },
 };
 
@@ -50,11 +50,11 @@ export const themeSettings = (mode: PaletteMode) => {
         ? {
             primary: {
               ...shades.primary,
-              main: shades.primary[400],
+              main: shades.primary[200],
             },
             secondary: {
               ...shades.secondary,
-              main: shades.secondary[400],
+              main: shades.secondary[500],
             },
           }
         : {