feat(API-1944): Implement new Next steps block component in "Get your App token guide"

Author: LevFlavien

content/tutorials/guides/how-to-get-your-app-token.md

@@ -181,16 +181,14 @@ At the end of this process, you receive the following response with an `access_t
 
 You can use this token to call the Akeneo PIM REST API.
 
-<div class="block-next-steps">
-    <img src="../../img/illustrations/illus--Attribute.svg" width="140px">
-    <div class="block-next-steps-column">
-        <div class="block-next-steps-title">Next Steps</div>
-        <div class="block-next-steps-text">Now that you collected your token, we advise you to follow</div>
-        <div>
-            <ul>
-                <li><a href="/apps/overview.html">Learn more about Apps</a></li>
-                <li><a href="/api-reference-index.html">Explore the REST API reference</a></li>
-            </ul>
+<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>
-    </div>
+    </button>
 </div>

styles/guided-tutorial.less

@@ -63,13 +63,19 @@
         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;
     }
@@ -85,7 +91,11 @@
         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 {
@@ -94,6 +104,40 @@
         list-style-type: none;
     }
 
+    .next-steps-button {
+        width: 261px;
+        height: 94px;
+        padding-top: 5px; /* Fix font not centered */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 29px;
+        text-transform: uppercase;
+
+        background-color: #414D97;
+        color: #F1F4F9;
+
+        box-shadow: 0px 0px 6px rgba(37, 38, 52, 0.5);
+        border: none;
+        border-radius: 57px;
+    }
+    .next-steps-button:hover {
+        background-color: #2D366D;
+    }
+
+    .next-steps-button-number {
+        padding-top: 2px;  /* Fix inability to align-item baseline */
+        font-size: 63px;
+    }
+
+    .next-steps-button-text {
+        text-align: left;
+    }
+
     .back-button button {
         box-sizing: border-box;