descriptions for trial and free license requests

Author: 4lb

src/pages/pricing.astro

@@ -81,7 +81,9 @@ const tags = [
     <div class="sla-support-wrapper">
       <div id="sla-support">
         <div class="left">
-          <p>Get 30-days Enterprise License Evaluation Key</p>
+          <h2>Get 30-days Enterprise License Evaluation Key</h2>
+          <p class="sla-description">For <strong>evaluations</strong> or proof-of-concept testing, we're happy to provide a trial license.
+            If you require tailored support, <strong>defguard Enterprise SLA</strong> offers enhanced service with benefits customized to your organization's specific needs.</p>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="705"
@@ -123,7 +125,8 @@ const tags = [
 
     <div class="nonprofit-wrapper">
       <div id="nonprofit-section">
-        <p>Request a license for your non-profit organisation.</p>
+        <h2>Request a license for your non-profit organisation.</h2>
+        <p class="sla-description">If you're a non-profit organization or an open-source project, we'd love to support you. Click the button to email us with a short explanation of your mission.</p>
         <button type="submit" class="btn size-normal" onclick="window.location.href='mailto:[email protected]'">
           <span>Contact Sales</span>
         </button>
@@ -273,7 +276,7 @@ const tags = [
 
         .left {
           position: relative;
-          overflow: hidden;
+          // overflow: hidden;
           width: 100%;
 
           & > svg {
@@ -295,22 +298,29 @@ const tags = [
 
             &:first-of-type {
               z-index: 1;
-              bottom: -50px;
+              bottom: -130px;
               @include break-down(xxl) {
-                bottom: 20px;
+                bottom: -60px;
+              }
+              @include break-down(lg) {
+                bottom: -20px;
               }
             }
 
             &:last-of-type {
               z-index: 2;
-              bottom: 30px;
+              bottom: -30px;
               @include break-down(xxl) {
-                bottom: 60px;
+                bottom: -10px;
+              }
+              @include break-down(lg) {
+                bottom: 40px;
               }
             }
           }
 
-          & > p {
+          & > h2 {
+            @include typography(paragraph);
             box-sizing: border-box;
             font-family: "Poppins";
             font-size: 36px;
@@ -319,7 +329,7 @@ const tags = [
             padding-top: 20px;
             padding-left: 20px;
             padding-right: 20px;
-            padding-bottom: 120px;
+            padding-bottom: 0;
             max-width: 1100px;
             margin: 0 auto;
             word-wrap: break-word;
@@ -328,10 +338,10 @@ const tags = [
 
             @include break-up(md) {
               padding-top: 54px;
-              padding-left: 58px;
-              padding-right: 58px;
+              padding-left: 20px;
+              padding-right: 20px;
               font-size: 55px;
-              padding-bottom: 170px;
+              padding-bottom: 0;
             }
           }
         }
@@ -351,6 +361,14 @@ const tags = [
         padding: 120px 0;
       }
 
+      .sla-description {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 30px 20px;
+            padding-bottom: 100px;
+            box-sizing: border-box;
+      }
+
       #nonprofit-section {
         width: 100%;
         max-width: 1100px;
@@ -362,11 +380,23 @@ const tags = [
         flex-direction: column;
         align-items: center;
 
-        p {
+        h2 {
           @include typography(pricebox-section);
           margin-bottom: 30px;
         }
+
+        .sla-description {
+          padding-bottom: 20px;
+          padding-top: 0px;
+        }
       }
+      
+
+
+      .book .double-inputs {
+        z-index: 1000;
+      }
+
     </style>
   </main>
 </BaseLayout>