more

src/Components/Home/HomePageB.js

@@ -262,7 +262,9 @@ const HomePageB = () => {
     <div className="homepage-container">
       <section className="section-one">
         <div className="hero-text-container">
-          <h1 className="hero-top">AI-asssisted legal drafting</h1>
+          <h1 className="hero-top">
+            <h1 className="hero-top-text">AI-asssisted legal drafting</h1>
+          </h1>
           <div
             className="hero-imgbox"
             style={{
@@ -272,8 +274,12 @@ const HomePageB = () => {
             }}
           >
             <div className="hero-middle-box">
-              <div className="hero-middle">{heroString}</div>
-              <div className="hero-middle">{heroString2}</div>
+              <div className="hero-middle">
+                <h1 className="hero-middle-header">{heroString}</h1>
+              </div>
+              <div className="hero-middle">
+                <h1 className="hero-middle-header">{heroString2}</h1>
+              </div>
               <div className="hero-button-box">
                 <button className="button-2" onClick={handleTryItButton}>
                   Start A Free Trial

src/styles/homepage-b.scss

@@ -72,13 +72,16 @@ section.section-one {
 }
 
 .hero-middle {
+  width: 800px;
+}
+
+.hero-middle-header {
   font-size: 2.8rem;
   text-align: center;
   color: #000;
   font-family: Roboto;
   font-weight: 500;
   line-height: 3.4rem;
-  width: 800px;
 }
 
 .hero-imgbox {
@@ -104,6 +107,7 @@ section.section-one {
 }
 
 .hero-button-box {
+  display: flex;
   margin-top: 50px;
   padding-left: 8px;
   width: 100%;
@@ -902,6 +906,21 @@ li.nav-item {
     color: #fff;
   }
 
+  .hero-imgbox {
+    display: flex;
+    flex-direction: column;
+    width: 380px;
+  }
+
+  .hero-middle {
+    width: 380px;
+  }
+
+  .hero-button-box {
+    display: flex;
+    flex-direction: column;
+  }
+
   .mobile-sw-deck {
     color: #fff;
     font-size: 16px;

src/styles/homepage.scss

@@ -21,6 +21,16 @@ a {
   font-family: Roboto;
 }
 
+.hero-top {
+  height: 13px;
+}
+
+.hero-top-text {
+  font-family: Roboto;
+  font-size: 12px;
+  color: #fff;
+}
+
 .card-image-container {
   display: flex;
   flex-direction: column;
@@ -744,6 +754,14 @@ li.nav-item {
     width: 392px;
   }
 
+  .hero-top {
+    display: none;
+  }
+
+  .hero-top-text {
+    display: none;
+  }
+
   ul.navbar-nav {
     margin-left: auto;
   }