Unleash · thomasheartman · Jan 31, 2024 · Jan 31, 2024
@@ -5,25 +5,30 @@ title: Unleash Academy
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Figure from '@site/src/components/Figure/Figure.tsx'
+import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
+import Banner from '@site/src/components/unleash-academy/Banner.jsx'
+
+<Banner/>
+
+<LearningLinks />
 
-# Unleash Academy
 
 ## Introduction
 
 **Unleash Academy is your go-to portal for complimentary self-paced training materials around the Unleash platform.**
 
-Whether you are new to feature flags or a seasoned feature management user and whatever your organizational role, our materials will help onboard you to the full suite of capabilities the Unleash platform has to offer, refresh your existing knowledge, broaden your knowledge to new use cases, and much more!  
+Whether you are new to feature flags or a seasoned feature management user and whatever your organizational role, our materials will help onboard you to the full suite of capabilities the Unleash platform has to offer, refresh your existing knowledge, broaden your knowledge to new use cases, and much more!
 
-Any Unleash user is welcomed - from Open Source, Pro to Enterprise.  
+Any Unleash user is welcomed - from Open Source, Pro to Enterprise.
 
-Content is carefully curated to ensure the best, most relevant targeted learning experience. Review the next section on how to use the content to get started today!  
+Content is carefully curated to ensure the best, most relevant targeted learning experience. Review the next section on how to use the content to get started today!
 
 
 ## Learning Paths and How to use this content
 
 Content is built around Learning Paths that are based on common user roles and _personas_ using Unleash today. This helps ensure that you maximize value from the time you spend with Unleash Academy by reviewing content that will help you achieve your goals with Unleash.
 
-**1. Start by identifying the _persona_ most closely associated with your day to day responsibilities.**  
+**1. Start by identifying the _persona_ most closely associated with your day to day responsibilities.**
 Example titles are provided for additional guidance:
 
 - **Developer**
@@ -39,11 +44,11 @@ Example titles are provided for additional guidance:
 All roles working with Unleash start with the [**Foundational**](foundational.md) training. Then, role dependent courses are offered thereafter.
 :::
 
-**2. Now check the course directory or the graphic below to find out which courses apply to your persona!**  
+**2. Now check the course directory or the graphic below to find out which courses apply to your persona!**
 
 
 ## Course Directory
-  
+
 ### Directory by Persona
 
 
@@ -73,18 +78,18 @@ All roles working with Unleash start with the [**Foundational**](foundational.md
 </Tabs>
 
 ---
-  
-Select the tab that corresponds to your persona. A course list is shown - plan to complete the courses in the displayed order, noting the estimated completion times.  
+
+Select the tab that corresponds to your persona. A course list is shown - plan to complete the courses in the displayed order, noting the estimated completion times.
 :::info
 See also the following visualization of the learning paths
-::: 
+:::
 <Figure caption="Learning Paths organized by Persona" alt="Course order for Developer, DevOps, Product and Leader personas" img="/img/academy-learning-paths.svg"/>
 
 
 ---
-  
+
 ### Directory by Course
 
-- [**Foundational**](foundational.md) - For all roles working with Unleash - Developers, Product owners, Leaders.  
-- [**Advanced for Developers**](advanced-for-devs.md) - For Developers only, after Foundational content has been reviewed  
+- [**Foundational**](foundational.md) - For all roles working with Unleash - Developers, Product owners, Leaders.
+- [**Advanced for Developers**](advanced-for-devs.md) - For Developers only, after Foundational content has been reviewed
 - [**Managing Unleash for DevOps/Admins**](managing-unleash-for-devops.md) - For DevOps, Platform leads and Admins only after Foundational content has been reviewed
@@ -3,6 +3,10 @@ id: advanced-for-devs
 title: Advanced for Developers
 ---
 import VideoContent from '@site/src/components/VideoContent.jsx'
+import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx'
+import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
+
+<CourseBanner level='advanced' description='Unlock the full potential of Unleash, streamline your development process and make data-driven decisions with confidence. Learn how Unleash can support your business needs and understand advanced usage like collaboration, data insights and A/B testing, auto-remediation, and integration into third party tools.'/>
 
 :::info
 **This Unleash Academy course is for all developer roles working with Unleash, after Foundational content has been reviewed.**
@@ -13,24 +17,28 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
 :::
 
 ---
-  
+
 ## Learning Objectives
 
-Unlock the full potential of Unleash, streamline your development process and make data-driven decisions with confidence. Learn how Unleash can support your business needs and understand advanced usage like collaboration, data insights and A/B testing, auto-remediation, and integration into third party tools. 
+Unlock the full potential of Unleash, streamline your development process and make data-driven decisions with confidence. Learn how Unleash can support your business needs and understand advanced usage like collaboration, data insights and A/B testing, auto-remediation, and integration into third party tools.
 
 You’ll master advanced use cases and implement best practices - this course will empower you to maximize Unleash's capabilities for your projects.
 
 
 ---
-  
+
 ## Course Detail
 
 <VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=ry507OKlfb1liKFD&amp;list=PLcVJ5JY19ncXmAbFqfamyAV698WINtQaJ"]}/>
-
 
-
+
+
 :::info Embedded Player
-The full course is shown above.  
-Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.  
+The full course is shown above.
+Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.
 Options to go full screen, view the playlist on YouTube or share are also enabled.
 :::
+
+## All courses
+
+<LearningLinks />
@@ -3,6 +3,10 @@ id: foundational
 title: Foundational
 ---
 import VideoContent from '@site/src/components/VideoContent.jsx'
+import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx'
+import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
+
+<CourseBanner level='beginners' description='Gain a baseline understanding of why to use Unleash in your development and a general introduction to CI/CD. An understanding of Unleash anatomy and architecture and how the different systems connect together.'/>
 
 :::info
 **This Unleash Academy course is for all roles working with Unleash - Developers, Product owners, Leaders.**
@@ -13,18 +17,18 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
 :::
 
 ---
-
-## Learning Objectives 
 
-Gain a baseline understanding of why to use Unleash in your development and a general introduction to CI/CD. 
+## Learning Objectives
+
+Gain a baseline understanding of why to use Unleash in your development and a general introduction to CI/CD.
 An understanding of Unleash anatomy and architecture and how the different systems connect together.
 
 ---
-  
+
 
 **Intro to Feature Flags/Toggles & Unleash**
   - Feature flags - What they are & why to use them
-  - What is Unleash? 
+  - What is Unleash?
 
 **Anatomy of Unleash**
   - Covering the various components that exist within the Unleash system and how they interact with each other and with external applications. Components that include but not limited to: projects, environments, variants, feature toggles --> strategies, tokens, tags, context
@@ -41,14 +45,18 @@ An understanding of Unleash anatomy and architecture and how the different syste
 - API tokens (Personal Access Tokens, client, frontend)
 
 ---
-  
+
 ## Course Detail
-  
+
 <VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=YyLiIYQck7fsG5HK&amp;list=PLcVJ5JY19ncU_6cq2QaCuXDBbbitiJEn4"]}/>
-  
+
 
 :::info Embedded Player
-The full course is shown above.  
-Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.  
+The full course is shown above.
+Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.
 Options to go full screen, view the playlist on YouTube or share are also enabled.
-:::
+:::
+
+## All courses
+
+<LearningLinks />
@@ -3,6 +3,10 @@ id: managing-unleash-for-devops
 title: Managing Unleash for DevOps/Admins
 ---
 import VideoContent from '@site/src/components/VideoContent.jsx'
+import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx'
+import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
+
+<CourseBanner level='advanced' description='Understand how to deploy Unleash in a secure and performant manner through Edge, maintain and manage users, groups, permissions, and RBAC.'/>
 
 :::info
 **This Unleash Academy course is for all DevOps and Admin roles working with Unleash, after Foundational content has been reviewed.**
@@ -14,22 +18,26 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
 
 
 ---
-  
-## Learning Objectives 
+
+## Learning Objectives
 
 Understand how to deploy Unleash in a secure and performant manner through Edge, maintain and manage users, groups, permissions, and RBAC.
 
 
 ---
-  
+
 
 ## Course Detail
 
 <VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=m0PkzvBqtGphGblK&amp;list=PLcVJ5JY19ncVxAesGfmcs8vshai0mSdAS"]}/>
 
-  
+
 :::info Embedded Player
-The full course is shown above.  
-Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.  
+The full course is shown above.
+Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.
 Options to go full screen, view the playlist on YouTube or share are also enabled.
-:::
+:::
+
+## All courses
+
+<LearningLinks />
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Component = () => {
+    return (
+        <div className='banner-container'>
+            <div className='banner'>
+                <h3>
+                    Gain new skills, earn certifications, train your team, and
+                    advance your career.
+                </h3>
+                <ul className="unleash-academy-banner-list">
+                    <li>100% Free & online</li>
+                    <li>Valuable certification</li>
+                </ul>
+                <div className='small-logo'></div>
+                <span className='unleash-action-button'>Get certified</span>
+            </div>
+            <div className='big-logo'></div>
+        </div>
+    );
+};
+
+export default Component;
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Component = ({ level, description }) => {
+    return (
+        <div className={ `course-banner-container ${level.toLowerCase()}`}>
+            <span className='level'>{level}</span>
+            <p>{description}</p>
+            <ul className="unleash-academy-banner-list">
+                <li>100% Free & online</li>
+                <li>Valuable certification</li>
+            </ul>
+        </div>
+    );
+};
+
+export default Component;
@@ -0,0 +1,66 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+const LinkBox = ({ level, header, description, link }) => {
+    return (
+        <article className={level.toLowerCase()}>
+            <div className='header'>
+                <span className='level'>{level}</span>
+                <h3>{header}</h3>
+            </div>
+            <p>{description}</p>
+            <Link
+                className='unleash-action-button'
+                to={`/unleash-academy/${link}`}
+                title={header}
+            >
+                Start learning
+            </Link>
+        </article>
+    );
+};
+
+const links = [
+    {
+        level: 'Beginners',
+        header: 'Foundational',
+        description:
+            'For all roles working with Unleash - Developers, Product owners, Leaders',
+        link: 'foundational',
+    },
+    {
+        level: 'Advanced',
+        header: 'Advanced for Developers',
+        description:
+            'For Developers only, after Foundational content has been reviewed',
+        link: 'advanced-for-devs',
+    },
+    {
+        level: 'Advanced',
+        header: 'Managing Unleash for DevOps/Admins',
+        description:
+            'For DevOps, Platform leads and Admins only after Foundational content has been reviewed',
+        link: 'managing-unleash-for-devops',
+    },
+];
+
+const Component = () => {
+    return (
+        <div className='links-container'>
+            <ul className='unleash-academy-links'>
+                {links.map(({ level, header, description, link }) => (
+                    <li key={header}>
+                        <LinkBox
+                            level={level}
+                            header={header}
+                            description={description}
+                            link={link}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Component;