feat(API-1944): Add main Next steps block component

Author: LevFlavien

components/components.css

@@ -91,14 +91,19 @@ button {
     background-color: #F1F4F9;
     padding: 20px 50px;
     display: flex;
-    align-items: center;
 
     font-size: 16px;
     line-height: 24px;
 
     color: #677688;
 }
-
+.block-next-steps.block-next-steps-main {
+    flex-direction: column;
+    align-items: center;
+}
+.block-next-steps.block-next-steps-alt {
+    align-items: center;
+}
 .block-next-steps img {
     margin-right: 50px;
 }
@@ -114,7 +119,11 @@ button {
     line-height: 41px;
     margin-bottom: 20px;
 }
-.block-next-steps-text {
+.block-next-steps.block-next-steps-main .block-next-steps-text {
+    margin-bottom: 30px;
+    font-weight: 400;
+}
+.block-next-steps.block-next-steps-alt .block-next-steps-text {
     margin-bottom: 11px;
 }
 .block-next-steps ul {

components/components.html

@@ -73,7 +73,7 @@
 
 <hr>
 
-<div class="block-next-steps">
+<div class="block-next-steps block-next-steps-alt">
     <img src="../content/img/illustrations/illus--Attribute.svg" width="140px">
     <div class="block-next-steps-column">
         <div class="block-next-steps-title">Next Step</div>
@@ -89,6 +89,20 @@
 
 <hr>
 
+<div class="block-next-steps block-next-steps-main">
+    <div class="block-next-steps-title">Next Step</div>
+    <div class="block-next-steps-text">Now that you’ve gotten your App token, continue the journey with Step 2!</div>
+    <button class="next-steps-button">
+        <div class="next-steps-button-number">2</div>
+        <div class="next-steps-button-text">
+            Develop<br>
+            your App
+        </div>
+    </button>
+</div>
+
+<hr>
+
 <button class="next-steps-button">
     <div class="next-steps-button-number">1</div>
     <div class="next-steps-button-text">