added employee badges to members and recognition page

src/pages/community/members.js

@@ -28,6 +28,7 @@ import dockerExtensionIcon from "../../assets/images/docker-extension/docker-ext
 import mesheryCatalogIcon from "../../assets/images/meshery/meshery-catalog.svg";
 import kanvasIcon from "../../assets/images/kanvas/badges/kanvas.svg";
 import sistentIcon from "../../assets/images/sistent/badges/sistent-contributor.svg";
+import employeeIcon from "../../assets/images/employee/employee.svg";
 /**
  * Array containing a list of categories to be shown in the dropdown.
  * The map function in the end wraps the label property with a component.
@@ -225,6 +226,14 @@ const options = [
     icon: communityIcon,
     className: "allOptions",
   },
+  {
+    label: "Employee",
+    value: "employee",
+    color: lighttheme.linkColor,
+    isFixed: true,
+    icon: employeeIcon,
+    className: "allOptions",
+  },
 ].map((obj) => ({
   ...obj,
   label: (

src/sections/Community/Handbook/recognition.js

@@ -19,6 +19,7 @@ import writersLogo from "../../../assets/images/writer-program/writer-program-ba
 import kanvasLogo from "../../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
 import MesheryCatalogLogo from "../../../assets/images/meshery/meshery-catalog.svg";
 import DocsLogo from "../../../assets/images/docs/docs.svg";
+import EmployeeLogo from "../../../assets/images/employee/employee.svg";
 import ApplicationPioneerLogo from "../../../assets/images/application-pioneer/application-pioneer.svg";
 import BringABuddyLogo from "../../../assets/images/bring-a-buddy/bring-a-buddy.svg";
 import DesignPioneerLogo from "../../../assets/images/design-pioneer/design-pioneer.svg";
@@ -231,6 +232,10 @@ const RecognitionPage = () => {
                 <img src={DocsLogo} style={badgeStyle} />
                 <b>Docs</b> - awarded to the community members who make consistent and impactful contributions to the <a href="https://docs.meshery.io/">Meshery docs</a> in recognition and appreciation of their efforts.
               </li>
+              <li>
+                <img src={EmployeeLogo} style={badgeStyle} />
+                <b>Employee</b> - awarded to the dedicated employees of layer5 who set the standards for excellence in all we do. interested in joining the team? <a href="https://layer5.io/careers">Apply here</a>.
+              </li>
             </ul>
             <a id="how-to-earn-badges">
               <h3>How can I Earn Badges?</h3>

src/sections/Community/Member-single/index.js

@@ -23,6 +23,7 @@ import docsLogo from "../../../assets/images/docs/docs.svg";
 import mesheryCatalogLogo from "../../../assets/images/meshery/meshery-catalog.svg";
 import dockerExtensionLogo from "../../../assets/images/docker-extension/docker-extension-meshery-logo.svg";
 import KanvasLogo from "../../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
+import EmployeeLogo from "../../../assets/images/employee/employee.svg";
 import Button from "../../../reusecore/Button";
 import { ReactComponent as TwitterIcon } from "../../../assets/images/socialIcons/twitter.svg";
 
@@ -298,6 +299,20 @@ const MemberSingle = ({ frontmatter }) => {
                           <span className="tooltip-text writer">Writer</span>
                         </div>
                       )}
+                      {badges.includes("employee") && (
+                        <div className="tooltip">
+                          <li>
+                            <Link to="/careers">
+                              <img
+                                className="profile-social-links"
+                                src={EmployeeLogo}
+                                alt="Employee Logo"
+                              />
+                            </Link>
+                          </li>
+                          <span className="tooltip-text employee">Employee</span>
+                        </div>
+                      )}
                     </ul>
                   </div>
                 )}