fix(API-1944): Add link to next step button

Author: LevFlavien

components/components.css

@@ -342,13 +342,21 @@ button {
     line-height: 29px;
     text-transform: uppercase;
 
+    cursor: pointer;
+
     background-color: #414D97;
     color: #F1F4F9;
 
     box-shadow: 0px 0px 6px rgba(37, 38, 52, 0.5);
     border: none;
     border-radius: 57px;
 }
+.next-steps-button-link {
+    cursor: default;
+}
+.next-steps-button-link:hover {
+    text-decoration: none;
+}
 .next-steps-button:hover {
     background-color: #2D366D;
 }
@@ -378,4 +386,4 @@ button {
 .next-steps-button-smaller .next-steps-button-text {
     font-size: 18px;
     line-height: 22px;
-}
+}

components/components.html

@@ -92,13 +92,15 @@
 <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 next-steps-button-smaller">
-        <div class="next-steps-button-number">2</div>
-        <div class="next-steps-button-text">
-            Develop<br>
-            your App
-        </div>
-    </button>
+    <a href="/" class="next-steps-button-link">
+        <button class="next-steps-button next-steps-button-smaller">
+            <div class="next-steps-button-number">2</div>
+            <div class="next-steps-button-text">
+                Develop<br>
+                your App
+            </div>
+        </button>
+    </a>
 </div>
 
 <hr>

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

@@ -184,11 +184,13 @@ You can use this token to call the Akeneo PIM REST API.
 <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 next-steps-button-smaller">
-        <div class="next-steps-button-number">2</div>
-        <div class="next-steps-button-text">
-            Develop<br>
-            your App
-        </div>
-    </button>
+    <a href="/tutorials/how-to-retrieve-pim-structure.html" class="next-steps-button-link">
+       <button class="next-steps-button next-steps-button-smaller">
+           <div class="next-steps-button-number">2</div>
+           <div class="next-steps-button-text">
+               Develop<br>
+               your App
+           </div>
+       </button>
+   </a>
 </div>

styles/guided-tutorial.less

@@ -113,6 +113,8 @@
         align-items: center;
         gap: 10px;
 
+        cursor: pointer;
+
         font-weight: 600;
         font-size: 24px;
         line-height: 29px;
@@ -125,6 +127,12 @@
         border: none;
         border-radius: 57px;
     }
+    .next-steps-button-link {
+        cursor: default;
+    }
+    .next-steps-button-link:hover {
+        text-decoration: none;
+    }
     .next-steps-button:hover {
         background-color: #2D366D;
     }