Update image paths and add new SVG assets for the Mythical 10x Engine…

…er blog post

Signed-off-by: Lee Calcote <[email protected]>

src/collections/blog/2024/05-07-mythical-engineer/mythical-10x-engineer.mdx

@@ -3,8 +3,8 @@ title: The Mythical 10x Engineer
 subtitle: Rockstar or Illusion
 date: 2024-05-08
 author: Lee Calcote
-thumbnail: ../../../../assets/images/stick-figures/SVG/layer5-five-mascot-means-business.svg
-darkthumbnail: ../../../../assets/images/stick-figures/SVG/layer5-five-mascot-means-business.svg
+thumbnail: ../../../../assets/images/five/SVG/layer5-five-mascot-means-business.svg
+darkthumbnail: ../../../../assets/images/five/SVG/layer5-five-mascot-means-business.svg
 description: "Find a 10x engineer or build a 10x team."
 type: Blog
 category: Community

src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx

@@ -17,17 +17,19 @@ resource: true
 
 import { BlogWrapper } from "../../Blog.style.js";
 import { Link } from "gatsby";
-import { BlockquoteAlt } from "../../../../reusecore/Blockquote/Blockquote-alt-style";
 
 <BlogWrapper>
 
-### What is the [Kanvas Catalog](/cloud-native-management/catalog)?
+### What is the Kanvas Catalog?
+
+<Link to="/cloud-native-management/catalog">Kanvas Catalog</Link> is a hub for sharing and discovering best practices, reusable templates, and operational patterns for Kubernetes and cloud-native infrastructure. It's like a marketplace where you can find and contribute pre-built infrastructure configurations and operational views. The Catalog is a part of the Kanvas platform, which is a comprehensive suite of tools for managing cloud-native infrastructure.
 
-Think of it as a hub for sharing and discovering best practices, reusable templates, and operational patterns for Kubernetes and cloud-native infrastructure. It's like a marketplace where you can find and contribute pre-built configurations designed for various use cases.
 
 
 ### What can you find in the Catalog?
 
+<div className="note"> <a href="https://meshery.layer5.io/catalog">Explore the catalog</a></div>
+
 - Design Patterns: Ready-made blueprints for common infrastructure and application architectures. These patterns can save you significant time and effort in designing your deployments.  
 - Filters and Applications: Pre-configured filters for Envoy proxies, WebAssembly filters, and complete application deployments.
 - Meshery Designs: Share and reuse your own Meshery configurations, making it easier to collaborate and standardize your deployments.  

src/sections/Company/Brand/Brand-components/stickfigures.js

@@ -2,29 +2,29 @@ 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 SFL from "../../../../assets/images/stick-figures/SVG/stick-figures.svg";
-import teamOfFives from "../../../../assets/images/stick-figures/SVG/team-of-fives.svg";
-import resourcesSign from "../../../../assets/images/stick-figures/SVG/resources-sign.svg";
-import mesheryWorship from "../../../../assets/images/stick-figures/meshery-worship.png";
-import f1 from "../../../../assets/images/stick-figures/SVG/1.svg";
-import f2 from "../../../../assets/images/stick-figures/SVG/2.svg";
-import f3 from "../../../../assets/images/stick-figures/SVG/3.svg";
-import f4 from "../../../../assets/images/stick-figures/SVG/4.svg";
-import f5 from "../../../../assets/images/stick-figures/SVG/5.svg";
-import f6 from "../../../../assets/images/stick-figures/SVG/6.svg";
-import f7 from "../../../../assets/images/stick-figures/SVG/7.svg";
-import f8 from "../../../../assets/images/stick-figures/SVG/8.svg";
-import f9 from "../../../../assets/images/stick-figures/SVG/9.svg";
-import f10 from "../../../../assets/images/stick-figures/SVG/10.svg";
-import f11 from "../../../../assets/images/stick-figures/SVG/11.svg";
-import f12 from "../../../../assets/images/stick-figures/SVG/12.svg";
-import f13 from "../../../../assets/images/stick-figures/SVG/13.svg";
-import f14 from "../../../../assets/images/stick-figures/SVG/14.svg";
-import f15 from "../../../../assets/images/stick-figures/SVG/15.svg";
-import f16 from "../../../../assets/images/stick-figures/SVG/16.svg";
-import f17 from "../../../../assets/images/stick-figures/SVG/17.svg";
-import f18 from "../../../../assets/images/stick-figures/SVG/18.svg";
-import f19 from "../../../../assets/images/stick-figures/SVG/19.svg";
+import SFL from "../../../../assets/images/five/SVG/stick-figures.svg";
+import teamOfFives from "../../../../assets/images/five/SVG/team-of-fives.svg";
+import resourcesSign from "../../../../assets/images/five/SVG/resources-sign.svg";
+import mesheryWorship from "../../../../assets/images/five/meshery-worship.png";
+import f1 from "../../../../assets/images/five/SVG/1.svg";
+import f2 from "../../../../assets/images/five/SVG/2.svg";
+import f3 from "../../../../assets/images/five/SVG/3.svg";
+import f4 from "../../../../assets/images/five/SVG/4.svg";
+import f5 from "../../../../assets/images/five/SVG/5.svg";
+import f6 from "../../../../assets/images/five/SVG/6.svg";
+import f7 from "../../../../assets/images/five/SVG/7.svg";
+import f8 from "../../../../assets/images/five/SVG/8.svg";
+import f9 from "../../../../assets/images/five/SVG/9.svg";
+import f10 from "../../../../assets/images/five/SVG/10.svg";
+import f11 from "../../../../assets/images/five/SVG/11.svg";
+import f12 from "../../../../assets/images/five/SVG/12.svg";
+import f13 from "../../../../assets/images/five/SVG/13.svg";
+import f14 from "../../../../assets/images/five/SVG/14.svg";
+import f15 from "../../../../assets/images/five/SVG/15.svg";
+import f16 from "../../../../assets/images/five/SVG/16.svg";
+import f17 from "../../../../assets/images/five/SVG/17.svg";
+import f18 from "../../../../assets/images/five/SVG/18.svg";
+import f19 from "../../../../assets/images/five/SVG/19.svg";
 
 const StickFigures = () => {
   return (
@@ -38,7 +38,7 @@ const StickFigures = () => {
           </h1>
         </Col>
         <Col $xs={12} $sm={6} className="download-button">
-          <a href="/brand/stick-figures.zip">
+          <a href="/brand/five-mascot-kit.zip">
             <Button $primary title="Download Logo Assets" $external={true}>
               <FiDownloadCloud size={21} className="icon-left" />
             </Button>
@@ -60,49 +60,49 @@ const StickFigures = () => {
         <Col>
           <h2 className="layerH3 in">Images</h2>
         </Col>
-        <Row $Vcenter className="ImgDiv" style={{ minWidth: "200px" }}>
+        <Row $Vcenter className="fiveDiv" style={{ minWidth: "200px" }}>
           <Col $xs={12}>
             <img src={SFL} alt="Layer5 Mascot, Five" />
           </Col>
         </Row>
-        <Row $Vcenter className="ImgDiv" style={{ minWidth: "200px" }}>
+        <Row $Vcenter className="fiveDiv" style={{ minWidth: "200px" }}>
           <Col $xs={12}>
             <img src={mesheryWorship} alt="Layer5 Mascot, Five" />
           </Col>
         </Row>
-        <Row $Vcenter className="ImgDiv">
+        <Row $Vcenter className="fiveDiv">
           <Col $xs={12} $sm={6}>
-            <img src={teamOfFives} style={{ maxWidth: "150px",  backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f1} style={{ maxWidth: "150px",  backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f2} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f3} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f4} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f5} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
+            <img src={teamOfFives} alt="Layer5 Mascot, Five" />
+            {/* <img src={f1} alt="Layer5 Mascot, Five" />
+            <img src={f2} alt="Layer5 Mascot, Five" />
+            <img src={f3} alt="Layer5 Mascot, Five" />
+            <img src={f4} alt="Layer5 Mascot, Five" />
+            <img src={f5} alt="Layer5 Mascot, Five" /> */}
           </Col>
           <Col $xs={12} $sm={6}>
-            <img src={resourcesSign} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f13} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f14} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f15} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f16} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f17} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
+            <img src={resourcesSign} alt="Layer5 Mascot, Five" />
+            {/* <img src={f13} alt="Layer5 Mascot, Five" />
+            <img src={f14} alt="Layer5 Mascot, Five" />
+            <img src={f15} alt="Layer5 Mascot, Five" />
+            <img src={f16} alt="Layer5 Mascot, Five" />
+            <img src={f17} alt="Layer5 Mascot, Five" /> */}
           </Col>
         </Row>
-        <Row $Vcenter className="ImgDiv">
+        {/* <Row $Vcenter className="fiveDiv">
           <Col $xs={12} $sm={6}>
-            <img src={f18} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f19} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f6} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f7} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f8} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f9} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
+            <img src={f18} alt="Layer5 Mascot, Five" />
+            <img src={f19} alt="Layer5 Mascot, Five" />
+            <img src={f6} alt="Layer5 Mascot, Five" />
+            <img src={f7} alt="Layer5 Mascot, Five" />
+            <img src={f8} alt="Layer5 Mascot, Five" />
+            <img src={f9} alt="Layer5 Mascot, Five" />
           </Col>
           <Col $xs={12} $sm={6}>
-            <img src={f10} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f11} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
-            <img src={f12} style={{ maxWidth: "150px", backgroundColor: "#fff" }}alt="Layer5 Mascot, Five" />
+            <img src={f10} alt="Layer5 Mascot, Five" />
+            <img src={f11} alt="Layer5 Mascot, Five" />
+            <img src={f12} alt="Layer5 Mascot, Five" />
           </Col>
-        </Row>
+        </Row> */}
       </Row>
     </div>
   );

src/sections/Company/Brand/brandPage.style.js

@@ -189,6 +189,17 @@ const BrandPageWrapper = styled.section`
 			justify-content: center;
 			flex-wrap: wrap;
 		}
+		.fiveDiv {
+			width: 100%;
+			margin: auto;
+			justify-content: space-around;
+			gap: 1rem;
+		}
+		.fiveDiv > img {
+			max-width: 150px;
+			background-color: "#fff";
+			align-self: center;
+		}
 		img.Layer5Icon {
 			width: auto;
 			height: 80px;