diff --git a/website/src/components/unleash-academy/Links.jsx b/website/src/components/unleash-academy/Links.jsx new file mode 100644 index 0000000000..b0655ec4d8 --- /dev/null +++ b/website/src/components/unleash-academy/Links.jsx @@ -0,0 +1,55 @@ +import React from 'react'; + +const LinkBox = ({ level, header, description }) => { + return ( +
+
+ {level} +

{header}

+

{description}

+
+ +
+ ); +}; + +const links = [ + { + level: 'Beginners', + header: 'Foundational', + description: + 'For all roles working with Unleash - Developers, Product owners, Leaders', + }, + { + level: 'Advanced', + header: 'Advanced for Developers', + description: + 'For Developers only, after Foundational content has been reviewed', + }, + { + level: 'Advanced', + header: 'Managing Unleash for DevOps/Admins', + description: + 'For DevOps, Platform leads and Admins only after Foundational content has been reviewed', + }, +]; + +const Component = () => { + return ( +
+
    + {links.map(({ level, header, description }) => ( +
  1. + +
  2. + ))} +
+
+ ); +}; + +export default Component; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 3018051a8d..280aee99d1 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -211,6 +211,44 @@ li.theme-doc-sidebar-item-category-level-1 > div::before { /* end video content container */ +/* begin certification links */ +.links-container { + container-type: inline-size; + + ol { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-flow: row; + width: 100%; + justify-content: space-between; + } + + li { + margin: 0; + padding: 0; + width: 30%; + } + + article { + aspect-ratio: 1; + border-radius: var(--ifm-global-radius); + background: var(--ifm-color-primary-contrast-background); + padding: calc(var(--ifm-spacing-vertical) * 2); + display: grid; + grid-template-rows: auto min-content; + + .level { + border: 2px solid var(--unleash-color-purple); + border-radius: 60px; + padding-inline: calc(var(--ifm-spacing-horizontal) * .5); + } + } +} +/* end certification links */ + + /* docusaurus-plugin-openapi-docs styling Taken from