Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

add get certified buttons for each certification path

Browse Source
This commit is contained in:
melindafekete 2025-10-22 15:06:14 +02:00
parent 866441a1b6
commit 94ef7cb454
No known key found for this signature in database
3 changed files with 61 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/components/unleash-academy/Banner.jsx
View File

@ -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>

20
website/src/components/unleash-academy/Links.jsx
View File

@ -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>
))}

45
website/src/css/academy.css
View File

@ -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;
}
}