refactor(5448): changes related to SEO

src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js

@@ -10,7 +10,6 @@ import mergeDesign from "../images/merge-design.gif";
 import connectComponents from "../images/connect-components.gif";
 import shareDesign from "../images/share-design.gif";
 
-
 const CONTENT = [
   {
     title: "Confidently make changes to your infrastructure",
@@ -88,4 +87,3 @@ export const MeshmapMobileSwiper = () => {
     </SwiperContainer>
   );
 };
-

src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js

@@ -166,8 +166,8 @@ const MeshmapDesignBanner = () => {
         <Button secondary title="Experience context-aware design" url="https://meshery.layer5.io" external={ true } />
         <h5>Upload your Helm Chart or Kubernetes manifest to have your infra diagrammed</h5>
       </div>
-      <img className="dots-upper" src={BackgroundDotsPattern}  />
-      <img className="dots-lower" src={BackgroundDotsPattern}  />
+      <img className="dots-upper" src={BackgroundDotsPattern}  alt="dots"/>
+      <img className="dots-lower" src={BackgroundDotsPattern}  alt="dots"/>
     </DesignBannerWrapper>
 
   );

src/sections/Meshmap/Meshmap-design/meshmap-design-hero.js

@@ -5,7 +5,6 @@ import MeshmapLocatorDark from "./images/meshmap-locator-dark.svg";
 import MeshmapImageBottomLight from "./images/meshmap-bottom-image-light.svg";
 import MeshmapImageBottomDark from "./images/meshmap-bottom-image-dark.svg";
 import { useInView } from "react-intersection-observer";
-import { useState } from "react";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const HeroSectionWrapper = styled.div`
@@ -77,11 +76,6 @@ const HeroSectionWrapper = styled.div`
 
 const MeshmapHeroSection = () => {
   const [locatorRef, inView] = useInView({ threshold: 0.8 });
-  const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
 
@@ -92,8 +86,8 @@ const MeshmapHeroSection = () => {
         <p>MeshMap 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 ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
-        <img className={imageInView ? "map map-visible" : "map"} src={isDark ? MeshmapImageBottomDark : MeshmapImageBottomLight} alt="integrations" ref={locatorRef} />
+        <img className={inView ? "locator-moving" : "locator"} src={isDark ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
+        <img className={inView ? "map map-visible" : "map"} src={isDark ? MeshmapImageBottomDark : MeshmapImageBottomLight} alt="integrations" ref={locatorRef} />
       </div>
     </HeroSectionWrapper>
 

src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { ReactComponent as IntegrationsImage } from "./images/integration-image-colorMode.svg";
 import UnderlineImg from "./images/underline.svg";
 import { useInView } from "react-intersection-observer";
-import { useState } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import Button from "../../../reusecore/Button";
 // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
@@ -92,7 +91,6 @@ const IntegrationsSectionWrapper = styled.div`
 
 const MeshmapIntegrationsSection = () => {
   const [diagramRef, inView] = useInView({ threshold: 0.6 });
-  const [imageInView, setimageInView] = useState(false);
 
   const integrations = useStaticQuery(graphql`
     query {
@@ -106,8 +104,6 @@ const MeshmapIntegrationsSection = () => {
       }
     }
   `);
-  if (inView && !imageInView) setimageInView(true);
-  else if (imageInView && !inView) setimageInView(false);
 
   // const { isDark } = useStyledDarkMode();
 
@@ -120,7 +116,7 @@ const MeshmapIntegrationsSection = () => {
       >
         <IntegrationsImage
           alt="integrations-img"
-          className={imageInView ? "diagram-visible" : "diagram-hidden"}
+          className={inView ? "diagram-visible" : "diagram-hidden"}
         />
       </div>
       <div className="hero-text">
@@ -131,7 +127,7 @@ const MeshmapIntegrationsSection = () => {
           </h1>
         </div>
         <div>
-          <img className="underline-img" src={UnderlineImg} />
+          <img className="underline-img" src={UnderlineImg}  alt="underline"/>
         </div>
         <div>
           <h4>

src/sections/Meshmap/signup-form.js

@@ -47,6 +47,7 @@ const SignupForm = ({ targetRef }) => {
                   <img src={MeshMapDrafts} alt="MeshMap Draft" /></a><br />
                 <p><a target="_blank" href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA" rel="noreferrer">Vote for your favorite design</a></p> */}
                 <iframe
+                  title="Meshery, the collaborative Kubernetes manager"
                   width="95%"
                   height="100%"
                   src="https://www.youtube.com/embed/034nVaQUyME?si=Xip0JqrwiG2QY5vp"

src/sections/Pricing/review-slider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import styled from "styled-components";
 import Customers from "../../reusecore/Blockquote/Blockquote-image";
 import Slider from "react-slick";