adding-badges-section-in-newcomers-members-page

Signed-off-by: PRANJALRANA11 <[email protected]>
layer5io · Sep 10, 2023 · 5210a1a · 5210a1a
1 parent bdd41c1
commit 5210a1a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 2 deletions.
diff --git a/src/sections/Community/Members-grid/index.js b/src/sections/Community/Members-grid/index.js
@@ -12,8 +12,10 @@ import VintageBox from "../../../reusecore/VintageBox";
 // Assets
 import { MembersGridWrapper } from "./membersGrid.style";
 import communityImg from "../../../assets/images/community/community-green.svg";
+import badgeImg from "../../../assets/images/recognition-program/recognition-program.png";
 import { FaBook } from "@react-icons/all-files/fa/FaBook";
 import { FaUsers } from "@react-icons/all-files/fa/FaUsers";
+import { FaCertificate } from "@react-icons/all-files/fa/FaCertificate";
 
 const MembersGrid = (props) => {
   return (
@@ -32,6 +34,59 @@ const MembersGrid = (props) => {
               ))}
             </Row>
           </div>
+          <div className="AboutCommunity">
+            <div>
+              <h3 className="sectionTitle">Recognizing Community Members</h3>
+              <img id="Badge_img" src={badgeImg} alt="Layer5 Community" />
+            </div>
+            <div className="detailsCommunity">
+              <p>
+              Layer5 badges are one of the many ways that we recognize the efforts 
+              of our contributors and uplift our users. Layer5 badges represent milestones 
+              that you achieve both in using and in contributing to Layer5-supported 
+              open source projects. As a contributor, this is how you demonstrate your ownership, 
+              dedication, skills and loyalty to Layer5. As a user, 
+              this is how you demonstrate your prowess.
+              </p>
+              <p>
+                Whether as a user or a contributor, 
+                community members are awarded badges as and when they 
+                achieve any number of different milestones throughout 
+                their journey whether that accomplishment lie within a 
+                community activity or an aspect of using or contributing to a project .
+                Every community member, whether contributing with code or not, 
+                has the opportunity to obtain any number of badges in 
+                recognition of your achievements.
+              </p>
+              <p>
+              See what badges you can earn by visiting the Layer5 badges site. Collect the whole set!
+              </p>
+
+              {/* <p className="text-gray">Would you like to participate?</p> */}
+              <div className="">
+                <VintageBox right={true} vintageOne={true}>
+                  <Button
+                    primary
+                    className="banner-btn memberProfileBtn"
+                    title="Collect Badges"
+                    url="https://badges.layer5.io/"
+                    external={true}
+                  >
+                    <FaCertificate size={21} className="icon-left" />
+                  </Button>
+
+                  <Button
+                    secondary
+                    className="banner-btn two memberProfileBtn"
+                    title="Join the Community"
+                    url="https://slack.layer5.io"
+                  >
+                    <FaUsers size={21} className="icon-left" />
+                  </Button>
+                </VintageBox>
+              </div>
+            </div>
+          </div>
           <div className="AboutCommunity">
             <div>
               <h3 className="sectionTitle">Community Membership</h3>

diff --git a/src/sections/Community/Members-grid/membersGrid.style.js b/src/sections/Community/Members-grid/membersGrid.style.js
@@ -17,7 +17,6 @@ const img = (icon) => ({
   paddingLeft: 8,
   width: "auto",
 });
-
 export const selectStyles = {
   menu: (styles) => ({
     ...styles,
@@ -198,6 +197,10 @@ export const MembersGridWrapper = styled.div`
       margin-right: 3rem;
       margin-top: 3rem;
     }
+    #Badge_img {
+      width: 444px;
+      height: 305px;
+    }
     .detailsCommunity {
       width: 60%;
       flex-grow: 1;

diff --git a/src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js b/src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js
@@ -116,7 +116,7 @@ export const NewcomersGuideWrapper = styled.section`
         margin: 0 auto;
         width: 21.875rem;
         text-align: center; 
-        margin-top:1rem;
+        margin-top:0;
       }
     }
     .community-collage {

diff --git a/src/sections/Community/Newcomers-guide/index.js b/src/sections/Community/Newcomers-guide/index.js
@@ -13,6 +13,7 @@ import longArrow from "./long-arrow.svg";
 import { StaticImage } from "gatsby-plugin-image";
 
 const CommunityImage2 = "../../../assets/images/newcomers-page-images/community-image3.webp";
+const BadgeImage = "../../../assets/images/recognition-program/recognition-program.png";
 const CommunityImage3 = "../../../assets/images/newcomers-page-images/community-collage.webp";
 
 const NewcomersGuide = () => {
@@ -216,6 +217,32 @@ const NewcomersGuide = () => {
               </p>
             </Col>
           </Row>
+          <Row>
+          <Col sm={12} lg={6}>
+              <h3>Recognizing Community Members</h3>
+              <ol type="i">
+                <li>
+                Whether as a user or a contributor, community members are awarded badges as and when they achieve any number of different milestones throughout their journey whether that accomplishment lie within a community activity or an aspect of using or contributing to a project
+                  .
+                </li>
+                <li>
+                Every community member, whether contributing with code or not, has the opportunity to obtain any number of badges in recognition of your achievements.{" "}
+                </li>
+                <li>See what badges you can earn by visiting the {" "}
+                  <a
+                    href="https://badges.layer5.io"
+                    target="_blank"
+                  >
+                    Layer5 badges site
+                  </a>{" "}
+                Collect the whole set!
+                </li>
+              </ol>
+            </Col>
+            <Col sm={12} lg={6} className="community-img">
+              <StaticImage src={BadgeImage} alt="Layer5 Community Badge"  />
+            </Col>
+          </Row>
         </div>
         <div className="table-wrapper">
           <h2>Tutorials</h2>