Replace move and transform section image for desktop version

estuary · Jan 22, 2025 · 2ee3095 · 2ee3095
1 parent df36dba
commit 2ee3095
Show file tree

Hide file tree

Showing 11 changed files with 277 additions and 53 deletions.
diff --git a/src/components/Homepage/MoveAndTransform/index.tsx b/src/components/Homepage/MoveAndTransform/index.tsx
@@ -1,16 +1,20 @@
 import { StaticImage } from 'gatsby-plugin-image';
-import DiagramSourceConnectors from '../../DiagramConnectors/DiagramSourceConnectors';
-import DiagramDestinationConnectors from '../../DiagramConnectors/DiagramDestinationConnectors';
-import FlowCycle from '../../../svgs/flow-cycle.svg';
+import RealTimeIcon from '../../../svgs/homepage/real-time.svg';
+import BatchIcon from '../../../svgs/homepage/batch.svg';
+import SaasIcon from '../../../svgs/homepage/saas.svg';
+import AnalyticsIcon from '../../../svgs/homepage/analytics.svg';
+import OpsIcon from '../../../svgs/homepage/ops.svg';
+import AiIcon from '../../../svgs/homepage/ai.svg';
+import StoreIcon from '../../../svgs/homepage/store.svg';
+import TransformIcon from '../../../svgs/homepage/transform.svg';
 import {
     container,
-    desktopDiagramWrapper,
     header,
     step,
     steps,
     mobileImage,
-    connectorsGroups,
-    flowCycleMiddleImage,
+    diagram,
+    card,
 } from './styles.module.less';
 
 const MoveAndTransform = () => {
@@ -27,54 +31,57 @@ const MoveAndTransform = () => {
             </div>
             <div className={steps}>
                 <div className={step}>
-                    {/* <div className={StepIconWrapper}> */}
-                    {/* <CaptureIcon /> */}
-                    {/* </div> */}
-                    <div>
-                        <h3>
-                            <span>01</span>Ingest
-                        </h3>
-                        <p>200+ no-code connectors. Real-time or batch.</p>
-                    </div>
+                    <h3>Move</h3>
+                    <p>200+ no-code connectors. Real-time or batch.</p>
                 </div>
-
                 <div className={step}>
-                    {/* <div className={StepIconWrapper}>
-                        <StoreAndTransformIcon />
-                    </div> */}
-                    <div>
-                        <h3>
-                            <span>02</span>Transform
-                        </h3>
-                        <p>Transform and store data in storage owned by you.</p>
-                    </div>
+                    <h3>Transform</h3>
+                    <p>Transform and store data in storage owned by you.</p>
                 </div>
-
-                <div className={step}>
-                    {/* <div className={StepIconWrapper}>
-                        <RealTimeDelivery />
-                    </div> */}
+            </div>
+            <div className={diagram}>
+                <h4>
+                    Connect to Any Data <br /> Source
+                </h4>
+                <h4>Activate Data</h4>
+                <div className={card}>
+                    <RealTimeIcon />
+                    <span>Real-time</span>
+                </div>
+                <div className={card}>
+                    <BatchIcon />
+                    <span>Batch</span>
+                </div>
+                <div className={card}>
+                    <SaasIcon />
+                    <span>Saas</span>
+                </div>
+                <div className={card}>
+                    <AnalyticsIcon />
+                    <span>Analytics</span>
+                </div>
+                <div className={card}>
+                    <OpsIcon />
+                    <span>Ops</span>
+                </div>
+                <div className={card}>
+                    <AiIcon />
+                    <span>AI</span>
+                </div>
+                <div className={card}>
                     <div>
-                        <h3>
-                            <span>03</span>Load
-                        </h3>
-                        <p>
-                            Materialize data to your destination at any cadence.
-                        </p>
+                        <StoreIcon />
+                        <TransformIcon />
                     </div>
+                    <h4>
+                        Store and <br /> Transform
+                    </h4>
                 </div>
-            </div>
-            <div className={desktopDiagramWrapper}>
-                <DiagramSourceConnectors
-                    connectorsGroupsClassName={connectorsGroups}
-                />
-                <FlowCycle
-                    width="100%"
-                    height="100%"
-                    className={flowCycleMiddleImage}
-                />
-                <DiagramDestinationConnectors
-                    connectorsGroupsClassName={connectorsGroups}
+                <StaticImage
+                    placeholder="blurred"
+                    alt=""
+                    src="../../../images/homepage/move-and-transform-data.png"
+                    quality={100}
                 />
             </div>
             <StaticImage

diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less
@@ -65,16 +65,14 @@
 
 .step {
     display: flex;
+    flex-direction: column;
     gap: 16px;
     width: 33%;
     border: 4px dotted var(--border-color);
     border-radius: 16px;
     padding: 16px;
     position: relative;
-
-    @media (max-width: 1115px) {
-        width: 100%;
-    }
+    width: 100%;
 
     h3 {
         font-size: 1.25rem;
@@ -104,7 +102,7 @@
         font-weight: 400;
         line-height: 30px;
         color: var(--grey);
-        margin: 12px 0 0 0;
+        margin: 0;
     }
 }
 
@@ -150,4 +148,153 @@
     @media (min-width: 769px) {
         display: none !important;
     }
+}
+
+.diagram {
+    position: relative;
+
+    @media (max-width: 768px) {
+        display: none;
+    }
+
+    h4 {
+        font-weight: 800;
+        color: var(--grey);
+        position: absolute;
+        z-index: 1;
+        text-align: center;
+        top: 2.125vw;
+        font-size: 1.085vw;
+        line-height: 1.275vw;
+
+        @media (min-width: 1601px) {
+            font-size: 1rem;
+            line-height: 19.2px;
+            top: 36px;
+        }
+    }
+
+    h4:first-of-type {
+        left: 3.5vw;
+
+        @media (min-width: 1601px) {
+            left: 65px;
+        }
+    }
+
+    h4:nth-of-type(2) {
+        right: 5.5vw;
+
+        @media (min-width: 1601px) {
+            right: 94px;
+        }
+    }
+
+    div:first-of-type {
+        top: 8.5vw;
+        left: 6.5vw;
+
+        @media (min-width: 1601px) {
+            top: 140px;
+            left: 105px;
+        }
+    }
+
+    div:nth-of-type(2) {
+        top: 20vw;
+        left: 7.5vw;
+
+        @media (min-width: 1601px) {
+            top: 320px;
+            left: 120px;
+        }
+    }
+
+    div:nth-of-type(3) {
+        top: 30.5vw;
+        left: 7.5vw;
+
+        @media (min-width: 1601px) {
+            top: 495px;
+            left: 120px;
+        }
+    }
+
+    div:nth-of-type(4) {
+        top: 7.5vw;
+        right: 6.5vw;
+
+        @media (min-width: 1601px) {
+            top: 122px;
+            right: 110px;
+        }
+    }
+
+    div:nth-of-type(5) {
+        top: 19vw;
+        right: 8vw;
+
+        @media (min-width: 1601px) {
+            top: 310px;
+            right: 130px;
+        }
+    }
+
+    div:nth-of-type(6) {
+        top: 31vw;
+        right: 8vw;
+
+        @media (min-width: 1601px) {
+            top: 500px;
+            right: 130px;
+        }
+    }
+
+    div:nth-of-type(7) {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        div {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        h4 {
+            position: static;
+        }
+    }
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5vw;
+    position: absolute;
+    z-index: 1;
+
+    @media (min-width: 1601px) {
+        gap: 12px;
+    }
+
+    span {
+        font-size: 1.125vw;
+        font-weight: 500;
+
+        @media (min-width: 1601px) {
+            font-size: 1rem;
+        }
+    }
+
+    svg {
+        width: 2vw;
+        height: 2vw;
+
+        @media (min-width: 1601px) {
+            width: 32px;
+            height: 32px;
+        }
+    }
 }
diff --git a/src/images/homepage/move-and-transform-data.png b/src/images/homepage/move-and-transform-data.png
diff --git a/src/svgs/homepage/ai.svg b/src/svgs/homepage/ai.svg
diff --git a/src/svgs/homepage/analytics.svg b/src/svgs/homepage/analytics.svg