add get certified buttons for each certification path (#10844)

Add get certified links for each of the certification paths:
https://unleash-internal.slack.com/archives/C047ALS9NL8/p1761131159796449

website/src/components/unleash-academy/Banner.jsx

@@ -14,12 +14,6 @@ const Component = () => {
                     <li>Valuable certification</li>
                 </ul>
                 <div className='small-logo' />
-                <a
-                    href='https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform'
-                    className='unleash-action-button'
-                >
-                    Get certified
-                </a>
             </div>
             <div className='big-logo' />
         </div>

website/src/components/unleash-academy/Links.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 
-const LinkBox = ({ level, header, description, link }) => {
+const LinkBox = ({ level, header, description, link, academyLink }) => {
     return (
         <article
             className={`${level.toLowerCase()} unleash-academy-level-container`}
@@ -12,13 +12,23 @@ const LinkBox = ({ level, header, description, link }) => {
                 <h3>{header}</h3>
             </div>
             <p>{description}</p>
+            <div className='unleash-academy-buttons'>
                 <Link
-                className='unleash-action-button'
+                    className='unleash-action-button start-learning'
                     to={`/unleash-academy/${link}`}
                     title={header}
                 >
                     Start learning
                 </Link>
+                <div className='button-spacing'></div>
+                <Link
+                    className='unleash-action-button get-certified'
+                    to={academyLink}
+                    title={header}
+                >
+                    Get certified
+                </Link>
+            </div>
         </article>
     );
 };
@@ -30,6 +40,7 @@ const links = [
         description:
             'For all roles working with Unleash - Developers, Product owners, Leaders',
         link: 'foundational',
+        academyLink: 'https://docs.google.com/forms/d/e/1FAIpQLSe5F9cuGlkkUgVOGZ8Ny6xtsaSRygfUCMR-cab0e_DRIMk5sw/viewform',
     },
     {
         level: 'Advanced',
@@ -37,6 +48,7 @@ const links = [
         description:
             'For Developers only, after Foundational content has been reviewed',
         link: 'advanced-for-devs',
+        academyLink: 'https://docs.google.com/forms/d/e/1FAIpQLSfvux6w80HTHg5SEHxir6vEp5dQxDVsyk_-F2IPKbBgH5faMg/viewform',
     },
     {
         level: 'Advanced',
@@ -44,6 +56,7 @@ const links = [
         description:
             'For DevOps, Platform leads and Admins only after Foundational content has been reviewed',
         link: 'managing-unleash-for-devops',
+        academyLink: 'https://docs.google.com/forms/d/e/1FAIpQLScS8yHuDs0xSsqmFs9W9ptBJUKDts7WSi9g_FoU2D-oK2W7Bg/viewform',
     },
 ];
 
@@ -51,13 +64,14 @@ const Component = () => {
     return (
         <div className='unleash-academy-links-container'>
             <ul className='unleash-academy-links'>
-                {links.map(({ level, header, description, link }) => (
+                {links.map(({ level, header, description, link, academyLink }) => (
                     <li key={header}>
                         <LinkBox
                             level={level}
                             header={header}
                             description={description}
                             link={link}
+                            academyLink={academyLink}
                         />
                     </li>
                 ))}

website/src/css/academy.css

@@ -69,7 +69,7 @@ html[data-theme="dark"] .course-banner-container {
     grid-area: bullets;
     display: flex;
     flex-flow: column;
-    gap: calc(var(--ifm-spacing-horizontal) * 2);
+    gap: calc(var(--ifm-spacing-horizontal) * 0.75);
     padding-inline-start: 0;
 }
 
@@ -90,6 +90,10 @@ html[data-theme="dark"] .course-banner-container {
     margin-block-start: 0;
 }
 
+.unleash-academy-banner-list {
+    margin-block-end: 0;
+}
+
 @media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
     .unleash-academy-banner-list {
         flex-flow: row;
@@ -114,6 +118,32 @@ html[data-theme="dark"] .course-banner-container {
     text-decoration: none;
 }
 
+/* Layout wrapper for stacked action buttons on academy cards */
+.unleash-academy-buttons {
+    display: flex;
+    flex-direction: column;
+    /* Use a smaller vertical gap between buttons */
+    gap: calc(var(--ifm-spacing-vertical) * 0.25);
+}
+
+/* Fallback spacer if markup includes an explicit spacing element */
+.unleash-academy-buttons .button-spacing {
+    height: calc(var(--ifm-spacing-vertical) * 0.5);
+}
+
+/* "Get certified" button variant: gray background, purple text and border */
+.unleash-academy-buttons .get-certified {
+    background: var(--ifm-color-emphasis-100);
+    color: var(--unleash-logo-purple);
+    border: 2px solid var(--unleash-logo-purple);
+}
+
+.unleash-academy-buttons .get-certified:hover {
+    background: var(--ifm-color-emphasis-200);
+    color: var(--unleash-logo-purple);
+    text-decoration: none;
+}
+
 /* begin certification links */
 .unleash-academy-links-container {
     margin-block-start: var(--ifm-spacing-vertical);
@@ -198,7 +228,8 @@ html[data-theme="dark"] .course-banner-container {
 @media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
     .academy-general-banner-content {
         grid-template-areas: "header logo" "bullets logo" "button logo";
-        grid-template-columns: 480px auto;
+        grid-template-columns: 420px auto;
+        padding-right: 240px;
     }
 
     .academy-general-banner-content .unleash-action-button {
@@ -212,13 +243,13 @@ html[data-theme="dark"] .course-banner-container {
     .academy-general-banner .big-logo {
         position: absolute;
         background-image: url("/img/unleash-academy/academy-logo.svg");
-        bottom: 0;
+        bottom: -20px;
-        right: 40px;
+        right: 20px;
         width: 200px;
-        height: 100%;
+        height: 200px;
         background-repeat: no-repeat;
-        background-position-x: left;
+        background-position: center;
-        background-position-y: 190%;
+        background-size: contain;
     }
 }