From 1f961d08c22b906edafaab0c414d8f7b62edf3e4 Mon Sep 17 00:00:00 2001
From: Yaten Dhingra <yaten598@gmail.com>
Date: Thu, 17 Oct 2024 00:08:36 +0530
Subject: [PATCH] changed <img /> to <StaticImage /> to improve performance

Signed-off-by: Yaten Dhingra <yaten598@gmail.com>
---
 src/components/Case-study-banner/index.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Case-study-banner/index.js b/src/components/Case-study-banner/index.js
index 4d7f6dea6e89..f3cae5d431a7 100644
--- a/src/components/Case-study-banner/index.js
+++ b/src/components/Case-study-banner/index.js
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import MesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg";
-import SpireLogo from "../../collections/integrations/spire/icons/color/spire-color.svg";
-import MesheryAndSpire from "../../collections/resources/case-study/hpes-adoption-of-meshery-and-kanvas/meshery-and-hpe.svg";
+import { StaticImage } from "gatsby-plugin-image";
 
 
 const BannerWrapper = styled.div`
@@ -43,6 +41,14 @@ const BannerWrapper = styled.div`
 
 }
 
+.left-img > .gatsby-image-wrapper {
+  border-radius: 50%;
+  width: 50%;
+  overflow: hidden;
+  height: auto;
+  object-fit: contain;
+}
+
 .desc {
   display: flex;
   background:${props => props.theme.bannerDescriptionGradient};
@@ -215,12 +221,12 @@ const CaseStudyBanner = () => {
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
             </div>
             <div className="meshery-and-spire">
-              <img src={MesheryAndSpire} alt="meshery-and-spire" />
+              <StaticImage src="../../collections/resources/case-study/hpes-adoption-of-meshery-and-kanvas/meshery-and-hpe.svg" />
             </div>
           </div>
           <div className="large-screen">
             <div className={`left-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={MesheryLogo} alt="meshery-logo" />
+              <StaticImage src="../../assets/images/meshery/icon-only/meshery-logo-light.svg" /* style={{ borderRadius: "50%" }} */ />
             </div>
             <div className={`desc ${hover ? "desc-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
@@ -229,7 +235,7 @@ const CaseStudyBanner = () => {
               </div>
             </div>
             <div className={`right-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={SpireLogo} alt="spire-logo" />
+              <StaticImage src="../../collections/integrations/spire/icons/color/spire-color.svg" />
             </div>
           </div>
         </BannerWrapper>