From 1f9a8dcbfb6033847a8f4fdc818c3b9cc85c49ca Mon Sep 17 00:00:00 2001
From: surajgjadhav <surajjadhavasmi@gmail.com>
Date: Thu, 13 Jun 2024 21:03:22 +0530
Subject: [PATCH 1/3] reafctor(5448): changes related to SEO

Signed-off-by: surajgjadhav <surajjadhavasmi@gmail.com>
---
 .../Meshmap_Mobile_swiper/MeshmapMobileSwiper.js       |  6 +++---
 .../Meshmap/Meshmap-design/meshmap-design-banner.js    | 10 +++++-----
 .../Meshmap/Meshmap-design/meshmap-design-hero.js      | 10 ++--------
 .../Meshmap-design/meshmap-design-integrations.js      | 10 +++-------
 src/sections/Meshmap/signup-form.js                    |  1 +
 src/sections/Pricing/review-slider.js                  |  6 +++---
 6 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
index 1cb1e20f7a42..fd647cd1af34 100644
--- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
+++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import SwiperContainer from "./mobile-swiper.style.js";
@@ -55,7 +55,7 @@ const Card = ({ title, description, img, readMoreLink }) => {
   );
 };
 
-export const MeshmapMobileSwiper = () => {
+export const MeshmapMobileSwiper = memo(() => {
   return (
     <SwiperContainer>
       <h2>Multi user real time collaboration</h2>
@@ -87,5 +87,5 @@ export const MeshmapMobileSwiper = () => {
       </Swiper>
     </SwiperContainer>
   );
-};
+});
 
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
index 57d872e593e1..81107591af5d 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import styled from "styled-components";
 // uncomment if need
 // import { ReactComponent as BannerImage } from "./images/banner-image-colorMode.svg";
@@ -151,7 +151,7 @@ const DesignBannerWrapper = styled.div`
     }
 `;
 
-const MeshmapDesignBanner = () => {
+const MeshmapDesignBanner = memo(() => {
 
   return (
     <DesignBannerWrapper>
@@ -166,11 +166,11 @@ 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>
 
   );
-};
+});
 
 export default MeshmapDesignBanner;
\ No newline at end of file
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-hero.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-hero.js
index e1f079bd3b08..825fe8b52755 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-hero.js
+++ b/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>
 
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
index 9048f5507915..28925f2a37f1 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
@@ -1,9 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 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>
diff --git a/src/sections/Meshmap/signup-form.js b/src/sections/Meshmap/signup-form.js
index 081d79737872..7063fd19fd51 100644
--- a/src/sections/Meshmap/signup-form.js
+++ b/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"
diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js
index 409c529cdb81..67dd04d0f983 100644
--- a/src/sections/Pricing/review-slider.js
+++ b/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";
@@ -78,7 +78,7 @@ max-width: 100%;
 `;
 
 
-const Reviews = () => {
+const Reviews = memo(() => {
   return (
     <ReviewsWrapper>
       <div className="slider">
@@ -208,6 +208,6 @@ const Reviews = () => {
       </div>
     </ReviewsWrapper>
   );
-};
+});
 
 export default Reviews;

From b00d1294825806f4cb0e24e1b65dcdedc647149a Mon Sep 17 00:00:00 2001
From: surajgjadhav <surajjadhavasmi@gmail.com>
Date: Thu, 13 Jun 2024 22:33:49 +0530
Subject: [PATCH 2/3] removed unused import

Signed-off-by: surajgjadhav <surajjadhavasmi@gmail.com>
---
 .../Meshmap/Meshmap-design/meshmap-design-integrations.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
index 28925f2a37f1..ede4258fb583 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
 import { ReactComponent as IntegrationsImage } from "./images/integration-image-colorMode.svg";
 import UnderlineImg from "./images/underline.svg";

From 1453e9a4b554f89f521d621ee391257176ae01f1 Mon Sep 17 00:00:00 2001
From: surajgjadhav <surajjadhavasmi@gmail.com>
Date: Sat, 22 Jun 2024 10:51:33 +0530
Subject: [PATCH 3/3] refactor: removed memo from components

Signed-off-by: surajgjadhav <surajjadhavasmi@gmail.com>
---
 .../Meshmap_Mobile_swiper/MeshmapMobileSwiper.js          | 8 +++-----
 .../Meshmap/Meshmap-design/meshmap-design-banner.js       | 6 +++---
 src/sections/Pricing/review-slider.js                     | 4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
index fd647cd1af34..d2edd8295617 100644
--- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
+++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import SwiperContainer from "./mobile-swiper.style.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",
@@ -55,7 +54,7 @@ const Card = ({ title, description, img, readMoreLink }) => {
   );
 };
 
-export const MeshmapMobileSwiper = memo(() => {
+export const MeshmapMobileSwiper = () => {
   return (
     <SwiperContainer>
       <h2>Multi user real time collaboration</h2>
@@ -87,5 +86,4 @@ export const MeshmapMobileSwiper = memo(() => {
       </Swiper>
     </SwiperContainer>
   );
-});
-
+};
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
index 81107591af5d..8d6473b27e68 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-banner.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import styled from "styled-components";
 // uncomment if need
 // import { ReactComponent as BannerImage } from "./images/banner-image-colorMode.svg";
@@ -151,7 +151,7 @@ const DesignBannerWrapper = styled.div`
     }
 `;
 
-const MeshmapDesignBanner = memo(() => {
+const MeshmapDesignBanner = () => {
 
   return (
     <DesignBannerWrapper>
@@ -171,6 +171,6 @@ const MeshmapDesignBanner = memo(() => {
     </DesignBannerWrapper>
 
   );
-});
+};
 
 export default MeshmapDesignBanner;
\ No newline at end of file
diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js
index 67dd04d0f983..a7d71479bbe6 100644
--- a/src/sections/Pricing/review-slider.js
+++ b/src/sections/Pricing/review-slider.js
@@ -78,7 +78,7 @@ max-width: 100%;
 `;
 
 
-const Reviews = memo(() => {
+const Reviews = () => {
   return (
     <ReviewsWrapper>
       <div className="slider">
@@ -208,6 +208,6 @@ const Reviews = memo(() => {
       </div>
     </ReviewsWrapper>
   );
-});
+};
 
 export default Reviews;