diff --git a/src/components/Homepage/MoveAndTransform/index.tsx b/src/components/Homepage/MoveAndTransform/index.tsx index 41f366c2..d6097fcd 100644 --- 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,15 +43,15 @@ const MoveAndTransform = () => { Connect to Any Data Source

Put Your Data to Work

-
+
Real-time Streams
-
+
Files & Databases
-
+
Apps & Cloud Services
@@ -59,7 +59,7 @@ const MoveAndTransform = () => { Analytics
-
+
Operations
diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less index 57877003..30b8860b 100644 --- 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; } -} +} \ No newline at end of file