Apply styles to unauthenticated home page

src/styles/_variables.scss

@@ -2,3 +2,4 @@
 $primary-beige: #f1e6cc;
 $primary-blue: #3f6476;
 $secondary-blue: #001f3f;
+$light-blue: #356481;

src/views/Home.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import "./Home.scss";
 import { List, User } from "../api";
 import { AuthenticatedHome, UnauthenticatedHome } from "../views";
 

src/views/unauthenticated/UnauthenticatedHome.scss

@@ -0,0 +1,31 @@
+@use "../../styles/variables.scss" as *;
+
+.text__heading {
+	color: $secondary-blue;
+	text-align: center;
+	padding: 12px;
+}
+
+.text__normal {
+	color: $light-blue;
+	text-align: center;
+}
+
+.button {
+	background-color: $primary-blue;
+	border: none;
+	color: $primary-beige;
+	text-align: center;
+	padding: 10px 40px;
+	width: 170px;
+}
+
+.custom-button-wrapper {
+	display: flex;
+	justify-content: center; // Centers the button horizontally
+	align-items: center;
+}
+
+.custom-button-wrapper button {
+	@extend .button;
+}

src/views/unauthenticated/UnauthenticatedHome.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./UnauthenticatedHome.scss";
 import { useNavigate } from "react-router-dom";
 import { SignInButton } from "../../api";
 import Button from "react-bootstrap/Button";
@@ -8,29 +9,33 @@ export function UnauthenticatedHome() {
 
 	return (
 		<div className="Home">
-			<h2>Welcome to GrocerEase</h2>
-			<p>
-				The next best thing to having someone else do the shopping for you!
+			<h2 className="text__heading">Welcome to GrocerEase</h2>
+			<p className="text__normal">
+				The next best thing to having someone else do the shopping for you!{" "}
+				<br />
 				Create and manage smart lists, while it learns your shopping habits to
 				let you know exactly when you will need to buy that next batch of toilet
 				paper!
 			</p>
 
 			<article>
-				<p>New to GrocerEase:</p>
-				<Button
-					onClick={() => navigate("/about")}
-					aria-label="Navigate to the about application page."
-					className="m-2"
-				>
-					Learn More
-				</Button>
-				<SignInButton isSignIn={false} />
+				<h3 className="text__heading">Welcome Back:</h3>
+				<div className="custom-button-wrapper">
+					<SignInButton />
+				</div>
 			</article>
 
 			<article>
-				<p>Welcome Back:</p>
-				<SignInButton />
+				<h5 className="text__heading">New to GrocerEase?</h5>
+				<div className="custom-button-wrapper">
+					<Button
+						onClick={() => navigate("/about")}
+						aria-label="Navigate to the about application page."
+					>
+						Learn More
+					</Button>
+					<SignInButton isSignIn={false} />
+				</div>
 			</article>
 		</div>
 	);