[Catalog] Update catalog title, restructure layout, and enhance styles for improved readability

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

Author: leecalcote

_includes/help-modal.html renamed to _includes/catalog-help-modal.html

@@ -82,8 +82,9 @@
   cursor: pointer;
 }
 </style>
-<p class="catalog-subtext">
-Easily <span style="color: #00D3A9; cursor: pointer;" id="myBtn">import any catalog item</span> into Meshery. Have a design pattern to share? <a style ="color: #00D3AF; text-decoration: none;" href="https://docs.meshery.io/concepts/catalog#to-create-a-design-pattern-using-meshery-ui" target="_blank">Add yours to the catalog.</a></p>
+
+
+
 <div id="myModal" class="help-modal">
     <div class="help-modal-content">
 
@@ -140,7 +141,7 @@ <h3>Meshery CLI</h3>
 
 <script src="{{  site.baseurl }}/assets/js/help-modal.js"></script>
 <script>
-function openTab(evt, cityName) {
+function openTab(evt, tabName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
@@ -150,7 +151,7 @@ <h3>Meshery CLI</h3>
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
-    document.getElementById(cityName).style.display = "block";
+    document.getElementById(tabName).style.display = "block";
     evt.currentTarget.className += " active";
   }
 </script>

_includes/partials/feature.html renamed to _includes/partials/catalog-feature.html

@@ -1,6 +1,53 @@
-<h1 class="catalog-heading" style="padding-bottom: 0.5rem;">Cloud Native Catalog</h1>
-{% include help-modal.html %}
-<div class="features-container">
+<h2 class="catalog-heading">Cloud Native Catalog</h2>
+<h3 class="catalog-subheading">Harness Well-Architected Kubernetes Patterns</h3>
+
+<p class="catalog-subtext">
+  Discover and use top-quality patterns and conventions as templates for your cloud native infrastructure with Meshery Catalog.</p>
+<p class="catalog-subtext">
+  <span style="color: #00D3A9; cursor: pointer;" id="myBtn">Publish your own best practices</span> and <a style ="color: #00D3AF; text-decoration: none;" href="https://docs.meshery.io/concepts/catalog#to-create-a-design-pattern-using-meshery-ui" target="_blank">share with team members and the world</a>.</p>  
+
+
+{% include catalog-help-modal.html %}
+
+
+
+<!-- <script type="module">
+  import data from "{{ site.baseurl }}/integrations/data.js";
+
+const pattern = document.getElementById("pattern");
+const filter = document.getElementById("filter");
+
+const patternCards = document.querySelectorAll(".ptrn");
+const filterCards = document.querySelectorAll(".wsm");
+const ComingSoonCards = document.querySelectorAll(".cmg");
+
+
+function showElements(elements) {
+    elements.forEach((element) => {
+      element.style.display = "block";
+    });
+  }
+
+  function hideElements(elements) {
+    elements.forEach((element) => {
+      element.style.display = "none";
+    });
+  }
+
+  pattern.addEventListener("click", () => {
+    hideElements(filterCards);
+    showElements(patternCards);
+    showElements(ComingSoonCards);
+  });
+
+  filter.addEventListener("click", () => {
+    hideElements(patternCards);
+    hideElements(ComingSoonCards);
+    showElements(filterCards);
+  });
+    
+</script> -->
+<!-- <div class="features-container">
 
   <div class="feature-container">
     <div class="box">
@@ -37,7 +84,7 @@ <h1 class="catalog-heading" style="padding-bottom: 0.5rem;">Cloud Native Catalog
     </div>
     <div class="description wasm">Embedded in the data plane of a service mesh, WebAssembly filters offer fine-grained control over service requests.</div>
    </div>
-   <!-- <div class="feature-container">
+   <div class="feature-container">
     <div class="box">
       <div class="title ebpf">Programs</div>
       <img class="patterns-coming-soon" src="{{site.baseurl}}/assets/images/coming-soon.png" />
@@ -53,7 +100,7 @@ <h1 class="catalog-heading" style="padding-bottom: 0.5rem;">Cloud Native Catalog
       </div>
     </div> 
     <div class="description ebpf">Embedded in the data plane of a service mesh, eBPF programs performant, fine-grained control over service requests.</div>
-   </div>-->
+   </div>
   
    <div class="feature-container">
     <div class="box">
@@ -72,41 +119,4 @@ <h1 class="catalog-heading" style="padding-bottom: 0.5rem;">Cloud Native Catalog
     </div>
     <div class="description opa">Applied across the cloud native infrastructure under management, policies may be applied broadly and specificly.</div>
    </div>
-</div>
-
-<script type="module">
-  import data from "{{ site.baseurl }}/integrations/data.js";
-
-const pattern = document.getElementById("pattern");
-const filter = document.getElementById("filter");
-
-const patternCards = document.querySelectorAll(".ptrn");
-const filterCards = document.querySelectorAll(".wsm");
-const ComingSoonCards = document.querySelectorAll(".cmg");
-
-
-function showElements(elements) {
-    elements.forEach((element) => {
-      element.style.display = "block";
-    });
-  }
-
-  function hideElements(elements) {
-    elements.forEach((element) => {
-      element.style.display = "none";
-    });
-  }
-
-  pattern.addEventListener("click", () => {
-    hideElements(filterCards);
-    showElements(patternCards);
-    showElements(ComingSoonCards);
-  });
-
-  filter.addEventListener("click", () => {
-    hideElements(patternCards);
-    hideElements(ComingSoonCards);
-    showElements(filterCards);
-  });
-    
-</script>
+</div> -->

_layouts/catalog.html

@@ -14,6 +14,6 @@ <h3>Pattern Management</h3>
 
 <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    -->
-{% include partials/feature.html type="pattern" %}
+{% include partials/catalog-feature.html type="pattern" %}
 <div class="catalog">{% include patterns-filter.html %} {{ content }}</div>
 <!-- CARD-END -->

_sass/catalog.scss

@@ -1,8 +1,16 @@
 @use "./variables.scss" as *;
 .catalog-heading {
   text-align: center;
+  font-weight:700;
   margin: 2.5rem 0 1rem 0;
   word-spacing: 5px;
+  font-size: 2.5rem;
+}
+.catalog-subheading {
+  text-align: center;
+  font-weight: 500;
+  margin: 1rem auto;
+  font-size: 2rem;
 }
 .catalog-subtext {
   text-align: center;
@@ -113,7 +121,7 @@
   opacity: 0.7;
 }
 .catalog {
-  padding-top: 5rem;
+  padding-top: 1rem;
   padding-bottom: 2rem;
   display: flex;
 

collections/_pages/catalog.html

@@ -1,6 +1,6 @@
 ---
 layout: catalog
-title: Cloud Native Catalog
+title: Cloud Native Catalogsz
 permalink: /catalog
 ---
 
@@ -55,6 +55,7 @@
 
 {% assign catalog = site.collections | concat: site.catalog | concat: site.models | sort: 'name' %}
 <div class="section-container">
+  
   {% include view-all.html %}
 
   <div class="row">