add jumobotrom on homepage

Author: arximughal

src/components/Header.module.scss

@@ -3,7 +3,7 @@
 .header {
   position: fixed;
   width: 100vw;
-  height: 68px;
+  height: 69px;
   background: $theme-accent;
   top: 0;
   left: 0;

src/pages/Home.tsx

@@ -1,17 +1,42 @@
 import React from "react";
 import Counter from "../features/counter/Counter";
 import TodoList from "../features/todos/TodoList";
+import styles from "./styles/home.module.scss";
 
 // Define a home page component that renders some content and features
 const Home: React.FC = () => {
   // Return the JSX element for the home page component
   return (
-    <div>
-      <h1>Welcome to React Boilerplate</h1>
-      <p>
-        This is a simple app to demonstrate how to use CRA, react router and
-        redux toolkit.
-      </p>
+    <div className={styles.container}>
+      <div className={styles.jumbotron}>
+        <h1>Welcome to React Boilerplate</h1>
+        <p>
+          This is a simple{" "}
+          <a href="https://create-react-app.dev/" target="_blank">
+            Create React App
+          </a>{" "}
+          boilerplate. It comes with a pre-defined structure that includes{" "}
+          <a href="https://redux.js.org/" target="_blank">
+            redux
+          </a>
+          ,{" "}
+          <a
+            href="https://redux.js.org/introduction/installation#redux-toolkit"
+            target="_blank"
+          >
+            redux-toolkit
+          </a>
+          ,{" "}
+          <a href="https://reactrouter.com/en/main" target="_blank">
+            react-router-dom
+          </a>
+          , and support for{" "}
+          <a href="https://sass-lang.com/" target="_blank">
+            Sass
+          </a>{" "}
+          (scss modules).
+        </p>
+      </div>
       <Counter />
       <TodoList />
     </div>

src/pages/styles/home.module.scss

@@ -0,0 +1,37 @@
+@import "/src/theme/colors.scss";
+
+.container {
+  margin-top: 69px;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .jumbotron {
+    background: $accent-accent-dark;
+    width: 100%;
+    text-align: center;
+    height: 30vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    h1,
+    p {
+      color: $white;
+
+      a {
+        color: $theme-accent;
+      }
+    }
+
+    h1 {
+      text-transform: uppercase;
+    }
+
+    p {
+      padding: 0 69px;
+    }
+  }
+}