Skip to content

Commit 9e092da

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Add content for academy page
Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
1 parent 41be388 commit 9e092da

9 files changed

Lines changed: 240 additions & 2 deletions

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. Follow your completed labs and challenges, and watch your cloud native skills 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: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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. Follow your completed labs and challenges, and watch your cloud native skills grow step by step.",
40+
gradient: "four",
41+
},
42+
];
43+
44+
const DivWrapper = styled.div`
45+
.highlight {
46+
background: linear-gradient(135deg, #00b39f, #00d3a9);
47+
-webkit-background-clip: text;
48+
-webkit-text-fill-color: transparent;
49+
background-clip: text;
50+
}
51+
`;
52+
53+
54+
const Card = ({ title, description, img }) => {
55+
return (
56+
<div className="card">
57+
<h2>{title}</h2>
58+
<p>{description}</p>
59+
<img style={{ border: "1px solid #444444", borderRadius: "10px" }} src={img} alt="" />
60+
</div>
61+
);
62+
};
63+
64+
const AcademyMobileSwiper = () => {
65+
return (
66+
<DivWrapper>
67+
<SwiperContainer style={{ marginBottom: "10%" }}>
68+
<h2>Unlock Your <span className="highlight">Cloud Native</span> Journey</h2>
69+
<Swiper
70+
autoplay={{
71+
delay: 2000,
72+
disableOnInteraction: true,
73+
}}
74+
scrollbar={{
75+
draggable: true,
76+
}}
77+
effect={"cards"}
78+
grabCursor={true}
79+
modules={[EffectCards, Pagination, Navigation, Autoplay]}
80+
navigation={false}
81+
className="mySwiper"
82+
>
83+
{CONTENT.map(({ title, description, img, gradient }) => (
84+
<SwiperSlide key={title}>
85+
<div className={`card ${gradient}`}>
86+
<Card title={title} description={description} img={img} />
87+
</div>
88+
</SwiperSlide>
89+
))}
90+
</Swiper>
91+
</SwiperContainer>
92+
</DivWrapper>
93+
);
94+
};
95+
96+
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: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ 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 (
10-
<div className="academy-page">
12+
<div className="academy-page" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
1113
<HeroSection />
1214
<LearnerSection />
1315
<EnterpriseSection />
16+
<AcademyMobileSwiper />
17+
<AcademyFeatureCarousel />
1418
</div>
1519
);
1620
};

‎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

@@ -12,6 +14,8 @@ const AcademySection = () => {
1214
<HeroSection />
1315
<LearnerSection />
1416
<EnterpriseSection />
17+
<AcademyMobileSwiper />
18+
<AcademyFeatureCarousel />
1519
</div>
1620
);
1721
};

0 commit comments

Comments
 (0)