diff --git a/website/src/components/unleash-academy/Banner.jsx b/website/src/components/unleash-academy/Banner.jsx index 621bb3d1b2..44c2ca7b27 100644 --- a/website/src/components/unleash-academy/Banner.jsx +++ b/website/src/components/unleash-academy/Banner.jsx @@ -1,55 +1,19 @@ import React from 'react'; -const LinkBox = ({ level, header, description, link }) => { - return ( -
-
- {level} -

{header}

-
-

{description}

- Start learning -
- ); -}; - -const links = [ - { - level: 'Beginners', - header: 'Foundational', - description: - 'For all roles working with Unleash - Developers, Product owners, Leaders', - link: 'https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform', - }, - { - level: 'Advanced', - header: 'Advanced for Developers', - description: - 'For Developers only, after Foundational content has been reviewed', - link: 'https://docs.google.com/forms/d/1NUL9hyO8Ys916TB6fPV3-jkvD97OmPXZ8_TO84Wjqgc/viewform', - }, - { - level: 'Advanced', - header: 'Managing Unleash for DevOps/Admins', - description: - 'For DevOps, Platform leads and Admins only after Foundational content has been reviewed', - link: 'https://docs.google.com/forms/d/1JlIqmXI3P7dj0n-OiUs2IYsYXgmqw23BChaemlSgHJA/viewform', - }, -]; - const Component = () => { return (
-
-

-Gain new skills, earn certifications, train your team, and advance your career. +

+

+ Gain new skills, earn certifications, train your team, and + advance your career.

-
    +
    • 100% Free & online
    • Valuable certification
    -
    - Get certified +
    + Get certified
); diff --git a/website/src/components/unleash-academy/Links.jsx b/website/src/components/unleash-academy/Links.jsx index b9f55f55da..38c66fc4a4 100644 --- a/website/src/components/unleash-academy/Links.jsx +++ b/website/src/components/unleash-academy/Links.jsx @@ -8,7 +8,9 @@ const LinkBox = ({ level, header, description, link }) => {

{header}

{description}

- Start learning + + Start learning + ); }; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 01c89b7883..95605cf9fa 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -298,6 +298,55 @@ html[data-theme='dark'] .links-container { } /* end certification links */ +.banner-container { + border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200); + padding: calc(var(--ifm-spacing-vertical) * 3); + border-radius: var(--ifm-global-radius); + min-height: 282px; + background-color: #F1F0FC; + background-image: url('data:image/svg+xml,'); + background-position: top right; + background-repeat: no-repeat; + + ul { + display: flex; + flex-flow: row; + gap: calc( var(--ifm-spacing-horizontal) * 2); + padding-inline-start: 0; + } + + + li { + font-weight: bold; + list-style-type: none; + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-position: left center; /* Adjust as needed */ + padding-left: 30px; /* Adjust as + /* list-style-image: url('data:image/svg+xml,');/\* Use translate(X, Y) to position the SVG up, down, left, and right *\/ */ + } + + + li::marker { + height: 100%; + } + + li + li { + margin-block-start: 0; + } + + .unleash-action-button { + display: block; + border-radius: var(--ifm-global-radius); + width: 240px; + background: var(--unleash-color-purple); + color: white; + text-align: center; + padding: calc(var(--ifm-spacing-horizontal) * .5); + } +} + + /* docusaurus-plugin-openapi-docs styling