Update copy and add button to overview hero (#330)

smartlogic · Nov 14, 2024 · 91867b7 · 91867b7
1 parent df82d2a
commit 91867b7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 20 deletions.
diff --git a/_includes/overview_hero.html b/_includes/overview_hero.html
@@ -3,11 +3,19 @@
     <div class="overview_hero__left">
       <div class="overview_hero__left-text">
         <div class="overview_head-text">
-          <h1>
-            Results you can <strong>Trust</strong>.<br>
-            <strong>Collaboration</strong> that lasts.
-          </h1>
-          <h2>Custom web & mobile applications</h2>
+          <h2><strong>Custom web & mobile applications</strong></h2>
+          <div class="done-statements">
+            <h1>
+              <span>Done <strong>Right.</strong></span>
+              <span>Done <strong>On Time.</strong></span>
+              <span>Done <strong>On Budget.</strong></span>
+            </h1>
+          </div>
+          <h2><i>Hard to believe... we know</i></h2>
+          <h3>Receive a 1-hr FREE strategy session with our team today!</h3>
+          <div class="overview_hero_button">
+            <a class="btn" href="#" id="openModal">Reserve Session</a>
+          </div>
         </div>
       </div>
     </div>
@@ -16,8 +24,5 @@ <h2>Custom web & mobile applications</h2>
         <img src="{{ '/images/contents/header-image.png' | relative_url }}" alt="Woman looking at a smart logic project on here phone.">
       </div>
     </div>
-    <div class="overview_hero__cta">
-      <a class="btn" href="#" id="openModal">Get Started</a>
-    </div>
   </div>
 </section>
diff --git a/_sass/components/overview_hero.scss b/_sass/components/overview_hero.scss
@@ -1,6 +1,6 @@
 .overview_hero{
   background: $secondary-yellow;
-  padding-top: 20px;
+  padding-top: 30px;
   padding-bottom: 0px;
 
   @include phone{
@@ -109,32 +109,64 @@
     display: none;
   }
 }
-.overview_hero__cta {
-  display: none;
 
-  @include phone {
-    display: block;
-    width: 100%;
-    text-align: left;
-    padding-left: 20px;
-    padding-bottom: 20px;
+.done-statements {
+  margin: 4px 0 8px;
+
+  h1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 0.5rem 1rem;
+
+    span {
+      display: inline-block;
+      white-space: nowrap;
+    }
+  }
+}
+
+.overview_head-text {
+  h2:nth-of-type(2) {
+    margin-bottom: 4rem;
   }
 
+  h3 {
+    color: $black;
+  }
+}
+
+.overview_hero_button {
+  margin: 2px 0 8px;
+
   .btn {
     @include circular(bold);
-    background: $black;
-    color: #fff;
+    display: inline-block;
+    background: $secondary-yellow;
+    color: #000;
     height: 55px;
-    width: 155px; 
+    width: auto;
     font-size: 18px;
     padding: 0.85rem 1.5rem;
+    border: 2px solid #000;
     border-radius: 6px;
     text-decoration: none;
     text-align: center;
     line-height: 24px;
+    margin: 1rem 0;
 
     &:hover {
       background: $teal;
     }
   }
 }
+
+@media (max-width: 767px) {
+  .done-statements h1 span {
+    white-space: normal;
+
+    strong {
+      display: inline-block;
+    }
+  }
+}