Add home page welcome section

frontend/src/App.tsx

@@ -35,6 +35,9 @@ const theme = createTheme({
         root: {
           color: "#ffffff",
         },
+        body2: {
+          color: "#caff33",
+        },
       },
     },
   },

frontend/src/components/Navbar/Navbar.scss

@@ -1,7 +1,6 @@
 .Navbar {
     display: flex;
     padding: 20px 34px;
-    margin-inline: 20px;
     justify-content: space-between;
     align-items: center;
     border-radius: 100px;

frontend/src/pages/Home/Home.scss

@@ -1,8 +1,41 @@
 .Home {
   background: var(--Grey-10, #1A1A1A);
-  padding: 40px 60px;
-
+  padding: 40px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
   min-height: 100rem;
+
+  &-welcome {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    &-text {
+      max-width: 45vw;
+    }
+
+    &-title {
+      display: inline;
+      font-size: 2rem !important;
+      font-weight: 700;
+    }
+
+    &-description {
+      padding-block: 30px;
+      font-size: 0.8rem !important;
+      font-weight: 200;
+      color: var(--White-90, #E4E4E7) !important;
+    }
+
+    &-image {
+      width: 100%;
+      height: auto;
+      max-width: 20vw;
+      object-fit: contain;
+    }
+  }
+
 }
 
 .Home-button {

frontend/src/pages/Home/Home.tsx

@@ -2,7 +2,8 @@ import { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import "./Home.scss";
 import Navbar from "../../components/Navbar/Navbar";
-import { Box } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
+import CodeEditorImage from "../../assets/code_editor.svg";
 
 const Home = (): ReactElement => {
   const navigate = useNavigate();
@@ -13,7 +14,31 @@ const Home = (): ReactElement => {
 
   return (
     <Box className="Home">
-      <Navbar></Navbar>
+      <Navbar />
+      <Box className="Home-welcome">
+        <Box className="Home-welcome-text">
+          <Typography className="Home-welcome-title">
+            Welcome to LuckyJinx <br /> Empowering Your{" "}
+          </Typography>
+          <Typography variant="body2" className="Home-welcome-title">
+            Interview Preparation
+          </Typography>
+
+          <Typography className="Home-welcome-description">
+            Collaborate with other enthusiastic coders to prepare for your technical interviews! Select a difficulty
+            level and a topic, and we will immediately select a question and match you with another coder. You can then
+            start on developing a solution to the problem.
+          </Typography>
+
+          <Button color="primary" variant="contained">
+            Get Started
+          </Button>
+        </Box>
+
+        <Box className="Home-welcome-image">
+          <img src={CodeEditorImage} alt="Code Editor" />
+        </Box>
+      </Box>
 
       <button onClick={goToQuestionList} className="Home-button">
         Go to Question List