From 01730df539986051055282a29b6b0e5f693fa809 Mon Sep 17 00:00:00 2001 From: 11yashiagrawal <11yashiagrawal@gmail.com> Date: Tue, 9 Jun 2026 03:42:10 +0530 Subject: [PATCH 1/4] Add CanvasIllustration component and integrate into LearnPathsPage Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com> --- .../canvas-illustration.style.js | 515 ++++++++++++++++++ .../Canvas-Illustration/index.js | 240 ++++++++ src/sections/Learn-Layer5/index.js | 62 +-- .../Learn/LearnPage-Sections/learning-path.js | 104 +--- 4 files changed, 780 insertions(+), 141 deletions(-) create mode 100644 src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js create mode 100644 src/components/Learn-Components/Canvas-Illustration/index.js diff --git a/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js new file mode 100644 index 0000000000000..6850ed1b65f8d --- /dev/null +++ b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js @@ -0,0 +1,515 @@ +import styled, { keyframes } from "styled-components"; + +const flowAnimation = keyframes` + to { + stroke-dashoffset: -20; + } +`; + +const float1 = keyframes` + 0% { transform: translate(0, 0); } + 50% { transform: translate(10px, -15px); } + 100% { transform: translate(0, 0); } +`; + +const float2 = keyframes` + 0% { transform: translate(0, 0); } + 50% { transform: translate(-10px, 12px); } + 100% { transform: translate(0, 0); } +`; + +const CanvasIllustrationWrapper = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + margin: 3rem 0; + border-radius: 0; + overflow: hidden; + background-color: transparent; + + @media (max-width: 900px) { + flex-direction: column; + text-align: center; + box-shadow: none; + } + + .illustration-side { + position: relative; + width: 60%; + height: 450px; + max-width: 760px; + isolation: isolate; + background-image: radial-gradient(#888 1px, transparent 1px); + background-size: 20px 20px; + mask-image: linear-gradient(to left, black 60%, transparent 100%); + -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%); + overflow: hidden; + + @media (max-width: 900px) { + width: 100%; + height: 350px; + mask-image: linear-gradient(to top, black 50%, transparent 100%); + -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%); + } + } + + .text-side { + width: 40%; + padding: 2rem; + padding-left: 0; + padding-right: 5%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + @media (max-width: 900px) { + width: 100%; + align-items: center; + padding: 1rem; + } + + h2 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1.2rem; + line-height: 1.2; + } + + p { + font-size: 1.2rem; + margin-bottom: 2.5rem; + opacity: 0.8; + line-height: 1.6; + } + } + + /* SVG layer for connections */ + .canvas-svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; + + path { + fill: none; + stroke: #00b39f; + stroke-width: 2.5; + stroke-dasharray: 6 6; + animation: ${flowAnimation} 1s linear infinite; + } + + path.muted { + stroke-width: 1.8; + stroke-dasharray: 3 8; + opacity: 0.58; + } + + path.blue-path { + stroke: #326ce5; + } + + path.purple-path { + stroke: #7a4bb5; + } + + path.teal-path { + stroke: #00b39f; + } + + path.yellow-path { + stroke: #ebc017; + } + } + + /* Canvas nodes */ + .canvas-node { + position: absolute; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12px 24px; + background: #1a1c1e; + border: 2px solid #555; + border-radius: 8px; + color: #e0e0e0; + font-size: 1rem; + font-weight: 500; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + + .node-icon { + width: 32px; + height: 32px; + margin-bottom: 8px; + fill: currentColor; + } + } + + .canvas-node.compact { + padding: 9px 14px; + min-width: 96px; + font-size: 0.82rem; + background: rgba(26, 28, 30, 0.94); + + .node-icon { + width: 24px; + height: 24px; + margin-bottom: 5px; + } + } + + .canvas-node.mini { + width: 42px; + height: 42px; + padding: 0; + border-radius: 50%; + font-size: 1.15rem; + font-weight: 800; + background: #111416; + + .node-icon { + width: 22px; + height: 22px; + margin-bottom: 0; + } + } + + /* Hexagon shape for the center node */ + .canvas-node.hexagon { + width: 120px; + height: 120px; + border-radius: 0; + border: none; + background: transparent; + box-shadow: none; + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + background-color: #00b39f; + color: white; + + &:before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + background-color: #1a1c1e; + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + z-index: -1; + } + + .node-icon { + color: #00b39f; + } + } + + /* Node positioning */ + .node-k8s { + top: 20%; + left: 10%; + border-color: #326ce5; + .node-icon { + color: #326ce5; + } + } + + .node-istio { + top: 70%; + left: 20%; + border-color: #466bb0; + .node-icon { + color: #466bb0; + } + } + + .node-meshery { + top: 40%; + left: 45%; + transform: translate(-50%, -50%); + } + + .node-gitops { + top: 30%; + left: 70%; + border-color: #ebc017; + .node-icon { + color: #ebc017; + } + } + + .node-workshop { + top: 16%; + left: 62%; + border-color: #00b39f; + .node-icon { + color: #00b39f; + } + } + + .node-certification { + top: 64%; + left: 68%; + border-color: #7a4bb5; + .node-icon { + color: #7a4bb5; + } + } + + .node-quiz { + top: 49%; + left: 29%; + color: #ffd200; + border-color: #ffd200; + } + + .node-check { + top: 53%; + left: 56%; + color: #00b39f; + border-color: #00b39f; + } + + .learning-card { + position: absolute; + top: 76%; + left: 38%; + z-index: 4; + display: flex; + align-items: center; + gap: 10px; + max-width: 240px; + padding: 12px 14px; + background: rgba(255, 255, 255, 0.96); + border: 1px solid rgba(0, 179, 159, 0.28); + border-radius: 8px; + color: #1a1c1e; + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); + animation: ${float2} 7s ease-in-out infinite; + + .learning-card-icon { + display: grid; + place-items: center; + flex: 0 0 36px; + width: 36px; + height: 36px; + border-radius: 8px; + background: rgba(0, 179, 159, 0.12); + color: #00b39f; + } + + svg { + width: 24px; + height: 24px; + } + + span, + strong { + display: block; + } + + span { + margin-bottom: 2px; + font-size: 0.72rem; + line-height: 1.2; + text-transform: uppercase; + color: #4b5563; + font-weight: 700; + } + + strong { + font-size: 0.9rem; + line-height: 1.25; + } + } + + .progress-strip { + position: absolute; + top: 8%; + left: 32%; + z-index: 4; + display: flex; + align-items: center; + gap: 6px; + padding: 7px 10px; + background: rgba(26, 28, 30, 0.9); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 999px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); + } + + .progress-step { + display: grid; + place-items: center; + width: 22px; + height: 22px; + border: 1px solid rgba(255, 255, 255, 0.32); + border-radius: 50%; + color: #cfd8dc; + font-size: 0.72rem; + font-weight: 800; + + &.active { + background: #00b39f; + border-color: #00b39f; + color: #fff; + } + } + + .progress-line { + width: 28px; + height: 2px; + background: rgba(255, 255, 255, 0.32); + } + + /* Collaborative Cursors */ + .cursor { + position: absolute; + z-index: 10; + display: flex; + align-items: flex-start; + animation: ${float1} 4s ease-in-out infinite; + + svg { + width: 20px; + height: 20px; + filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)); + } + + .cursor-label { + background: #7a4bb5; + color: white; + font-size: 0.8rem; + padding: 4px 10px; + border-radius: 12px; + margin-left: -2px; + margin-top: 12px; + font-weight: 600; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + } + } + + .cursor-1 { + top: 15%; + left: 40%; + svg path { + fill: #7a4bb5; + stroke: white; + stroke-width: 1.5; + } + .cursor-label { + background: #7a4bb5; + } + } + + .cursor-2 { + top: 65%; + left: 60%; + animation: ${float2} 5s ease-in-out infinite; + svg path { + fill: #e6522c; + stroke: white; + stroke-width: 1.5; + } + .cursor-label { + background: #e6522c; + } + } + + /* Comment block */ + .comment-block { + position: absolute; + top: 25%; + left: 55%; + z-index: 5; + background: #ffd200; + color: #1a1c1e; + padding: 10px 16px; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 600; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); + animation: ${float1} 6s ease-in-out infinite; + + &:after { + content: ""; + position: absolute; + bottom: -8px; + left: 20px; + border-width: 8px 8px 0; + border-style: solid; + border-color: #ffd200 transparent transparent transparent; + } + } + + @media (max-width: 768px) { + height: auto; + .canvas-node { + padding: 8px 16px; + font-size: 0.85rem; + .node-icon { + width: 24px; + height: 24px; + } + } + .canvas-node.hexagon { + width: 90px; + height: 90px; + } + .canvas-node.compact { + min-width: 82px; + padding: 7px 10px; + font-size: 0.72rem; + } + .canvas-node.mini { + width: 34px; + height: 34px; + } + .cursor-2, + .comment-block, + .learning-card { + display: none; + } + .progress-strip { + top: 7%; + left: 38%; + transform: scale(0.86); + transform-origin: left top; + } + } + + @media (max-width: 500px) { + .node-gitops { + top: 70%; + left: 70%; + } + .node-k8s { + top: 15%; + left: 10%; + } + .cursor-1 { + top: 10%; + left: 55%; + } + .node-workshop { + top: 14%; + left: 62%; + } + .node-certification { + top: 60%; + left: 58%; + } + .node-quiz, + .node-check, + .progress-strip { + display: none; + } + } +`; + +export default CanvasIllustrationWrapper; diff --git a/src/components/Learn-Components/Canvas-Illustration/index.js b/src/components/Learn-Components/Canvas-Illustration/index.js new file mode 100644 index 0000000000000..22d071e97235c --- /dev/null +++ b/src/components/Learn-Components/Canvas-Illustration/index.js @@ -0,0 +1,240 @@ +import React from "react"; +import CanvasIllustrationWrapper from "./canvas-illustration.style"; +import IstioIcon from "../../../assets/images/service-mesh-icons/istio.svg"; +import Button from "../../../reusecore/Button"; + +const CanvasIllustration = () => { + return ( + + ); +}; + +export default CanvasIllustration; diff --git a/src/sections/Learn-Layer5/index.js b/src/sections/Learn-Layer5/index.js index 41033afac736f..b4f14c0a4d929 100644 --- a/src/sections/Learn-Layer5/index.js +++ b/src/sections/Learn-Layer5/index.js @@ -2,46 +2,16 @@ import React from "react"; import { LearnLayer5GridWrapper } from "./learnlayer5.style"; import { graphql, useStaticQuery } from "gatsby"; import PageHeader from "../../reusecore/PageHeader"; -import { Row, Col, Container } from "../../reusecore/Layout"; -import CardComponent from "../../components/Learn-Components/Card-Component"; +import { Container } from "../../reusecore/Layout"; import LearnInfo from "../../components/Learn-Components/LearnInfo"; import WhatAwaitsSection from "../../components/Learn-Components/what-await-section"; import Book_Giveaway from "../../assets/images/learn/istio-book-giveaway.webp"; import JoinCommunity from "../Community/Join-community"; -// import Button from "../../reusecore/Button"; - +import CanvasIllustration from "../../components/Learn-Components/Canvas-Illustration"; const LearnPathsPage = () => { const data = useStaticQuery(graphql` query allLearnPath { - learnPaths: allMdx( - filter: { - fields: { collection: { eq: "content-learn" }, pageType: { eq: "learnpath" } } - } - ) { - nodes { - id - frontmatter { - title - description - themeColor - disabled - courses - cardImage { - childImageSharp { - gatsbyImageData(width: 200, layout: CONSTRAINED) - } - extension - publicURL - } - status - } - fields { - slug - learnpath - } - } - } coursesCount: allMdx( filter: { fields: { collection: { eq: "content-learn" } } } ) { @@ -76,23 +46,9 @@ const LearnPathsPage = () => { } } } - allCourses: allMdx( - filter: { - fields: { collection: { eq: "content-learn" },pageType: { eq: "course" } } - } - ) { - nodes{ - fields{ - learnpath - } - } - } } `); - - const getCoursesOfaLearningPath = (learnpath) => data.allCourses.nodes.filter(obj => obj.fields.learnpath === learnpath); - return ( @@ -101,13 +57,7 @@ const LearnPathsPage = () => {

Learn how to build an application and

manage it using cloud native infrastructure

- - {data.learnPaths.nodes.map((tutorial) => ( - - - - ))} - + { - + ); }; diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js index ca017c949b90f..cb6d7d207246a 100644 --- a/src/sections/Learn/LearnPage-Sections/learning-path.js +++ b/src/sections/Learn/LearnPage-Sections/learning-path.js @@ -1,85 +1,25 @@ import React from "react"; -import { graphql, useStaticQuery } from "gatsby"; -import { Row, Col, Container } from "../../../reusecore/Layout"; -import CardComponent from "../../../components/Learn-Components/Card-Component"; -import Button from "../../../reusecore/Button"; +import { Container } from "../../../reusecore/Layout"; import styled from "styled-components"; +import CanvasIllustration from "../../../components/Learn-Components/Canvas-Illustration"; 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}; + } + margin: 3rem 0 4rem; + + .learn-path-heading { + text-align: center; + margin: 2rem 0; + } + .learn-subtitle { + text-align: center; + margin-bottom: 3rem; + } `; const LearningPaths = () => { - const data = useStaticQuery(graphql` - query learningPaths { - learnPaths: allMdx( - filter: { - fields: { collection: { eq: "content-learn" }, pageType: { eq: "learnpath" } } - } - ) { - nodes { - id - frontmatter { - title - description - themeColor - courses - disabled - cardImage { - childImageSharp { - gatsbyImageData(width: 200, layout: CONSTRAINED) - } - extension - publicURL - } - status - } - fields { - slug - learnpath - } - } - } - allCourses: allMdx( - filter: { - fields: { collection: { eq: "content-learn" },pageType: { eq: "course" } } - } - ) { - nodes{ - fields{ - learnpath - } - } - } - } - `); - - - const getCoursesOfaLearningPath = (learnpath) => data.allCourses.nodes.filter(obj => obj.fields.learnpath === learnpath); - return ( @@ -87,19 +27,11 @@ const LearningPaths = () => {

Learn DevOps and platform engineering

- - {data.learnPaths.nodes.map((tutorial) => ( - - - - ))} - -
-
+ + ); }; -export default LearningPaths; \ No newline at end of file +export default LearningPaths; From f9cd7ace1ba30cbc5129f4bf025e16b79f33668a Mon Sep 17 00:00:00 2001 From: 11yashiagrawal <11yashiagrawal@gmail.com> Date: Tue, 9 Jun 2026 21:15:28 +0530 Subject: [PATCH 2/4] Enhance CanvasIllustration styles with theme integration and transition effects Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com> --- .../canvas-illustration.style.js | 104 ++++++++++++------ 1 file changed, 71 insertions(+), 33 deletions(-) diff --git a/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js index 6850ed1b65f8d..9f8236ab660b9 100644 --- a/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js +++ b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js @@ -27,6 +27,7 @@ const CanvasIllustrationWrapper = styled.div` border-radius: 0; overflow: hidden; background-color: transparent; + color: ${(props) => props.theme.whiteToBlack}; @media (max-width: 900px) { flex-direction: column; @@ -40,11 +41,17 @@ const CanvasIllustrationWrapper = styled.div` height: 450px; max-width: 760px; isolation: isolate; - background-image: radial-gradient(#888 1px, transparent 1px); + background-image: radial-gradient( + ${(props) => props.theme.grey505050ToGreyB4B4B4} 1px, + transparent 1px + ); background-size: 20px 20px; mask-image: linear-gradient(to left, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%); overflow: hidden; + transition: + background-color 0.6s ease, + color 0.6s ease; @media (max-width: 900px) { width: 100%; @@ -75,6 +82,7 @@ const CanvasIllustrationWrapper = styled.div` font-weight: 700; margin-bottom: 1.2rem; line-height: 1.2; + color: ${(props) => props.theme.whiteToBlack}; } p { @@ -82,6 +90,7 @@ const CanvasIllustrationWrapper = styled.div` margin-bottom: 2.5rem; opacity: 0.8; line-height: 1.6; + color: ${(props) => props.theme.greyA0AAAAToGrey666666}; } } @@ -135,13 +144,18 @@ const CanvasIllustrationWrapper = styled.div` align-items: center; justify-content: center; padding: 12px 24px; - background: #1a1c1e; - border: 2px solid #555; + background: ${(props) => props.theme.grey212121ToWhite}; + border: 2px solid ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; border-radius: 8px; - color: #e0e0e0; + color: ${(props) => props.theme.whiteToBlack}; font-size: 1rem; font-weight: 500; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + box-shadow: 0 4px 12px ${(props) => props.theme.whiteOneToBlackOne}; + transition: + background-color 0.6s ease, + border-color 0.6s ease, + box-shadow 0.6s ease, + color 0.6s ease; .node-icon { width: 32px; @@ -155,7 +169,7 @@ const CanvasIllustrationWrapper = styled.div` padding: 9px 14px; min-width: 96px; font-size: 0.82rem; - background: rgba(26, 28, 30, 0.94); + background: ${(props) => props.theme.grey212121ToWhite}; .node-icon { width: 24px; @@ -171,7 +185,7 @@ const CanvasIllustrationWrapper = styled.div` border-radius: 50%; font-size: 1.15rem; font-weight: 800; - background: #111416; + background: ${(props) => props.theme.grey111111ToGreyFAFAFA}; .node-icon { width: 22px; @@ -189,8 +203,8 @@ const CanvasIllustrationWrapper = styled.div` background: transparent; box-shadow: none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - background-color: #00b39f; - color: white; + background-color: ${(props) => props.theme.secondaryColor}; + color: ${(props) => props.theme.white}; &:before { content: ""; @@ -199,13 +213,14 @@ const CanvasIllustrationWrapper = styled.div` left: 3px; right: 3px; bottom: 3px; - background-color: #1a1c1e; + background-color: ${(props) => props.theme.grey212121ToWhite}; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1; + transition: background-color 0.6s ease; } .node-icon { - color: #00b39f; + color: ${(props) => props.theme.secondaryColor}; } } @@ -285,12 +300,17 @@ const CanvasIllustrationWrapper = styled.div` gap: 10px; max-width: 240px; padding: 12px 14px; - background: rgba(255, 255, 255, 0.96); - border: 1px solid rgba(0, 179, 159, 0.28); + background: ${(props) => props.theme.grey212121ToWhite}; + border: 1px solid ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; border-radius: 8px; - color: #1a1c1e; - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); + color: ${(props) => props.theme.whiteToBlack}; + box-shadow: 0 8px 22px ${(props) => props.theme.whiteOneToBlackOne}; animation: ${float2} 7s ease-in-out infinite; + transition: + background-color 0.6s ease, + border-color 0.6s ease, + box-shadow 0.6s ease, + color 0.6s ease; .learning-card-icon { display: grid; @@ -299,8 +319,11 @@ const CanvasIllustrationWrapper = styled.div` width: 36px; height: 36px; border-radius: 8px; - background: rgba(0, 179, 159, 0.12); - color: #00b39f; + background: ${(props) => props.theme.grey323232ToGreenF3FFFD}; + color: ${(props) => props.theme.secondaryColor}; + transition: + background-color 0.6s ease, + color 0.6s ease; } svg { @@ -318,7 +341,7 @@ const CanvasIllustrationWrapper = styled.div` font-size: 0.72rem; line-height: 1.2; text-transform: uppercase; - color: #4b5563; + color: ${(props) => props.theme.greyA0AAAAToGrey666666}; font-weight: 700; } @@ -337,10 +360,14 @@ const CanvasIllustrationWrapper = styled.div` align-items: center; gap: 6px; padding: 7px 10px; - background: rgba(26, 28, 30, 0.9); - border: 1px solid rgba(255, 255, 255, 0.14); + background: ${(props) => props.theme.grey212121ToWhite}; + border: 1px solid ${(props) => props.theme.whiteOneToBlackOne}; border-radius: 999px; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); + box-shadow: 0 6px 18px ${(props) => props.theme.whiteOneToBlackOne}; + transition: + background-color 0.6s ease, + border-color 0.6s ease, + box-shadow 0.6s ease; } .progress-step { @@ -348,23 +375,27 @@ const CanvasIllustrationWrapper = styled.div` place-items: center; width: 22px; height: 22px; - border: 1px solid rgba(255, 255, 255, 0.32); + border: 1px solid ${(props) => props.theme.whiteOneFiveToBlackOneFive}; border-radius: 50%; - color: #cfd8dc; + color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3}; font-size: 0.72rem; font-weight: 800; + transition: + background-color 0.6s ease, + border-color 0.6s ease, + color 0.6s ease; &.active { - background: #00b39f; - border-color: #00b39f; - color: #fff; + background: ${(props) => props.theme.secondaryColor}; + border-color: ${(props) => props.theme.secondaryColor}; + color: ${(props) => props.theme.white}; } } .progress-line { width: 28px; height: 2px; - background: rgba(255, 255, 255, 0.32); + background: ${(props) => props.theme.whiteOneFiveToBlackOneFive}; } /* Collaborative Cursors */ @@ -378,7 +409,9 @@ const CanvasIllustrationWrapper = styled.div` svg { width: 20px; height: 20px; - filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)); + filter: drop-shadow( + 0px 2px 4px ${(props) => props.theme.whiteFourToBlackFour} + ); } .cursor-label { @@ -390,7 +423,7 @@ const CanvasIllustrationWrapper = styled.div` margin-left: -2px; margin-top: 12px; font-weight: 600; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 6px ${(props) => props.theme.whiteOneToBlackOne}; } } @@ -427,14 +460,17 @@ const CanvasIllustrationWrapper = styled.div` top: 25%; left: 55%; z-index: 5; - background: #ffd200; - color: #1a1c1e; + background: ${(props) => props.theme.saffronColor}; + color: ${(props) => props.theme.black}; padding: 10px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); + box-shadow: 0 6px 16px ${(props) => props.theme.whiteOneToBlackOne}; animation: ${float1} 6s ease-in-out infinite; + transition: + background-color 0.6s ease, + box-shadow 0.6s ease; &:after { content: ""; @@ -443,7 +479,9 @@ const CanvasIllustrationWrapper = styled.div` left: 20px; border-width: 8px 8px 0; border-style: solid; - border-color: #ffd200 transparent transparent transparent; + border-color: ${(props) => props.theme.saffronColor} transparent + transparent transparent; + transition: border-color 0.6s ease; } } From d398335d9340dad2cf3e5de2f6c8d5bb9b277607 Mon Sep 17 00:00:00 2001 From: 11yashiagrawal <11yashiagrawal@gmail.com> Date: Tue, 9 Jun 2026 21:54:28 +0530 Subject: [PATCH 3/4] Remove LearnInfo component and its styles from LearnPathsPage Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com> --- .../Learn-Components/LearnInfo/index.js | 53 ------------------- .../LearnInfo/learninfo.style.js | 26 --------- src/sections/Learn-Layer5/index.js | 46 ---------------- 3 files changed, 125 deletions(-) delete mode 100644 src/components/Learn-Components/LearnInfo/index.js delete mode 100644 src/components/Learn-Components/LearnInfo/learninfo.style.js diff --git a/src/components/Learn-Components/LearnInfo/index.js b/src/components/Learn-Components/LearnInfo/index.js deleted file mode 100644 index ac51e949b1755..0000000000000 --- a/src/components/Learn-Components/LearnInfo/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import InfoWrapper from "./learninfo.style"; -import { Col, Row } from "../../../reusecore/Layout"; - -const filterData = (data, dtype, pgtype) => { - const dataList = []; - - data.map((val) => { - if (pgtype && val["node"]["fields"]["pageType"] === "chapter") { - if (val["node"]["fields"][dtype]) - dataList.push(val["node"]["fields"][dtype]); - } else if (pgtype === "") { - if (val["node"]["fields"][dtype]) - dataList.push(val["node"]["fields"][dtype]); - } - }); - - const newData = [...new Set(dataList)]; - return newData.length; -}; - - -const LearnInfo = ({ courses, chapters, meshes }) => { - - const coursesCount = filterData(courses, "course", ""); - const chaptersCount = filterData(chapters, "chapter", ""); - const meshesCount = filterData(meshes, "section", "chapter"); - - return ( - - - -

{coursesCount} {coursesCount === 1 ? "course" : "courses"}

-

- Cloud-native is about how, not where. These learning paths will teach you the principles, patterns, and technologies that help you build more scalable, changeable, resilient, and manageable software. -

- - -

{chaptersCount} {chaptersCount === 1 ? "chapter" : "chapters"}

-

- Start learning with step-by-step, hands-on, command-line tutorials, videos, and hosted terminal sessions. Actionable examples help you learn to provision, secure, connect, or run any application on any infrastructure. -

- - -

{meshesCount} {meshesCount === 1 ? "technology" : "technologies"}

-

Learn the core principles behind cloud native infrastructure in context of popular CNCF projects and platforms like Kubernetes, AWS, Azure, and GCP.

- - - - ); -}; - -export default LearnInfo; diff --git a/src/components/Learn-Components/LearnInfo/learninfo.style.js b/src/components/Learn-Components/LearnInfo/learninfo.style.js deleted file mode 100644 index b1c88d9936c50..0000000000000 --- a/src/components/Learn-Components/LearnInfo/learninfo.style.js +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; - -const InfoWrapper = styled.div` - - margin: 2rem auto 1rem; - - .info-row { - margin: auto; - .col { - p { - color: ${props => props.theme.whiteSevenToBlackSeven}; - margin: 1rem auto; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - @media screen and (max-width: 992px) { - margin: 1rem auto; - } - @media screen and (max-width: 992px) { - text-align: center; - } - } - } -`; - -export default InfoWrapper; diff --git a/src/sections/Learn-Layer5/index.js b/src/sections/Learn-Layer5/index.js index b4f14c0a4d929..956770e48711c 100644 --- a/src/sections/Learn-Layer5/index.js +++ b/src/sections/Learn-Layer5/index.js @@ -1,54 +1,13 @@ import React from "react"; import { LearnLayer5GridWrapper } from "./learnlayer5.style"; -import { graphql, useStaticQuery } from "gatsby"; import PageHeader from "../../reusecore/PageHeader"; import { Container } from "../../reusecore/Layout"; -import LearnInfo from "../../components/Learn-Components/LearnInfo"; import WhatAwaitsSection from "../../components/Learn-Components/what-await-section"; import Book_Giveaway from "../../assets/images/learn/istio-book-giveaway.webp"; import JoinCommunity from "../Community/Join-community"; import CanvasIllustration from "../../components/Learn-Components/Canvas-Illustration"; const LearnPathsPage = () => { - const data = useStaticQuery(graphql` - query allLearnPath { - coursesCount: allMdx( - filter: { fields: { collection: { eq: "content-learn" } } } - ) { - edges { - node { - fields { - course - } - } - } - } - chaptersCount: allMdx( - filter: { fields: { collection: { eq: "content-learn" } } } - ) { - edges { - node { - fields { - chapter - } - } - } - } - meshesCount: allMdx( - filter: { fields: { collection: { eq: "content-learn" } } } - ) { - edges { - node { - fields { - section - pageType - } - } - } - } - } - `); - return ( @@ -60,11 +19,6 @@ const LearnPathsPage = () => { - Date: Thu, 18 Jun 2026 18:05:06 +0530 Subject: [PATCH 4/4] Refactor CanvasIllustration component: remove unused SVG paths, update node icons, and adjust styles for improved layout and responsiveness Signed-off-by: 11yashiagrawal <11yashiagrawal@gmail.com> --- .../canvas-illustration.style.js | 190 +++++++++--------- .../Canvas-Illustration/index.js | 180 ++++------------- src/sections/Learn-Layer5/index.js | 4 +- .../Learn-Layer5/learnlayer5.style.js | 92 +++++---- .../Learn/LearnPage-Sections/learning-path.js | 3 - 5 files changed, 188 insertions(+), 281 deletions(-) diff --git a/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js index 9f8236ab660b9..16c91408277bf 100644 --- a/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js +++ b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js @@ -1,11 +1,5 @@ import styled, { keyframes } from "styled-components"; -const flowAnimation = keyframes` - to { - stroke-dashoffset: -20; - } -`; - const float1 = keyframes` 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -15px); } @@ -94,47 +88,6 @@ const CanvasIllustrationWrapper = styled.div` } } - /* SVG layer for connections */ - .canvas-svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - pointer-events: none; - - path { - fill: none; - stroke: #00b39f; - stroke-width: 2.5; - stroke-dasharray: 6 6; - animation: ${flowAnimation} 1s linear infinite; - } - - path.muted { - stroke-width: 1.8; - stroke-dasharray: 3 8; - opacity: 0.58; - } - - path.blue-path { - stroke: #326ce5; - } - - path.purple-path { - stroke: #7a4bb5; - } - - path.teal-path { - stroke: #00b39f; - } - - path.yellow-path { - stroke: #ebc017; - } - } - /* Canvas nodes */ .canvas-node { position: absolute; @@ -148,7 +101,7 @@ const CanvasIllustrationWrapper = styled.div` border: 2px solid ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; border-radius: 8px; color: ${(props) => props.theme.whiteToBlack}; - font-size: 1rem; + font-size: 1.05rem; font-weight: 500; box-shadow: 0 4px 12px ${(props) => props.theme.whiteOneToBlackOne}; transition: @@ -158,8 +111,8 @@ const CanvasIllustrationWrapper = styled.div` color 0.6s ease; .node-icon { - width: 32px; - height: 32px; + width: 40px; + height: 40px; margin-bottom: 8px; fill: currentColor; } @@ -168,43 +121,42 @@ const CanvasIllustrationWrapper = styled.div` .canvas-node.compact { padding: 9px 14px; min-width: 96px; - font-size: 0.82rem; + font-size: 0.85rem; background: ${(props) => props.theme.grey212121ToWhite}; .node-icon { - width: 24px; - height: 24px; + width: 30px; + height: 30px; margin-bottom: 5px; } } .canvas-node.mini { - width: 42px; - height: 42px; + width: 44px; + height: 44px; padding: 0; border-radius: 50%; - font-size: 1.15rem; + font-size: 1.2rem; font-weight: 800; background: ${(props) => props.theme.grey111111ToGreyFAFAFA}; .node-icon { - width: 22px; - height: 22px; + width: 26px; + height: 26px; margin-bottom: 0; } } /* Hexagon shape for the center node */ .canvas-node.hexagon { - width: 120px; - height: 120px; + width: 125px; + height: 125px; border-radius: 0; border: none; background: transparent; box-shadow: none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background-color: ${(props) => props.theme.secondaryColor}; - color: ${(props) => props.theme.white}; &:before { content: ""; @@ -220,14 +172,16 @@ const CanvasIllustrationWrapper = styled.div` } .node-icon { + width: 48px; + height: 48px; color: ${(props) => props.theme.secondaryColor}; } } /* Node positioning */ .node-k8s { - top: 20%; - left: 10%; + top: 12%; + left: 12%; border-color: #326ce5; .node-icon { color: #326ce5; @@ -235,23 +189,44 @@ const CanvasIllustrationWrapper = styled.div` } .node-istio { - top: 70%; - left: 20%; + top: 75%; + left: 25%; border-color: #466bb0; .node-icon { color: #466bb0; } } + .node-academy.center-academy { + position: absolute; + top: 50.5%; + left: 45.33%; + transform: translate(-50%, -50%); + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + + .node-icon { + width: 134px; + height: 134px; + opacity: 0.95; + } + } + .node-meshery { - top: 40%; - left: 45%; + top: 56%; + left: 16%; transform: translate(-50%, -50%); + .node-icon { + width: 56px; + height: 56px; + } } .node-gitops { - top: 30%; - left: 70%; + top: 35%; + left: 62%; border-color: #ebc017; .node-icon { color: #ebc017; @@ -259,8 +234,8 @@ const CanvasIllustrationWrapper = styled.div` } .node-workshop { - top: 16%; - left: 62%; + top: 10%; + left: 70%; border-color: #00b39f; .node-icon { color: #00b39f; @@ -268,8 +243,8 @@ const CanvasIllustrationWrapper = styled.div` } .node-certification { - top: 64%; - left: 68%; + top: 78%; + left: 58%; border-color: #7a4bb5; .node-icon { color: #7a4bb5; @@ -277,23 +252,23 @@ const CanvasIllustrationWrapper = styled.div` } .node-quiz { - top: 49%; - left: 29%; + top: 18%; + left: 35%; color: #ffd200; border-color: #ffd200; } .node-check { - top: 53%; - left: 56%; + top: 82.5%; + left: 85%; color: #00b39f; border-color: #00b39f; } .learning-card { position: absolute; - top: 76%; - left: 38%; + top: 60%; + left: 65%; z-index: 4; display: flex; align-items: center; @@ -353,8 +328,8 @@ const CanvasIllustrationWrapper = styled.div` .progress-strip { position: absolute; - top: 8%; - left: 32%; + top: 5%; + left: 40%; z-index: 4; display: flex; align-items: center; @@ -406,6 +381,12 @@ const CanvasIllustrationWrapper = styled.div` align-items: flex-start; animation: ${float1} 4s ease-in-out infinite; + @media (prefers-reduced-motion: reduce) { + .cursor { + animation: none; + } + } + svg { width: 20px; height: 20px; @@ -428,8 +409,8 @@ const CanvasIllustrationWrapper = styled.div` } .cursor-1 { - top: 15%; - left: 40%; + top: 12%; + left: 55%; svg path { fill: #7a4bb5; stroke: white; @@ -442,7 +423,7 @@ const CanvasIllustrationWrapper = styled.div` .cursor-2 { top: 65%; - left: 60%; + left: 25%; animation: ${float2} 5s ease-in-out infinite; svg path { fill: #e6522c; @@ -454,11 +435,16 @@ const CanvasIllustrationWrapper = styled.div` } } - /* Comment block */ + @media (prefers-reduced-motion: reduce) { + .cursor-2 { + animation: none; + } + } + .comment-block { position: absolute; - top: 25%; - left: 55%; + top: 30%; + left: 74%; z-index: 5; background: ${(props) => props.theme.saffronColor}; color: ${(props) => props.theme.black}; @@ -499,6 +485,10 @@ const CanvasIllustrationWrapper = styled.div` width: 90px; height: 90px; } + .node-academy.center-academy .node-icon { + width: 100px; + height: 100px; + } .canvas-node.compact { min-width: 82px; padding: 7px 10px; @@ -522,25 +512,33 @@ const CanvasIllustrationWrapper = styled.div` } @media (max-width: 500px) { - .node-gitops { - top: 70%; - left: 70%; - } .node-k8s { top: 15%; left: 10%; } + .node-istio { + top: 75%; + left: 30%; + } + .node-meshery { + top: 58%; + left: 18%; + } + .node-gitops { + top: 40%; + left: 80%; + } .cursor-1 { - top: 10%; + top: 15%; left: 55%; } .node-workshop { - top: 14%; - left: 62%; + top: 15%; + left: 65%; } .node-certification { - top: 60%; - left: 58%; + top: 70%; + left: 73%; } .node-quiz, .node-check, diff --git a/src/components/Learn-Components/Canvas-Illustration/index.js b/src/components/Learn-Components/Canvas-Illustration/index.js index 22d071e97235c..44290b2a07978 100644 --- a/src/components/Learn-Components/Canvas-Illustration/index.js +++ b/src/components/Learn-Components/Canvas-Illustration/index.js @@ -1,11 +1,17 @@ import React from "react"; import CanvasIllustrationWrapper from "./canvas-illustration.style"; -import IstioIcon from "../../../assets/images/service-mesh-icons/istio.svg"; +import { ReactComponent as KubernetesIcon } from "../../../assets/images/learning-path/kubernetes-icon.svg"; +import { ReactComponent as ServiceMeshIcon } from "../../../assets/images/learning-path/service-mesh.svg"; +import { ReactComponent as JaegerIcon } from "../../../assets/images/learning-path/jaeger-icon.svg"; +import { ReactComponent as AcademyLogo } from "../../../assets/images/academy/academy-layer5.svg"; +import { ReactComponent as MesheryLogo } from "../../../assets/images/meshery/meshery-logo.svg"; +import BookCover from "../../../assets/images/learn/book-cover.webp"; +import CourseCover from "../../../assets/images/learn/sercice-mesh-course1.webp"; import Button from "../../../reusecore/Button"; const CanvasIllustration = () => { return ( -