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..16c91408277bf --- /dev/null +++ b/src/components/Learn-Components/Canvas-Illustration/canvas-illustration.style.js @@ -0,0 +1,551 @@ +import styled, { keyframes } from "styled-components"; + +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; + color: ${(props) => props.theme.whiteToBlack}; + + @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( + ${(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%; + 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; + color: ${(props) => props.theme.whiteToBlack}; + } + + p { + font-size: 1.2rem; + margin-bottom: 2.5rem; + opacity: 0.8; + line-height: 1.6; + color: ${(props) => props.theme.greyA0AAAAToGrey666666}; + } + } + + /* Canvas nodes */ + .canvas-node { + position: absolute; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12px 24px; + background: ${(props) => props.theme.grey212121ToWhite}; + border: 2px solid ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; + border-radius: 8px; + color: ${(props) => props.theme.whiteToBlack}; + font-size: 1.05rem; + font-weight: 500; + 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: 40px; + height: 40px; + margin-bottom: 8px; + fill: currentColor; + } + } + + .canvas-node.compact { + padding: 9px 14px; + min-width: 96px; + font-size: 0.85rem; + background: ${(props) => props.theme.grey212121ToWhite}; + + .node-icon { + width: 30px; + height: 30px; + margin-bottom: 5px; + } + } + + .canvas-node.mini { + width: 44px; + height: 44px; + padding: 0; + border-radius: 50%; + font-size: 1.2rem; + font-weight: 800; + background: ${(props) => props.theme.grey111111ToGreyFAFAFA}; + + .node-icon { + width: 26px; + height: 26px; + margin-bottom: 0; + } + } + + /* Hexagon shape for the center node */ + .canvas-node.hexagon { + 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}; + + &:before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + 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 { + width: 48px; + height: 48px; + color: ${(props) => props.theme.secondaryColor}; + } + } + + /* Node positioning */ + .node-k8s { + top: 12%; + left: 12%; + border-color: #326ce5; + .node-icon { + color: #326ce5; + } + } + + .node-istio { + 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: 56%; + left: 16%; + transform: translate(-50%, -50%); + .node-icon { + width: 56px; + height: 56px; + } + } + + .node-gitops { + top: 35%; + left: 62%; + border-color: #ebc017; + .node-icon { + color: #ebc017; + } + } + + .node-workshop { + top: 10%; + left: 70%; + border-color: #00b39f; + .node-icon { + color: #00b39f; + } + } + + .node-certification { + top: 78%; + left: 58%; + border-color: #7a4bb5; + .node-icon { + color: #7a4bb5; + } + } + + .node-quiz { + top: 18%; + left: 35%; + color: #ffd200; + border-color: #ffd200; + } + + .node-check { + top: 82.5%; + left: 85%; + color: #00b39f; + border-color: #00b39f; + } + + .learning-card { + position: absolute; + top: 60%; + left: 65%; + z-index: 4; + display: flex; + align-items: center; + gap: 10px; + max-width: 240px; + padding: 12px 14px; + background: ${(props) => props.theme.grey212121ToWhite}; + border: 1px solid ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; + border-radius: 8px; + 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; + place-items: center; + flex: 0 0 36px; + width: 36px; + height: 36px; + border-radius: 8px; + background: ${(props) => props.theme.grey323232ToGreenF3FFFD}; + color: ${(props) => props.theme.secondaryColor}; + transition: + background-color 0.6s ease, + color 0.6s ease; + } + + 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: ${(props) => props.theme.greyA0AAAAToGrey666666}; + font-weight: 700; + } + + strong { + font-size: 0.9rem; + line-height: 1.25; + } + } + + .progress-strip { + position: absolute; + top: 5%; + left: 40%; + z-index: 4; + display: flex; + align-items: center; + gap: 6px; + padding: 7px 10px; + background: ${(props) => props.theme.grey212121ToWhite}; + border: 1px solid ${(props) => props.theme.whiteOneToBlackOne}; + border-radius: 999px; + 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 { + display: grid; + place-items: center; + width: 22px; + height: 22px; + border: 1px solid ${(props) => props.theme.whiteOneFiveToBlackOneFive}; + border-radius: 50%; + 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: ${(props) => props.theme.secondaryColor}; + border-color: ${(props) => props.theme.secondaryColor}; + color: ${(props) => props.theme.white}; + } + } + + .progress-line { + width: 28px; + height: 2px; + background: ${(props) => props.theme.whiteOneFiveToBlackOneFive}; + } + + /* Collaborative Cursors */ + .cursor { + position: absolute; + z-index: 10; + display: flex; + align-items: flex-start; + animation: ${float1} 4s ease-in-out infinite; + + @media (prefers-reduced-motion: reduce) { + .cursor { + animation: none; + } + } + + svg { + width: 20px; + height: 20px; + filter: drop-shadow( + 0px 2px 4px ${(props) => props.theme.whiteFourToBlackFour} + ); + } + + .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 ${(props) => props.theme.whiteOneToBlackOne}; + } + } + + .cursor-1 { + top: 12%; + left: 55%; + svg path { + fill: #7a4bb5; + stroke: white; + stroke-width: 1.5; + } + .cursor-label { + background: #7a4bb5; + } + } + + .cursor-2 { + top: 65%; + left: 25%; + animation: ${float2} 5s ease-in-out infinite; + svg path { + fill: #e6522c; + stroke: white; + stroke-width: 1.5; + } + .cursor-label { + background: #e6522c; + } + } + + @media (prefers-reduced-motion: reduce) { + .cursor-2 { + animation: none; + } + } + + .comment-block { + position: absolute; + top: 30%; + left: 74%; + z-index: 5; + 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 ${(props) => props.theme.whiteOneToBlackOne}; + animation: ${float1} 6s ease-in-out infinite; + transition: + background-color 0.6s ease, + box-shadow 0.6s ease; + + &:after { + content: ""; + position: absolute; + bottom: -8px; + left: 20px; + border-width: 8px 8px 0; + border-style: solid; + border-color: ${(props) => props.theme.saffronColor} transparent + transparent transparent; + transition: border-color 0.6s ease; + } + } + + @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; + } + .node-academy.center-academy .node-icon { + width: 100px; + height: 100px; + } + .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-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: 15%; + left: 55%; + } + .node-workshop { + top: 15%; + left: 65%; + } + .node-certification { + top: 70%; + left: 73%; + } + .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..44290b2a07978 --- /dev/null +++ b/src/components/Learn-Components/Canvas-Illustration/index.js @@ -0,0 +1,144 @@ +import React from "react"; +import CanvasIllustrationWrapper from "./canvas-illustration.style"; +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 ( + +
+

Elevate Your Cloud Native Expertise

+

+ Master Kubernetes, service meshes, and GitOps with structured, + hands-on learning paths. Design, manage, and collaborate seamlessly. +

+
+
+
+ + Kubernetes +
+ +
+ + Service Mesh +
+ +
+ +
+ +
+ + Meshery +
+ +
+ + Jaeger +
+ +
+ Workshop + Workshops +
+ +
+ Certify + Certify +
+ + + + + +
+
+ Course +
+
+ Learning path + Cloud native foundations +
+
+ + + +
+ + + +
Ryan
+
+ +
+ + + +
Suzan
+
+ +
Concept unlocked
+
+ + ); +}; + +export default CanvasIllustration; 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 41033afac736f..da6708edaa03d 100644 --- a/src/sections/Learn-Layer5/index.js +++ b/src/sections/Learn-Layer5/index.js @@ -1,98 +1,13 @@ 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 LearnInfo from "../../components/Learn-Components/LearnInfo"; +import { Container } from "../../reusecore/Layout"; 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" } } } - ) { - 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 - } - } - } - } - 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,29 +16,22 @@ 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-Layer5/learnlayer5.style.js b/src/sections/Learn-Layer5/learnlayer5.style.js index 0793cc3a1b34e..945d373d6da78 100644 --- a/src/sections/Learn-Layer5/learnlayer5.style.js +++ b/src/sections/Learn-Layer5/learnlayer5.style.js @@ -1,53 +1,59 @@ import styled from "styled-components"; export const LearnLayer5GridWrapper = styled.div` + margin: 3rem auto 6rem; - margin: 3rem auto 6rem; + .page-header { + margin: 0rem auto 0.5rem !important; + } + .learn-subtitle { + text-align: center; + } + .learning-paths-illustration { + transform: translateX(2.5rem); + } - .page-header { - margin: 0rem auto 0.5rem !important; + .learning-path-cards { + margin: auto; + justify-content: center; + padding: 6rem 0; + flex-wrap: wrap; + } + .service-mesh-patterns { + display: flex; + margin: auto; + padding: 3rem; + align-items: center; + + button { + margin-top: 1.25rem; } - .learn-subtitle { - text-align: center; + } + .service-mesh-patterns_text-and_button { + h1 { + margin-bottom: 1rem; } - - .learning-path-cards{ - margin: auto; - justify-content: center; - padding: 6rem 0; - flex-wrap: wrap; + p { + margin: auto; + max-width: 42rem; + } + } + @media (max-width: 992px) { + .learning-paths-illustration { + transform: none; + } + } + @media (max-width: 768px) { + .service-mesh-patterns { + flex-direction: column; + justify-content: center; + padding: 3rem 1rem; + text-align: center; } - .service-mesh-patterns{ - display: flex; - margin: auto; - padding: 3rem; - align-items: center; - - button{ - margin-top: 1.25rem; - } - } - .service-mesh-patterns_text-and_button{ - h1{ - margin-bottom: 1rem; - } - p{ - margin: auto; - max-width: 42rem; - } - } - @media(max-width: 768px) - { - .service-mesh-patterns{ - flex-direction: column; - justify-content: center; - padding: 3rem 1rem; - text-align: center; - } - } - @media(max-width:500px){ - .learning-path-cards{ - padding: 6rem 2rem; - } + } + @media (max-width: 500px) { + .learning-path-cards { + padding: 6rem 2rem; } + } `; diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js index ca017c949b90f..5fbc8ea27a01a 100644 --- a/src/sections/Learn/LearnPage-Sections/learning-path.js +++ b/src/sections/Learn/LearnPage-Sections/learning-path.js @@ -1,85 +1,22 @@ 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; - } + 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 +24,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;