docs: initial spike for the component

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const LinkBox = ({ level, header, description }) => {
+    return (
+        <article>
+            <div>
+                <span className='level'>{level}</span>
+                <h3>{header}</h3>
+                <p>{description}</p>
+            </div>
+            <button>Start learning</button>
+        </article>
+    );
+};
+
+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 (
+        <div className='links-container'>
+            <ol className='links-wrapper'>
+                {links.map(({ level, header, description }) => (
+                    <li>
+                        <LinkBox
+                            level={level}
+                            header={header}
+                            description={description}
+                        />
+                    </li>
+                ))}
+            </ol>
+        </div>
+    );
+};
+
+export default Component;

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