Merge pull request #5451 from layer5io/ritiksaxena124/social-backgrounds

layer5 social backgrounds added on brand page

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" : ""