Skip to content

Commit 9451ca0

Browse files
leecalcoteleecalcote
authored
Merge pull request #6833 from ARYANSHAH1567/aryanshah/add_academy_content
Add content for academy page
2 parents 196183b + 6cce84a commit 9451ca0

9 files changed

Lines changed: 255 additions & 1 deletion

File tree

‎src/components/Academy/Features-Section/AcademyFeaturesCarousel.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
import PopOutCard from "../../PopOutCardCarousel";
4+
5+
import Levels from "./academy-catalog.gif";
6+
import Challenges from "./challenges.png";
7+
import Badges from "./badges.png";
8+
import Track from "./track.png";
9+
10+
const CONTENT = [
11+
{
12+
title: "CNCF Structured Learning Paths",
13+
img: Levels,
14+
description:
15+
"Comprehensive CNCF-aligned learning paths designed for different skill levels — from beginner to advanced. Master Kubernetes and cloud native technologies through hands-on experience.",
16+
},
17+
{
18+
title: "Labs and Real-world Challenges",
19+
img: Challenges,
20+
description:
21+
"Hands-on labs and challenges on live Kubernetes clusters. Practice real-world scenarios, earn points, and climb the leaderboard as you sharpen your cloud native skills.",
22+
},
23+
{
24+
title: "Earn Certifications and Badges",
25+
img: Badges,
26+
description:
27+
"Validate your skills with recognized certifications and badges. Build credibility, celebrate your achievements, and showcase your cloud native expertise.",
28+
},
29+
{
30+
title: "Track Your Learning Journey",
31+
img: Track,
32+
description:
33+
"Stay motivated with clear progress tracking as you move forward. Keep an eye on your completed labs, challenges, and milestones, and see how your cloud native skills steadily grow step by step.",
34+
}
35+
];
36+
37+
const DivWrapper = styled.div`
38+
width: 100%;
39+
padding-block: 4%;
40+
display: flex;
41+
flex-direction: column;
42+
font-size: 1.125rem;
43+
align-items: center;
44+
position: relative;
45+
margin-bottom: 10%;
46+
47+
.left {
48+
text-align: center;
49+
margin-bottom: 4rem;
50+
padding-inline: 6rem;
51+
}
52+
53+
.right {
54+
position: relative;
55+
width: 100%;
56+
height: 450px;
57+
display: flex;
58+
justify-content: center;
59+
}
60+
61+
.highlight {
62+
background: linear-gradient(135deg, #00b39f, #00d3a9);
63+
-webkit-background-clip: text;
64+
-webkit-text-fill-color: transparent;
65+
background-clip: text;
66+
}
67+
68+
img {
69+
border-radius: 10px;
70+
}
71+
72+
@media only screen and (max-width: 999px) {
73+
padding-block: 3rem;
74+
75+
.left {
76+
margin-bottom: 1rem;
77+
}
78+
79+
.text h3 {
80+
padding-top: 1.5rem;
81+
padding-bottom: 0;
82+
}
83+
84+
}
85+
86+
@media only screen and (max-width: 767px) {
87+
display: none;
88+
}
89+
`;
90+
91+
export default function AcademyFeatureCarousel() {
92+
const [cardIndices, setCardIndices] = useState([
93+
...Array(CONTENT.length).keys(),
94+
]);
95+
96+
const handleclick = () => {
97+
const length = CONTENT.length;
98+
const newIndices = cardIndices.map((index) => {
99+
if (index === 0) return length - 1;
100+
else return index - 1;
101+
});
102+
setCardIndices(newIndices);
103+
};
104+
105+
return (
106+
<DivWrapper>
107+
<div className="left">
108+
<h1>Unlock Your <span className="highlight">Cloud Native</span> Journey</h1>
109+
</div>
110+
<div className="right">
111+
{CONTENT.map((content, i) => (
112+
<PopOutCard
113+
key={i}
114+
index={cardIndices[i]}
115+
active={cardIndices[i] === 0}
116+
onClick={() => handleclick(i)}
117+
style={{ height: "content" }}
118+
>
119+
<div className="text">
120+
<h3>{content.title}</h3>
121+
<p>{content.description}</p>
122+
</div>
123+
<div className="img">
124+
<img
125+
src={content.img}
126+
alt={content.title}
127+
/>
128+
</div>
129+
</PopOutCard>
130+
))}
131+
</div>
132+
</DivWrapper>
133+
);
134+
}

‎src/components/Academy/Features-Section/AcademyFeaturesMobileSwiper.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from "react";
2+
import { Swiper, SwiperSlide } from "swiper/react";
3+
import SwiperContainer from "../../../sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js";
4+
import "swiper/css";
5+
import "swiper/css/effect-cards";
6+
import { EffectCards, Pagination, Navigation, Autoplay } from "swiper/modules";
7+
import styled from "styled-components";
8+
import Levels from "./academy-catalog.gif";
9+
import Challenges from "./challenges.png";
10+
import Badges from "./badges.png";
11+
import Track from "./track.png";
12+
13+
const CONTENT = [
14+
{
15+
title: "CNCF Structured Learning Paths",
16+
img: Levels,
17+
description:
18+
"Comprehensive CNCF-aligned learning paths designed for different skill levels — from beginner to advanced. Master Kubernetes and cloud native technologies through hands-on experience.",
19+
gradient: "one",
20+
},
21+
{
22+
title: "Labs and Real-world Challenges",
23+
img: Challenges,
24+
description:
25+
"Hands-on labs and challenges on live Kubernetes clusters. Practice real-world scenarios, earn points, and climb the leaderboard as you sharpen your cloud native skills.",
26+
gradient: "two",
27+
},
28+
{
29+
title: "Earn Certifications and Badges",
30+
img: Badges,
31+
description:
32+
"Validate your skills with recognized certifications and badges. Build credibility, celebrate your achievements, and showcase your cloud native expertise.",
33+
gradient: "three",
34+
},
35+
{
36+
title: "Track Your Learning Journey",
37+
img: Track,
38+
description:
39+
"Stay motivated with clear progress tracking as you move forward. Keep an eye on your completed labs, challenges, and milestones, and see how your cloud native skills steadily grow step by step.",
40+
}
41+
];
42+
43+
const DivWrapper = styled.div`
44+
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
justify-content: center;
49+
50+
.highlight {
51+
background: linear-gradient(135deg, #00b39f, #00d3a9);
52+
-webkit-background-clip: text;
53+
-webkit-text-fill-color: transparent;
54+
background-clip: text;
55+
}
56+
57+
img {
58+
max-height: 50%;
59+
}
60+
61+
h2 {
62+
font-size: 1.5rem;
63+
text-align: center;
64+
padding-inline: 1rem;
65+
}
66+
67+
`;
68+
69+
70+
const Card = ({ title, description, img }) => {
71+
return (
72+
<div className="card">
73+
<h2>{title}</h2>
74+
<p>{description}</p>
75+
<img style={{ border: "1px solid #444444", borderRadius: "10px", height: "50%" }} src={img} alt="" />
76+
</div>
77+
);
78+
};
79+
80+
const AcademyMobileSwiper = () => {
81+
return (
82+
<DivWrapper>
83+
<SwiperContainer style={{ marginBottom: "10%" }}>
84+
<h2 style={{ marginBottom: "2rem" }}>Unlock Your <span className="highlight">Cloud Native</span> Journey</h2>
85+
<Swiper
86+
autoplay={{
87+
delay: 2000,
88+
disableOnInteraction: true,
89+
}}
90+
scrollbar={{
91+
draggable: true,
92+
}}
93+
effect={"cards"}
94+
grabCursor={true}
95+
modules={[EffectCards, Pagination, Navigation, Autoplay]}
96+
navigation={false}
97+
className="mySwiper"
98+
>
99+
{CONTENT.map(({ title, description, img, gradient }) => (
100+
<SwiperSlide key={title}>
101+
<div className={`card ${gradient}`}>
102+
<Card title={title} description={description} img={img} />
103+
</div>
104+
</SwiperSlide>
105+
))}
106+
</Swiper>
107+
</SwiperContainer>
108+
</DivWrapper>
109+
);
110+
};
111+
112+
export default AcademyMobileSwiper;

‎src/components/Academy/Features-Section/academy-catalog.gif‎

7.53 MB
Loading

‎src/components/Academy/Features-Section/badges.png‎

161 KB
Loading

‎src/components/Academy/Features-Section/challenges.png‎

235 KB
Loading

‎src/components/Academy/Features-Section/track.png‎

170 KB
Loading

‎src/components/PopOutCardCarousel/PopOutCardCarousel.style.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const PopOutCardWrapper = styled.div`
122122
flex-direction: column;
123123
text-align: center;
124124
width: 300px;
125-
height: 470px;
125+
height: max-content;
126126
.img {
127127
margin-inline: auto;
128128
max-width: 100%;

‎src/pages/learn/academy.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@ import HeroSection from "../../components/Academy/Hero-Section/HeroSection";
33
import LearnerSection from "../../components/Academy/Learners-Section/LearnerSection";
44
import EnterpriseSection from "../../components/Academy/Enterprise-Section/EnterpriseSection";
55
import SEO from "../../components/seo";
6+
import AcademyMobileSwiper from "../../components/Academy/Features-Section/AcademyFeaturesMobileSwiper";
7+
import AcademyFeatureCarousel from "../../components/Academy/Features-Section/AcademyFeaturesCarousel";
68

79
const AcademySection = () => {
810

911
return (
1012
<div className="academy-page">
1113
<HeroSection />
14+
<AcademyMobileSwiper />
15+
<AcademyFeatureCarousel />
1216
<LearnerSection />
1317
<EnterpriseSection />
1418
</div>

‎src/pages/products/academy/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from "react";
22
import HeroSection from "../../../components/Academy/Hero-Section/HeroSection";
33
import LearnerSection from "../../../components/Academy/Learners-Section/LearnerSection";
44
import EnterpriseSection from "../../../components/Academy/Enterprise-Section/EnterpriseSection";
5+
import AcademyMobileSwiper from "../../../components/Academy/Features-Section/AcademyFeaturesMobileSwiper";
6+
import AcademyFeatureCarousel from "../../../components/Academy/Features-Section/AcademyFeaturesCarousel";
57

68
import SEO from "../../../components/seo";
79

@@ -10,6 +12,8 @@ const AcademySection = () => {
1012
return (
1113
<div className="academy-page">
1214
<HeroSection />
15+
<AcademyMobileSwiper />
16+
<AcademyFeatureCarousel />
1317
<LearnerSection />
1418
<EnterpriseSection />
1519
</div>

0 commit comments

Comments
 (0)