update herosection

Author: Neo-Zenith

.gitignore

@@ -1,2 +1,4 @@
 .vscode/
-express/img/*
+express/img/*
+
+*DS_STORE

client/src/components/HeroSection/HeroSection.jsx

@@ -2,13 +2,22 @@ import { Box, Button, Typography } from "@mui/material";
 import { darken } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import herosection from "../../static/herosection.gif";
 
 export default function HeroSection() {
   const navigate = useNavigate();
   const auth = useSelector((state) => state.authenticated);
   return (
-    <>
-      <Box sx={{ marginTop: "5rem", marginBottom: "10rem" }}>
+    <div style={{ display: "flex" }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          marginTop: "5rem",
+          marginBottom: "10rem",
+          width: "50%",
+        }}
+      >
         <Typography
           variant="h4"
           sx={{
@@ -18,7 +27,6 @@ export default function HeroSection() {
             fontWeight: 600,
             letterSpacing: "0.2rem",
             marginTop: "15rem",
-            maxWidth: "max(35%, 25rem)",
             color: "var(--color-accent)",
           }}
         >
@@ -47,17 +55,41 @@ export default function HeroSection() {
           }}
           sx={{
             marginLeft: "10rem",
-            width: "max(35%, 25rem)",
+            boxSizing: "border-box",
             marginTop: "1.5rem",
             backgroundColor: "var(--color-secondary)",
             "&:hover": {
               backgroundColor: darken("#0C7489", 0.1), // Adjust the factor (0.1) as needed
             },
+            maxWidth: "max(70%, 20rem)",
           }}
         >
           <Typography>Try Now</Typography>
         </Button>
       </Box>
-    </>
+      <div
+        style={{
+          width: "50%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            width: "80%",
+            height: "fit-content",
+            marginTop: "10rem",
+            boxShadow: "0px 0px 13px 3px rgba(17,157,164,0.71)",
+          }}
+        >
+          <img
+            src={herosection}
+            style={{ width: "100%", height: "fit-content" }}
+          />
+        </Box>
+      </div>
+    </div>
   );
 }

client/src/components/Navbar/Navbar.jsx

@@ -53,7 +53,12 @@ export default function Navbar() {
       }}
     >
       <Toolbar>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{ flexGrow: 1, cursor: "pointer" }}
+          onClick={() => navigate("/")}
+        >
           APP NAME
         </Typography>
         {auth && (

client/src/components/OutputWindow/OutputWindow.jsx

@@ -104,7 +104,7 @@ export default function OutputWindow({ context }) {
             theme={vs2015}
             wrapLines
             customStyle={{
-              maxHeight: "47vh",
+              height: "47vh",
             }}
           />
         </div>