hero initial update

assets/scss/_buttons.scss

@@ -0,0 +1,28 @@
+.btn {
+  transition: all 0.3s ease;
+  padding: 20px 50px;
+  &:hover {
+    box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+    transform: scale(1.03);
+  }
+}
+
+
+    // a {
+    //   display: inline-block;
+    //   padding: 20px 50px;
+    //   font-family: $secondary-font;
+    //   font-size: 16px;
+    //   background: $primary-color;
+    //   border-radius: 7px;
+    //   color: #ffffff;
+    //   text-decoration: none;
+    //   border: 1px solid transparent;
+    //   transition: all 0.3s ease;
+    //   transform: scale(1);
+    //   &:hover {
+    //     background: #425fee;
+    //     box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+    //     transform: scale(1.03);
+    //   }
+    // }

assets/scss/_common.scss

@@ -2,9 +2,9 @@
 //   scroll-behavior: smooth;
 // }
 
-body {
-  background: $body-color;
-}
+// body {
+//   background: $body-color;
+// }
 
 .section{
   padding: 100px 0;

assets/scss/_typography.scss

@@ -7,7 +7,7 @@
 // }
 
 // h1, h2, h3, h4, h5, h6{
-//   font-family: $secondary-font;
+//   font-family: $primary-font;
 //   font-weight: 600;
 //   color: $text-color-dark;
 // }

assets/scss/_variables.scss

@@ -1,5 +1,6 @@
 //site color variables
-$body-color: #fff;
+// $body-color: #fff;
+
 $primary-color: #5D78FF;
 $secondary-color: #282F49;
 $text-color: #9D9EA5;

assets/scss/components/_hero-section.scss

@@ -70,38 +70,39 @@
         background: $secondary-color;
       }
     }
-    h1 {
-      margin: 0 0 30px 0;
-      font-size: 60px;
-      font-family: $primary-font;
-      color: $secondary-color;
-      line-height: 70px;
-    }
-    p {
-      margin: 0 0 50px 0;
-      font-family: $secondary-font;
-      color: $secondary-color;
-      font-size: 20px;
-      line-height: 30px;
-    }
-    a {
-      display: inline-block;
-      padding: 20px 50px;
-      font-family: $secondary-font;
-      font-size: 16px;
-      background: $primary-color;
-      border-radius: 7px;
-      color: #ffffff;
-      text-decoration: none;
-      border: 1px solid transparent;
-      transition: all 0.3s ease;
-      transform: scale(1);
-      &:hover {
-        background: #425fee;
-        box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
-        transform: scale(1.03);
-      }
-    }
+    // h1 {
+    //   margin: 0 0 30px 0;
+    //   font-size: 60px;
+    //   font-family: $primary-font;
+    //   color: $secondary-color;
+    //   line-height: 70px;
+    // }
+    // p {
+    //   margin: 0 0 50px 0;
+    //   font-family: $secondary-font;
+    //   color: $secondary-color;
+    //   font-size: 20px;
+    //   line-height: 30px;
+    // }
+
+    // a {
+    //   display: inline-block;
+    //   padding: 20px 50px;
+    //   font-family: $secondary-font;
+    //   font-size: 16px;
+    //   background: $primary-color;
+    //   border-radius: 7px;
+    //   color: #ffffff;
+    //   text-decoration: none;
+    //   border: 1px solid transparent;
+    //   transition: all 0.3s ease;
+    //   transform: scale(1);
+    //   &:hover {
+    //     background: #425fee;
+    //     box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+    //     transform: scale(1.03);
+    //   }
+    // }
   }
   &_figure {
     width: 90%;

assets/scss/style.scss

@@ -7,6 +7,8 @@ VERSION:	1.0.0
 
 @import "variables";
 
+@import "../bootstrap-4.5.2/scss/bootstrap";
+
 @import "typography";
 
 @import "mixins";
@@ -48,5 +50,3 @@ VERSION:	1.0.0
 @import "components/contact";
 
 @import "components/case_details";
-
-@import "../bootstrap-4.5.2/scss/bootstrap";

layouts/partials/hero.html

@@ -27,10 +27,12 @@
               </g>
             </svg>
           </div>
-          <span>{{ .topTitle }}</span>
-          {{ .content | markdownify }}
+          <div>
+            <span>{{ .topTitle }}</span>
+            {{ .content | markdownify }}
+          </div>
           <p></p> <!-- I'm unsure why this <p> is needed -->
-          <a href="{{ .buttonURL | absURL }}">{{ .buttonName }}</a>
+          <a type="button" class="btn btn-lg btn-primary" href="{{ .buttonURL | absURL }}">{{ .buttonName }}</a>
         </div>
       </div>
       <div class="col-lg-6">