From 6b83f20e815af1b20798234b88943a9df2a16d17 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 21:57:18 -0600
Subject: [PATCH 1/2] more

---
 src/Components/Features/FeaturesPage.js | 36 ++++++++++++++++++-------
 src/Components/Home/HomePage.js         |  1 +
 src/Components/Login/Login.js           |  1 +
 src/Components/SignupPage/SignupPage.js |  5 +++-
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/Components/Features/FeaturesPage.js b/src/Components/Features/FeaturesPage.js
index a7b0cac..96c5532 100644
--- a/src/Components/Features/FeaturesPage.js
+++ b/src/Components/Features/FeaturesPage.js
@@ -14,6 +14,32 @@ const FeaturesPage = () => {
     <>
       <div className="features-container">
         <div className="features-top-wrapper">
+          <div className="features-top-left">
+            <FeaturesTop />
+          </div>
+          <div className="features-top-right">
+            <img className="features-image-one" src={legalTechFlip} />
+          </div>
+        </div>
+        <div className="features-bottom-wrapper">
+          <div className="features-bottom-left">
+            <img className="features-image-one" src={legalTek} />
+          </div>
+          <div className="features-bottom-right">
+            <FeaturesBottom />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FeaturesPage;
+
+/*
+
+
+
           <div className="features-top-mobile-img">
             <img className="features-image-one" src={legalTechFlip} />
           </div>
@@ -31,16 +57,8 @@ const FeaturesPage = () => {
               <FeaturesBottom />
             </div>
           </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default FeaturesPage;
-
-/*
 
+          
         <div className="features-bottom-wrapper">
           <div className="features-bottom-right">
             <img className="features-image-one" src={legalTek} />
diff --git a/src/Components/Home/HomePage.js b/src/Components/Home/HomePage.js
index 2791d9f..507968c 100644
--- a/src/Components/Home/HomePage.js
+++ b/src/Components/Home/HomePage.js
@@ -12,6 +12,7 @@ import "../../styles/homepage.scss";
 
 const HomePage = () => {
   const navigate = useNavigate();
+
   const handleNavigate = () => {
     navigate("/signup");
   };
diff --git a/src/Components/Login/Login.js b/src/Components/Login/Login.js
index 8a438f6..0b0b0a4 100644
--- a/src/Components/Login/Login.js
+++ b/src/Components/Login/Login.js
@@ -6,6 +6,7 @@ import "../../styles/login.scss";
 
 const Login = () => {
   const navigate = useNavigate();
+
   const auth = getAuth();
   const [isBusy, setIsBusy] = useState(false);
   const [email, setEmail] = useState("");
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 0282b34..42306c9 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
@@ -24,6 +24,9 @@ const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 440);
+  });
   const fieldsChunkSize = 2;
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));

From ce5798e7458ff1dc178aa3f0ff2f75b3d0ee3dce Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 22:03:35 -0600
Subject: [PATCH 2/2] more

---
 src/Components/Features/FeaturesPage.js | 3 +++
 src/styles/features.scss                | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Components/Features/FeaturesPage.js b/src/Components/Features/FeaturesPage.js
index 96c5532..143eeaf 100644
--- a/src/Components/Features/FeaturesPage.js
+++ b/src/Components/Features/FeaturesPage.js
@@ -14,6 +14,9 @@ const FeaturesPage = () => {
     <>
       <div className="features-container">
         <div className="features-top-wrapper">
+          <div className="features-top-mobile-img">
+            <img className="features-image-one" src={legalTechFlip} />
+          </div>
           <div className="features-top-left">
             <FeaturesTop />
           </div>
diff --git a/src/styles/features.scss b/src/styles/features.scss
index e9f899a..2d2dc02 100644
--- a/src/styles/features.scss
+++ b/src/styles/features.scss
@@ -47,8 +47,13 @@
 .features-bottom-left {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
   padding: 6px 8px;
   width: 50%;
+  background-color: var(--haq-blue);
+  border-radius: 15px;
   height: 100%;
 }
 
@@ -58,8 +63,6 @@
   padding: 18px 8px;
   width: 50%;
   height: 100%;
-  background-color: var(--haq-blue);
-  border-radius: 15px;
 }
 
 .features-image-one {
@@ -89,6 +92,8 @@
 
   .features-top-wrapper {
     flex-direction: column;
+    height: 468px;
+    margin-bottom: 12px;
   }
 
   .features-bottom-wrapper {