From a48df5bfc58c7360beaf25109fe5e218aa03bb44 Mon Sep 17 00:00:00 2001
From: Piyush Tripathi <piyushtripathi9424@gmail.com>
Date: Sat, 31 Oct 2026 23:43:44 +0530
Subject: [PATCH 1/2] style: format kanvas-visualize-features with prettier

Signed-off-by: Piyush Tripathi <piyushtripathi9424@gmail.com>
---
 .../kanvas-visualize-features.js              | 393 +++++++++++++-----
 1 file changed, 284 insertions(+), 109 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
index 54b4f05a079ff1..f82e07c68fea28 100644
--- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
+++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
@@ -19,89 +19,89 @@ import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import DocsIcon from "../../Pricing/icons/docs.js";
 
 const VisualizerFeaturesWrapper = styled.div`
+  display: flex;
+  width: 80%;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
 
-display: flex;
-width: 80%;
-justify-content: center;
-align-items: center;
-z-index: 10;
-
-.project__block__wrap{
-        position: relative;
-        width: 100%;
-        height: fit-content;
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 2rem;
-        &:before {
-            position: absolute;
-            right: -2rem;
-            bottom: 0;
-        }
+  .project__block__wrap {
+    position: relative;
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+    &:before {
+      position: absolute;
+      right: -2rem;
+      bottom: 0;
     }
-    .project__block__inner {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        background: ${props => props.theme.grey212121ToWhite};
-        box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.whiteToGreyE6E6E6};
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  .project__block__inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: ${(props) => props.theme.grey212121ToWhite};
+    box-shadow: 0px 0px ${(props) => props.theme.projectShadowsize}
+      ${(props) => props.theme.whiteToGreyE6E6E6};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-        &:hover{
-            box-shadow: 0px 0px 5px ${props => props.theme.green00D3A9ToGreen3C494F};
-        }
-        padding: 10% 8%;
-        height: 25rem;
-        border-radius: 4%;
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        transition: all 0.5s ease;
-        margin: 5% 0%;
-
-        h3{
-            margin: auto;
-            font-weight: 700;
-            font-size: 1.5rem;
-            color: ${props => props.theme.secondaryColor};
-            text-align: center;
-            justify-content: center;
-            margin-bottom: 2%;
-        }
-        p{
-            font-weight: 300;
-            color: ${props => props.theme.text};
-            margin: auto;
-            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-        }
-
-        img{
-            height: auto;
-            width: 70%;
-        }
-
-        .gatsby-image-wrapper{
-            margin: 10px auto;
-            min-height: 40px;
-        }
+    &:hover {
+      box-shadow: 0px 0px 5px ${(props) => props.theme.green00D3A9ToGreen3C494F};
     }
+    padding: 10% 8%;
+    height: 25rem;
+    border-radius: 4%;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s ease;
+    margin: 5% 0%;
 
-    .darken {
-      background: ${props => props.theme.grey121212ToWhite};
-      /* scale:1.1; */
-      /* transition: all 0.5s ease; */
-      opacity: 0.85;
+    h3 {
+      margin: auto;
+      font-weight: 700;
+      font-size: 1.5rem;
+      color: ${(props) => props.theme.secondaryColor};
+      text-align: center;
+      justify-content: center;
+      margin-bottom: 2%;
+    }
+    p {
+      font-weight: 300;
+      color: ${(props) => props.theme.text};
+      margin: auto;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
 
-    .feature-image {
-      position: relative;
-      padding: 0% 0% 10%;
+    img {
+      height: auto;
+      width: 70%;
+    }
+
+    .gatsby-image-wrapper {
+      margin: 10px auto;
+      min-height: 40px;
+    }
+  }
+
+  .darken {
+    background: ${(props) => props.theme.grey121212ToWhite};
+    /* scale:1.1; */
+    /* transition: all 0.5s ease; */
+    opacity: 0.85;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .feature-image {
+    position: relative;
+    padding: 0% 0% 10%;
 
-      svg {
-        .service-performance-meter-colorMode_svg__colorMode1{
-          fill: ${props => props.theme.grey212121ToGreyF3F3F3};
-          transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    svg {
+      .service-performance-meter-colorMode_svg__colorMode1 {
+        fill: ${(props) => props.theme.grey212121ToGreyF3F3F3};
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
       }
     }
 
@@ -119,7 +119,9 @@ z-index: 10;
       opacity: 1;
       transform-origin: center center;
       transform: rotateZ(200deg);
-      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
+      transition:
+        opacity 0.5s ease-in-out,
+        transform 0.5s ease-in-out 0.3s;
       /* transition: transform 1s ease-in-out 0.2s; */
     }
   }
@@ -128,7 +130,7 @@ z-index: 10;
     position: absolute;
     top: 16px;
     right: 16px;
-    color: ${props => props.theme.secondaryColor};
+    color: ${(props) => props.theme.secondaryColor};
   }
 `;
 
@@ -153,44 +155,132 @@ 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}>
+            <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/>
+                  <DocsIcon />
                 </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"} />
+                  <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>
+                <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}>
+            <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/>
+                  <DocsIcon />
                 </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"} />
+                  <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>
+                <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/#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}>
+            <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/>
+                  <DocsIcon />
                 </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" }} />
+                  <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>
@@ -198,39 +288,124 @@ const KanvasisualizerFeatures = () => {
             </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
-            <div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut}>
+            <div
+              className={
+                isHovered && hoveredFeature != "Feature4"
+                  ? "project__block__inner darken"
+                  : "project__block__inner"
+              }
+              onMouseOver={() => handleMouseOver(4)}
+              onMouseOut={handleMouseOut}
+            >
               <div className="feature-image">
-                <img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} />
-                <img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} />
+                <img
+                  src={TimelineDVRClock}
+                  alt="Timeline"
+                  style={{ position: "absolute", width: "80%" }}
+                />
+                <img
+                  src={TimelineDVR}
+                  alt=""
+                  className={
+                    hoveredFeature == "Feature4"
+                      ? "secondary-image-visible"
+                      : "secondary-image"
+                  }
+                  style={{ width: "80%" }}
+                />
               </div>
               <h3>Timeline (DVR)</h3>
-              <p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
+              <p>
+                Playback service transactions. Scrub over the history of changes
+                to your deployments.
+              </p>
             </div>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
-            <div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut}>
+            <div
+              className={
+                isHovered && hoveredFeature != "Feature5"
+                  ? "project__block__inner darken"
+                  : "project__block__inner"
+              }
+              onMouseOver={() => handleMouseOver(5)}
+              onMouseOut={handleMouseOut}
+            >
               <div className="feature-image">
-                <img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
-                <ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
-                  style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
+                <img
+                  src={
+                    isDark
+                      ? ServicePerformanceGearDark
+                      : ServicePerformanceGearLight
+                  }
+                  alt="Service Performance"
+                  style={{ position: "absolute", zIndex: "0" }}
+                />
+                <ServicePerformanceMeter
+                  alt=""
+                  className={
+                    hoveredFeature == "Feature5"
+                      ? "meter-visible"
+                      : "secondary-image"
+                  }
+                  style={{
+                    height: "auto",
+                    width: "70%",
+                    position: "relative",
+                    zIndex: "10",
+                    transformOrigin: "center center",
+                  }}
                 />
               </div>
               <h3>Service Performance</h3>
-              <p>Continuous visibility across all of your clusters and workloads metrics.</p>
+              <p>
+                Continuous visibility across all of your clusters and workloads
+                metrics.
+              </p>
             </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}>
+            <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/>
+                  <DocsIcon />
                 </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"} />
+                  <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>
+                <p>
+                  Stream and filter through the logs using keywords for multiple
+                  Kubernetes Pods simultaneously.
+                </p>
               </div>
             </a>
           </Col>
@@ -239,4 +414,4 @@ const KanvasisualizerFeatures = () => {
     </VisualizerFeaturesWrapper>
   );
 };
-export default KanvasisualizerFeatures;
\ No newline at end of file
+export default KanvasisualizerFeatures;

From 124eede5bbfa1bf8f29699280ce31bb8b7ff15be Mon Sep 17 00:00:00 2001
From: Piyush Tripathi <piyushtripathi9424@gmail.com>
Date: Sat, 31 Oct 2026 23:46:42 +0530
Subject: [PATCH 2/2] fix: add missing docs links for Timeline and Service
 Performance cards

Add documentation links and docs icon to Timeline (DVR) and Service Performance feature cards on Kanvas Operate page to ensure consistent navigation.

Fixes #8094

Signed-off-by: Piyush Tripathi <piyushtripathi9424@gmail.com>
---
 .../kanvas-visualize-features.js              | 162 ++++++++++--------
 1 file changed, 93 insertions(+), 69 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
index f82e07c68fea28..5751a678fc2aa5 100644
--- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
+++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js
@@ -288,81 +288,105 @@ const KanvasisualizerFeatures = () => {
             </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
-            <div
-              className={
-                isHovered && hoveredFeature != "Feature4"
-                  ? "project__block__inner darken"
-                  : "project__block__inner"
-              }
-              onMouseOver={() => handleMouseOver(4)}
-              onMouseOut={handleMouseOut}
+            <a
+              href="https://docs.layer5.io/kanvas/operator"
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+              }}
             >
-              <div className="feature-image">
-                <img
-                  src={TimelineDVRClock}
-                  alt="Timeline"
-                  style={{ position: "absolute", width: "80%" }}
-                />
-                <img
-                  src={TimelineDVR}
-                  alt=""
-                  className={
-                    hoveredFeature == "Feature4"
-                      ? "secondary-image-visible"
-                      : "secondary-image"
-                  }
-                  style={{ width: "80%" }}
-                />
+              <div
+                className={
+                  isHovered && hoveredFeature != "Feature4"
+                    ? "project__block__inner darken"
+                    : "project__block__inner"
+                }
+                onMouseOver={() => handleMouseOver(4)}
+                onMouseOut={handleMouseOut}
+              >
+                <div className="docs-icon-wrapper">
+                  <DocsIcon />
+                </div>
+                <div className="feature-image">
+                  <img
+                    src={TimelineDVRClock}
+                    alt="Timeline"
+                    style={{ position: "absolute", width: "80%" }}
+                  />
+                  <img
+                    src={TimelineDVR}
+                    alt=""
+                    className={
+                      hoveredFeature == "Feature4"
+                        ? "secondary-image-visible"
+                        : "secondary-image"
+                    }
+                    style={{ width: "80%" }}
+                  />
+                </div>
+                <h3>Timeline (DVR)</h3>
+                <p>
+                  Playback service transactions. Scrub over the history of
+                  changes to your deployments.
+                </p>
               </div>
-              <h3>Timeline (DVR)</h3>
-              <p>
-                Playback service transactions. Scrub over the history of changes
-                to your deployments.
-              </p>
-            </div>
+            </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
-            <div
-              className={
-                isHovered && hoveredFeature != "Feature5"
-                  ? "project__block__inner darken"
-                  : "project__block__inner"
-              }
-              onMouseOver={() => handleMouseOver(5)}
-              onMouseOut={handleMouseOut}
+            <a
+              href="https://docs.layer5.io/kanvas/operator/performance-testing"
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+              }}
             >
-              <div className="feature-image">
-                <img
-                  src={
-                    isDark
-                      ? ServicePerformanceGearDark
-                      : ServicePerformanceGearLight
-                  }
-                  alt="Service Performance"
-                  style={{ position: "absolute", zIndex: "0" }}
-                />
-                <ServicePerformanceMeter
-                  alt=""
-                  className={
-                    hoveredFeature == "Feature5"
-                      ? "meter-visible"
-                      : "secondary-image"
-                  }
-                  style={{
-                    height: "auto",
-                    width: "70%",
-                    position: "relative",
-                    zIndex: "10",
-                    transformOrigin: "center center",
-                  }}
-                />
+              <div
+                className={
+                  isHovered && hoveredFeature != "Feature5"
+                    ? "project__block__inner darken"
+                    : "project__block__inner"
+                }
+                onMouseOver={() => handleMouseOver(5)}
+                onMouseOut={handleMouseOut}
+              >
+                <div className="docs-icon-wrapper">
+                  <DocsIcon />
+                </div>
+                <div className="feature-image">
+                  <img
+                    src={
+                      isDark
+                        ? ServicePerformanceGearDark
+                        : ServicePerformanceGearLight
+                    }
+                    alt="Service Performance"
+                    style={{ position: "absolute", zIndex: "0" }}
+                  />
+                  <ServicePerformanceMeter
+                    alt=""
+                    className={
+                      hoveredFeature == "Feature5"
+                        ? "meter-visible"
+                        : "secondary-image"
+                    }
+                    style={{
+                      height: "auto",
+                      width: "70%",
+                      position: "relative",
+                      zIndex: "10",
+                      transformOrigin: "center center",
+                    }}
+                  />
+                </div>
+                <h3>Service Performance</h3>
+                <p>
+                  Continuous visibility across all of your clusters and
+                  workloads metrics.
+                </p>
               </div>
-              <h3>Service Performance</h3>
-              <p>
-                Continuous visibility across all of your clusters and workloads
-                metrics.
-              </p>
-            </div>
+            </a>
           </Col>
           <Col $sm={12} $md={6} $lg={4}>
             <a