Seo enhancement

src/sections/Home/Banner/index.js

@@ -45,4 +45,4 @@ const RotationalBanner = () => {
   );
 };
 
-export default RotationalBanner;
+export default RotationalBanner;

src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js

@@ -9,95 +9,105 @@ import { useState } from "react";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const HeroSectionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => props.theme.grey121212ToWhite};
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 3% 5% 8%;
+  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
+  @media only screen and (max-width: 767px) {
+    text-align: center;
+    flex-direction: column-reverse;
+  }
+
+  .hero-text {
     display: flex;
-    flex-direction: row;
-    background-color: ${props => props.theme.grey121212ToWhite};;
-    width: 100%;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 3% 5% 8%;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    flex-direction: column;
+    flex: 0 0 35%;
+    margin-top: 5%;
 
     @media only screen and (max-width: 767px) {
-      text-align: center;
-      flex-direction: column-reverse;
+      max-width: 100%;
+      margin-top: 15%;
     }
+  }
+
+  h2 {
+    padding-bottom: 2%;
+  }
+
+  .hero-image {
+    display: grid;
+    grid-template-rows: 5rem 5rem;
+    place-items: center;
+    margin: 5% 0;
+    flex: 0 0 50%;
+    max-width: 60%;
 
-    .hero-text {
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 35%;
-        margin-top: 5%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          margin-top: 15%;
-        }
+    @media only screen and (max-width: 767px) {
+      max-width: 100%;
     }
 
-    h2 {
-      padding-bottom: 2%;
+    .locator {
+      /* transform: translateY(-5rem); */
+      transition: 1s;
+      z-index: 1;
     }
 
-    .hero-image {
-        display: grid;
-        grid-template-rows: 5rem 5rem;
-        place-items: center;
-        margin: 5% 0;
-        flex: 0 0 50%;
-        max-width: 60%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-        }
-
-        .locator {
-            /* transform: translateY(-5rem); */
-            transition: 1s;
-            z-index: 1;
-        }
-        .locator-moving {
-            transform: translateY(5rem);
-            transition: 1s;
-            z-index: 1;
-        }
-
-        .map {
-            opacity: 0;
-            transition: opacity ease 0.5s;
-            z-index: 0;
-        }
-        .map-visible {
-            opacity: 1;
-            transition: opacity 1s ease 0.5s;
-        }
+    .locator-moving {
+      transform: translateY(5rem);
+      transition: 1s;
+      z-index: 1;
+    }
 
+    .map {
+      opacity: 0;
+      transition: opacity ease 0.5s;
+      z-index: 0;
     }
-`;
 
+    .map-visible {
+      opacity: 1;
+      transition: opacity 1s ease 0.5s;
+    }
+  }
+`;
 
 const KanvasHeroSection = () => {
-  const [locatorRef, inView] = useInView({ threshold: 0.8 });
+  const [locatorRef, inView] = useInView({
+    threshold: 0.8,
+  });
+
   const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
+
+  if (inView && !imageInView) setimageInView(true);
+  else if (imageInView && !inView) setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
 
   return (
     <HeroSectionWrapper>
       <div className="hero-text">
-        <h2><span>Design your infrastructure</span></h2>
-        <p>Kanvasis the world’s only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.</p>
+        <h2>Design Your Kubernetes & Cloud Native Infrastructure</h2>
+        <p>Kanvas is the world's only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.</p>
       </div>
-      <div className="hero-image">
-        <img className={imageInView ? "locator-moving" : "locator"} src={isDark ? KanvasLocatorDark : KanvasLocatorLight} alt="locator" />
-        <img className={imageInView ? "map map-visible" : "map"} src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight} alt="integrations" ref={locatorRef} />
+      <div className="hero-image" ref={locatorRef}>
+        <img
+          className={`locator ${imageInView ? "locator-moving" : ""}`}
+          src={isDark ? KanvasLocatorDark : KanvasLocatorLight}
+          alt="Kanvas visual infrastructure design locator icon"
+        />
+        <img
+          className={`map ${imageInView ? "map-visible" : ""}`}
+          src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight}
+          alt="Kanvas infrastructure visualization diagram showing cloud native components"
+        />
       </div>
     </HeroSectionWrapper>
-
   );
 };
 
-export default KanvasHeroSection;
+export default KanvasHeroSection;

src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js

@@ -6,6 +6,7 @@ import { useInView } from "react-intersection-observer";
 import { useState } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import Button from "../../../reusecore/Button";
+import "react-accessible-accordion/dist/fancy-example.css";
 // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const IntegrationsSectionWrapper = styled.div`
@@ -28,18 +29,19 @@ const IntegrationsSectionWrapper = styled.div`
     flex-direction: column;
     flex: 0 0 40%;
     position: relative;
+
     @media only screen and (max-width: 767px) {
       max-width: 100%;
       margin-top: 15%;
     }
   }
 
-  h1 {
+  h2 {
     font-weight: 100;
     color: white;
   }
 
-  h4 {
+  h3 {
     color: white;
   }
 
@@ -50,66 +52,39 @@ const IntegrationsSectionWrapper = styled.div`
     margin: 5% 0;
     flex: 0 0 25%;
     /* max-width: 25%; */
+
     @media only screen and (max-width: 767px) {
       max-width: 50%;
       margin-top: 10%;
     }
 
     .diagram-hidden {
       opacity: 0;
-      transition: 0.5s ease-out;
-    }
-    .diagram-visible {
-      opacity: 1;
-      transition: 0.5s ease-in;
-    }
-  }
-
-  .underline-img {
-    width: 20%;
-    top: 40%;
-    left: -6%;
-
-    @media only screen and (max-width: 1498px) {
-      top: 27%;
-    }
-    @media only screen and (max-width: 838px) {
-      top: 24%;
-    }
-    @media only screen and (max-width: 767px) {
-      left: 10%;
-      top: 40%;
-    }
-    @media only screen and (max-width: 500px) {
-      left: 0;
-    }
-    @media only screen and (max-width: 407px) {
-      left: 20%;
-      top: 25%;
     }
   }
 `;
 
 const KanvasIntegrationsSection = () => {
-  const [diagramRef, inView] = useInView({ threshold: 0.6 });
+  const [diagramRef, inView] = useInView({
+    threshold: 0.8,
+  });
+
   const [imageInView, setimageInView] = useState(false);
 
-  const integrations = useStaticQuery(graphql`
-    query {
-      allMdx(
-        filter: {
-          fields: { collection: { eq: "integrations" } }
-          frontmatter: { published: { eq: true } }
-        }
-      ) {
-        totalCount
-      }
-    }
-  `);
   if (inView && !imageInView) setimageInView(true);
   else if (imageInView && !inView) setimageInView(false);
 
-  // const { isDark } = useStyledDarkMode();
+  const { allMdx } = useStaticQuery(
+    graphql`
+      query {
+        allMdx(
+          filter: { fields: { collection: { eq: "integrations" } } }
+        ) {
+          totalCount
+        }
+      }
+    `
+  );
 
   return (
     <IntegrationsSectionWrapper>
@@ -119,33 +94,30 @@ const KanvasIntegrationsSection = () => {
         style={{ alignSelf: "center", width: "100%" }}
       >
         <IntegrationsImage
-          alt="integrations-img"
+          alt="390+ Cloud native integrations supported by Kanvas Designer"
           className={imageInView ? "diagram-visible" : "diagram-hidden"}
         />
       </div>
       <div className="hero-text">
         <div>
-          <h1>
-            {Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in
+          <h2>
+            {Math.ceil((allMdx.totalCount / 10) * 10)}+ Built-in
             Integrations
-          </h1>
+          </h2>
         </div>
         <div>
           <img className="underline-img" src={UnderlineImg} alt="" />
         </div>
         <div>
-          <h4>
-            Support for all of your Cloud Native Infrastructure and
-            Applications.
-          </h4>
+          <h3>Support for all of your Cloud Native Infrastructure and Applications.</h3>
         </div>
         <div>
           <Button
             id="integrations"
-            $secondary
+            isSecondary
             style={{ margin: "1.5rem 0 1.5rem 0" }}
             $url="https://layer5.io/cloud-native-management/meshery/integrations"
-            $external={true}
+            $externalLink={true}
           >
             All Integrations
           </Button>