catalog instructions updates

_includes/catalog-help-modal.html

@@ -96,20 +96,49 @@
 
 
           <div id="MesheryUI" class="tabcontent">
-            <h3>Meshery UI</h3>
-            <p>To import designs, visit <a href="https://docs.meshery.io/extensions/importing-a-design" target="_blank">docs</a></p>
-
+            <p>
+              Using Meshery Playground and Meshery's extension Kanvas, You can participate in creating high-quality starter templates, publishing designs and models for the community to use in various ways. You can also climb the leaderboard by having your designs cloned, downloaded, or viewed the most. Follow the instructions below to get started.
+            </p>
+            <h4 style="font-size: 1.2rem;margin: 1rem 0;">Create a design</h4>
+            <p>Begin by creating a new design from scratch, using existing design patterns and templates from catalog:</p>
+            <dl>
+              <dt>From Scratch:</dt>
+              <dd style="
+                margin-left: 0;
+            "><ul><li>Open the Designs panel, Select and arrange components from the Designer Dock on the Kanvas, and customize with connections, labels, and properties.<img src="https://layer5.io/static/start-from-scratch-21b5915673335277d79cd425627e8fe5.gif" style="max-width: 100%;object-fit:contain;margin-top: 1rem;" srl_elementid="0"></li></ul></dd>
+
+              <dt>From a Template:</dt>
+              <dd style="
+                margin-left: 0;
+            "><ul><li>Start from a pre-built template or clone an existing design from the Catalog. This allows you to build on established designs for a quicker start.<img src="https://layer5.io/static/catalog-d6740356d3f91ec18d50c83e0d7af6d0.gif" style="max-width: 100%;object-fit:contain;margin-top: 1rem;" srl_elementid="0"></li></ul></dd>
+            </dl>
+
+            <h4 style="font-size: 1.2rem;margin: 1rem 0;">Import a design</h4>
+            <ul>
+              <li>Access the Kanvas Designer and select the "Import" button in the left Designs panel. Import your own designs from local filesystem or from a remote URL directly into the Catalog. Upload a file or provide a URL for Docker Compose, Helm Charts, Meshery Designs or Kubernetes Manifests. Choose to either import as new or merge into current design that you have open in Kanvas.
+              <img src="https://layer5.io/static/import-design-gif-9a9fa6ea76258783aa31d776bd5f2557.gif" style="max-width: 100%;object-fit:contain;margin-top: 1rem;" srl_elementid="2">
+            </li>
+          </ul>
+          <p> Kanvas will convert these into a usable design based on their configurations.</p>
+          <img src="https://layer5.io/static/rendered-design-e00309ed95ec6b886d639defa806f939.png" style="max-width: 100%;object-fit:contain;margin-top: 1rem;" srl_elementid="3">
+
+          <h4>Publish a Design</h4>
+          <p>Make your designs accessible to others by publishing them in the Catalog:</p>
+          <ul><li>In the designs panel, locate your design and hover over it to access quick actions. Select the info button (marked with an "i") and add any necessary details for the review process, such as relevant technologies, descriptions, and considerations and click Publish button. Once approved by the Maintainers, your design becomes available to the broader community in Kanvas catalog.<img src="https://layer5.io/static/publish-to-catalog-ad82c7ecd418bd328187784f3605ad95.gif" style="max-width: 100%;object-fit:contain;margin-top: 1rem;" srl_elementid="4"></li></ul>
+
+          <h4>Create or import model</h4>
+          <p>One can either create a model from scratch using crds, or import existing models using create widgets. Visit: <a href="https://playground.meshery.io/settings?settingsCategory=Registry&tab=Models">Registry</a></p>
             <!-- <a href="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4"
 				data-fancybox="images" data-caption="Import your patterns"> -->
-        <div style="text-align: center;">
+        <!-- <div style="text-align: center;">
           <video width="100%" preload="metadata" controls>
             <source src="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4#t=0.01" type="video/mp4">
-          </video>
+          </video> -->
 				<!-- <iframe width="98%" height="540" preload="metadata" src="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4#t=0.01" alt="Import your patterns" 
         frameborder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen	></iframe> -->
-          </div>
+          <!-- </div> -->
 			</a>
           </div>
 

_sass/elements.scss

@@ -94,13 +94,15 @@ h3 {
 		-webkit-font-smoothing: antialiased;
 }
 
-h4, h5, h6{
+h4, h5, h6, dl, dd, dt{
 	color: var(--color-secondary-dark);
 	font-family: "Qanelas Soft", "Open Sans", sans-serif;
 		-webkit-font-smoothing: antialiased;
 }
 
-
+dd {
+	margin-left: 0;
+}
 p, address {
 	font-size: 1.38em;
 	color: var(--color-secondary-dark);