Undo some homepage updates (#660)

* Add the TheBestRealTimeCdc section back to homepage * And back InnovativeFaster section as well * And back InnovativeFaster section to homepage component * Add back previous homepage main title --------- Co-authored-by: Breno <[email protected]>
estuary · Jan 31, 2025 · 31f2252 · 31f2252
1 parent 18daae7
commit 31f2252
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 5 deletions.
diff --git a/src/components/Homepage/Hero/index.tsx b/src/components/Homepage/Hero/index.tsx
@@ -20,10 +20,10 @@ const Hero = () => {
                 <HeroSectionDetails
                     title={
                         <>
-                            <span>
-                                YOUR DATA. <br /> ANYTIME,
-                            </span>{' '}
-                            <span>ANYWHERE.</span>
+                            <span className="white-text">MEET</span>{' '}
+                            <span>THE FASTEST</span>
+                            <span>,</span> <span>MOST RELIABLE</span>{' '}
+                            <span className="white-text">ETL</span>
                         </>
                     }
                     description="Secure data integration with Estuary Flow, the enterprise data movement platform for real-time streaming and batch processing."

diff --git a/src/components/Homepage/InnovateFaster/index.tsx b/src/components/Homepage/InnovateFaster/index.tsx
@@ -0,0 +1,26 @@
+import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground';
+import MainConnectors from '../../MainConnectors';
+import { textWrapper } from '../styles.module.less';
+import Container from '../../Container';
+import { wrapper } from './styles.module.less';
+
+const InnovateFaster = () => {
+    return (
+        <DarkSwoopingLinesLeftDirectionBackground>
+            <Container isVertical className={wrapper}>
+                <div className={textWrapper}>
+                    <h2>INNOVATE FASTER</h2>
+                    <p>
+                        Innovate faster with a single data pipeline that
+                        decouples sources and destinations so you can share data
+                        across analytics, apps, and AI, and add or change
+                        systems, all without impacting others.
+                    </p>
+                </div>
+                <MainConnectors />
+            </Container>
+        </DarkSwoopingLinesLeftDirectionBackground>
+    );
+};
+
+export default InnovateFaster;
diff --git a/src/components/Homepage/InnovateFaster/styles.module.less b/src/components/Homepage/InnovateFaster/styles.module.less
@@ -0,0 +1,32 @@
+@import '../../../globalStyles/sections.module.less';
+
+.wrapper {
+    padding-right: 0;
+
+    h2 {
+        .globalMaxWidth;
+        padding-left: 0;
+    }
+
+    p {
+        .globalMaxWidth;
+
+        padding-left: 0;
+        width: 100%;
+        margin: 0;
+        text-align: center;
+    }
+
+    @media (max-width: 425px) {
+        h2 {
+            padding-left: 0;
+            padding-right: 20px;
+            font-size: 1.75rem;
+        }
+
+        p {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+}
diff --git a/src/components/Homepage/TheBestRealTimeCdc/index.tsx b/src/components/Homepage/TheBestRealTimeCdc/index.tsx
@@ -0,0 +1,64 @@
+import { StaticImage } from 'gatsby-plugin-image';
+import RealTimeCdc from '../../../svgs/real-time-cdc.svg';
+import Advantages from '../../Advantages';
+import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
+import LinkFilled from '../../LinksAndButtons/LinkFilled';
+
+const TheBestRealTimeCdc = () => {
+    return (
+        <section className={defaultWrapperGrey}>
+            <Advantages
+                icon={<RealTimeCdc />}
+                title={
+                    <>
+                        USE THE BEST <span>REAL-TIME CDC</span>
+                    </>
+                }
+                subtitle="Estuary Flow is the most real-time, most reliable change
+                            data capture (CDC) available today. It is the only CDC
+                            with:"
+                image={
+                    <StaticImage
+                        src="../../../images/real-time-graphic.png"
+                        alt="Real-time ETL with Estuary Flow: Seamlessly move data from source to destination for immediate analysis and actionable insights."
+                        placeholder="none"
+                        quality={100}
+                    />
+                }
+                advantages={[
+                    {
+                        id: 18,
+                        title: 'Sub-100ms end-to-end latency',
+                    },
+                    {
+                        id: 19,
+                        title: 'Reliable delivery via exactly-once guarantees',
+                    },
+                    {
+                        id: 20,
+                        title: 'Flexible pipelines that run at your speed of choice',
+                    },
+                    {
+                        id: 21,
+                        title: 'Fully automated schema evolution',
+                    },
+                    {
+                        id: 22,
+                        title: 'Ability to maintain a current view or all change history in the destination',
+                    },
+                    {
+                        id: 23,
+                        title: 'Truly elastic scaling pipelines for maximum throughput',
+                    },
+                ]}
+                ctaButtons={
+                    <LinkFilled href="/integrations/">
+                        View Connectors
+                    </LinkFilled>
+                }
+            />
+        </section>
+    );
+};
+
+export default TheBestRealTimeCdc;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,10 +10,12 @@ import AutomateDataops from '../components/Homepage/AutomateDataops';
 import Do4xMoreWith25xLess from '../components/Homepage/Do4xMoreWith25xLess';
 import WhatPeopleAreSaying from '../components/Homepage/WhatPeopleAreSaying';
 import DeploymentModes from '../components/Homepage/DeploymentModes';
+import TheBestRealTimeCdc from '../components/Homepage/TheBestRealTimeCdc';
 import SeeHowSection from '../components/SeeHowSection';
 import OutboundLinkFilled from '../components/LinksAndButtons/OutboundLinkFilled';
 import LinkOutlined from '../components/LinksAndButtons/LinkOutlined';
 import { dashboardRegisterUrl } from '../../shared';
+import InnovateFaster from '../components/Homepage/InnovateFaster';
 
 const IndexPage = () => {
     return (
@@ -22,9 +24,11 @@ const IndexPage = () => {
             <MoveAndTransform />
             <SuccessStories />
             <DeploymentModes />
+            <SecureYourData />
+            <TheBestRealTimeCdc />
             <BuildInMinutes />
             <AutomateDataops />
-            <SecureYourData />
+            <InnovateFaster />
             <Do4xMoreWith25xLess />
             <WhatPeopleAreSaying />
             <SeeHowSection