link cards on kanvas operate page

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js

@@ -40,6 +40,7 @@ z-index: 10;
         }
     }
     .project__block__inner {
+        position: relative;
         display: flex;
         flex-direction: column;
         background: ${props => props.theme.grey212121ToWhite};
@@ -121,7 +122,18 @@ z-index: 10;
       transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
       /* transition: transform 1s ease-in-out 0.2s; */
     }
-  }`;
+  }
+
+  .docs-icon-wrapper {
+    position: absolute;
+    top: 2.5rem;
+    right: 0.8rem;
+    z-index: 20;
+    display: flex;
+    justify-content: flex-end;
+    width: auto;
+  }
+`;
 
 const KanvasisualizerFeatures = () => {
   const [isHovered, setisHovered] = useState(false);
@@ -144,35 +156,47 @@ const KanvasisualizerFeatures = () => {
       <Row>
         <div className="project__block__wrap">
           <Col $sm={12} $md={6} $lg={4}>
+           <a href="https://docs.layer5.io/kanvas/getting-started/import-designs/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
             <div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut}>
+              <div className="docs-icon-wrapper">
+                <DocsIcon style={{ color: '#00D3A9' }} className="docs" />
+              </div>
               <div className="feature-image">
                 <img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
                 <img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
               </div>
               <h3>Application Import</h3>
               <p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
             </div>
+            </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
+            <a href="https://docs.layer5.io/kanvas/operator/resource-details/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
             <div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut}>
+              <div className="docs-icon-wrapper">
+                <DocsIcon style={{ color: '#00D3A9' }} className="docs" />
+              </div>
               <div className="feature-image">
                 <img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
                 <img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
               </div>
               <h3>Real-time performance metrics</h3>
               <p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
             </div>
+            </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
-          <a href="https://docs.layer5.io/kanvas/operator/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
+          <a href="https://docs.layer5.io/kanvas/operator/#understanding-interactive-terminal" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
             <div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
+              <div className="docs-icon-wrapper">
+                <DocsIcon style={{ color: '#00D3A9' }} className="docs" />
+              </div>
               <div className="feature-image">
                 <img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
                 <img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
               </div>
               <h3>Interactive Terminal</h3>
               <p>Establish sessions with one or more pods at a time.</p>
-              <DocsIcon style={{ position: 'absolute', top: '16px', right: '16px', color: '#00D3A9' }} className="docs" />
             </div>
           </a>
           </Col>
@@ -199,14 +223,19 @@ const KanvasisualizerFeatures = () => {
             </div>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
+          <a href="https://docs.layer5.io/kanvas/operator/#understanding-log-streamer" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
             <div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut}>
+              <div className="docs-icon-wrapper">
+                <DocsIcon style={{ color: '#00D3A9' }} className="docs" />
+              </div>
               <div className="feature-image">
                 <img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
                 <img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
               </div>
               <h3>Log Stream</h3>
               <p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
             </div>
+            </a>
           </Col>
         </div>
       </Row>