fix: updated homepage diagram

Author: loujaybee

src/components/InteractiveDiagram/index.js

@@ -135,6 +135,24 @@ export default function InteractiveDiagram() {
             >
               Signing
             </div>
+            <div className={styles.bottomleftcolbottom}>
+              <div
+                className={styles.cell}
+                onClick={() => {
+                  setIsShow("block");
+                  setPromptTitle("Cloud Development Environment");
+                  setPromptText(
+                    parse(`
+                    <p>An automated environment in the cloud accessed directly from a code editor.</p>
+                    <br/>
+                    <b><a href="docs/intro/capabilities/cloud-development-environment">Read More</a></b>
+                `)
+                  );
+                }}
+              >
+                Cloud Development Environment
+              </div>
+            </div>
           </div>
         <div className={styles.bottomrightcol}>
           <p className={styles.labels}>Operation</p>

src/components/InteractiveDiagram/styles.module.css

@@ -85,10 +85,11 @@
   white-space: nowrap;
   padding: 30px;
   min-height: 405px;
-  max-height: 435px;
+  max-height: 460px;
   min-width: 865px;
   border-radius: 8px;
 }
+
 .diagramcontent:hover {
   cursor: pointer;
 }
@@ -119,15 +120,16 @@
   white-space: nowrap;
   min-height: 290px;
 }
+
 .diagramcontent .bottomrow .bottomleftcol {
   display: inline-block;
   width: 40%;
-  height: 80%;
-  overflow: hidden;
+  height: 100%;
   border: 2px dotted;
   margin-right: -15px;
   padding: 10px;
   padding-right: 30px;
+  padding-bottom: 55px;
   margin-bottom: 30px;
   min-height: 225px;
   border-radius: 8px;
@@ -136,7 +138,7 @@
 
 .diagramcontent .bottomrow .bottomleftcol .bottomleftcolleft {
   display: inline-block;
-  height: 98%;
+  height: 95%;
   overflow: hidden;
   writing-mode: vertical-lr;
   padding-left: 10px;
@@ -155,13 +157,22 @@
 }
 
 .diagramcontent .bottomrow .bottomleftcol .bottomleftcolright {
+  margin-bottom: -4px;
   display: inline-block;
   height: 100%;
   width: 85%;
   overflow: hidden;
   border-top: none;
 }
 
+.diagramcontent .bottomrow .bottomleftcol .bottomleftcolbottom {
+  height: 40px;
+  margin: auto;
+  width: 94%;
+  margin-left: 3%;
+  margin-right: 3%;
+}
+
 .diagramcontent .bottomrow .bottomrightcol {
   display: inline-block;
   width: 55%;