Add sistent-divider-component

src/pages/projects/sistent/components/divider/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { DividerCode } from "../../../../../sections/Projects/Sistent/components/divider/code";
+
+const DividerCodePage = () => {
+  return <DividerCode />;
+};
+
+export default DividerCodePage;

src/pages/projects/sistent/components/divider/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { DividerGuidance } from "../../../../../sections/Projects/Sistent/components/divider/guidance";
+
+const DividerGuidancePage = () => {
+  return <DividerGuidance />;
+};
+
+export default DividerGuidancePage;

src/pages/projects/sistent/components/divider/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentDivider from "../../../../../sections/Projects/Sistent/components/divider/index";
+
+const SistentDividerPage = () => {
+  return <SistentDivider />;
+};
+
+export default SistentDividerPage;

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

@@ -1,86 +1,82 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "../../../reusecore/Button";
 import KanvasBtn from "../kanvas-buttons";
 
 const VisualizeBannerWrapper = styled.div`
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .banner {
+    margin: 3%;
+    position: relative;
+    z-index: 10;
     display: flex;
+    flex-direction: column;
+    background-color: ${(props) => props.theme.grey121212EightToWhiteEight};
+    border-radius: 2rem;
+    max-width: 1920px;
+    width: 90vw;
+    max-height: 50rem;
     align-items: center;
-    justify-content: center;
-    .banner {
-        margin: 3%;
-        position: relative;
-        z-index: 10;
-        display: flex;
-        flex-direction: column;
-        background-color: ${props => props.theme.grey121212EightToWhiteEight};
-        border-radius: 2rem;
-        max-width: 1920px;
-        width: 90vw;
-        max-height: 50rem;
-        align-items: center;
-        padding: 4% 5% 6%;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-
+    padding: 4% 5% 6%;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 
-    .banner-text {
-        color: ${props => props.theme.primaryColor};
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        align-items: center;
-        z-index: 1;
-        padding: 3% 0%;
-        opacity: 1;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
+  .banner-text {
+    color: ${(props) => props.theme.primaryColor};
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    z-index: 1;
+    padding: 3% 0%;
+    opacity: 1;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 
-    h1 {
-        /* font-size: 4rem; */
-        /* color: ${props => props.theme.primaryColor}; */
-        position: relative;
-        display: inline-block;
-        @media only screen and (min-width: 1400px) {
-            font-size: 3.75rem;
-        }
+  h1 {
+    /* font-size: 4rem; */
+    /* color: ${(props) => props.theme.primaryColor}; */
+    position: relative;
+    display: inline-block;
+    @media only screen and (min-width: 1400px) {
+      font-size: 3.75rem;
     }
+  }
 
-    h4 {
-        padding: 3% 0% 5%;
-        color: #A0AAAA;
-
-        span {
-          color: ${props => props.theme.primaryColor};
-          transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-        }
-
-        @media only screen and (max-width: 500px) {
-            font-size: 1.1rem;
-        }
+  h4 {
+    padding: 3% 0% 5%;
+    color: #a0aaaa;
 
+    span {
+      color: ${(props) => props.theme.primaryColor};
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
 
-    h5 {
-        padding: 2rem 0;
+    @media only screen and (max-width: 500px) {
+      font-size: 1.1rem;
     }
+  }
 
-    p {
-        padding-top: 2rem;
-    }
+  h5 {
+    padding: 2rem 0;
+  }
 
-    .banner-image {
-      padding: 5%;
-    }
-    img {
-        position: relative;
-        z-index: 0;
-        opacity: 0.4;
-        filter: blur(1px);
-        box-shadow: ${props => props.theme.boxShadowGreen00D3A9};
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
+  p {
+    padding-top: 2rem;
+  }
+
+  .banner-image {
+    padding: 5%;
+  }
+  img {
+    position: relative;
+    z-index: 0;
+    opacity: 0.4;
+    filter: blur(1px);
+    box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 `;
 
 const KanvasisualizeBanner = () => {
@@ -91,9 +87,12 @@ const KanvasisualizeBanner = () => {
         </div> */}
       <div className="banner">
         <div className="banner-text">
-          <h1>Operate your infrastructure </h1>
-          <h4>See your designs <span>in action.</span> Operate with <span>best practices.</span></h4>
-          <KanvasBtn title="Explore Kanvasoperator" />
+          <h1>Visualize your infrastructure </h1>
+          <h4>
+            See your designs <span>in action.</span> Operate with{" "}
+            <span>best practices.</span>
+          </h4>
+          <KanvasBtn title="Explore Kanvasisualizer" />
         </div>
         {/* <div className="banner-image">
           <img src={BannerImage} alt="" />

src/sections/Projects/Sistent/components/button/index.js

@@ -13,7 +13,7 @@ const SistentButton = () => {
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Button" >
+    <SistentLayout title="Button">
       <div className="content">
         <a id="Identity">
           <h2>Button</h2>