Adapt diagram to new texts

estuary · Jan 22, 2025 · 698d039 · 698d039
1 parent 2d4c56d
commit 698d039
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 82 deletions.
diff --git a/src/components/Homepage/MoveAndTransform/index.tsx b/src/components/Homepage/MoveAndTransform/index.tsx
@@ -16,11 +16,11 @@ import {
     diagram,
     card,
     analytics,
-    ops,
+    operations,
     ai,
-    realTime,
-    batch,
-    saas,
+    realTimeStreams,
+    filesAndDatabases,
+    appsAndCloudServices,
     storeAndTransform,
     firstColumnHeading,
     secondColumnHeading,
@@ -43,23 +43,23 @@ const MoveAndTransform = () => {
                     Connect to Any Data Source
                 </h4>
                 <h4 className={secondColumnHeading}>Put Your Data to Work</h4>
-                <div className={clsx(card, realTime)}>
+                <div className={clsx(card, realTimeStreams)}>
                     <RealTimeIcon />
                     <span>Real-time Streams</span>
                 </div>
-                <div className={clsx(card, batch)}>
+                <div className={clsx(card, filesAndDatabases)}>
                     <BatchIcon />
                     <span>Files & Databases</span>
                 </div>
-                <div className={clsx(card, saas)}>
+                <div className={clsx(card, appsAndCloudServices)}>
                     <SaasIcon />
                     <span>Apps & Cloud Services</span>
                 </div>
                 <div className={clsx(card, analytics)}>
                     <AnalyticsIcon />
                     <span>Analytics</span>
                 </div>
-                <div className={clsx(card, ops)}>
+                <div className={clsx(card, operations)}>
                     <OpsIcon />
                     <span>Operations</span>
                 </div>

diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less
@@ -44,7 +44,6 @@
         font-weight: 400;
         line-height: 30px;
         text-align: center;
-        max-width: 75%;
         margin: 24px 0 0 0;
         color: var(--dark-blue);
 
@@ -142,7 +141,7 @@
         position: absolute;
         z-index: 1;
         text-align: center;
-        top: 2.125vw;
+        top: 2.8vw;
         font-size: 1.085vw;
         line-height: 1.275vw;
 
@@ -154,102 +153,81 @@
     }
 
     .firstColumnHeading {
-        left: 3.5vw;
+        left: 1.8vw;
 
         @media (min-width: 1601px) {
-            left: 65px;
+            top: 45px;
+            left: 38px;
         }
-    
+
         @media (max-width: 768px) {
-            top: 6vw;
-            left: 24vw;
+            top: 2%;
+            left: 24%;
             font-size: 3vw;
             line-height: 3.5vw;
         }
-
-        @media (max-width: 425px) {
-            top: 7.5vw;
-            left: 28vw;
-        }
     }
-    
+
     .secondColumnHeading {
-        right: 5.5vw;
-
+        top: 2vw;
+        right: 3.5vw;
+
         @media (min-width: 1601px) {
-            right: 94px;
+            top: 36px;
+            right: 64px;
         }
-    
+
         @media (max-width: 768px) {
-            top: 287vw;
-            left: 6vw;
+            top: 75.3%;
+            left: 6%;
             font-size: 3vw;
             line-height: 3.5vw;
         }
-
-        @media (max-width: 425px) {
-            top: 75.3%;
-        }
     }
 }
 
-.realTime {
+.realTimeStreams {
     top: 8.5vw;
-    left: 6.5vw;
+    left: 4.2vw;
 
     @media (min-width: 1601px) {
-        top: 140px;
-        left: 105px;
+        top: 130px;
+        left: 75px;
     }
 
     @media (max-width: 768px) {
-        top: 22vw;
-        left: 32vw;
-    }
-
-    @media (max-width: 425px) {
-        top: 5.8%;
-        left: 36vw;
+        top: 5.5%;
+        left: 30%;
     }
 }
 
-.batch {
+.filesAndDatabases {
     top: 20vw;
-    left: 7.5vw;
+    left: 4.2vw;
 
     @media (min-width: 1601px) {
         top: 320px;
-        left: 120px;
+        left: 75px;
     }
 
     @media (max-width: 768px) {
-        top: 49vw;
-        left: 35vw;
-    }
-
-    @media (max-width: 425px) {
-        top: 12.8%;
-        left: 39vw;
+        top: 13%;
+        left: 30%;
     }
 }
 
-.saas {
+.appsAndCloudServices {
     top: 30.5vw;
-    left: 7.5vw;
+    left: 2.8vw;
 
     @media (min-width: 1601px) {
         top: 495px;
-        left: 120px;
+        left: 56px;
     }
 
     @media (max-width: 768px) {
-        top: 76vw;
-        left: 35vw;
-    }
-
-    @media (max-width: 425px) {
         top: 19.8%;
-        left: 39.5vw;
+        left: 25%;
     }
 }
 
@@ -263,31 +241,23 @@
     }
 
     @media (max-width: 768px) {
-        top: 301vw;
-        left: 8vw;
-    }
-
-    @media (max-width: 425px) {
-        top: 79%;
+        top: 78.7%;
+        left: 10%;
     }
 }
 
-.ops {
+.operations {
     top: 19vw;
-    right: 8vw;
+    right: 6vw;
 
     @media (min-width: 1601px) {
         top: 310px;
-        right: 130px;
+        right: 100px;
     }
 
     @media (max-width: 768px) {
-        top: 329vw;
-        left: 9vw;
-    }
-
-    @media (max-width: 425px) {
-        top: 86.5%;
+        top: 86%;
+        left: 10%;
     }
 }
 
@@ -301,12 +271,8 @@
     }
 
     @media (max-width: 768px) {
-        top: 357vw;
-        left: 9vw;
-    }
-
-    @media (max-width: 425px) {
         top: 93.5%;
+        left: 10%;
     }
 }
 
@@ -334,4 +300,4 @@
         top: 50.5%;
         gap: 8px;
     }
-}
+}