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/operate",
+    redirectInBrowser: true,
+    isPermanent: true,
+  });
+  createRedirect({
+    fromPath: "/kanvas/visualize",
+    toPath: "/cloud-native-management/kanvas/operate",
+    redirectInBrowser: true,
+    isPermanent: true,
+  });
+  createRedirect({
+    fromPath: "/kanvas/operate",
+    toPath: "/cloud-native-management/kanvas/operate",
+    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/components/Call-To-Actions/CTA_Bottom/cta_bottom_categories.js

@@ -16,7 +16,7 @@ export const Categories = {
     "Image": kanvas_icon,
     "Image_Alt": "Kanvas",
     "Heading": "Get started with Kanvas!",
-    "Content": "Explore and understand your infrastructure at a glance with our powerful visualizer tool. Gain insights, track dependencies, and optimize performance effortlessly.",
+    "Content": "Explore and understand your infrastructure at a glance with our powerful Operator tool. Gain insights, track dependencies, and optimize performance effortlessly.",
     "Button_Text": "Try Kanvas now!",
     "Link": "/cloud-native-management/kanvas",
     "Link_external": false

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/CloudNativeDeployments/features.js

@@ -167,7 +167,7 @@ const Feature = () => {
         <Row className="catalog">
           <Col md={6} className="catalog-detail">
             <h2 className="heading">
-            Kanvas Visualizer
+            Kanvas Operator
             </h2>
             <p className="caption">
             Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management.

src/sections/CloudNativeDeployments/index.js

@@ -22,7 +22,7 @@ const KubernetesMultiCluster = () => {
     {
       heading: "Bring those ideas to life",
       subtitle:
-        "Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.",
+        "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
       image: switcher_img,
     },
     {

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/operate">
             <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/operate">
               <div className="diagram scroll hideInMobile">
                 <VisualizerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
               </div>

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

@@ -194,7 +194,7 @@ const KanvasCollaborateBanner = () => {
       <div className="banner">
         <div className="banner-text">
           <h1>Collaborate with the team. <br /> Build solutions together </h1>
-          <h4>Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
+          <h4>Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
           <Button $primary className="join-community-button" title="Start Collaborating" $url="https://kanvas.new/" $external={true} />
         </div>
         <div className="transition-container" ref={transitionRef}>

src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js

@@ -60,7 +60,7 @@ export const KanvasMobileSwiper = () => {
     <SwiperContainer>
       <h2>Multi user real time collaboration</h2>
       <h6>
-        Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one
+        Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one
         place.
       </h6>
       <Swiper

src/sections/Kanvas/Kanvas-design/kanvas-design-features-carousel.js

@@ -134,7 +134,7 @@ export default function KanvasDesignFeatureCarousel() {
       <div className="left">
         <h1>Multi-user real-time collaboration</h1>
         <p>
-          Designer and Visualizer live side-by-side, so all design work, from
+          Designer and Operator live side-by-side, so all design work, from
           ideation to operation, can be found in one place.
         </p>
       </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="" />