Add redirect

gatsby-node.js

@@ -308,6 +308,24 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     redirectInBrowser: true,
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: "/cloud-native-management/kanvas/visualize",
+    toPath: "/cloud-native-management/kanvas/operator",
+    redirectInBrowser: true,
+    isPermanent: true,
+  });
+  createRedirect({
+    fromPath: "/kanvas/visualize",
+    toPath: "/cloud-native-management/kanvas/operator",
+    redirectInBrowser: true,
+    isPermanent: true,
+  });
+  createRedirect({
+    fromPath: "/kanvas/operator",
+    toPath: "/cloud-native-management/kanvas/operator",
+    redirectInBrowser: true,
+    isPermanent: true,
+  });
   createRedirect({
     fromPath: "/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap",
     toPath: "/resources/case-study/hpes-adoption-of-meshery-and-meshmap",

src/pages/cloud-native-management/kanvas/operate.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import SEO from "../../../components/seo";
+
+import KanvasOperator from "../../../sections/Kanvas/Kanvas-visualize/index";
+
+const KanvasVisualizePage = () => {
+
+  return (
+    <>
+      <KanvasOperator />
+
+    </>
+  );
+};
+export default KanvasVisualizePage;
+
+
+export const Head = () => {
+  return <SEO title="Kanvas Operator" description="Import your existing Kubernetes, Helm, or Docker Compose applications, monitor various performance metrics and see your clusters in-action." />;
+};

src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js

@@ -30,17 +30,17 @@ export default function VisualizerFeatures({ features }) {
     <VisualizerFeaturesWrapper>
       <Container className="visualizer-trigger-container">
         <div className="root test-container2">
-          <Link to="/cloud-native-management/kanvas/visualize">
+          <Link to="/cloud-native-management/kanvas/operator">
             <div id="featureHeading" className="fixed" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
-              <h1>Visualize</h1>
+              <h1>Operate</h1>
               <div className="learn-more">
                 <h5 style={cursorOverArrow ? { color: "#ffffff" } : { color: "#ececec" }}>Learn more</h5>
                 <img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
               </div>
             </div>
           </Link>
           <div className="g-grid-container contentContainer" id="add-border">
-            <Link to="/cloud-native-management/kanvas/visualize">
+            <Link to="/cloud-native-management/kanvas/operator">
               <div className="diagram scroll hideInMobile">
                 <VisualizerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
               </div>

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

@@ -91,9 +91,9 @@ const KanvasisualizeBanner = () => {
         </div> */}
       <div className="banner">
         <div className="banner-text">
-          <h1>Visualize your infrastructure </h1>
+          <h1>Operate your infrastructure </h1>
           <h4>See your designs <span>in action.</span> Operate with <span>best practices.</span></h4>
-          <KanvasBtn title="Explore Kanvasisualizer" />
+          <KanvasBtn title="Explore Kanvasoperator" />
         </div>
         {/* <div className="banner-image">
           <img src={BannerImage} alt="" />
@@ -103,4 +103,4 @@ const KanvasisualizeBanner = () => {
   );
 };
 
-export default KanvasisualizeBanner;
+export default KanvasisualizeBanner;

src/sections/Kanvas/index.js

@@ -61,13 +61,13 @@ const Kanvas = (props) => {
                   ),
                 },
                 {
-                  title: "Visualizer Mode",
+                  title: "Operator Mode",
                   description:
-                    "Visualizer offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Visualizer.",
+                    "Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
                   content: (
                     <img
                       src={visualizerImage}
-                      alt="Visualizer Mode"
+                      alt="Operator Mode"
                       className="modes-image"
                     />
                   ),
@@ -144,7 +144,7 @@ const Kanvas = (props) => {
               [
                 {
                   title: "Bring those ideas to life",
-                  description: "Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.",
+                  description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
                   imgContent: (
                     <>
                       <img id="avatar-1" src={Avatar1} alt="" />