update

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

assets/scss/_elements_project.scss

@@ -0,0 +1,88 @@
+div.tip {
+    position: relative;
+    float: right;
+    max-width: 50%;
+    margin-left: 3rem;
+    margin-right: 3rem;
+    padding: 2rem;
+    font-style: italic;
+    font-size: 0.8rem;
+    border-top: "1px solid $secondary";
+    border-bottom: "1px solid $secondary";
+    border-left: 1px dashed $secondary;
+    border-right: 1px dashed $secondary;
+    margin-bottom: 1rem;
+    padding-top: 1rem;
+    background-color: rgba($secondary, .33);
+    span {
+      font-style: normal;
+    }
+    h3 {
+      margin-bottom: .5rem;
+    }
+    table, td {
+      text-align: center;
+      border-top: 1px dotted #3c494f;
+      th { 
+        background-color: #3c494f;
+        color: #eee;
+        padding: 0rem .5rem;
+      }
+    }
+    @media (max-width: 990px){
+        max-width: 100%;
+      } 
+    @media (max-width: 699px) {
+      margin-left: 0rem;
+      margin-right: 0rem;
+    }
+  }
+  .image-left {
+    width: 40%;
+    float: left;
+    margin: 1rem 1.25rem 1rem 0rem;
+    box-shadow: 0px 5px 10px 1px $primary;
+  }
+
+  .image-right {
+    width: 40%;
+    float: right;
+    margin: 1rem 0rem 1rem 1.25rem;
+    box-shadow: 0px 5px 10px 1px $primary;
+  }
+  .image-right-no-shadow {
+    width: 40%;
+    float: right;
+    margin: 1rem 0rem 1rem 1rem;
+  }
+  .image-left-no-shadow {
+    width: 40%;
+    float: left;
+    margin: 1rem 1rem 1rem 0rem;
+  }
+  .image-center-shadow {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1.5rem;
+    width: 90%;
+    box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.5);
+  }
+  .image-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  .align-right {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 22%;
+    height: 22%;
+    float: right;
+    border-radius: 50%;
+  }

assets/scss/_styles_project.scss

@@ -1,6 +1,7 @@
 @import 'fonts';
 @import 'content_project';
 @import 'image-modal_project.scss';
+@import 'elements_project.scss';
 
 .navbar-brand  {
   margin: 1.5rem;

content/en/cloud/catalog/_index.md

@@ -2,7 +2,7 @@
 title: Catalog
 weight: 2
 description: >
-  WThe Cloud Catalog is a web-based, public catalog to facilitate easy sharing and discovery of common cloud native architectures and design patterns.
+  The Cloud Catalog is a web-based, public catalog to facilitate easy sharing and discovery of common cloud native architectures and design patterns.
 ---
 
 {{%pageinfo%}}

content/en/cloud/self-hosted/_index.md

@@ -2,9 +2,11 @@
 title: Self-Hosted
 weight: 2
 description: >
-  What does your user need to understand about your project in order to use it - or potentially contribute to it?
+  Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
 ---
 
+{{< figure src="images/self-hosted.svg" link="images/self-hosted.svg" class="image-right-no-shadow" >}}
+
 ## On-premises Deployment of Layer5 Cloud
 
 Layer5 Cloud is a collection of services that can be deployed on-premises. The following diagram illustrates the architecture of Layer5 Cloud.
@@ -16,3 +18,5 @@ Whitelabeling is supported by Layer5 Cloud. The following diagram illustrates th
 ## Consideration for Air-Gapped Deployments
 
 Meshery acknowledges the importance of air-gapped deployments and ensures content support for such environments. Content registered should be available even in the absence of internet connectivity, thus aligning with Meshery's commitment to versatile deployment scenarios.
+
+{{< alert title="As as Service" >}}Connect to Layer5 Cloud and have your MeshMap designs versioned and available for team sharing and real-time collaboration.{{< /alert >}}