Merge pull request #6817 from Vincamine/w-devrel

feat: Enhance DevRel Platform Academy section with interactive slider and navigation links

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

@@ -318,17 +318,22 @@ const DevrelContent = () => {
               image={RutkIkegahImg}/>
           </Row>
           <Row className="devrel">
-            <Col $md={6} className="devrel-detail recognition-section">
+            <Col $md={6} className="devrel-detail">
               <h2 className="heading">
-              Recognition Program
+                Turn Knowledge into Credentials
               </h2>
               <ul className="caption">
-                <li><b>Achievement <a href="https://badges.layer5.io">Badges</a>:</b> Earn badges for key milestones, like streaming logs from a Kubernetes Pod for the first time.</li>
-                <li><b>Leaderboard Visibility:</b> Participate in challenges, compete on leaderboards, and stand out in the community.</li>
-                <li><b>Featured Mentions:</b> Get recognized when your content becomes popular, with shoutouts from the project.</li>
+                <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</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>Community Contribution:</b> Contribute new tutorials, challenges, and courses to Academy, growing your professional influence in the cloud-native ecosystem.</li>
               </ul>
             </Col>
-
+            <Col $md={6} className="devrel-image">
+              <PictureSlider images="academy" />
+            </Col>
+          </Row>
+          <Row className="devrel">
             <div className="recognition-content">
               <div className="badges-section">
                 <div className="badge-stack">
@@ -354,6 +359,16 @@ const DevrelContent = () => {
                 </div>
               </div>
             </div>
+            <Col $md={6} className="devrel-detail recognition-section">
+              <h2 className="heading">
+              Recognition Program
+              </h2>
+              <ul className="caption">
+                <li><b>Achievement <a href="https://badges.layer5.io">Badges</a>:</b> Earn badges for key milestones, like streaming logs from a Kubernetes Pod for the first time.</li>
+                <li><b>Leaderboard Visibility:</b> Participate in challenges, compete on leaderboards, and stand out in the community.</li>
+                <li><b>Featured Mentions:</b> Get recognized when your content becomes popular, with shoutouts from the project.</li>
+              </ul>
+            </Col>
           </Row>
           <Row className="devrel">
             <InlineQuotes

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,