Align Learning Paths section with new Layer5 Academy experience#7794
Align Learning Paths section with new Layer5 Academy experience#779411yashiagrawal wants to merge 5 commits into
Conversation
|
Preview deployment for PR #7794 removed. This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits. If needed, push a new commit to this PR to generate a fresh preview. |
11yashiagrawal
force-pushed
the
learning-path-page
branch
from
68503d6 to
fdd5e3f
Compare
Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com>
…on effects Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com>
Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com>
|
@KatalKavya96 Kindly review the changes made and help with any suggestions that apply. |
|
Thanks! |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the “Learning Paths” areas on the Learn pages to align with the new Layer5 Academy experience by replacing dynamic learning path / metrics UI with a single, lower-maintenance illustration and CTA.
Changes:
- Removed MDX GraphQL queries and the legacy Learning Path cards / LearnInfo metrics display.
- Added a new
CanvasIllustrationcomponent (SVG/DOM-based) with a CTA linking to the Academy learning paths. - Added styled-components styling for the new illustration, including responsive and theme-aware styling.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/sections/Learn/LearnPage-Sections/learning-path.js | Replaces queried cards with the new illustration component. |
| src/sections/Learn-Layer5/index.js | Removes query + legacy cards/metrics and embeds the new illustration. |
| src/components/Learn-Components/LearnInfo/index.js | Deletes legacy metrics component (no longer used in Learn page). |
| src/components/Learn-Components/LearnInfo/learninfo.style.js | Deletes legacy metrics styling. |
| src/components/Learn-Components/Canvas-Illustration/index.js | Adds the new illustration + CTA component. |
| src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js | Adds styles/animations and responsive behavior for the illustration. |
| <CanvasIllustrationWrapper aria-hidden="true"> | ||
| <div className="text-side"> | ||
| <h2>Elevate Your Cloud Native Expertise</h2> | ||
| <p> | ||
| Master Kubernetes, service meshes, and GitOps with structured, | ||
| hands-on learning paths. Design, manage, and collaborate seamlessly. | ||
| </p> | ||
| <Button | ||
| $primary | ||
| title="Explore all learning paths" | ||
| $url="https://cloud.layer5.io/academy?contentType=learning-path" | ||
| $external={true} | ||
| /> | ||
| </div> |
| <path | ||
| className="blue-path" | ||
| d="M 15% 20% C 30% 20%, 40% 40%, 50% 40%" | ||
| /> | ||
| <path | ||
| className="blue-path" | ||
| d="M 25% 70% C 35% 70%, 40% 40%, 50% 40%" | ||
| /> | ||
| <path | ||
| className="purple-path" | ||
| d="M 50% 40% C 60% 40%, 65% 30%, 75% 30%" | ||
| /> |
| stroke: #00b39f; | ||
| stroke-width: 2.5; | ||
| stroke-dasharray: 6 6; | ||
| animation: ${flowAnimation} 1s linear infinite; |
| z-index: 10; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| animation: ${float1} 4s ease-in-out infinite; |
| .cursor-2 { | ||
| top: 65%; | ||
| left: 60%; | ||
| animation: ${float2} 5s ease-in-out infinite; |
| @@ -0,0 +1,553 @@ | |||
| import styled, { keyframes } from "styled-components"; | |||
|
|
|||
| const LearningPathsWrapper = styled.div` | ||
| Button:hover { | ||
| box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour}; | ||
| } | ||
| margin: 3rem 0 4rem; | ||
|
|
||
| .learn-path-heading { | ||
| text-align: center; | ||
| margin: 2rem 0 | ||
| } | ||
| .learn-subtitle { | ||
| text-align: center; | ||
| } | ||
| .learning-path-cards{ | ||
| margin: auto; | ||
| justify-content: center; | ||
| padding: 6rem 0; | ||
|
|
||
| @media(max-width:500px){ | ||
| padding: 6rem 2rem; | ||
| } | ||
| } | ||
| .see-more-button { | ||
| text-align: center; | ||
| } | ||
| Button:hover { | ||
| box-shadow: 0 2px 10px ${(props) => props.theme.whiteFourToBlackFour}; | ||
| } |
KatalKavya96
left a comment
KatalKavya96
left a comment
There was a problem hiding this comment.
@11yashiagrawal Please address all the Copilot review comments,as they all look important for accessibility, rendering reliability, and implementation quality.
Once you have fixed them, please resolve those review comments accordingly.
Also, the newly added design section does not seem properly aligned with the other components on the page. Could you please adjust its alignment so it stays visually consistent with the rest of the Learn page layout?
Rest of the direction looks good to me once these points are addressed!
|
@11yashiagrawal Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
Description
This PR resolves #6738.
Notes for Reviewers
Summary
In accordance with the discussion outlined in the issue and subsequent comments, this implementation follows Option 3. The existing Learning Paths section has been simplified by replacing the previous content with a single, low-maintenance visual element accompanied by a clear call-to-action (CTA) that directs users to the Layer5 Academy Learning Paths page.
Changes Made
Before:
After:
Signed commits