academy section for devrel page

Signed-off-by: Wyllie Fang <wylliefang@gmail.com>

Author: Vincamine

src/reusecore/Button/index.js

@@ -15,7 +15,7 @@ const Button = ({
 
   const initalButton =
     <BtnStyle
-      className={addClasses.join(" ")}{...props}
+      className={addClasses.join(" ")} {...props}
       onClick={props.onClick}>
       {children}
       {props.icon ? <img src={props.icon} alt={props.title} /> : <> </>}

src/sections/Devrel-platform/content.js

@@ -254,6 +254,22 @@ const DevrelContent = () => {
     <>
       <DevrelContentWrapper>
         <Container className="devrel-container">
+          <Row className="devrel">
+            <Col $md={6} className="devrel-detail">
+              <h2 className="heading">
+                Turn Knowledge into Credentials
+              </h2>
+              <ul className="caption">
+                <li><b>Guided Learning Journeys:</b> Advance your cloud native skills through <a href="https://cloud.layer5.io/academy" target="_blank" rel="noopener noreferrer">Layer5 Academy</a>, offering structured paths that combine theory with hands-on labs.</li>
+                <li><b>Interactive Challenges:</b> Strengthen your understanding in real-world scenarios with Academy challenges, powered by <a href="https://meshery.layer5.io/extension/meshmap" target="_blank" rel="noopener noreferrer">Meshery Playground</a>.</li>
+                <li><b>Earn Recognition:</b> Achieve Layer5 Academy certifications and badges, and showcase them directly on your DevRel profile and leaderboards.</li>
+                <li><b>Contribute Back:</b> Share your own tutorials or challenges into Academy, helping others learn while building your reputation.</li>
+              </ul>
+            </Col>
+            <Col $md={6} className="devrel-image">
+              <PictureSlider images="academy" />
+            </Col>
+          </Row>
           <Row className="devrel">
             <Col $md={6} className="devrel-image">
               <div className="image-wrapper">

src/sections/Devrel-platform/images/academy-1.png

@@ -6,6 +6,13 @@ import ChallangePNG from "./images/challange_mac.png";
 import DesignPNG from "./images/design_mac.png";
 import TutorialPNG from "./images/tutorial_mac.png";
 
+import Academy1PNG from "./images/academy-1.png";
+import Academy2PNG from "./images/academy-2.png";
+import Academy3PNG from "./images/academy-3.png";
+import Academy4PNG from "./images/academy-4.png";
+
+
+
 const PictureSliderWrapper = styled.div`
   width: 100%;
   max-width: 900px;
@@ -51,8 +58,10 @@ const PictureSliderWrapper = styled.div`
   }
 `;
 
-const PictureSlider = () => {
-  const data = [ChallangePNG, TutorialPNG, DesignPNG];
+const PictureSlider = ({ images }) => {
+  const defaultData = [ChallangePNG, TutorialPNG, DesignPNG];
+  const academyData = [Academy1PNG, Academy2PNG, Academy3PNG, Academy4PNG];
+  const data = images === "academy" ? academyData : (images || defaultData);
 
   const settings = {
     dots: false,