(Frontend): Add a welcome (home) page

client/src/components/Home/index.js

@@ -1,5 +1,70 @@
+import {Box, IconButton} from '@mui/material';
+import {TextField} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+
+function SearchBar() {
+  return (
+    <div style={{display: 'flex', alignItems: 'center',
+      justifyContent: 'center'}}
+    >
+      <Box sx={{
+        display: 'flex', justifyContent: 'center',
+        width: '90%', maxWidth: 460, alignSelf: 'center',
+        boxShadow: 4, borderRadius: 2, padding: 1,
+        marginTop: 2, marginBottom: 4}}
+      >
+        <TextField id="outlined-basic" label="Search CourseWiki"
+          variant="outlined" size='small' sx={{width: '100%'}}/>
+        <IconButton color='#000' aria-label='search'
+          sx={{marginRight: -1}}
+        >
+          <SearchIcon />
+        </IconButton>
+      </Box>
+    </div>
+  );
+}
+
 export default function Home() {
   return (
-    'this is the home page'
+    <div style={{display: 'block', margin: -24,
+      backgroundColor: '#171717', minHeight: '100vh'}}
+    >
+      <div style={{display: 'grid', alignItems: 'center',
+        backgroundColor: 'white'}}
+      >
+        <h1 style={{
+          textAlign: 'center', fontSize: 'clamp(2.5rem, 10vw, 6rem)',
+          fontWeight: 'normal', marginTop: 20, marginBottom: 0}}
+        >
+          Course Wiki
+        </h1>
+        <h2 style={{textAlign: 'center', fontSize: 'clamp(1rem, 3vw, 1.5rem)',
+          fontWeight: 'normal'}}
+        >
+          Knowledge is the cheapest and most rewarding investment
+        </h2>
+        <SearchBar style={{display: 'block'}} />
+        <div className='home-image' style={{
+          display: 'flex',
+          justifyContent: 'center', width: '100%', position: 'relative'}}
+        >
+          <img src='https://i.imgur.com/kZznhsj.png' alt='home'
+            style={{
+              height: 'auto', width: '95%', alignSelf: 'center',
+              maxWidth: 1060, objectFit: 'contain', zIndex: 1,
+            }}/>
+          <div style={{
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '50%', // Half of the container
+            backgroundColor: '#171717',
+          }}></div>
+        </div>
+      </div>
+    </div>
   );
 }

client/src/components/NavigationBar.js

@@ -29,32 +29,43 @@ export default function NavigationBar(props) {
       <AppBar
         component='nav'
         sx={{
-          minHeight: {xs: 260, sm: 420},
-          backgroundImage: 'url(/navigation-background.jpg)',
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
+          backgroundColor: '#fff',
+          boxShadow: 0,
         }}
       >
-        <Toolbar>
+        <Toolbar
+          sx={{
+            maxWidth: 920,
+            alignSelf: 'center',
+            width: '90%',
+          }}
+        >
           <Typography
-            variant='h6'
+            variant='h5'
             component='div'
-            sx={{flexGrow: 1, fontWeight: 'bold'}}
+            sx={{
+              color: '#000', flexGrow: 1,
+              fontSize: 28, fontWeight: 'bolder',
+            }}
           >
             Course Wiki
           </Typography>
           <Box sx={{display: {xs: 'none', sm: 'block'}}}>
             {navItems.map((item) => (
-              <Button key={item} sx={{color: '#fff'}} onClick={() => {
-                navigate(`/${item.toLowerCase()}`);
-              }}>
+              <Button key={item}
+                sx={{
+                  color: '#000', fontSize: 20,
+                  textTransform: 'none',
+                }}
+                onClick={() => {
+                  navigate(`/${item.toLowerCase()}`);
+                }}>
                 {item}
               </Button>
             ))}
           </Box>
           <IconButton
-            color='inherit'
+            color='#000'
             aria-label='open drawer'
             edge='start'
             onClick={(event) => {
@@ -85,42 +96,9 @@ export default function NavigationBar(props) {
             ))}
           </Menu>
         </Toolbar>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            minHeight: {xs: 180, sm: 300},
-          }}
-        >
-          <Typography
-            variant='h1'
-            sx={{
-              fontWeight: 'bold',
-              fontSize: {xs: 'h3.fontSize', sm: 80},
-            }}
-          >
-            Course Wiki
-          </Typography>
-          <Typography
-            variant='body1'
-            align='center'
-            sx={{
-              fontWeight: 'light',
-              paddingLeft: {xs: 3, sm: 0},
-              paddingRight: {xs: 3, sm: 0},
-              fontSize: {xs: 'body1.fontSize', sm: 'h6.fontSize'},
-            }}
-          >
-            Knowledge is the cheapest and most rewarding investment
-          </Typography>
-        </Box>
       </AppBar>
-      <Box component='main' sx={{p: 3}}>
-        <Toolbar sx={{
-          minHeight: {xs: 260, sm: 420},
-        }}/>
+      <Box component='main' sx={{p: 3, width: '100%'}}>
+        <Toolbar />
         {props.children}
       </Box>
     </Box>