Align Learning Paths section with new Layer5 Academy experience

[11yashiagrawal]

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

• Designed and added a new SVG-based visual element for the Learning Paths section.
• Replaced the existing Learning Path cards and Learning Information section with the new visual element and a CTA button linking users to the Academy Learning Paths experience.
• Implemented responsive styling to ensure compatibility across all screen sizes and support for both light and dark themes.
• Removed the static GraphQL query previously used to fetch metrics for the Learning Information section, reducing maintenance overhead.

Before:

After:

Signed commits

• Yes, I signed my commits.

[github-actions]

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]

@KatalKavya96 Kindly review the changes made and help with any suggestions that apply.

[hortison]

Thanks!

[Copilot]

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 CanvasIllustration component (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.

[KatalKavya96]

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

[Bhumikagarggg]

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

[11yashiagrawal]

The illustration finally looks like this after the edit, incorporating logos and icons familiar to meshery and highlighting the new Academy experience.
@KatalKavya96 @Bhumikagarggg Kindly review the changes and help with any other suggestions that apply.

[KatalKavya96]

LGTM!

[Sbragul26]

This looks good to me, but I think it should be reviewed by a maintainer before merging.
@Rajesh-Nagarajan-11 @saurabhraghuvanshii

[saurabhraghuvanshii]

@11yashiagrawal, how will I access the content on Layer5.io? I'm seeing redirects to cloud.layer5.io instead.

Is there another way to access the content, or is this redirect expected?

[11yashiagrawal]

@saurabhraghuvanshii Yes, this redirect is intentional

Based on the discussion and recommended approach in the issue, the idea is to keep the Learning Paths section on Layer5.io as a simple entry point to Academy, instead of maintaining the same content in two places.

The button now takes users to the Academy page, where the learning path content is already filtered and available to explore directly. This should help keep the main site easier to maintain while still giving Academy proper visibility.