docs: add academy links and banners (#6083)

This PR adds academy links and banners. Supersedes #6077

website/docs/unleash-academy/academy.md

@@ -5,8 +5,13 @@ 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
 

website/docs/unleash-academy/advanced-for-devs.md

@@ -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.**
@@ -34,3 +38,7 @@ 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 />

website/docs/unleash-academy/foundational.md

@@ -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.**
@@ -52,3 +56,7 @@ 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 />

website/docs/unleash-academy/managing-unleash-for-devops.md

@@ -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.**
@@ -33,3 +37,7 @@ 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 />

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

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

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

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

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

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

website/src/css/custom.css

@@ -7,7 +7,8 @@
 
 /* You can override the default Infima variables here. */
 :root {
-    --unleash-color-purple: #635dc5;
+    --unleash-logo-purple: #635dc5;
+    --unleash-color-purple: var(--unleash-logo-purple);
     --unleash-color-gray: #ecebeb;
     --unleash-color-green: #1a4049;
 
@@ -211,6 +212,270 @@ li.theme-doc-sidebar-item-category-level-1 > div::before {
 
 /* end video content container */
 
+/* Unleash academy content */
+
+/* breakpoints:
+   show wide: >=1247
+   show narrow: 997-1246
+   show wide: 711-996
+   show narrow: <=710
+*/
+
+/* begin certification links */
+
+html[data-theme='light'] .links-container {
+    --color-purple: var(--unleash-color-purple);
+}
+
+html[data-theme='dark'] .links-container {
+    --color-purple: rgb(76, 73, 146);
+}
+
+.links-container {
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    --button-background-color: var(--color-purple);
+    --border-color: var(--ifm-color);
+}
+
+.unleash-academy-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    gap: var(--ifm-spacing-vertical);
+}
+
+.links-container li:has(article) {
+    margin: 0;
+    padding: 0;
+}
+
+.links-container article.advanced {
+    background-image: url('/img/unleash-academy/advanced-pixels.svg');
+}
+
+.links-container article.beginners {
+    background-image: url('/img/unleash-academy/beginner-pixels.svg');
+}
+
+.links-container article {
+    border-radius: var(--ifm-global-radius);
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: calc(var(--ifm-spacing-vertical) * 2);
+    display: grid;
+    grid-template-rows: min-content auto min-content;
+    background-position: top right;
+    background-repeat: no-repeat;
+    height: 100%;
+}
+
+.links-container article .level {
+    border: 2px solid var(--ifm-link-color);
+    border-radius: 60px;
+    color: var(--ifm-link-color);
+    padding-inline: .5em;
+}
+
+.links-container article .header > * + * {
+    margin-block-start: calc(var(--ifm-spacing-vertical) * .5);
+}
+
+.links-container article p {
+    font-size: var(--unleash-font-size-smaller);
+}
+
+.links-container article a {
+    border-radius: inherit;
+    width: 100%;
+    background: var(--color-purple);
+    color: white;
+    text-align: center;
+    padding: calc(var(--ifm-spacing-horizontal) * .5);
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .unleash-academy-links {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .links-container article {
+        height: 100%;
+    }
+}
+
+/* End of certification links styles */
+
+/* Styles for .banner-container */
+.banner-container {
+    --button-color: var(--unleash-logo-purple);
+    --unleash-academy-logo-width: 85px;
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
+    --banner-font-color: #000;
+
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    position: relative;
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: var(--banner-padding);
+    border-radius: var(--ifm-global-radius);
+    background-color: #F1F0FC;
+    background-image: url('/img/unleash-academy/banner-bg-pixels.svg');
+    background-position: top right;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    color: var(--banner-font-color);
+}
+
+.banner-container .banner {
+    display: grid;
+    grid-template-areas: "header logo" "bullets bullets" "button button";
+    grid-template-columns: auto var(--unleash-academy-logo-width);
+    gap: var(--ifm-spacing-horizontal);
+}
+
+.unleash-academy-banner-list {
+    grid-area: bullets;
+    display: flex;
+    flex-flow: column;
+    gap: calc( var(--ifm-spacing-horizontal) * 2);
+    padding-inline-start: 0;
+}
+
+.unleash-academy-banner-list > li {
+    font-weight: bold;
+    list-style-type: none;
+    background-image: url('/img/unleash-academy/bullet-check.svg');
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding-left: 30px;
+}
+
+
+.unleash-academy-banner-list > li::marker {
+    height: 100%;
+}
+
+.unleash-academy-banner-list > li + li {
+    margin-block-start: 0;
+}
+
+.banner-container .unleash-action-button {
+    grid-area: button;
+    display: block;
+    border-radius: var(--ifm-global-radius);
+    width: 100%;
+    background: var(--button-color);
+    color: white;
+    text-align: center;
+    padding: calc(var(--ifm-spacing-horizontal) * .5);
+}
+
+.banner-container h3 {
+    font-weight: normal;
+    font-size: 1.4em;
+    grid-area: header;
+}
+
+.banner-container .small-logo {
+    grid-area: logo;
+    background-image: url('/img/unleash-academy/academy-logo.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    aspect-ratio: 1;
+    background-size: contain;
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .banner-container .banner {
+        grid-template-areas: "header logo" "bullets logo" "button logo";
+        grid-template-columns: 480px auto;
+    }
+
+    .unleash-academy-banner-list {
+        flex-flow: row;
+    }
+
+    .banner-container .unleash-action-button {
+        width: 240px;
+    }
+
+    .banner-container .small-logo {
+        display: none;
+    }
+
+    .banner-container .big-logo {
+        position: absolute;
+        background-image: url('/img/unleash-academy/academy-logo.svg');
+        bottom: 0;
+        right: 40px;
+        width: 200px;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-position-x: left;
+        background-position-y: 190%;
+    }
+}
+/* end banner */
+
+/* Styles for .course-banner-container */
+.course-banner-container {
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
+    --banner-font-color: #000;
+
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: var(--banner-padding);
+    border-radius: var(--ifm-global-radius);
+    background-position: top right;
+    background-repeat: no-repeat;
+    overflow: hidden;
+}
+
+html[data-theme='light'] .course-banner-container {
+    background-color: #F1F0FC;
+    color: var(--banner-font-color);
+}
+
+.course-banner-container.beginners {
+    background-image: url('/img/unleash-academy/beginner-pixels.svg');
+    background-size: 108px;
+}
+
+.course-banner-container.advanced {
+    background-image: url('/img/unleash-academy/advanced-pixels.svg');
+    background-size: 108px;
+}
+
+.course-banner-container > * + * {
+    margin-top: var(--ifm-spacing-vertical);
+}
+
+.course-banner-container .level {
+    border: 2px solid;
+    border-radius: 60px;
+    padding-inline: .5em;
+    text-transform: capitalize;
+}
+
+html[data-theme='light'] .course-banner-container .level {
+    border-color: var(--unleash-logo-purple);
+    color: var(--unleash-logo-purple);
+}
+
+html[data-theme='dark'] .course-banner-container .level {
+    border-color: var(--ifm-link-color);
+    color: var(--ifm-link-color);
+}
+
+.course-banner-container p {
+    font-size: 1.4em;
+}
 /* docusaurus-plugin-openapi-docs styling
 
 Taken from

website/static/img/unleash-academy/advanced-pixels.svg

@@ -0,0 +1,8 @@
+<svg width="57" height="58" viewBox="0 0 57 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2">
+<rect width="39" height="39" transform="matrix(-1 0 0 1 58 0)" fill="#817AFE"/>
+<rect width="16" height="16" transform="matrix(-1 0 0 1 19 39)" fill="#817AFE"/>
+<rect width="10" height="10" transform="matrix(-1 0 0 1 19 1)" fill="#817AFE"/>
+<rect width="10" height="10" transform="matrix(-1 0 0 1 57 39)" fill="#817AFE"/>
+</g>
+</svg>

website/static/img/unleash-academy/banner-bg-pixels.svg

@@ -0,0 +1,63 @@
+<svg width="554" height="282" viewBox="0 0 554 282" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.1">
+<path d="M502.377 16.1992H471.798V41.1588H502.377V16.1992Z" fill="#817AFE"/>
+<path d="M563.54 1.79883H532.96V26.7585H563.54V1.79883Z" fill="#817AFE"/>
+<path d="M288.323 41.1602H257.743V66.1198H288.323V41.1602Z" fill="#817AFE"/>
+<path d="M318.899 16.1992H288.32V41.1588H318.899V16.1992Z" fill="#817AFE"/>
+<path d="M349.485 16.1992H318.906V41.1588H349.485V16.1992Z" fill="#817AFE"/>
+<path d="M380.062 41.1602H349.482V66.1198H380.062V41.1602Z" fill="#817AFE"/>
+<path d="M471.796 41.1602H441.217V66.1198H471.796V41.1602Z" fill="#817AFE"/>
+<path d="M563.54 26.7598H532.96V51.7194H563.54V26.7598Z" fill="#817AFE"/>
+<path d="M318.899 66.1172H288.32V91.0768H318.899V66.1172Z" fill="#817AFE"/>
+<path d="M349.485 66.1172H318.906V91.0768H349.485V66.1172Z" fill="#817AFE"/>
+<path d="M471.796 66.1172H441.217V91.0768H471.796V66.1172Z" fill="#817AFE"/>
+<path d="M502.377 66.1172H471.798V91.0768H502.377V66.1172Z" fill="#817AFE"/>
+<path d="M532.959 66.1172H502.379V91.0768H532.959V66.1172Z" fill="#817AFE"/>
+<path d="M318.899 91.0762H288.32V116.036H318.899V91.0762Z" fill="#817AFE"/>
+<path d="M349.485 91.0762H318.906V116.036H349.485V91.0762Z" fill="#817AFE"/>
+<path d="M441.219 91.0762H410.64V116.036H441.219V91.0762Z" fill="#817AFE"/>
+<path d="M288.323 116.037H257.743V140.997H288.323V116.037Z" fill="#817AFE"/>
+<path d="M380.062 116.037H349.482V140.997H380.062V116.037Z" fill="#817AFE"/>
+<path d="M532.959 116.037H502.379V140.997H532.959V116.037Z" fill="#817AFE"/>
+<path d="M563.539 116.037H532.96V140.997H563.539V116.037Z" fill="#817AFE"/>
+<path d="M288.323 140.996H257.743V165.956H288.323V140.996Z" fill="#817AFE"/>
+<path d="M349.485 140.996H318.906V165.956H349.485V140.996Z" fill="#817AFE"/>
+<path d="M380.062 140.996H349.482V165.956H380.062V140.996Z" fill="#817AFE"/>
+<path d="M502.377 140.996H471.798V165.956H502.377V140.996Z" fill="#817AFE"/>
+<path d="M563.562 140.998H532.688V170.998H563.562V140.998Z" fill="#817AFE"/>
+<path d="M318.899 165.957H288.32V190.917H318.899V165.957Z" fill="#817AFE"/>
+<path d="M441.219 165.957H410.64V190.917H441.219V165.957Z" fill="#817AFE"/>
+<path d="M471.796 165.957H441.217V190.917H471.796V165.957Z" fill="#817AFE"/>
+<path d="M441.219 190.918H410.64V215.878H441.219V190.918Z" fill="#817AFE"/>
+<path d="M532.959 190.918H502.379V215.878H532.959V190.918Z" fill="#817AFE"/>
+<path d="M410.643 215.875H380.063V240.835H410.643V215.875Z" fill="#817AFE"/>
+<path d="M532.959 215.875H502.379V240.835H532.959V215.875Z" fill="#817AFE"/>
+<path d="M288.323 240.836H257.743V265.796H288.323V240.836Z" fill="#817AFE"/>
+<path d="M380.062 240.836H349.482V265.796H380.062V240.836Z" fill="#817AFE"/>
+<path d="M410.643 240.836H380.063V265.796H410.643V240.836Z" fill="#817AFE"/>
+<path d="M441.219 240.836H410.64V265.796H441.219V240.836Z" fill="#817AFE"/>
+<path d="M441.219 66.1172H410.64V91.0768H441.219V66.1172Z" fill="#817AFE"/>
+</g>
+<g opacity="0.1">
+<path d="M134.973 41.9219H159.526V62.8018H134.973V41.9219Z" fill="#817AFE"/>
+<path d="M1.92756 68.6934H26.4806V89.5733H1.92756V68.6934Z" fill="#817AFE"/>
+<path d="M206.327 60.5996H231.32V80.9996H206.327V60.5996Z" fill="#817AFE"/>
+<path d="M181.333 60.5996H206.326V80.9996H181.333V60.5996Z" fill="#817AFE"/>
+<path d="M156.339 81H181.332V101.4H156.339V81Z" fill="#817AFE"/>
+<path d="M64.6746 92.6055H89.2277V113.485H64.6746V92.6055Z" fill="#817AFE"/>
+<path d="M64.6746 15.8066H89.2277V36.6866H64.6746V15.8066Z" fill="#817AFE"/>
+<path d="M233.19 95.6387H257.743V116.519H233.19V95.6387Z" fill="#817AFE"/>
+<path d="M233.19 179.16H257.743V200.04H233.19V179.16Z" fill="#817AFE"/>
+<path d="M61.3184 191.117H85.8715V211.997H61.3184V191.117Z" fill="#817AFE"/>
+<path d="M12.2073 164.348H36.7604V185.228H12.2073V164.348Z" fill="#817AFE"/>
+<path d="M0.446604 245.945H24.9996V266.825H0.446604V245.945Z" fill="#817AFE"/>
+<path d="M141.906 137.398H166.459V158.278H141.906V137.398Z" fill="#817AFE"/>
+<path d="M184.286 221.398H209.279V241.798H184.286V221.398Z" fill="#817AFE"/>
+<path d="M184.417 201H209.41V221.4H184.417V201Z" fill="#817AFE"/>
+<path d="M208.637 116.52H233.19V137.4H208.637V116.52Z" fill="#817AFE"/>
+<path d="M89.2323 113.484H113.785V134.364H89.2323V113.484Z" fill="#817AFE"/>
+<path d="M233.19 21H257.743V41.88H233.19V21Z" fill="#817AFE"/>
+<path d="M166.459 137.398H191.012V158.278H166.459V137.398Z" fill="#817AFE"/>
+<path d="M134.973 179.16H159.526V200.04H134.973V179.16Z" fill="#817AFE"/>
+</g>
+</svg>

website/static/img/unleash-academy/beginner-pixels.svg

@@ -0,0 +1,5 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58 0H19V8H28V20H19V39H26V31H38V39H58V0ZM52 14H40V26H52V14ZM0 10H13V23H0V10ZM38 46H50V58H38V46ZM7 43V55H19V43H7Z" fill="#817AFE"/>
+</g>
+</svg>

website/static/img/unleash-academy/bullet-check.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_21750_244356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_21750_244356)">
+<path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#817AFE"/>
+</g>
+</svg>