Merge pull request #4770 from layer5io/badge-blog

Update badge blog

src/collections/blog/2023/2023-08-14-layer5-badge-program/blog.style.js

@@ -18,7 +18,7 @@ export const Blog = styled.div`
         padding-top: 0.8rem;
       }
       > img {
-        max-width: 150px;
+        max-width: 225px;
       }
     }
 

src/collections/blog/2023/2023-08-14-layer5-badge-program/index.mdx

@@ -3,8 +3,8 @@ title: Layer5 Recognition Program
 subtitle: Showcasing Your Achievements as a User and a Contributor
 date: 2023-08-14 08:00:00 -0530
 author: Layer5 Team
-thumbnail: ./recognition-banner.png
-darkthumbnail: ./recognition-banner.png
+thumbnail: ./recognition-banner.webp
+darkthumbnail: ./recognition-banner.webp
 description: "Showcasing Your Achievements as a User and a Contributor"
 type: Blog
 category: Community
@@ -19,8 +19,7 @@ import { Link } from "gatsby";
 import Button from "../../../../reusecore/Button";
 import Blockquote from "../../../../reusecore/Blockquote";
 import { Blog } from "./blog.style";
-import BadgesGH from "./badges-modal.jpeg"
-import { Playfield } from "./layer5-community-playfield.webp";
+import BadgesGH from "./badges-modal.webp"
 
 <BlogWrapper>
 <Blog>
@@ -47,15 +46,15 @@ It does not matter if you are an experienced developer, a newbie figuring out yo
 
 ### How Can You Earn Badges?
 
-<i>Project Badges</i> are assigned by the admin to the user when a user contributes to a particular project. Achievement Badges are the badges that are assigned automatically when a user completes a task like sharing a design, creating a design for the first time, etc.
+<p><i>Project Badges</i> are assigned by the admin to the user when a user contributes to a particular project. Achievement Badges are the badges that are assigned automatically when a user completes a task like sharing a design, creating a design for the first time, etc.</p>
 
 
 ### How can I Share My Badge On My Profile
 
-To share your badges on other social profiles, utilize the provided embedded code and direct share functionality. Access your badges from the Layer5 Cloud profile badges section, and then use it to seamlessly post your achievements on social media platforms. This enables you to showcase your Layer5 contributions and milestones to a wider audience.
+<p>To share your badges on other social profiles, utilize the provided embedded code and direct share functionality. Access your badges from the Layer5 Cloud profile badges section, and then use it to seamlessly post your achievements on social media platforms. This enables you to showcase your Layer5 contributions and milestones to a wider audience.</p>
 
 <img src={BadgesGH} /> 
-
+<p />
 <h2 align="center">Layer5 Badges</h2>
 
 <h3>Achievement Badges</h3>
@@ -64,7 +63,7 @@ To share your badges on other social profiles, utilize the provided embedded cod
   <img src="https://badges.layer5.io/assets/badges/bring-a-buddy/bring-a-buddy.svg" /><span>Bring a Buddy</span> <p>This badge is awarded to the users who invite someone to Layer5 cloud.</p>
 </div>
 <div>
-    <img src="https://badges.layer5.io/assets/badges/first-share/first-share/first-share.svg" />
+    <img src="https://badges.layer5.io/assets/badges/first-share/first-share.svg" />
     <span>Sharing is Caring</span> <p>This badge is awarded upon first-time sharing one of your designs.</p>
 </div>
 <div>
@@ -88,7 +87,7 @@ To share your badges on other social profiles, utilize the provided embedded cod
 </div>
 </div>
 
-<h3>Project</h3>
+<h3>Project Badges</h3>
 
 <div class="badge-grid">
 <div>
@@ -148,8 +147,12 @@ To share your badges on other social profiles, utilize the provided embedded cod
 
 <div class="badge-grid">
 <div>
-  <img src="https://badges.layer5.io/assets/badges/ui-ux/ui-ux.svg" />
-  <span>UI/UX</span> <p>This badge is awarded to the community members who create or improve designs for visual aspects or user flow for any of the websites, flyers, promotions, Meshery UI, and so on in recognition and appreciation of their efforts.</p>
+  <img src="https://badges.layer5.io/assets/badges/meshmaster-certified/meshmaster-certified.png" />
+  <span>MeshMaster</span> <p>This badge is awarded to individuals who have demonstrated a clear and holistic understanding of cloud native infrastructure management.</p>
+</div>
+<div>
+  <img src="https://badges.layer5.io/assets/badges/certification-program/certification-program.png" />
+  <span>Coming Soon</span> <p>Additional certications are coming soon!</p>
 </div>
 </div>