added project logos to each section

assets/scss/_landing_project.scss

@@ -200,3 +200,15 @@
     max-width: 100%;
   }
 }
+
+
+.logo-container {
+  width: 80px;
+  margin-right: 8px;
+}
+
+@media screen and (max-width: 768px) {
+  .logo-container {
+    display: none;
+  }
+}

content/en/cloud/_index.md

@@ -13,18 +13,30 @@ cascade:
 
 ## Understanding the Meshery Ecosystem
 
-<p class="image-left" 
-    style="display:inline; font-style:italic; padding: 1rem; width:auto;
-            box-shadow: inset 0 -3em 3em #00b39f33,
-                0 0 0 2px #00b39f33,
-                0.3em 0.3em 1em #00b39f00;">You are here</p>
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="cloud" >}}</div>
+
+<div style="flex: 1;">
 
 **Layer5 Cloud** ([docs](/cloud)) is an identity provider and global console for Meshery deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted.
+</div></div>
+
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="meshery" >}}</div>
+
+<div style="flex: 1;">
 
 **Meshery** ([docs](https://docs.meshery.io)) is a cloud native manager that enables the design and management of Kubernetes-based infrastructure and applications. It is an extensible developer platform that seamlessly integrates with all CNCF projects, and various monitoring, CI/CD, and security tools.
+</div></div>
+<!-- <p class="image-left" 
+    style="display:inline; font-style:italic; padding: 1rem; width:auto;
+            box-shadow: inset 0 -3em 3em #00b39f33,
+                0 0 0 2px #00b39f33,
+                0.3em 0.3em 1em #00b39f00;">You are here</p> -->
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="meshmap" >}}</div>
 
-**MeshMap** ([docs](/meshmap)) provides a visual interface that allows users to create and edit Kubernetes manifests, charts and pipelines, as well as monitor the performance and health of their clusters. MeshMap aims to simplify the complexity of Kubernetes and make it accessible to more users, similar to how Figma democratized design tools for web and mobile applications.
+<div style="flex: 1;">
 
+**MeshMap** ([docs](/meshmap)) provides a visual interface that allows users to create and edit Kubernetes manifests, charts and pipelines, as well as monitor the performance and health of their clusters. MeshMap aims to simplify the complexity of Kubernetes and make it accessible to more users, similar to how Figma democratized design tools for web and mobile applications.
+</div></div>
 {{% /pageinfo %}}
 
 

content/en/meshmap/_index.md

@@ -9,7 +9,6 @@ cascade:
     type: docs
 ---
 
-
 <!-- {{% pageinfo %}}
 
 **Meshery** is a cloud native manager that enables the design and management of Kubernetes-based infrastructure and applications. It is an extensible developer platform that seamlessly integrates with various CNCF projects, monitoring, CI/CD, and security tools.
@@ -21,18 +20,30 @@ cascade:
 
 ## Understanding the Meshery Ecosystem
 
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="cloud" >}}</div>
+
+<div style="flex: 1;">
+
 **Layer5 Cloud** ([docs](/cloud)) is an identity provider and global console for Meshery deployments with an extensible and highly flexible authorization framework, tenant entitlement services, service provider-grade organizational hierarchy, team workspace management and a content catalog for public and private hosting of cloud native architectures. Layer5 Cloud is available as a service or self-hosted.
+</div></div>
 
-**Meshery** ([docs](https://docs.meshery.io)) is a cloud native manager that enables the design and management of Kubernetes-based infrastructure and applications. It is an extensible developer platform that seamlessly integrates with all CNCF projects, and various monitoring, CI/CD, and security tools.
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="meshery" >}}</div>
 
-<p class="image-left" 
+<div style="flex: 1;">
+
+**Meshery** ([docs](https://docs.meshery.io)) is a cloud native manager that enables the design and management of Kubernetes-based infrastructure and applications. It is an extensible developer platform that seamlessly integrates with all CNCF projects, and various monitoring, CI/CD, and security tools.
+</div></div>
+<!-- <p class="image-left" 
     style="display:inline; font-style:italic; padding: 1rem; width:auto;
             box-shadow: inset 0 -3em 3em #00b39f33,
                 0 0 0 2px #00b39f33,
-                0.3em 0.3em 1em #00b39f00;">You are here</p>
+                0.3em 0.3em 1em #00b39f00;">You are here</p> -->
+<div style="display: flex; align-items: flex-start; margin-top:15px;"><div class="logo-container">{{< svg name="meshmap" >}}</div>
 
-**MeshMap** ([docs](/meshmap)) provides a visual interface that allows users to create and edit Kubernetes manifests, charts and pipelines, as well as monitor the performance and health of their clusters. MeshMap aims to simplify the complexity of Kubernetes and make it accessible to more users, similar to how Figma democratized design tools for web and mobile applications.
+<div style="flex: 1;">
 
+**MeshMap** ([docs](/meshmap)) provides a visual interface that allows users to create and edit Kubernetes manifests, charts and pipelines, as well as monitor the performance and health of their clusters. MeshMap aims to simplify the complexity of Kubernetes and make it accessible to more users, similar to how Figma democratized design tools for web and mobile applications.
+</div></div>
 {{% /pageinfo %}}
 
 ## What is MeshMap?

layouts/shortcodes/svg.html

@@ -0,0 +1,6 @@
+{{ $name := .Get "name" }}
+{{ with resources.Get (printf "icons/%s.svg" $name) }}
+  {{ .Content | safeHTML }}
+{{ else }}
+  <!-- SVG not found: {{ $name }} -->
+{{ end }}