More

src/Components/Home/HomePage.js

@@ -31,18 +31,41 @@ const HomePage = () => {
         >
           <div className="first-section-subcontainer">
             <div className="row upper-row-one">
-              <div className="col-md-12">
+              <div className="col-md-12 mobile-col-up">
                 <div className="heading-one-container">
                   <h1 className="heading-1">Novodraft: Legal AI.</h1>
+                  <h1 className="heading-1-mobile">Novodraft</h1>
+                  <h1 className="heading-2-mobile">
+                    AI-Assisted Legal Drafting
+                  </h1>
                   <h1 className="heading-2">
                     Draft documents faster <i>and </i> smarter.
                   </h1>
                 </div>
+                <div className="mobile-lower-header-1">
+                  <div className="mobile-lower-header-top">
+                    <div className="mobile-sw-deck">Discovery requests</div>
+                    <div className="mobile-sw-deck"> dramatically fast</div>
+                    <div className="mobile-sw-reptwo">
+                      <div className="ex-arca-two">Draft responses</div>
+                      <div className="ex-arca-two">in minutes</div>
+                    </div>
+                  </div>
+                  <div className="mobile-lower-header-bottom">
+                    <div className="mobile-lower-header-bottom-up"></div>
+                    <div className="mobile-lower-header-bottom-down">
+                      <Button
+                        className="primary-button homepage-button"
+                        labelText="Try It For Free"
+                        onClick={handleNavigate}
+                      />
+                    </div>
+                  </div>
+                </div>
                 <p className="text-block-1">
                   Discovery requests done dramatically fast – discovery
                   responses ready in minutes
                 </p>
-
                 <p className="text-block-two">
                   Reclaim hours every week. Spend time growing your practice, or
                   just get home by dinner.

src/styles/homepage.scss

@@ -699,35 +699,110 @@ li.nav-item {
   padding: 0 19px;
 }
 
+@media only screen and (min-width: 498px) {
+  .mobile-lower-header-1 {
+    display: none;
+  }
+  .heading-1-mobile {
+    display: none;
+  }
+  .mobile-lower-header-top {
+    display: none;
+  }
+  .mobile-lower-header-bottom {
+    display: none;
+  }
+  .mobile-lower-header-bottom-up {
+    display: none;
+  }
+  .mobile-lower-header-bottom-down {
+    display: none;
+  }
+}
+
 @media only screen and (max-width: 1100px) {
   .join-heading {
     width: 370px;
   }
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 498px) {
   ul.navbar-nav {
     margin-left: auto;
   }
 
   .heading-one-container {
-    padding: 20px 0px 10px 0px;
-    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 16px 0px 10px 0px;
+    margin-top: 0px;
     max-width: 290px;
   }
 
+  .mobile-lower-header-top {
+    height: 60%;
+
+    padding-top: 12px;
+    color: #fff;
+  }
+
+  .mobile-sw-deck {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: -4px;
+  }
+
+  .mobile-sw-dtrk {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: 58px;
+  }
+
+  .ex-arca-two {
+    color: white;
+    line-height: 1.2;
+  }
+  .mobile-sw-reptwo {
+    height: 140px;
+    padding-top: 51px;
+  }
+
+  .mobile-lower-header-bottom {
+    height: 40%;
+  }
+
+  .mobile-lower-header-bottom-up {
+    height: 50%;
+  }
+
+  .mobile-lower-header-bottom-bottom {
+    height: 50%;
+  }
   .logo-container {
     margin-left: -24px;
   }
 
   .first-section-subcontainer {
+    width: 100%;
     padding-top: 4px;
     padding-left: 0px;
   }
 
+  .mobile-col-up {
+    height: 400px;
+  }
+
   .try-it-button-box {
     align-items: end;
     margin-top: -6px;
+    display: none;
   }
 
   .try-it-button-box > button {
@@ -735,16 +810,21 @@ li.nav-item {
     margin-left: 10px;
   }
 
+  .mobile-lower-header-1 {
+    width: 60%;
+    height: 260px;
+  }
+
   .upper-row-one {
     padding-left: 10px;
   }
 
   .text-block-1 {
-    visibility: hidden;
+    visibility: none;
   }
 
   .text-block-two {
-    visibility: hidden;
+    display: none;
   }
 
   section.section-1 {
@@ -772,24 +852,18 @@ li.nav-item {
   }
 
   h1.heading-1 {
-    color: #fff;
+    display: none;
+  }
+
+  .heading-1-mobile {
     font-family: Roboto;
-    font-size: 27px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 32px; /* 140.625% */
-    text-transform: capitalize;
+    font-size: 42px;
+    color: #fff;
+    margin-bottom: 1px;
   }
 
   p.text-block-1 {
-    color: #fff;
-    font-family: Roboto;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18.756px; /* 123.983% */
-    width: 100%;
-    padding: 10px 0 !important;
+    display: none;
   }
 
   .home-col-50 {
@@ -815,8 +889,11 @@ li.nav-item {
   }
 
   .heading-2-mobile {
+    margin-top: 6px;
+    font-weight: 400;
     display: flex;
     font-size: 1.365rem;
+    color: #fff;
   }
 
   button.button-1 {