Merge pull request #5279 from layer5io/cards/update-background

[Design Page] Deck of cards background gradient update
layer5io · Jan 12, 2024 · 71356de · 71356de
2 parents 5796e97 + df4fbae
commit 71356de
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 29 deletions.
diff --git a/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js b/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js
@@ -9,13 +9,8 @@ const PopOutCardWrapper = styled.div`
   padding: 2.5rem 3rem;
   height: 360px;
   width: 350px;
-  box-shadow: rgb(38, 57, 77, 0.5) 0px 20px 30px -10px;
-  background: linear-gradient(
-    266.65deg,
-    #00b39f 40.19%,
-    #477e96 74.31%,
-    #3c494f 92.89%
-  );
+  background: linear-gradient(222deg, #077165 2.76%, #1D2827 117.91%);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);  
   transform: translate3d(0, 0, 0);
   border-radius: 20px;
   cursor: pointer;
@@ -31,7 +26,7 @@ const PopOutCardWrapper = styled.div`
   align-items: center ;
 
   h3 {
-    opacity: 0.5;
+    opacity: 0.8;
     color: white !important;
     font-weight: bold;
     padding-bottom: 0.6rem;
@@ -59,8 +54,9 @@ const PopOutCardWrapper = styled.div`
   //dynamic css
   ${(props) => css`
     z-index: ${100 - props.index};
-    ${props.index % 2 ? "" : "background: #00B39F;"}
-    // ${props.index % 2 ? "" : "background: #00B39F;"}
+    ${props.index === 1 ? "background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%);" : ""};
+    ${props.index === 2 ? "background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%);" : ""};
+    ${props.index === 3 ? "    background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%);" : ""};
     transform: rotateZ(${-4 - 6 * props.index}deg) translate(-${props.index *
     36}px, ${props.index * 5}px);
   `}

diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
@@ -17,24 +17,28 @@ const CONTENT = [
     img: dragDrop,
     description:
       "MeshMap automatically catalogs and provides insight into all of your services, datastores and the connections between them, allowing teams to deeply understand application architecture.",
+    gradient: "one",
   },
   {
     title: "Understand your infrastructure with visualization and automation",
     img: mergeDesign,
     description:
       "MeshMap helps your team automate infrastructure understanding from the architecture to a single PR so your team can ship, refactor and onboard to legacy or existing applications faster.",
+    gradient: "two",
   },
   {
     title: "Make working across services as easy as working across files",
     img: connectComponents,
     description:
       "Get automatic visibility into how your services interact in your application so you can confidently change, update or migrate to microservices.",
+    gradient: "three",
   },
   {
     title: "Stop finger-pointing",
     img: shareDesign,
     description:
       "Share your designs publically or in private to collaborate with others in real-time.",
+    gradient: "four",
   },
 ];
 
@@ -73,9 +77,9 @@ export const MeshmapMobileSwiper = () => {
         navigation={false}
         className="mySwiper"
       >
-        {CONTENT.map(({ title, description, img, readMoreLink }, index) => (
+        {CONTENT.map(({ title, description, img, readMoreLink, gradient }) => (
           <SwiperSlide key={title}>
-            <div className={`card ${index % 2 === 0 ? "dark" : "light"}`}>
+            <div className={`card ${gradient}`}>
               <Card title={title} description={description} img={img} readMoreLink={readMoreLink} />
             </div>
           </SwiperSlide>

diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js
@@ -9,24 +9,20 @@ const SwiperContainer = styled.div`
     border-radius: 20px;
   }
 
-  .card.light {
-    box-shadow: none;
-
-    background: linear-gradient(
-      266.65deg,
-      #00b39f 40.19%,
-      #00b39f 74.31%,
-      #3c494f 92.89%
-    );
+  .card.one {
+    background: linear-gradient(222deg, #077165 2.76%, #1D2827 117.91%);
   }
-
-  .card.dark {
-    background: linear-gradient(
-      266.65deg,
-      #00584e 40.19%,
-      #2e5363 74.31%,
-      #212529 92.89%
-    );
+  
+  .card.two {
+    background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%);
+  }
+  
+  .card.three {
+    background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%);
+  }
+  
+  .card.four {
+    background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%);
   }
 
   .card {