Added recognition program section to community page

src/sections/Community/community.style.js

@@ -259,7 +259,114 @@ const CommunitySectionWrapper = styled.div`
             gap: 2rem; 
         }
     }
-
+    .recognition-program {
+    margin-top: 5rem;
+    .recognition-content {
+      display: grid;
+      grid-template-columns: minmax(18.75rem, 40%) 1fr;
+      min-height: 31.25rem;
+      position: relative;
+      gap: 2rem;
+      .badges-section {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .badge-stack {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          max-width: 25rem;
+          .badge-item {
+            position: absolute;
+            width: 11.25rem;
+            height: 11.25rem;
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+            img {
+              width: 140%;
+              height: 140%;
+              object-fit: contain;
+              filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.2));
+            }
+            &:nth-child(1) {
+              top: 0;
+              left: 0;
+              z-index: 3;
+            }
+            &:nth-child(2) {
+              top: 5.625rem;
+              left: 5.625rem;
+              z-index: 2;
+            }
+            &:nth-child(3) {
+              top: 11.25rem;
+              left: 11.25rem;
+              z-index: 1;
+            }
+          }
+        }
+      }
+      .content {
+        h1.subtitle {
+          margin: 0.5rem auto;
+          font-size: 1.75rem;
+          font-weight: 500;
+          color: ${(props) => props.theme.primaryColor};
+        }
+      }
+    }
+    @media (max-width: 62rem) {
+      .recognition-content {
+        grid-template-columns: 1fr;
+        .badges-section {
+          min-height: 18.75rem;
+          padding: 1.25rem;
+          .badge-stack {
+            height: 16.25rem;
+            .badge-item {
+              width: 9.375rem;
+              height: 9.375rem;
+              img {
+                width: 120%;
+                height: 120%;
+              }
+              &:nth-child(1) {
+                top: 0;
+                left: calc(50% - 3.75rem);
+              }
+              &:nth-child(2) {
+                top: 8.75rem;
+                left: calc(50% - 7.5rem);
+              }
+              &:nth-child(3) {
+                top: 8.75rem;
+                left: calc(50% + 0rem);
+              }
+            }
+          }
+        }
+      }
+    }
+    @media (max-width: 30rem) {
+      .recognition-content {
+        .badges-section .badge-stack .badge-item {
+          width: 7.5rem;
+          height: 7.5rem;
+          &:nth-child(1) {
+            left: calc(50% - 3.125rem);
+          }
+          &:nth-child(2) {
+            top: 6.875rem;
+            left: calc(50% - 6.25rem);
+          }
+          &:nth-child(3) {
+            top: 6.875rem;
+            left: calc(50% + 0rem);
+          }
+        }
+      }
+    }
+  }
 `;
 
 export default CommunitySectionWrapper;

src/sections/Community/index.js

@@ -105,6 +105,57 @@ const CommunityPage = () => {
             </Col>
           </Row>
         </div>
+        <Container>
+          <Row className="recognition-program meshmate">
+            <div className="recognition-content">
+              <div className="badges-section">
+                <div className="badge-stack">
+                  <div className="badge-item">
+                    <img
+                      src="https://badges.layer5.io/assets/badges/docker-captain/docker-captain.png"
+                      alt="Docker Captain Badge"
+                    />
+                  </div>
+                  <div className="badge-item">
+                    <img
+                      src="https://badges.layer5.io/assets/badges/cncf-ambassador/cncf-ambassador.png"
+                      alt="CNCF Ambassador Badge"
+                    />
+                  </div>
+                  <div className="badge-item">
+                    <img
+                      src="https://badges.layer5.io/assets/badges/meshery/meshery.png"
+                      alt="Meshery Badge"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <Col className="content">
+                <h1 className="subtitle">Your Achievements, Recognized</h1>
+                <h1>Layer5 Recognition Program</h1>
+                <p>
+                  The <strong>Layer5 Recognition Program</strong> is more than a
+                  badge. It's a testament to your skills, dedication, and impact
+                  in the cloud-native ecosystem. Every contribution – big or
+                  small – is a step toward earning a badge that tells your
+                  unique story.
+                </p>
+                <p>
+                  Showcase your journey, connect with peers, and let the world
+                  see the milestones you've achieved. Whether you're solving
+                  challenges, sharing knowledge, or coding solutions, there's a
+                  badge waiting for you.
+                </p>
+                <Button
+                  $primary
+                  title="Explore Badges Now"
+                  $url="https://badges.layer5.io"
+                />
+              </Col>
+            </div>
+          </Row>
+        </Container>
         <Container>
           <Row className="meshmate">
             <Col className="content" $sm={12} $lg={6}>