added label

Signed-off-by: Shivam Sood <[email protected]>
layer5io · Jun 21, 2023 · 5881181 · 5881181
1 parent e711178
commit 5881181
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 21 deletions.
diff --git a/src/components/Case-study-banner/index.js b/src/components/Case-study-banner/index.js
@@ -114,6 +114,63 @@ const BannerWrapper = styled.div`
     transition: 0.4s ease-in-out; */
 }
 
+.ribbon {
+  display: flex;
+  align-items: center;
+  position: absolute;
+    right: -3px;
+    top: -5px;
+    z-index: 1;
+    overflow: hidden;
+    width: 120px;
+    height: 120px;
+    text-align: right;
+
+    span {
+      padding-left: 1.75rem;
+      font-size: 13px;
+    font-weight: bold;
+    color: ${props => props.theme.whiteToBlack};
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 20px;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    width: 150px;
+    display: block;
+    background: #79A70A;
+    background: ${props => props.theme.yellowEBC0EBToGradient};
+    box-shadow: 0 3px 10px -5px #000;
+    position: absolute;
+    top: 20px;
+    right: -19px;
+    }
+
+    span:before {
+      content: "";
+    position: absolute;
+    left: 0px;
+    top: 100%;
+    z-index: -1;
+    border-left: 3px solid #00B39F;
+    border-right: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    border-top: 3px solid #00B39F;
+    }
+
+    span:after {
+      content: "";
+    position: absolute;
+    right: 0px;
+    top: 100%;
+    z-index: -1;
+    border-left: 3px solid transparent;
+    border-right: 3px solid #00B39F;
+    border-bottom: 3px solid transparent;
+    border-top: 3px solid #00B39F;
+    }
+}
+
 .small-screen {
   display: none;
   text-align: center;
@@ -150,29 +207,34 @@ const CaseStudyBanner = () => {
   };
 
   return (
-    <a href="/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap">
-      <BannerWrapper>
-        <div className="small-screen">
-          <div className="small-screen-desc">
-            <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
-          </div>
-          <div className="meshery-and-spire">
-            <img src={MesheryAndSpire} alt="meshery-and-spire" />
-          </div>
-        </div>
-        <div className="large-screen">
-          <div className={`left-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-            <img src={MesheryLogo} alt="meshery-logo" />
-          </div>
-          <div className={`desc ${hover ? "desc-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-            <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
+    <>
+      <a href="/resources/cloud-native/hpes-adoption-of-meshery-and-meshmap">
+        <BannerWrapper>
+          <div className="small-screen">
+            <div className="small-screen-desc">
+              <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
+            </div>
+            <div className="meshery-and-spire">
+              <img src={MesheryAndSpire} alt="meshery-and-spire" />
+            </div>
           </div>
-          <div className={`right-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-            <img src={SpireLogo} alt="spire-logo" />
+          <div className="large-screen">
+            <div className={`left-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
+              <img src={MesheryLogo} alt="meshery-logo" />
+            </div>
+            <div className={`desc ${hover ? "desc-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
+              <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
+              <div className="ribbon">
+                <span>Case Study</span>
+              </div>
+            </div>
+            <div className={`right-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
+              <img src={SpireLogo} alt="spire-logo" />
+            </div>
           </div>
-        </div>
-      </BannerWrapper>
-    </a>
+        </BannerWrapper>
+      </a>
+    </>
   );
 };
 

diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
@@ -209,6 +209,7 @@ const lighttheme = {
   whiteZeroFiveToBlackZeroFive: "rgb(0 0 0 / 0.05)",
   whiteZeroThreeToBlackZeroOne: "rgb(0 0 0 / 0.01)",
   whiteZeroThreeToBlackZeroThree: "rgb(0 0 0 / 0.03)",
+  yellowEBC0EBToGradient: "rgb(235, 192, 23)",
   integrationsGraphicGradient: "linear-gradient(90deg, #000000 0%, #00D3A9 100%)",
   bannerGradientBackgroundToWhite: "#fff",
   bannerGradientBackground2ToWhite: "#fff",
@@ -434,6 +435,7 @@ export const darktheme = {
   whiteToGreyB3B3B3: "#FFFFFF",
   whiteToGreyE6E6E6: "#FFFFFF",
   whiteToRed662839: "#FFFFFF",
+  yellowEBC0EBToGradient: "linear-gradient(#00D3A9 0%, #00B39F 100%)",
   whiteZeroEightToBlackZeroEight: "rgb(255 255 255 / 0.08)",
   whiteZeroFiveToBlackZeroFive: "rgb(255 255 255 / 0.05)",
   whiteZeroThreeToBlackZeroOne: "rgb(255 255 255 / 0.03)",