diff --git a/website/src/components/unleash-academy/Banner.jsx b/website/src/components/unleash-academy/Banner.jsx
index 7b4668cff4..99006ed821 100644
--- a/website/src/components/unleash-academy/Banner.jsx
+++ b/website/src/components/unleash-academy/Banner.jsx
@@ -14,12 +14,6 @@ const Component = () => {
Valuable certification
-
- Get certified
-
diff --git a/website/src/components/unleash-academy/Links.jsx b/website/src/components/unleash-academy/Links.jsx
index 391039a8ae..213b74e1bf 100644
--- a/website/src/components/unleash-academy/Links.jsx
+++ b/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 (
{
{header}
{description}
-
- Start learning
-
+
+
+ Start learning
+
+
+
+ Get certified
+
+
);
};
@@ -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 (
- {links.map(({ level, header, description, link }) => (
+ {links.map(({ level, header, description, link, academyLink }) => (
-
))}
diff --git a/website/src/css/academy.css b/website/src/css/academy.css
index 0522a8729d..40879d9caf 100644
--- a/website/src/css/academy.css
+++ b/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;
- right: 40px;
+ bottom: -20px;
+ right: 20px;
width: 200px;
- height: 100%;
+ height: 200px;
background-repeat: no-repeat;
- background-position-x: left;
- background-position-y: 190%;
+ background-position: center;
+ background-size: contain;
}
}