Feature/integrations columns

src/sections/Home/Playground-home/index.js

@@ -19,6 +19,9 @@ const ViewsSectionWrapper = styled.div`
     .small-card-container {
       display: flex;
       gap: 1rem;
+      @media only screen and (max-width: 767px) {
+        justify-content: center;
+      }
     }
 
     .views-section {
@@ -35,13 +38,14 @@ const ViewsSectionWrapper = styled.div`
     align-items: center;
     padding: 0 5% 0 0;
     box-sizing: border-box;
-    //box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     overflow: hidden;
 
     @media only screen and (max-width: 767px) {
       text-align: center;
       flex-direction: column-reverse;
+      height: auto;
+      padding: 1.5rem;
     }
 }
     .hero-text {
@@ -54,11 +58,11 @@ const ViewsSectionWrapper = styled.div`
           max-width: 100%;
           justify-content: center;
           text-align: center;
+          padding-bottom: 1rem;
         }
     }
 
     h2 {
-        /* max-width: 90%; */
         padding-bottom: 2%;
       }
     }
@@ -105,14 +109,15 @@ const ViewsSectionWrapper = styled.div`
 
     }
 
-    .overlay {
-        width: 483px;
-        height: 680px;
-    }
-
     .container {
       display: flex;
       justify-content: center;
+      width: 100%;
+      @media only screen and (max-width: 767px) {
+          flex-direction: column;
+          margin: 1rem 0;
+          padding: 0 1rem;
+        }
     }
 
     .line {
@@ -121,62 +126,140 @@ const ViewsSectionWrapper = styled.div`
       align-items: center;
       margin-right: 2rem;
       flex-wrap: wrap;
+      @media only screen and (max-width: 767px) {
+          flex-direction: row;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          align-items: center;
+          justify-content: center;
+        }
     }
-    .position-line-down{
-        transform: translateY(-20em);
-    }
-    .position-line-up{
-        transform: translateY(20em);
+    .position-line-down-left {
+      //For tablet/desktop screens, icons will move down vertically
+      transform: translateY(-20rem);
+
+      //For mobile screens, icons will move to the left horizontally
+      @media only screen and (max-width: 767px) {
+        transform: translateX(-20rem);
+      }
     }
+        .position-line-up-right {
+      //For tablet/desktop screens, icons will move up vertically
+      transform: translateY(20rem);
 
-    .line-primary, .line-secondary {
+      //For mobile screens, icons will move to the right horizontally
+      @media only screen and (max-width: 767px) {
+        transform: translateX(20rem);
+      }
+    } 
+
+    .line-primary {
         width: 100%;
         display: flex;
         flex-direction: column;
+        flex: 1;
+        margin: 0 5%;
+        @media only screen and (max-width: 767px) {
+          flex-direction: row;
+        }
     }
 
+     // Animation
+
+      // Vertical animation for tablet screen sizes and up.
     .animation-up-scroll {
-        animation: scroll-up-animation 15s linear infinite;
+      animation: scroll-up-animation 15s linear infinite;
 
-        @keyframes scroll-up-animation {
-            0% {
-                transform: translateY(0%);
-            }
-            100% {
-                transform: translateY(-100%);
-            }
+      @keyframes scroll-up-animation {
+        0% {
+          transform: translateY(0%);
         }
+        100% {
+          transform: translateY(-100%);
+        }
+      }
+
+      @media only screen and (max-width: 767px) {
+        //to disable vertical animation on mobile in favor of horizontal animation
+        animation: none; 
+      }
     }
+
     .animation-down-scroll {
+      animation: scroll-down-animation 15s linear infinite;
+
+      @keyframes scroll-down-animation {
+        0% {
+            transform: translateY(0%);
+        }
+        100% {
+            transform: translateY(100%);
+        }
+      }
 
-        animation: scroll-down-animation 15s linear infinite;
-        @keyframes scroll-down-animation {
-            0% {
-                transform: translateY(0);
-            }
-            100% {
-                transform: translateY(100%);
-            }
+      @media only screen and (max-width: 767px) {
+        //to disable vertical animation on mobile in favor of horizontal animation for smaller screens
+        animation: none; 
+      }
+    }
+
+    .animation-left-scroll {
+      animation: scroll-left-animation 10s linear infinite;
+
+      @keyframes scroll-left-animation {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(-20rem);
+        }
+      }
+
+     @media only screen and (min-width: 768px) {
+        //to disable horizontal animation on mobile in favor of vertical animation for larger screens
+        animation: none; 
+      }
+    }
+
+    //horizontal animation- to the right
+    .animation-right-scroll {
+      animation: scroll-right-animation 10s linear infinite;
+
+      @keyframes scroll-right-animation {
+        0% {
+          transform: translateX(-20rem);
+        }
+        100% {
+          transform: translateX(0);
         }
+      }
+
+     @media only screen and (min-width: 768px) {
+        //to disable horizontal animation on mobile in favor of vertical animation for larger screens
+        animation: none; 
+      }
     }
-    .box {
+
+        .box {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
-      height:150px;
+      height: 150px;
       padding: 2rem;
       box-sizing: border-box;
       background-color: ${(props) => props.theme.backgroundColor}; 
       margin-bottom: 1rem; 
       border-radius: 1rem;
-      //box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive};
-    }
-    // .box:hover {
-    //   box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
-    // }
 
+      @media only screen and (max-width: 767px) {
+        flex: 0 0 auto;
+        margin: 5%;
+        width: 125px;
+        height: 125px;
+      }
+    }
     .box .boxImg {
       width: auto;
       height: 60px;
@@ -188,20 +271,6 @@ const ViewsSectionWrapper = styled.div`
       text-align: center;
     }
 
-    @media only screen and (max-width: 700px) {
-      .hero-image {
-        display: none; 
-      }
-      .views-section {
-        padding: 2rem 2rem 0 2rem;
-        height: auto;
-      }
-      .small-card-container {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
 `;
 
 const KanvasVisualizerViews = () => {
@@ -215,18 +284,12 @@ const KanvasVisualizerViews = () => {
     <ViewsSectionWrapper>
       <div className="views-section">
         <div className="hero-image" ref={imageRef}>
-          {/* <img
-            className={imageInView ? "lines-visible" : "not-visible"}
-            src={CommentingImageDark}
-            alt=""
-          /> */}
           <div
-            // className={
-            //   imageInView ? "visible container" : "not-visible container"
-            // }
-            className="visible container"
+            className={
+              imageInView ? "visible container" : "not-visible container"
+            }
           >
-            <div className="line position-line-down">
+            <div className="line position-line-down-left animation-left-scroll">
               <div className="line-primary animation-down-scroll">
                 <div className="box">
                   <img className="boxImg" src={prometheus} alt="" />
@@ -247,7 +310,7 @@ const KanvasVisualizerViews = () => {
               </div>
 
             </div>
-            <div className="line position-line-up">
+            <div className="line position-line-up-right animation-right-scroll">
               <div className="line-primary animation-up-scroll">
                 <div className="box">
                   <img className="boxImg" src={kubernetes} alt="" />