Merge branch 'master' of github.com:layer5io/layer5 into sistent

Signed-off-by: lakshya <[email protected]>

package.json

@@ -41,7 +41,7 @@
     "@sideway/address": "^5.0.0",
     "@svgr/webpack": "^8.0.1",
     "@types/mui-datatables": "^4.3.12",
-    "axios": "^1.4.0",
+    "axios": "^1.6.7",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-preset-gatsby": "^2.22.0",
     "cytoscape": "^3.28.1",

src/collections/members/cesar-roman/index.mdx

@@ -0,0 +1,15 @@
+---
+name: Cesar Roman
+position: Contributor
+image_path: ./cesar-roman.webp
+github: cesartheroman
+twitter: cesartheroman
+linkedin: cesartheroman
+layer5: ec5a1cd6-e03f-4aa8-9bca-1334e20042ff
+location: Chicago, IL
+bio: I'm a Chicago-based, "Boogie Down Bronx" raised, full stack software engineer specializing in JavaScript, TypeScript, React, and Node. 
+badges:
+  - ui-ux
+status: Active
+published: true
+---

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

@@ -47,12 +47,17 @@ const MemberSingle = ({ frontmatter }) => {
       <Container>
         <div>
           <Row>
-            <div className="backBtn">
-              <Link to="/community/members">
-                <IoIosArrowDropleftCircle />
-                <h4>Go Back</h4>
-              </Link>
-            </div>
+            <Col xs={12} sm={12} lg={6}>
+              <div className="backBtn">
+                <Link to="/community/members">
+                  <IoIosArrowDropleftCircle />
+                  <h4>Go Back</h4>
+                </Link>
+              </div>
+            </Col>
+            <Col xs={12} sm={12} lg={6}>
+              <h1 className="page-heading">Layer5 Community Member</h1>
+            </Col>
           </Row>
           <Row>
             <Col xs={12} sm={12} lg={6}>

src/sections/Community/Member-single/memberSingle.style.js

@@ -26,7 +26,13 @@ export const MemberSingleWrapper = styled.div`
       }
     }
   }
-
+  .page-heading {
+    font-size: 1.75rem;
+    line-height: 1.75rem;
+    color: ${(props) => props.theme.primaryColor};
+    text-align: right;
+    font-weight: 400;
+  }
   ul {
     list-style: none;
   }

src/sections/Company/Brand/Brand-components/social-backgrounds.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud";
+import Button from "../../../../reusecore/Button";
+import { Col, Row } from "../../../../reusecore/Layout";
+import SocialBackgroundImg from "../../../../assets/images/social-backgrounds/layer5-charcoal-background.png";
+
+const SocialBackgrounds = () => {
+  return (
+    <div className="post-content">
+      <Row className="brand-section">
+        <Col xs={12} sm={6}>
+          <h1 className="layerH3">
+            <strong> Layer5 Social Backgrounds </strong>
+          </h1>
+        </Col>
+        <Col xs={12} sm={6} className="download-button">
+          <a href="/brand/layer5-social-backgrounds.zip">
+            <Button primary title="Download Social Backgrounds">
+              <FiDownloadCloud size={21} className="icon-left" />
+            </Button>
+          </a>
+        </Col>
+        <Col>
+          <p>
+            The Social Background mark includes the Layer5 branding backgrounds that can be used as cover images or background images on Zoom, Twitter, Youtube and Linkedin.
+          </p>
+        </Col>
+      </Row>
+
+      <Row>
+        <Row Vcenter className="ImgDiv">
+          <Col xs={12} className="social-backgrounds">
+            <img src={SocialBackgroundImg} alt="Layer5 Social backgrounds" />
+          </Col>
+        </Row>
+      </Row>
+    </div>
+  );
+};
+
+export default SocialBackgrounds;

src/sections/Company/Brand/index.js

@@ -20,6 +20,7 @@ const MeshMapBrand = loadable(() => import("./Brand-components/meshmap"));
 const BrandGuide = loadable(() => import("./Brand-components/brand-guide"));
 const StickFigures = loadable(() => import("./Brand-components/stickfigures"));
 const Catalog = loadable(() => import("./Brand-components/catalog"));
+const SocialBackgrounds = loadable(() => import("./Brand-components/social-backgrounds"));
 
 const getDimensions = (ele) => {
   let dummyheight = 0,
@@ -106,6 +107,7 @@ const Brand = () => {
   const meshmapRef = useRef(null);
   const stickfiguresRef = useRef(null);
   const CatalogRef = useRef(null);
+  const SocialBackgroundsRef = useRef(null);
 
   const sectionRefs = [
     { section: "Layer5", ref: layer5Ref },
@@ -121,7 +123,8 @@ const Brand = () => {
     { section: "MeshMaster", ref: meshMasterRef },
     { section: "MeshMap", ref: meshmapRef },
     { section: "Five", ref: stickfiguresRef },
-    { section: "Catalog", ref: CatalogRef }
+    { section: "Catalog", ref: CatalogRef },
+    { section: "SocialBackgrounds", ref: SocialBackgroundsRef }
   ];
 
   useEffect(() => {
@@ -176,6 +179,9 @@ const Brand = () => {
           <div className="section" ref={layer5Ref}>
             <Layer5Brand />
           </div>
+          <div className="section" ref={SocialBackgroundsRef}>
+            <SocialBackgrounds />
+          </div>
           <div className="section" ref={mesheryRef}>
             <MesheryBrand />
           </div>
@@ -228,6 +234,16 @@ const Brand = () => {
             >
               <span>Layer5</span>
             </p>
+            <p
+              className={`header_link ${
+                visibleSection === "SocialBackgrounds" ? "selected" : ""
+              }`}
+              onClick={() => {
+                scrollTo(SocialBackgroundsRef.current);
+              }}
+            >
+              <span> Layer5 Social Backgrounds </span>
+            </p>
             <p
               className={`header_link ${
                 visibleSection === "Meshery" ? "selected" : ""