-
- Browse the Complete List of Comparisons
-
-
Choose a vendor and see how it compares to the rest.
+
+
+
+ Browse the Complete List of Comparisons
+
+
Choose a vendor and see how it compares to the rest.
+
{
value={selectedVendorId}
keepMounted
hidden={selectedVendorId !== id}
+ sx={{ width: '100%' }}
>
{vendors
@@ -137,9 +141,9 @@ const SectionThree = ({ estuaryVendor, vendors }: SectionThreeProps) => {
))}
-
+
);
};
-export default SectionThree;
+export default ListOfComparisons;
diff --git a/src/components/EtlToolsPage/SectionThree/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/styles.module.less
similarity index 78%
rename from src/components/EtlToolsPage/SectionThree/styles.module.less
rename to src/components/EtlToolsPage/ListOfComparisons/styles.module.less
index 738ffc71..6a2f191b 100644
--- a/src/components/EtlToolsPage/SectionThree/styles.module.less
+++ b/src/components/EtlToolsPage/ListOfComparisons/styles.module.less
@@ -1,16 +1,7 @@
@import '../../../globalStyles/sections.module.less';
-.container {
- .globalMaxWidth;
-
- display: flex;
- flex-direction: column;
- gap: 24px;
+.textWrapper {
text-align: center;
-
- p {
- margin-top: 0;
- }
}
.tabs {
@@ -28,9 +19,7 @@
.gridCards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
- width: 100%;
gap: 24px;
- margin-top: 24px;
@media (max-width: 824px) {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
diff --git a/src/components/EtlToolsPage/index.tsx b/src/components/EtlToolsPage/index.tsx
deleted file mode 100644
index aa7cc793..00000000
--- a/src/components/EtlToolsPage/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SectionOne from './SectionOne';
-import SectionTwo from './SectionTwo';
-import SectionThree from './SectionThree';
-
-export { SectionOne, SectionTwo, SectionThree };
diff --git a/src/components/EtlToolsPage/styles.module.less b/src/components/EtlToolsPage/styles.module.less
index ca828c9a..f5564332 100644
--- a/src/components/EtlToolsPage/styles.module.less
+++ b/src/components/EtlToolsPage/styles.module.less
@@ -5,6 +5,10 @@
font-weight: 600;
line-height: 48px;
+ @media (max-width: 1024px) {
+ text-align: center;
+ }
+
@media (max-width: 768px) {
font-size: 2rem;
line-height: 40px;
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/Connectors/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/Connectors/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/Connectors/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/Connectors/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/CoreFeatures/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/CoreFeatures/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/CoreFeatures/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/CoreFeatures/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/Cost/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/Cost/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/Cost/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/Cost/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/DeploymentOptions/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/DeploymentOptions/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/DeploymentOptions/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/DeploymentOptions/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/CheckOrCrossIcon.tsx b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/CheckOrCrossIcon.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/FeatureData/CheckOrCrossIcon.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/DollarSigns.tsx b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/DollarSigns.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/FeatureData/DollarSigns.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/FeatureData/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/FeatureData/styles.module.less
rename to src/components/EtlToolsXvsYPage/Comparison/FeatureData/styles.module.less
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/IntroductoryDetails/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/IntroductoryDetails/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/IntroductoryDetails/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/IntroductoryDetails/styles.module.less
rename to src/components/EtlToolsXvsYPage/Comparison/IntroductoryDetails/styles.module.less
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/Security/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/Security/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/Security/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/Security/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/Support/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/Support/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/Support/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/Support/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/TableRows/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/TableRows/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/TheAbilities/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/TheAbilities/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/TheAbilities/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/TheAbilities/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/UseCases/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/UseCases/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/UseCases/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/UseCases/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less
rename to src/components/EtlToolsXvsYPage/Comparison/VendorAvatar/styles.module.less
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx b/src/components/EtlToolsXvsYPage/Comparison/index.tsx
similarity index 99%
rename from src/components/EtlToolsXvsYPage/SectionTwo/index.tsx
rename to src/components/EtlToolsXvsYPage/Comparison/index.tsx
index 4aa7e8d6..98ae3acb 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx
+++ b/src/components/EtlToolsXvsYPage/Comparison/index.tsx
@@ -53,7 +53,7 @@ const tableBodyComponents = [
Cost,
];
-const SectionTwo = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
+const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
const isThreeVendorComparison = useMemo(() => {
return ![xVendor.id, yVendor.id].includes(estuaryVendor.id);
}, [xVendor.id, yVendor.id, estuaryVendor.id]);
@@ -261,4 +261,4 @@ const SectionTwo = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
);
};
-export default SectionTwo;
+export default Comparison;
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/shared.ts b/src/components/EtlToolsXvsYPage/Comparison/shared.ts
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/shared.ts
rename to src/components/EtlToolsXvsYPage/Comparison/shared.ts
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less b/src/components/EtlToolsXvsYPage/Comparison/styles.module.less
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
rename to src/components/EtlToolsXvsYPage/Comparison/styles.module.less
diff --git a/src/components/EtlToolsXvsYPage/SectionThree/FeatureCard/index.tsx b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/index.tsx
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionThree/FeatureCard/index.tsx
rename to src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/index.tsx
diff --git a/src/components/EtlToolsXvsYPage/SectionThree/FeatureCard/styles.module.less b/src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less
similarity index 100%
rename from src/components/EtlToolsXvsYPage/SectionThree/FeatureCard/styles.module.less
rename to src/components/EtlToolsXvsYPage/GettingStarted/FeatureCard/styles.module.less
diff --git a/src/components/EtlToolsXvsYPage/SectionThree/index.tsx b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx
similarity index 95%
rename from src/components/EtlToolsXvsYPage/SectionThree/index.tsx
rename to src/components/EtlToolsXvsYPage/GettingStarted/index.tsx
index accf305b..88aafe96 100644
--- a/src/components/EtlToolsXvsYPage/SectionThree/index.tsx
+++ b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx
@@ -11,16 +11,17 @@ import {
webinarsUrl,
} from '../../../../shared';
import BlogBanner from '../../BlogBanner';
+import Container from '../../Container';
import { container } from './styles.module.less';
import FeatureCard from './FeatureCard';
const iconColor = '#5072EB';
const iconSize = 28;
-const SectionThree = () => {
+const GettingStarted = () => {
return (
-
+
GETTING STARTED WITH ESTUARY
{
href: '/contact-us',
}}
/>
-
);
};
-export default SectionThree;
+export default GettingStarted;
diff --git a/src/components/EtlToolsXvsYPage/SectionThree/styles.module.less b/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less
similarity index 86%
rename from src/components/EtlToolsXvsYPage/SectionThree/styles.module.less
rename to src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less
index f139c320..51b47099 100644
--- a/src/components/EtlToolsXvsYPage/SectionThree/styles.module.less
+++ b/src/components/EtlToolsXvsYPage/GettingStarted/styles.module.less
@@ -1,12 +1,6 @@
@import '../../../globalStyles/wrappers.module.less';
.container {
- .globalMaxWidth;
-
- display: flex;
- flex-direction: column;
- gap: 60px;
-
h2 {
font-size: 2.5rem;
font-weight: 600;
@@ -28,4 +22,8 @@
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
+
+ div {
+ width: 100%;
+ }
}
diff --git a/src/components/EtlToolsXvsYPage/SectionOne/index.tsx b/src/components/EtlToolsXvsYPage/Hero/index.tsx
similarity index 56%
rename from src/components/EtlToolsXvsYPage/SectionOne/index.tsx
rename to src/components/EtlToolsXvsYPage/Hero/index.tsx
index 0d685ab7..962a12a2 100644
--- a/src/components/EtlToolsXvsYPage/SectionOne/index.tsx
+++ b/src/components/EtlToolsXvsYPage/Hero/index.tsx
@@ -6,9 +6,9 @@ import VendorsLink from '../../VendorsLink';
import { Vendor } from '../../../../shared';
import NewTabLink from '../../NewTabLink';
import ChevronRightIcon from '../../../svgs/chevron-right.svg';
+import HeroSectionDetails from '../../HeroSectionDetails';
+import Container from '../../Container';
import {
- container,
- leftColumn,
rightColumn,
vendorLogo,
leftVendorLogo,
@@ -21,32 +21,40 @@ interface SectionOneProps {
yVendor: Vendor;
}
-const SectionOne = ({ vendors, xVendor, yVendor }: SectionOneProps) => {
+const Hero = ({ vendors, xVendor, yVendor }: SectionOneProps) => {
return (
-
-
-
- {xVendor.name} VS{' '}
- {yVendor.name}
-
-
- Read this detailed 2024 comparison of {xVendor.name} vs{' '}
- {yVendor.name}. Understand their key differences, core
- features, and pricing to choose the right platform for
- your data integration needs.
-
-
-
- View all comparisons
-
-
+
+
+ {xVendor.name} VS {' '}
+ {yVendor.name}
+
+ }
+ description={
+ <>
+ Read this detailed 2024 comparison of {xVendor.name}{' '}
+ vs {yVendor.name}. Understand their key differences,
+ core features, and pricing to choose the right
+ platform for your data integration needs.
+
+ }
+ additionalElements={
+ <>
+
+ View all comparisons
+
+
+ }
+ />
-
);
};
-export default SectionOne;
+export default Hero;
diff --git a/src/components/EtlToolsXvsYPage/Hero/styles.module.less b/src/components/EtlToolsXvsYPage/Hero/styles.module.less
new file mode 100644
index 00000000..3529944d
--- /dev/null
+++ b/src/components/EtlToolsXvsYPage/Hero/styles.module.less
@@ -0,0 +1,20 @@
+.rightColumn {
+ width: 100%;
+ position: relative;
+}
+
+.vendorLogo {
+ position: absolute;
+ max-width: 9%;
+ z-index: 1;
+}
+
+.leftVendorLogo {
+ top: 64.5%;
+ right: 78.5%;
+}
+
+.rightVendorLogo {
+ top: 64.5%;
+ left: 78.5%;
+}
diff --git a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less b/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less
deleted file mode 100644
index cd51eddc..00000000
--- a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less
+++ /dev/null
@@ -1,64 +0,0 @@
-@import '../../../globalStyles/sections.module.less';
-
-.container {
- .globalMaxWidth;
-
- display: flex;
- align-items: center;
- gap: 60px;
-
- h1 {
- color: #5072EB;
- text-transform: uppercase;
- line-height: 69.6px;
-
- span {
- color: #fff;
- }
- }
-
- p {
- color: #fff;
- font-size: 1.25rem;
- }
-
- @media (max-width: 1024px) {
- flex-direction: column-reverse;
- }
-
- @media (max-width: 768px) {
- h1 {
- font-size: 2.5rem;
- line-height: 43px;
- }
- }
-}
-
-.leftColumn {
- display: flex;
- flex-direction: column;
- gap: 24px;
-}
-
-.rightColumn {
- max-width: 536px;
- aspect-ratio: 15 / 9;
- width: 100%;
- position: relative;
-}
-
-.vendorLogo {
- position: absolute;
- max-width: 9%;
- z-index: 1;
-}
-
-.leftVendorLogo {
- top: 64.5%;
- right: 78.5%;
-}
-
-.rightVendorLogo {
- top: 64.5%;
- left: 78.5%;
-}
diff --git a/src/components/EtlToolsXvsYPage/index.tsx b/src/components/EtlToolsXvsYPage/index.tsx
deleted file mode 100644
index aa7cc793..00000000
--- a/src/components/EtlToolsXvsYPage/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SectionOne from './SectionOne';
-import SectionTwo from './SectionTwo';
-import SectionThree from './SectionThree';
-
-export { SectionOne, SectionTwo, SectionThree };
diff --git a/src/components/Footer/styles.module.less b/src/components/Footer/styles.module.less
index 46a1adb0..10010e50 100644
--- a/src/components/Footer/styles.module.less
+++ b/src/components/Footer/styles.module.less
@@ -46,7 +46,7 @@
.globalFooterBottomCopyrightText,
.globalFooterCopyrightLink {
font-size: var(--fontSize-1);
- color: var(--color-text-light);
+ color: #B7C6DD;
}
.globalFooterRightLink {
@@ -132,7 +132,7 @@
justify-content: center;
&>a {
- font-weight: 500;
+ color: #B7C6DD;
&:hover {
text-underline-offset: 4px;
diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx
new file mode 100644
index 00000000..e0c3b259
--- /dev/null
+++ b/src/components/HeroSectionDetails/index.tsx
@@ -0,0 +1,50 @@
+import React, { ReactNode } from 'react';
+import { OutboundLinkFilled } from '../OutboundLink';
+import { dashboardRegisterUrl } from '../../../shared';
+import SubscriptionBenefits from '../SubscriptionBenefits';
+import { LinkOutlined } from '../../globalStyles';
+import { container, buttonsWrapper } from './styles.module.less';
+
+interface HeroSectionDetailsProps {
+ title: ReactNode;
+ description?: ReactNode;
+ additionalElements?: ReactNode;
+ hasCtaButtons?: boolean;
+ hasSubscriptionBenefits?: boolean;
+}
+
+const HeroSectionDetails = ({
+ title,
+ description,
+ additionalElements,
+ hasCtaButtons = false,
+ hasSubscriptionBenefits = false,
+}: HeroSectionDetailsProps) => {
+ return (
+
+
{title}
+ {description ?
{description}
: null}
+ {hasCtaButtons ? (
+
+
+ Build a Pipeline
+
+
+ Contact Us
+
+
+ ) : null}
+ {hasSubscriptionBenefits ?
: null}
+ {additionalElements ? additionalElements : null}
+
+ );
+};
+
+export default HeroSectionDetails;
diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less
new file mode 100644
index 00000000..f3a950df
--- /dev/null
+++ b/src/components/HeroSectionDetails/styles.module.less
@@ -0,0 +1,47 @@
+@import '../../globalStyles/sections.module.less';
+
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ p {
+ margin-top: 24px;
+ font-size: 1.25rem;
+ color: #fff;
+ margin: 0 0 8px 0;
+
+ @media (max-width: 768px) {
+ font-size: 1rem;
+ }
+
+ @media (max-width: 425px) {
+ font-size: 0.875rem;
+ }
+
+ span:nth-of-type(2n) {
+ color: #625eff;
+ }
+ }
+}
+
+.buttonsWrapper {
+ display: flex;
+ gap: 24px;
+
+ @media (max-width: 425px) {
+ flex-direction: column;
+ }
+
+ a {
+ white-space: nowrap;
+
+ @media (max-width: 768px) {
+ width: 50%;
+ }
+
+ @media (max-width: 425px) {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/components/Homepage/AutomateDataops/index.tsx b/src/components/Homepage/AutomateDataops/index.tsx
index fee26fe4..ffed44de 100644
--- a/src/components/Homepage/AutomateDataops/index.tsx
+++ b/src/components/Homepage/AutomateDataops/index.tsx
@@ -2,9 +2,9 @@ import { StaticImage } from 'gatsby-plugin-image';
import * as React from 'react';
import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg';
import { docsPageUrl } from '../../../../shared';
+import Container from '../../Container';
import {
Button,
- Container,
Description,
IconWrapper,
LeftColumn,
@@ -15,8 +15,8 @@ import {
const AutomateDataops = () => {
return (
-
-
+
+
{
See the Docs
-
-
+
+
);
};
diff --git a/src/components/Homepage/AutomateDataops/styles.ts b/src/components/Homepage/AutomateDataops/styles.ts
index 13b91257..7dca0ace 100644
--- a/src/components/Homepage/AutomateDataops/styles.ts
+++ b/src/components/Homepage/AutomateDataops/styles.ts
@@ -1,30 +1,12 @@
import styled from 'styled-components';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
+import { sectionTopBottomPadding } from '../../../globalStyles';
import { OutboundLinkFilled } from '../../OutboundLink';
-export const Container = styled.section`
+export const Wrapper = styled.section`
+ ${sectionTopBottomPadding};
background-color: #fdfdfe;
`;
-export const Wrapper = styled.div`
- ${globalMaxWidth}
- ${sectionTopBottomPadding}
-
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 60px;
-
- @media (max-width: 1024px) {
- flex-direction: column;
- align-items: flex-start;
- }
-
- @media (max-width: 425px) {
- gap: 40px;
- }
-`;
-
export const Title = styled.h2`
font-size: 2.5rem;
font-weight: 600;
@@ -45,17 +27,12 @@ export const Title = styled.h2`
export const Description = styled.p`
font-size: 1.25rem;
font-weight: 400;
- line-height: 30px;
margin: 0;
color: #47506d;
@media (max-width: 1024px) {
font-size: 1rem;
}
-
- @media (max-width: 980px) {
- max-width: 480px;
- }
`;
export const Button = styled(OutboundLinkFilled)`
diff --git a/src/components/Homepage/BuildInMinutes/index.tsx b/src/components/Homepage/BuildInMinutes/index.tsx
index 81348d4a..74e0de1a 100644
--- a/src/components/Homepage/BuildInMinutes/index.tsx
+++ b/src/components/Homepage/BuildInMinutes/index.tsx
@@ -1,22 +1,25 @@
import * as React from 'react';
import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground';
import FlowDemoVideo from '../../FlowDemoVideo';
-import { Description, Title, Wrapper } from './styles';
+import Container from '../../Container';
+import { TextWrapper } from '../styles';
const BuildInMinutes = () => {
return (
-
-
- <span>Build </span>
- in minutes
-
-
- Use the UI to quickly build end-to-end pipelines using
- no-code connectors. Estuary Flow does the rest.
-
+
+
+
+ Build
+ in minutes
+
+
+ Use the UI to quickly build end-to-end pipelines using
+ no-code connectors. Estuary Flow does the rest.
+
+
+
);
};
diff --git a/src/components/Homepage/BuildInMinutes/styles.ts b/src/components/Homepage/BuildInMinutes/styles.ts
deleted file mode 100644
index 1f8efa14..00000000
--- a/src/components/Homepage/BuildInMinutes/styles.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Wrapper = styled.div`
- ${globalMaxWidth}
-
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
-`;
-
-export const Title = styled.h2`
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 48px;
- color: #5072eb;
- text-transform: uppercase;
- margin: 0;
-
- span {
- color: #ffffff;
- }
-`;
-
-export const Description = styled.p`
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 30px;
- color: #ffffff;
- margin: 24px 0 60px 0;
- max-width: 720px;
- text-align: center;
-
- @media (max-width: 1024px) {
- font-size: 1rem;
- }
-
- @media (max-width: 980px) {
- max-width: 480px;
- }
-`;
diff --git a/src/components/Homepage/CaseStudies/index.tsx b/src/components/Homepage/CaseStudies/index.tsx
index 0e0fa2d7..9aee6b39 100644
--- a/src/components/Homepage/CaseStudies/index.tsx
+++ b/src/components/Homepage/CaseStudies/index.tsx
@@ -3,8 +3,9 @@ import * as React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground';
import Carousel from '../../Carousel';
+import Container from '../../Container';
import Card from './Card';
-import { Cards, SectionTitle, Wrapper } from './styles';
+import { Cards, SectionTitle } from './styles';
const cardsPerSlide = 3;
@@ -34,7 +35,7 @@ const CaseStudies = () => {
return (
-
+
CASE STUDIES
{
)
)}
-
+
);
};
diff --git a/src/components/Homepage/CaseStudies/styles.ts b/src/components/Homepage/CaseStudies/styles.ts
index 52714621..5f2eabce 100644
--- a/src/components/Homepage/CaseStudies/styles.ts
+++ b/src/components/Homepage/CaseStudies/styles.ts
@@ -1,12 +1,5 @@
import styled from 'styled-components';
-import { LinkOutlined, globalMaxWidth } from '../../../globalStyles';
-
-export const Wrapper = styled.div`
- ${globalMaxWidth}
-
- display: flex;
- flex-direction: column;
-`;
+import { LinkOutlined } from '../../../globalStyles';
export const CardContainer = styled.div`
display: flex;
@@ -69,7 +62,6 @@ export const SectionTitle = styled.h2`
font-weight: 600;
line-height: 72px;
color: #5072eb;
- margin: 0 0 60px 0;
text-transform: uppercase;
`;
diff --git a/src/components/Homepage/DeploymentModes/index.tsx b/src/components/Homepage/DeploymentModes/index.tsx
index 4659bbed..9b2ed241 100644
--- a/src/components/Homepage/DeploymentModes/index.tsx
+++ b/src/components/Homepage/DeploymentModes/index.tsx
@@ -3,6 +3,7 @@ import TabContext from '@mui/lab/TabContext';
import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
import { DeploymentOption } from '../../../../shared';
import { LinkFilled } from '../../../globalStyles';
+import Container from '../../Container';
import { container, rightColumn } from './styles.module.less';
import DeploymentDiagramContainer from './DeploymentDiagramContainer';
import TabPanels from './TabPanels';
@@ -21,7 +22,7 @@ const DeploymentModes = () => {
return (
-
+
@@ -35,7 +36,7 @@ const DeploymentModes = () => {
See Details
-
);
};
diff --git a/src/components/Homepage/DeploymentModes/styles.module.less b/src/components/Homepage/DeploymentModes/styles.module.less
index f11b29ac..e3f6a972 100644
--- a/src/components/Homepage/DeploymentModes/styles.module.less
+++ b/src/components/Homepage/DeploymentModes/styles.module.less
@@ -4,14 +4,6 @@
@secondaryTagColor: #5072EB;
.container {
- .globalMaxWidth;
-
- display: grid;
- grid-template-columns: 1fr 1fr;
- align-items: center;
- justify-content: space-between;
- gap: 60px;
-
h2 {
font-size: 2.5rem;
font-weight: 600;
@@ -25,17 +17,12 @@
}
@media (max-width: 1024px) {
- grid-template-columns: 1fr;
- gap: 30px;
-
h2 {
font-size: 2.25rem;
}
}
@media (max-width: 360px) {
- max-width: 100vw;
-
h2 {
font-size: 1.5rem;
line-height: 30px;
diff --git a/src/components/Homepage/Do4xMoreWith25xLess/index.tsx b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx
index 3fd0570d..40bda1b5 100644
--- a/src/components/Homepage/Do4xMoreWith25xLess/index.tsx
+++ b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx
@@ -1,36 +1,34 @@
import * as React from 'react';
import DatabaseSavingWithLowPrice from '../../../svgs/database-saving-with-low-price.svg';
import { PricingCalculator } from '../../PricingCalculator';
+import Container from '../../Container';
import {
Button,
- Container,
- Description,
IconWrapper,
LeftColumn,
RightColumn,
- Title,
Wrapper,
} from './styles';
const Do4xMoreWith25xLess = () => {
return (
-
-
+
+
-
+ <h2>
<span>DO </span>
<span>4X MORE </span>
<span>WITH 2-5X LESS</span>
-
-
+
+
Estuary customers aren't just benefitting from
being more real-time. They are 4x more productive. They
deliver new projects in days, not months. And they spend
2-5x less on Estuary than on batch ELT.
-
+
See Pricing
@@ -38,8 +36,8 @@ const Do4xMoreWith25xLess = () => {
-
-
+
+
);
};
diff --git a/src/components/Homepage/Do4xMoreWith25xLess/styles.ts b/src/components/Homepage/Do4xMoreWith25xLess/styles.ts
index 47483891..87647f8e 100644
--- a/src/components/Homepage/Do4xMoreWith25xLess/styles.ts
+++ b/src/components/Homepage/Do4xMoreWith25xLess/styles.ts
@@ -1,63 +1,37 @@
import styled from 'styled-components';
-import {
- LinkFilled,
- globalMaxWidth,
- sectionTopBottomPadding,
-} from '../../../globalStyles';
+import { LinkFilled, sectionTopBottomPadding } from '../../../globalStyles';
-export const Container = styled.section`
- background-color: #fdfdfe;
-`;
-
-export const Wrapper = styled.div`
- ${globalMaxWidth}
+export const Wrapper = styled.section`
${sectionTopBottomPadding}
-
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 80px;
-
- @media (max-width: 1024px) {
- flex-direction: column;
- align-items: flex-start;
- }
-
- @media (max-width: 425px) {
- gap: 40px;
- }
-`;
-
-export const Title = styled.h2`
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 48px;
- color: #5072eb;
- margin: 0;
- text-transform: uppercase;
-
- & span:nth-child(odd) {
- color: #04192b;
- }
+ background-color: #fdfdfe;
- @media (max-width: 1024px) {
- font-size: 2.25rem;
+ h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ line-height: 48px;
+ color: #5072eb;
+ margin: 0;
+ text-transform: uppercase;
+
+ & span:nth-child(odd) {
+ color: #04192b;
+ }
+
+ @media (max-width: 1024px) {
+ font-size: 2.25rem;
+ }
}
-`;
-
-export const Description = styled.p`
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 30px;
- margin: 0;
- color: #47506d;
- @media (max-width: 1024px) {
- font-size: 1rem;
- }
+ p {
+ font-size: 1.25rem;
+ font-weight: 400;
+ line-height: 30px;
+ margin: 0;
+ color: #47506d;
- @media (max-width: 980px) {
- max-width: 480px;
+ @media (max-width: 1024px) {
+ font-size: 1rem;
+ }
}
`;
@@ -85,7 +59,6 @@ export const LeftColumn = styled.div`
display: flex;
flex-direction: column;
gap: 24px;
- width: 50%;
@media (max-width: 1024px) {
width: 100%;
@@ -93,7 +66,6 @@ export const LeftColumn = styled.div`
`;
export const RightColumn = styled.div`
- width: 50%;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/components/Homepage/Hero/index.tsx b/src/components/Homepage/Hero/index.tsx
index 59f9db7d..9ef0c866 100644
--- a/src/components/Homepage/Hero/index.tsx
+++ b/src/components/Homepage/Hero/index.tsx
@@ -4,21 +4,14 @@ import LatencyIcon from '../../../svgs/metric-latency.svg';
import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg';
import MetricCard from '../../MetricCard';
import VanityLogosMarquee from '../../VanityLogosMarquee';
-import { dashboardRegisterUrl } from '../../../../shared';
-import SubscriptionBenefits from '../../SubscriptionBenefits';
+import HeroSectionDetails from '../../HeroSectionDetails';
import AnimFallback from './AnimFallback';
import AnimatedHero from './AnimatedHero';
import {
Container,
FlowAnimationContainer,
- HomepageDescription,
- HomepageHeader,
- HomepageHeadingButtons,
- HomepageTitle,
MainContent,
MetricCardsList,
- PrimaryButton,
- SecondaryButton,
} from './styles';
const metricIconColor = '#FFFFFF';
@@ -27,35 +20,21 @@ const Hero = () => {
return (
-
-
- MEET {' '}
- THE FASTEST, MOST RELIABLE {' '}
- ETL
-
-
- Estuary is the only platform built from the ground up
+
+ MEET {' '}
+ THE FASTEST
+ , MOST RELIABLE {' '}
+ ETL
+
+ }
+ description="Estuary is the only platform built from the ground up
for truly real-time ETL and ELT data integration, set up
- in minutes.
-
-
-
- Build a Pipeline
-
-
- Contact Us
-
-
-
+ in minutes."
+ hasCtaButtons
+ hasSubscriptionBenefits
+ />
-
- INNOVATE FASTER
-
- 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.
-
+
+
+ INNOVATE FASTER
+
+ 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.
+
+
diff --git a/src/components/Homepage/InnovateFaster/styles.ts b/src/components/Homepage/InnovateFaster/styles.ts
index 5074a613..65d39ea2 100644
--- a/src/components/Homepage/InnovateFaster/styles.ts
+++ b/src/components/Homepage/InnovateFaster/styles.ts
@@ -1,65 +1,37 @@
import styled from 'styled-components';
import { globalMaxWidth } from '../../../globalStyles';
+import Container from '../../Container';
-export const Wrapper = styled.div`
- ${globalMaxWidth}
-
- padding-right: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
+// TODO: Remove these !important when replacing styled-compoents with a Less CSS module
+export const Wrapper = styled(Container)`
+ padding-right: 0 !important;
@media (max-width: 425px) {
- padding-right: 0;
+ padding-right: 0 !important;
}
-`;
-
-export const Title = styled.h2`
- ${globalMaxWidth}
-
- padding-left: 0;
- text-align: center;
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 48px;
- color: #5072eb;
- text-transform: uppercase;
- margin: 0;
- span {
- color: #ffffff;
- }
-
- @media (max-width: 425px) {
+ h2 {
+ ${globalMaxWidth}
padding-left: 0;
- padding-right: 20px;
- font-size: 1.75rem;
- line-height: 33.6px;
- }
-`;
-
-export const Description = styled.p`
- ${globalMaxWidth}
- padding-left: 0;
- width: 100%;
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 30px;
- color: #ffffff;
- margin: 24px 0 60px 0;
- max-width: 940px;
- text-align: center;
-
- @media (max-width: 1024px) {
- font-size: 1rem;
+ @media (max-width: 425px) {
+ padding-left: 0;
+ padding-right: 20px;
+ font-size: 1.75rem;
+ }
}
- @media (max-width: 425px) {
+ p {
+ ${globalMaxWidth}
+
padding-left: 0;
- padding-right: 20px;
- line-height: 30px;
- margin: 16px 0 40px 0;
+ width: 100%;
+ margin: 0;
+ text-align: center;
+
+ @media (max-width: 425px) {
+ padding-left: 0;
+ padding-right: 20px;
+ }
}
`;
diff --git a/src/components/Homepage/SeeHow/index.tsx b/src/components/Homepage/SeeHow/index.tsx
index f6b7364a..8dc58a0e 100644
--- a/src/components/Homepage/SeeHow/index.tsx
+++ b/src/components/Homepage/SeeHow/index.tsx
@@ -1,26 +1,29 @@
import * as React from 'react';
import { dashboardRegisterUrl, webinarsUrl } from '../../../../shared';
import { OutboundLinkOutlined } from '../../OutboundLink';
+import Container from '../../Container';
import { ButtonFilled, Buttons, HubspotButton, Title, Wrapper } from './styles';
const SeeHow = () => {
return (
-
- <span>SEE HOW </span>
- <span>ESTUARY CAN WORK FOR YOU AND YOUR DATA</span>
-
-
-
- Try Now
-
-
- Watch Demo
-
-
- Contact Us
-
-
+
+
+ <span>SEE HOW </span>
+ <span>ESTUARY CAN WORK FOR YOU AND YOUR DATA</span>
+
+
+
+ Try Now
+
+
+ Watch Demo
+
+
+ Contact Us
+
+
+
);
};
diff --git a/src/components/Homepage/SeeHow/styles.ts b/src/components/Homepage/SeeHow/styles.ts
index fd6f1a87..3d4da0fb 100644
--- a/src/components/Homepage/SeeHow/styles.ts
+++ b/src/components/Homepage/SeeHow/styles.ts
@@ -1,33 +1,9 @@
import styled from 'styled-components';
-import {
- globalMaxWidth,
- LinkOutlined,
- sectionTopBottomPadding,
-} from '../../../globalStyles';
+import { LinkOutlined, sectionTopBottomPadding } from '../../../globalStyles';
import { OutboundLinkFilled } from '../../OutboundLink';
export const Wrapper = styled.section`
- ${globalMaxWidth}
${sectionTopBottomPadding}
-
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- gap: 48px;
-
- @media (max-width: 1024px) {
- flex-direction: column;
- align-items: flex-start;
- }
-
- @media (max-width: 768px) {
- gap: 24px;
- }
-
- @media (max-width: 425px) {
- gap: 40px;
- }
`;
export const Title = styled.h2`
diff --git a/src/components/Homepage/TheBestRealTimeCdc/index.tsx b/src/components/Homepage/TheBestRealTimeCdc/index.tsx
index 84b494cc..5fbd0efa 100644
--- a/src/components/Homepage/TheBestRealTimeCdc/index.tsx
+++ b/src/components/Homepage/TheBestRealTimeCdc/index.tsx
@@ -1,23 +1,23 @@
import { StaticImage } from 'gatsby-plugin-image';
import * as React from 'react';
import RealTimeCdc from '../../../svgs/real-time-cdc.svg';
+import Container from '../../Container';
import Advantage from './Advantage';
import {
AdvantagesList,
- Container,
+ Wrapper,
Description,
IconWrapper,
LeftColumn,
Link,
RightColumn,
Title,
- Wrapper,
} from './styles';
const TheBestRealTimeCdc = () => {
return (
-
-
+
+
-
+
+
);
};
diff --git a/src/components/Homepage/TheBestRealTimeCdc/styles.ts b/src/components/Homepage/TheBestRealTimeCdc/styles.ts
index 8041fd51..5697e686 100644
--- a/src/components/Homepage/TheBestRealTimeCdc/styles.ts
+++ b/src/components/Homepage/TheBestRealTimeCdc/styles.ts
@@ -1,27 +1,11 @@
import styled from 'styled-components';
-import {
- LinkFilled,
- globalMaxWidth,
- sectionTopBottomPadding,
-} from '../../../globalStyles';
+import { LinkFilled, sectionTopBottomPadding } from '../../../globalStyles';
-export const Container = styled.section`
+export const Wrapper = styled.section`
+ ${sectionTopBottomPadding};
background-color: #fdfdfe;
`;
-export const Wrapper = styled.div`
- ${globalMaxWidth}
- ${sectionTopBottomPadding}
-
- display: flex;
- justify-content: space-between;
- gap: 60px;
-
- @media (max-width: 1024px) {
- flex-direction: column-reverse;
- }
-`;
-
export const Title = styled.h2`
font-size: 2.5rem;
font-weight: 600;
@@ -49,10 +33,6 @@ export const Description = styled.p`
@media (max-width: 1024px) {
font-size: 1rem;
}
-
- @media (max-width: 980px) {
- max-width: 480px;
- }
`;
export const Link = styled(LinkFilled)`
diff --git a/src/components/Homepage/WhatPeopleAreSaying/index.tsx b/src/components/Homepage/WhatPeopleAreSaying/index.tsx
index 7c7483f6..b0b4c1f7 100644
--- a/src/components/Homepage/WhatPeopleAreSaying/index.tsx
+++ b/src/components/Homepage/WhatPeopleAreSaying/index.tsx
@@ -1,15 +1,16 @@
import * as React from 'react';
import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground';
import TestimonialsCarousel from '../../TestimonialsCarousel';
-import { Wrapper } from './styles';
+import Container from '../../Container';
+import { Title } from './styles';
const WhatPeopleAreSaying = () => {
return (
-
- What people are saying
+
+ What people are saying
+
);
};
diff --git a/src/components/Homepage/WhatPeopleAreSaying/styles.ts b/src/components/Homepage/WhatPeopleAreSaying/styles.ts
index f6cc7670..05b67d87 100644
--- a/src/components/Homepage/WhatPeopleAreSaying/styles.ts
+++ b/src/components/Homepage/WhatPeopleAreSaying/styles.ts
@@ -1,19 +1,13 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-export const Wrapper = styled.div`
- ${globalMaxWidth}
+export const Title = styled.h2`
+ font-size: 2.5rem;
+ font-weight: 600;
+ color: #5072eb;
+ text-align: center;
+ text-transform: uppercase;
- h2 {
- font-size: 2.5rem;
- font-weight: 600;
- color: #5072eb;
- text-align: center;
- margin-bottom: 60px;
- text-transform: uppercase;
-
- @media (max-width: 425px) {
- font-size: 1.75rem;
- }
+ @media (max-width: 425px) {
+ font-size: 1.75rem;
}
`;
diff --git a/src/components/Homepage/styles.ts b/src/components/Homepage/styles.ts
new file mode 100644
index 00000000..ea3ffa0c
--- /dev/null
+++ b/src/components/Homepage/styles.ts
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const TextWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ // TODO: Reuse this h2 style in all the sections
+ h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ font-weight: 600;
+ line-height: 48px;
+ color: #5072eb;
+ text-transform: uppercase;
+ margin: 0;
+
+ span {
+ color: #ffffff;
+ }
+ }
+
+ p {
+ font-size: 1.25rem;
+ font-weight: 400;
+ line-height: 30px;
+ color: #ffffff;
+ margin: 0;
+ max-width: 720px;
+ text-align: center;
+
+ @media (max-width: 1024px) {
+ font-size: 1rem;
+ }
+
+ @media (max-width: 980px) {
+ max-width: 480px;
+ }
+ }
+`;
diff --git a/src/components/PricingPage/ChooseYourPlan/index.tsx b/src/components/PricingPage/ChooseYourPlan/index.tsx
index 8288e0d8..1dc8c8e5 100644
--- a/src/components/PricingPage/ChooseYourPlan/index.tsx
+++ b/src/components/PricingPage/ChooseYourPlan/index.tsx
@@ -2,7 +2,8 @@ import React from 'react';
import { useMediaQuery } from '@mui/material';
import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
import Carousel from '../../Carousel';
-import { container, title, planCardsWrapper } from './styles.module.less';
+import Container from '../../Container';
+import { container, planCardsWrapper } from './styles.module.less';
import PlanCard from './PlanCard';
import { plans } from './utils';
@@ -15,8 +16,8 @@ const ChooseYourPlan = () => {
return (
-
-
CHOOSE YOUR PLAN
+
+ CHOOSE YOUR PLAN
{isMobile ? (
{
) : (
{planCards}
)}
-
);
};
diff --git a/src/components/PricingPage/ChooseYourPlan/styles.module.less b/src/components/PricingPage/ChooseYourPlan/styles.module.less
index b2b426de..6d0defbc 100644
--- a/src/components/PricingPage/ChooseYourPlan/styles.module.less
+++ b/src/components/PricingPage/ChooseYourPlan/styles.module.less
@@ -1,34 +1,25 @@
@import '../../../globalStyles/sections.module.less';
.container {
- display: flex;
- flex-direction: column;
- gap: 36px;
- align-items: center;
+ h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ line-height: 40px;
+ color: #04192B;
+ margin: 0;
+ padding: 0 20px;
- @media (min-width: 1281px) {
- .globalMaxWidth;
- }
-
- @media (min-width: 1024px) and (max-width: 1280px) {
- padding: 0 24px;
- }
-}
-
-.title {
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 40px;
- color: #04192B;
- margin: 0;
- padding: 0 20px;
+ @media (max-width: 768px) {
+ font-size: 2rem;
+ }
- @media (max-width: 768px) {
- font-size: 2rem;
+ @media (max-width: 425px) {
+ font-size: 1.75rem;
+ }
}
- @media (max-width: 425px) {
- font-size: 1.75rem;
+ @media (max-width: 1024px) {
+ padding: 0;
}
}
diff --git a/src/components/PricingPage/Faq/index.tsx b/src/components/PricingPage/Faq/index.tsx
index e55c5178..6c6d86d5 100644
--- a/src/components/PricingPage/Faq/index.tsx
+++ b/src/components/PricingPage/Faq/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
-import { container, title, questionsList } from './styles.module.less';
+import Container from '../../Container';
+import { title, questionsList } from './styles.module.less';
import FaqAccordion from './FaqAccordion';
import { faqs } from './faqs';
@@ -15,7 +16,7 @@ const Faq = () => {
return (
-
+
FAQ
{faqs.map(({ questionNumber, question, content }) => (
@@ -30,7 +31,7 @@ const Faq = () => {
))}
-
);
};
diff --git a/src/components/PricingPage/Faq/styles.module.less b/src/components/PricingPage/Faq/styles.module.less
index 1e41f634..83a0d4eb 100644
--- a/src/components/PricingPage/Faq/styles.module.less
+++ b/src/components/PricingPage/Faq/styles.module.less
@@ -1,12 +1,5 @@
@import '../../../globalStyles/sections.module.less';
-.container {
- .globalMaxWidth;
- display: flex;
- flex-direction: column;
- gap: 36px;
-}
-
.title {
text-align: center;
font-size: 2.5rem;
diff --git a/src/components/PricingPage/Hero/index.tsx b/src/components/PricingPage/Hero/index.tsx
index d36cde0b..c7c53c92 100644
--- a/src/components/PricingPage/Hero/index.tsx
+++ b/src/components/PricingPage/Hero/index.tsx
@@ -1,60 +1,43 @@
import React from 'react';
-import clsx from 'clsx';
import { StaticImage } from 'gatsby-plugin-image';
import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
-import {
- globalMaxWidth,
- sectionOneImageWrapper,
-} from '../../../globalStyles/sections.module.less';
-import { OutboundLinkFilled } from '../../OutboundLink';
-import { LinkOutlined } from '../../../globalStyles';
-import { dashboardRegisterUrl } from '../../../../shared';
-import {
- container,
- title,
- contentContainer,
- description,
- buttonsContainer,
-} from './styles.module.less';
+import Container from '../../Container';
+import HeroSectionDetails from '../../HeroSectionDetails';
+import { boldText } from './styles.module.less';
const Hero = () => {
return (
-
-
-
SIMPLY PRICED, PAY AS YOU GO
-
- Stop trying to guess your monthly bill based on
- 'monthly active rows.' We price predictably,
- based on data moved each month and{' '}
- active connector instances .
-
-
-
- Build Free Pipeline
-
-
- Contact Us
-
-
-
-
-
-
+
+
+ Stop trying to guess your monthly bill based on
+ 'monthly active rows.' We price
+ predictably, based on
+ {' '}
+
+ data moved each month
+ {' '}
+ and {' '}
+
+ active connector instances
+
+ .
+
+ }
+ hasCtaButtons
+ />
+
);
};
diff --git a/src/components/PricingPage/Hero/styles.module.less b/src/components/PricingPage/Hero/styles.module.less
index 94989069..fad2e5fe 100644
--- a/src/components/PricingPage/Hero/styles.module.less
+++ b/src/components/PricingPage/Hero/styles.module.less
@@ -1,67 +1,3 @@
-.container {
- display: flex;
- align-items: center;
- gap: 60px;
-
- @media (max-width: 1024px) {
- flex-direction: column-reverse;
- }
-}
-
-.contentContainer {
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-
-.title {
- color: #fff;
- max-width: 500px;
- font-weight: 600;
-
- @media (max-width: 768px) {
- font-size: 2.5rem;
- line-height: 48px;
- }
-
- @media (max-width: 425px) {
- font-size: 2.25rem;
- line-height: 43.2px;
- }
-}
-
-.description {
- font-size: 1.25rem;
- line-height: 30px;
- color: #f2f3f5;
- margin: 24px 0;
-
- @media (max-width: 768px) {
- font-size: 1rem;
- line-height: 30px;
- }
-
- & > span {
- color: #625eff;
- font-weight: 700;
- }
-}
-
-.buttonsContainer {
- display: flex;
- gap: 16px;
- max-width: 480px;
-
- & > a {
- white-space: nowrap;
- width: 100%;
- }
-
- @media (max-width: 1024px) {
- margin: 0;
- }
-
- @media (max-width: 360px) {
- flex-direction: column;
- }
-}
+.boldText {
+ font-weight: 700;
+}
\ No newline at end of file
diff --git a/src/components/PricingPage/PricingCalculatorSection/index.tsx b/src/components/PricingPage/PricingCalculatorSection/index.tsx
index b1ec8d4e..f50291f3 100644
--- a/src/components/PricingPage/PricingCalculatorSection/index.tsx
+++ b/src/components/PricingPage/PricingCalculatorSection/index.tsx
@@ -4,10 +4,8 @@ import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
import { PricingCalculator } from '../../PricingCalculator';
import CopyToClipboardButton from '../../CopyToClipboardButton';
import useWindowExistence from '../../../hooks/useWindowExistence';
+import Container from '../../Container';
import {
- container,
- title,
- description,
textWrapper,
pricingCalculatorWrapper,
jumpLinkOffset,
@@ -21,17 +19,17 @@ const PricingCalculatorSection = () => {
className={clsx(defaultWrapperDark, jumpLinkOffset)}
id="pricing-calculator"
>
-
+
-
PRICING CALCULATOR
+ PRICING CALCULATOR
{hasWindow ? (
-
+
Use our intuitive pricing calculator to easily estimate
your monthly costs. Simply input your requirements, and
we'll provide a clear breakdown of your expenses,
@@ -42,7 +40,7 @@ const PricingCalculatorSection = () => {
-
+
);
};
diff --git a/src/components/PricingPage/PricingCalculatorSection/styles.module.less b/src/components/PricingPage/PricingCalculatorSection/styles.module.less
index 0d6deb70..13f2247a 100644
--- a/src/components/PricingPage/PricingCalculatorSection/styles.module.less
+++ b/src/components/PricingPage/PricingCalculatorSection/styles.module.less
@@ -4,23 +4,6 @@
scroll-margin-top: 32px;
}
-.container {
- .globalMaxWidth;
- display: flex;
- gap: 60px;
- align-items: center;
- justify-content: space-between;
-
- @media (max-width: 1024px) {
- flex-direction: column;
- gap: 40px;
- }
-
- @media (max-width: 425px) {
- gap: 20px;
- }
-}
-
.textWrapper {
display: flex;
flex-direction: column;
@@ -34,34 +17,38 @@
display: flex;
align-items: center;
gap: 18px;
+
+ @media (max-width: 1024px) {
+ justify-content: center;
+ }
}
-}
-.title {
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 48px;
- color: #5072EB;
+ h2 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ line-height: 48px;
+ color: #5072EB;
- @media (max-width: 768px) {
- font-size: 2rem;
- }
+ @media (max-width: 768px) {
+ font-size: 2rem;
+ }
- @media (max-width: 425px) {
- font-size: 1.75rem;
+ @media (max-width: 425px) {
+ font-size: 1.75rem;
+ }
}
-}
-
-.description {
- font-size: 1.25rem;
- line-height: 30px;
- font-weight: 400;
- color: #47506D;
- margin: 0;
- max-width: 620px;
- @media (max-width: 768px) {
- font-size: 1rem;
+ p {
+ font-size: 1.25rem;
+ line-height: 30px;
+ font-weight: 400;
+ color: #47506D;
+ margin: 0;
+ max-width: 620px;
+
+ @media (max-width: 768px) {
+ font-size: 1rem;
+ }
}
}
diff --git a/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx b/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
index 9951be4f..054c17e1 100644
--- a/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
+++ b/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
@@ -4,20 +4,14 @@ import { Link } from 'gatsby';
import { StaticImage } from 'gatsby-plugin-image';
import { DefaultWrapper } from '../../../styles/wrappers';
import FlowDemoVideo from '../../FlowDemoVideo';
+import Container from '../../Container';
import Step from './Step';
-import {
- Container,
- Steps,
- Subtitle,
- TextWrapper,
- Title,
- VideoWrapper,
-} from './styles';
+import { Steps, Subtitle, TextWrapper, Title, VideoWrapper } from './styles';
const CreateADataPipelineInMinutes = () => {
return (
-
+
CREATE A DATA PIPELINE IN <span>MINUTES</span>
diff --git a/src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts b/src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts
index 08c4c59c..b7a39aff 100644
--- a/src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts
+++ b/src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts
@@ -1,14 +1,5 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Container = styled.div`
- ${globalMaxWidth}
- display: flex;
- flex-direction: column;
- gap: 40px;
-`;
-
export const TextWrapper = styled.div`
display: flex;
flex-direction: column;
diff --git a/src/components/ProductPage/DontMissAThing/index.tsx b/src/components/ProductPage/DontMissAThing/index.tsx
index 320f41f5..24223a34 100644
--- a/src/components/ProductPage/DontMissAThing/index.tsx
+++ b/src/components/ProductPage/DontMissAThing/index.tsx
@@ -3,10 +3,10 @@ import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import { DefaultWrapperDarkBlue } from '../../../styles/wrappers';
import NewsletterSignupForm from '../../NewsletterSignupForm';
+import Container from '../../Container';
import {
FormFields,
FormLabel,
- FormWrapper,
IconWrapper,
ImageWrapper,
TermsAndConditions,
@@ -16,7 +16,7 @@ import {
const DontMissAThing = () => {
return (
<DefaultWrapperDarkBlue>
- <FormWrapper>
+ <Container isReverseColumnOnMobile>
<ImageWrapper>
<StaticImage
placeholder="none"
@@ -45,7 +45,7 @@ const DontMissAThing = () => {
</a>
</TermsAndConditions>
</FormFields>
- </FormWrapper>
+ </Container>
</DefaultWrapperDarkBlue>
);
};
diff --git a/src/components/ProductPage/DontMissAThing/styles.ts b/src/components/ProductPage/DontMissAThing/styles.ts
index 6c049b5f..8be84e76 100644
--- a/src/components/ProductPage/DontMissAThing/styles.ts
+++ b/src/components/ProductPage/DontMissAThing/styles.ts
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
export const Title = styled.h2`
font-size: 2.5rem;
@@ -28,18 +27,6 @@ export const FormLabel = styled.label`
}
`;
-export const FormWrapper = styled.div`
- ${globalMaxWidth};
- display: flex;
- align-items: center;
- gap: 60px;
-
- @media (max-width: 768px) {
- flex-direction: column;
- gap: 40px;
- }
-`;
-
export const FormFields = styled.div`
display: flex;
flex-direction: column;
diff --git a/src/components/ProductPage/Hero/index.tsx b/src/components/ProductPage/Hero/index.tsx
index 35f0bab5..8e8040c2 100644
--- a/src/components/ProductPage/Hero/index.tsx
+++ b/src/components/ProductPage/Hero/index.tsx
@@ -1,98 +1,67 @@
import { StaticImage } from 'gatsby-plugin-image';
import React from 'react';
-import {
- dashboardRegisterUrl,
- docsPageUrl,
- slackUrl,
- webinarsUrl,
-} from '../../../../shared';
+import { docsPageUrl, slackUrl, webinarsUrl } from '../../../../shared';
import { DefaultWrapperDarkBlue } from '../../../styles/wrappers';
-import { sectionOneImageWrapper } from '../../../globalStyles/sections.module.less';
-import SubscriptionBenefits from '../../SubscriptionBenefits';
import RecordIcon from '../../../svgs/record-outlined.svg';
+import HeroSectionDetails from '../../HeroSectionDetails';
+import Container from '../../Container';
import Card from './Card';
-import {
- ButtonsContainer,
- Cards,
- Container,
- ContainerContent,
- Description,
- Header,
- PrimaryButton,
- SecondaryButton,
- Title,
-} from './styles';
+import { Cards } from './styles';
const Hero = () => {
return (
<DefaultWrapperDarkBlue style={{ paddingTop: '50px' }}>
<Container>
- <Header>
- <ContainerContent>
- <Title>ESTUARY FLOW
-
- Estuary Flow is the only platform purpose-built for
+
- Build a Pipeline
-
-
- Contact Us
-
-
-
+ minutes, with millisecond latency."
+ hasCtaButtons
+ hasSubscriptionBenefits
+ />
+
+
-
-
-
-
+ }
+ />
+
-
+
HOW <span>ESTUARY FLOW</span> COMPARES
diff --git a/src/components/ProductPage/HowEstuaryFlowCompares/styles.ts b/src/components/ProductPage/HowEstuaryFlowCompares/styles.ts
index db1afb29..85dbf01e 100644
--- a/src/components/ProductPage/HowEstuaryFlowCompares/styles.ts
+++ b/src/components/ProductPage/HowEstuaryFlowCompares/styles.ts
@@ -1,13 +1,4 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Container = styled.div`
- ${globalMaxWidth};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 36px;
-`;
export const Title = styled.h2`
font-size: 2.5rem;
diff --git a/src/components/ProductPage/HowItWorks/index.tsx b/src/components/ProductPage/HowItWorks/index.tsx
index 5dd2f6ad..7205a0ad 100644
--- a/src/components/ProductPage/HowItWorks/index.tsx
+++ b/src/components/ProductPage/HowItWorks/index.tsx
@@ -3,9 +3,9 @@ import React from 'react';
import { DefaultWrapperGrey } from '../../../styles/wrappers';
import Carousel from '../../Carousel';
import FlowCycle from '../../../svgs/flow-cycle.svg';
+import Container from '../../Container';
import Hover from './Hover';
import {
- Container,
DesktopImageWrapper,
MobileImageWrapper,
Slide,
@@ -18,7 +18,7 @@ import {
const HowItWorks = () => {
return (
-
+
HOW IT WORKS
{
return (
-
+
KEY FEATURES
diff --git a/src/components/ProductPage/KeyFeatures/styles.ts b/src/components/ProductPage/KeyFeatures/styles.ts
index b0f30619..6bb74d70 100644
--- a/src/components/ProductPage/KeyFeatures/styles.ts
+++ b/src/components/ProductPage/KeyFeatures/styles.ts
@@ -1,16 +1,7 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
import { OutboundLink } from '../../OutboundLink';
-export const Container = styled.section`
- ${globalMaxWidth};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 40px;
-`;
-
export const KeyFeaturesWrapper = styled.div`
display: flex;
gap: 32px;
diff --git a/src/components/ProductPage/ReadyToStart/index.tsx b/src/components/ProductPage/ReadyToStart/index.tsx
index 6352121d..c9593da7 100644
--- a/src/components/ProductPage/ReadyToStart/index.tsx
+++ b/src/components/ProductPage/ReadyToStart/index.tsx
@@ -7,13 +7,13 @@ import CalendarIcon from '../../../svgs/product-page/section-fourteen/calendar.s
import LoginIcon from '../../../svgs/product-page/section-fourteen/login.svg';
import { OutboundLinkOutlined } from '../../OutboundLink';
import { dashboardRegisterUrl } from '../../../../shared';
+import Container from '../../Container';
import {
BoxDescription,
BoxTitle,
Boxes,
Columns,
ContactUsBox,
- Container,
GetStartedBox,
IconWrapper,
ImageWrapper,
@@ -24,7 +24,7 @@ import {
const ReadyToStart = () => {
return (
-
+
READY TO START?
diff --git a/src/components/ProductPage/ReadyToStart/styles.ts b/src/components/ProductPage/ReadyToStart/styles.ts
index bd5231d1..b1c001b2 100644
--- a/src/components/ProductPage/ReadyToStart/styles.ts
+++ b/src/components/ProductPage/ReadyToStart/styles.ts
@@ -1,13 +1,4 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Container = styled.div`
- ${globalMaxWidth};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 48px;
-`;
export const Title = styled.h2`
font-size: 2.5rem;
diff --git a/src/components/ProductPage/Streaming/index.tsx b/src/components/ProductPage/Streaming/index.tsx
index 46b4642f..ce6e5076 100644
--- a/src/components/ProductPage/Streaming/index.tsx
+++ b/src/components/ProductPage/Streaming/index.tsx
@@ -2,13 +2,13 @@ import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import { DefaultWrapperDarkBlue } from '../../../styles/wrappers';
+import Container from '../../Container';
import {
AmazonRedshiftStreamingEtlLogoWrapper,
BatchEltColumn,
BatchEltDescription,
BatchEltTitle,
Columns,
- Container,
ElasticStreamingEtlLogoWrapper,
ImageWrapper,
MySQLBatchElt1LogoWrapper,
@@ -27,7 +27,7 @@ import {
const Streaming = () => {
return (
-
+
STREAMING <span>ETL VS. BATCH ELT</span>
diff --git a/src/components/ProductPage/Streaming/styles.ts b/src/components/ProductPage/Streaming/styles.ts
index 10d04ed7..ab00c1a1 100644
--- a/src/components/ProductPage/Streaming/styles.ts
+++ b/src/components/ProductPage/Streaming/styles.ts
@@ -1,14 +1,5 @@
import { Link } from 'gatsby';
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Container = styled.div`
- ${globalMaxWidth};
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 40px;
-`;
export const ImageWrapper = styled.div`
position: relative;
diff --git a/src/components/ProductPage/TheSameData/index.tsx b/src/components/ProductPage/TheSameData/index.tsx
index 38be305c..9c8e2548 100644
--- a/src/components/ProductPage/TheSameData/index.tsx
+++ b/src/components/ProductPage/TheSameData/index.tsx
@@ -2,11 +2,11 @@ import { StaticImage } from 'gatsby-plugin-image';
import React from 'react';
import { DefaultWrapperDarkBlue } from '../../../styles/wrappers';
import Tabs from '../../Tabs';
+import Container from '../../Container';
import LogoAndPath from './LogoAndPath';
import {
AmazonRedshiftLogoWrapper,
Connectors,
- Container,
DatabricksAILogoWrapper,
DatabricksLogoWrapper,
DynamoDBLogoWrapper,
@@ -18,19 +18,17 @@ import {
OpenAiLogoWrapper,
PineconeLogoWrapper,
SnowflakeLogoWrapper,
- Subtitle,
TabContent,
TabFooterText,
TabImageWrapper,
TabsWrapper,
TextWrapper,
- Title,
} from './styles';
const TheSameData = () => {
return (
-
+
@@ -55,14 +53,14 @@ const TheSameData = () => {
/>
-
+ <h2>
THE SAME DATA ACROSS <span>ANALYTICS, OPS,</span> AND{' '}
<span>AI</span>
-
-
+
+
Add data from your sources into collections. Then reuse
that data for any destinations in real-time or batch.
-
+
span {
+ color: #5072eb;
+ }
+ }
+
+ p {
+ font-size: 1.25rem;
+ font-weight: 400;
+ line-height: 30px;
+ color: #ffffff;
+ margin: 0;
+
+ @media (max-width: 810px) {
+ font-size: 1rem;
+ }
+ }
`;
export const IconsWrapper = styled.div`
@@ -43,43 +66,6 @@ export const IconWrapper = styled.div`
}
`;
-export const Title = styled.h2`
- font-size: 2.5rem;
- font-weight: 600;
- line-height: 48px;
- margin: 0;
- color: #ffffff;
- max-width: 600px;
-
- @media (max-width: 810px) {
- font-size: 2rem;
- font-weight: 700;
- line-height: 38.4px;
- margin: 0;
- }
-
- @media (max-width: 425px) {
- font-size: 1.75rem;
- line-height: 33.6px;
- }
-
- & > span {
- color: #5072eb;
- }
-`;
-
-export const Subtitle = styled.p`
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 30px;
- color: #ffffff;
- margin: 0;
-
- @media (max-width: 810px) {
- font-size: 1rem;
- }
-`;
-
export const TabContent = styled.div`
display: flex;
flex-direction: column;
diff --git a/src/components/SearchInput/styles.module.less b/src/components/SearchInput/styles.module.less
index a2c3002b..5c37a50d 100644
--- a/src/components/SearchInput/styles.module.less
+++ b/src/components/SearchInput/styles.module.less
@@ -9,7 +9,7 @@
min-height: 56px;
height: fit-content;
- @media (min-width: 1486px) {
+ @media (min-width: 961px) {
max-width: 350px;
}
diff --git a/src/components/TestimonialsCarousel/index.tsx b/src/components/TestimonialsCarousel/index.tsx
index 5b193269..555379d7 100644
--- a/src/components/TestimonialsCarousel/index.tsx
+++ b/src/components/TestimonialsCarousel/index.tsx
@@ -65,9 +65,7 @@ const TestimonialsCarousel = ({
options={{ loop: true }}
>
{testimonials.map(({ id, logo, name, text }: Testimonial) => {
- const isImageSvg =
- !logo.localFile.childImageSharp &&
- logo.localFile.extension === 'svg';
+ const isImageSvg = logo.localFile.extension === 'svg';
return (
diff --git a/src/components/VanityLogosMarquee/index.tsx b/src/components/VanityLogosMarquee/index.tsx
index 4cdcb41d..00359bb8 100644
--- a/src/components/VanityLogosMarquee/index.tsx
+++ b/src/components/VanityLogosMarquee/index.tsx
@@ -16,13 +16,9 @@ const VanityLogosMarquee = () => {
enabled: Enabled
logo: Logo {
localFile {
- svg {
- content
- }
name
- internal {
- mediaType
- }
+ publicURL
+ extension
childImageSharp {
gatsbyImageData(
layout: FIXED
@@ -40,20 +36,21 @@ const VanityLogosMarquee = () => {
return (
- {logos.allStrapiVanityLogo.nodes?.map((logo) =>
- logo.logo.localFile.internal.mediaType ===
- 'image/svg+xml' ? (
+ {logos.allStrapiVanityLogo.nodes?.map((logo) => {
+ const isImageSvg = logo.logo.localFile.extension === 'svg';
+ const imgAltText = 'Customer logo';
+
+ return isImageSvg ? (
) : (
{
}
/>
- )
- )}
+ );
+ })}
);
diff --git a/src/components/XvsYFilter/index.tsx b/src/components/XvsYFilter/index.tsx
index 53cb5103..9f3ba2c3 100644
--- a/src/components/XvsYFilter/index.tsx
+++ b/src/components/XvsYFilter/index.tsx
@@ -62,7 +62,7 @@ const XvsYFilter = ({
isDarkTheme ? darkTheme : null
)}
>
-
+
{xSelect.label ? (
{xSelect.label}
) : null}
@@ -101,7 +101,7 @@ const XvsYFilter = ({
))}
-
+
{ySelect.label ? (
{ySelect.label}
) : null}
diff --git a/src/components/XvsYFilter/styles.module.less b/src/components/XvsYFilter/styles.module.less
index f97ea565..4e5bd044 100644
--- a/src/components/XvsYFilter/styles.module.less
+++ b/src/components/XvsYFilter/styles.module.less
@@ -6,18 +6,14 @@
display: flex;
gap: 16px;
flex-direction: row;
+ width: 100%;
- @media (max-width: 1485px) {
- width: 100%;
- }
-
- @media (max-width: 768px) {
+ @media (max-width: 960px) {
flex-direction: column;
}
}
.formControl {
- max-width: 262px;
width: 100%;
height: 52px;
@@ -26,15 +22,6 @@
}
}
-.connectorSelect {
- width: 262px;
- max-height: 56px;
-
- @media (max-width: 1485px) {
- width: 100%;
- }
-}
-
.selectItem {
align-items: flex-start;
}
@@ -55,4 +42,4 @@
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
-}
+}
\ No newline at end of file
diff --git a/src/globalStyles.ts b/src/globalStyles.ts
index fbfb389e..65b18c41 100644
--- a/src/globalStyles.ts
+++ b/src/globalStyles.ts
@@ -1,7 +1,5 @@
import styled, { css } from 'styled-components';
-/* TODO: Transfer the global styles from style.less to this styled-components file */
-
type LinkOutlinedProps = {
theme?: 'light' | 'dark';
$fullWidth?: boolean;
diff --git a/src/globalStyles/sections.module.less b/src/globalStyles/sections.module.less
index ddb97f07..709efa7a 100644
--- a/src/globalStyles/sections.module.less
+++ b/src/globalStyles/sections.module.less
@@ -22,15 +22,3 @@
padding-right: ~'calc(min(10vw,20px))';
}
}
-
-.sectionOneImageWrapper {
- width: 45%;
-
- @media (max-width: 1024px) {
- width: 100%;
- }
-
- @media (max-width: 768px) {
- display: none;
- }
-}
\ No newline at end of file
diff --git a/src/pages/etl-tools/index.tsx b/src/pages/etl-tools/index.tsx
index 2cc96704..19270ec0 100644
--- a/src/pages/etl-tools/index.tsx
+++ b/src/pages/etl-tools/index.tsx
@@ -1,13 +1,11 @@
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../../components/Layout';
-import {
- SectionOne,
- SectionTwo,
- SectionThree,
-} from '../../components/EtlToolsPage';
import Seo from '../../components/seo';
import { Vendor } from '../../../shared';
+import Hero from '../../components/EtlToolsPage/Hero';
+import LearnMoreArticles from '../../components/EtlToolsPage/LearnMoreArticles';
+import ListOfComparisons from '../../components/EtlToolsPage/ListOfComparisons';
interface EtlToolsProps {
data: {
@@ -26,9 +24,12 @@ const EtlTools = ({
}: EtlToolsProps) => {
return (
-
);
};
diff --git a/src/style.less b/src/style.less
index e71b6b6e..f13fa0df 100644
--- a/src/style.less
+++ b/src/style.less
@@ -26,7 +26,7 @@
--fontSize-6: 3.75rem;
--color-primary: #5072eb;
--color-text: #2e353f;
- --color-text-light: #b7c6dd;
+ --color-text-light: #b7c6dd17;
--color-heading: #1a202c;
--color-heading-black: black;
--color-accent: #d1dce5;
@@ -102,8 +102,22 @@ h6 {
h1 {
font-weight: var(--fontWeight-white);
font-size: var(--fontSize-6);
- color: var(--color-heading-black);
+ color: var(--color-primary);
font-weight: var(--fontWeight-bold);
+ margin: 0;
+ text-transform: uppercase;
+
+ @media (max-width: 768px) {
+ font-size: 2.25rem;
+ }
+
+ @media (max-width: 425px) {
+ font-size: 2rem;
+ }
+
+ span:nth-of-type(2n+1) {
+ color: #fff;
+ }
}
h2 {
@@ -352,4 +366,4 @@ table th {
// The auto-detection isn't great so until we start tagging languages let's just hide this
.language-tag {
display: none;
-}
+}
\ No newline at end of file
diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx
index ae9c6ad8..ae7eadff 100644
--- a/src/templates/blog-post/index.tsx
+++ b/src/templates/blog-post/index.tsx
@@ -29,6 +29,8 @@ import Avatar from '../../components/Avatar';
import SocialLinks from '../../components/SocialLinks';
import BlogBanner from '../../components/BlogBanner';
import ArticleSidebar from '../../components/ArticleSidebar';
+import Container from '../../components/Container';
+import HeroSectionDetails from '../../components/HeroSectionDetails';
import ShareArticle from './ShareArticle';
import {
blogPost,
@@ -106,7 +108,7 @@ const BlogPostTemplate = ({ data: { post } }) => {
itemType="http://schema.org/Article"
>
-
+
@@ -147,8 +149,10 @@ const BlogPostTemplate = ({ data: { post } }) => {
- {post.title}
- {post.description}
+
+
{post.body ? (
diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less
index f0ef69ca..062e1d33 100644
--- a/src/templates/blog-post/styles.module.less
+++ b/src/templates/blog-post/styles.module.less
@@ -134,54 +134,30 @@
}
.blogPostHeaderWrapper {
- .globalMaxWidth;
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 60px;
- height: fit-content;
+ width: 100%;
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
flex-direction: column;
- gap: 32px;
}
- h1 {
- margin-top: 36px;
- margin-bottom: 36px;
- color: #47506d;
- font-style: normal;
- text-transform: uppercase;
-
- @media (max-width: 1440px) {
- font-size: 2.25rem;
- line-height: 42px;
- margin: 20px 0 28px;
- }
+ > :nth-child(1) {
+ max-width: 100%;
}
- h2 {
- color: #47506d;
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 30px;
- margin-top: 36px;
- margin-bottom: 16px;
-
- @media (max-width: 1440px) {
- font-size: 1rem;
- margin-top: 28px;
- }
+ > :nth-child(2) {
+ max-width: 496px;
}
}
.headerInfo {
- max-width: 1024px;
+ h1 {
+ margin-top: 36px;
+ color: #47506d;
+ text-transform: uppercase;
+ }
p {
- font-size: 1.25rem;
+ color: #47506d;
}
}
@@ -250,16 +226,13 @@
}
.heroImage {
- max-width: 547px;
- min-width: 450px;
- width: 100%;
border-radius: 24px;
@media (min-width: 1200px) {
max-width: 720px;
}
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
min-width: 100%;
}
}
@@ -267,7 +240,7 @@
.shareArticleMobile {
display: none;
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
display: flex;
margin-right: auto;
}
@@ -285,7 +258,7 @@
justify-content: space-between;
gap: 48px;
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
flex-direction: column-reverse;
gap: 14px;
}
@@ -328,7 +301,7 @@
width: calc(100% - 256px - 48px);
padding-left: 48px;
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
width: 100%;
}
@@ -356,7 +329,7 @@
padding: 48px 30px;
}
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
padding: 32px;
}
@@ -415,7 +388,7 @@
line-height: 3rem;
}
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
font-size: 2rem;
}
@@ -446,7 +419,7 @@
font-weight: 500;
line-height: 30px;
- @media (max-width: 1150px) {
+ @media (max-width: 1024px) {
font-size: 1rem;
}
}
diff --git a/src/templates/connector/ChangeData/index.tsx b/src/templates/connector/ChangeData/index.tsx
index ae39bea2..98d80040 100644
--- a/src/templates/connector/ChangeData/index.tsx
+++ b/src/templates/connector/ChangeData/index.tsx
@@ -6,9 +6,9 @@ import { ConnectorType } from '../../../../shared';
import ConnectorsLink from '../../../components/ConnectorsLink';
import { DefaultWrapper } from '../../../styles/wrappers';
import { OutboundLink } from '../../../components/OutboundLink';
+import Container from '../../../components/Container';
import Cards from './components/Cards';
import {
- Container,
ContainerContent,
ContainerImage,
Description,
diff --git a/src/templates/connector/ChangeData/style.ts b/src/templates/connector/ChangeData/style.ts
index b699e8ab..1a524052 100644
--- a/src/templates/connector/ChangeData/style.ts
+++ b/src/templates/connector/ChangeData/style.ts
@@ -1,22 +1,4 @@
import styled from 'styled-components';
-import { globalMaxWidth } from '../../../globalStyles';
-
-export const Container = styled.div`
- ${globalMaxWidth}
-
- display: flex;
- flex-direction: column-reverse;
- gap: 40px;
-
- @media (min-width: 1024px) {
- flex-direction: row;
- align-items: center;
- }
-
- @media (min-width: 1280px) {
- gap: 60px;
- }
-`;
export const ContainerImage = styled.div`
flex: 1;
diff --git a/src/templates/connector/Hero/components/Content/index.tsx b/src/templates/connector/Hero/Content/index.tsx
similarity index 52%
rename from src/templates/connector/Hero/components/Content/index.tsx
rename to src/templates/connector/Hero/Content/index.tsx
index 218fd868..ea899421 100644
--- a/src/templates/connector/Hero/components/Content/index.tsx
+++ b/src/templates/connector/Hero/Content/index.tsx
@@ -2,17 +2,9 @@ import { StaticImage } from 'gatsby-plugin-image';
import React from 'react';
import DoneIcon from '@mui/icons-material/Done';
-import { ConnectorType, dashboardRegisterUrl } from '../../../../../../shared';
-import {
- Button,
- Container,
- ContainerPreTitle,
- Description,
- Pretitle,
- Title,
- Topic,
- Topics,
-} from './styles';
+import { ConnectorType, dashboardRegisterUrl } from '../../../../../shared';
+import HeroSectionDetails from '../../../../components/HeroSectionDetails';
+import { Button, Container, ContainerPreTitle, Topic, Topics } from './styles';
type ContentProps = {
connector: {
@@ -28,32 +20,35 @@ const Content = ({ connector }: ContentProps) => {
-
Real-time ETL & CDC
+
Real-time ETL & CDC
-
- {connector.type === 'capture' ? (
- <>
- <span>MOVE</span> YOUR DATA FROM{' '}
- {connector.title.toUpperCase()} WITH YOUR{' '}
- <span>FREE</span> ACCOUNT
- </>
- ) : (
- <>
- <span>STREAM</span> INTO {connector.title.toUpperCase()}{' '}
- WITH YOUR <span>FREE</span> ACCOUNT
- </>
- )}
-
-
- Continously ingest and deliver both streaming and batch change
- data from 100s of sources using Estuary’s custom no-code
- connectors.
-
+
+ MOVE {' '}
+
+ YOUR DATA FROM {connector.title} WITH YOUR
+ {' '}
+ FREE ACCOUNT
+
+ ) : (
+ <>
+ STREAM {' '}
+ INTO {connector.title} WITH YOUR {' '}
+ FREE ACCOUNT
+
+ )
+ }
+ description="Continously ingest and deliver both streaming and batch change
+ data from 100s of sources using Estuary's custom no-code
+ connectors."
+ />
-
+
+
PIPELINES AS <span>FAST</span> AS KAFKA, <LineBreak />
<span>EASY</span> AS MANAGED ELT/ETL, <LineBreak />
<span>CHEAPER</span> THAN BUILDING IT.
- Feature Comparison
-
- Detailed Comparison
-
+
+ Feature Comparison
+
+ Detailed Comparison
+
+
-
+
);
};
diff --git a/src/templates/connector/Pipelines/style.ts b/src/templates/connector/Pipelines/style.ts
index c5522ea2..3674010d 100644
--- a/src/templates/connector/Pipelines/style.ts
+++ b/src/templates/connector/Pipelines/style.ts
@@ -1,24 +1,6 @@
import styled from 'styled-components';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
import { AnchorFilled } from '../../../components/OutboundLink/styles';
-export const Wrapper = styled.section`
- ${sectionTopBottomPadding}
-`;
-
-export const Container = styled.div`
- ${globalMaxWidth}
-
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 24px;
-
- @media (min-width: 1280px) {
- gap: 36px;
- }
-`;
-
export const LineBreak = styled.span`
@media (min-width: 1024px) {
display: block;
@@ -60,10 +42,15 @@ export const Description = styled.h3`
`;
export const Button = styled(AnchorFilled)`
- width: 100%;
-
- @media (min-width: 1024px) {
- width: fit-content;
- padding: 12px 62px;
+ @media (max-width: 768px) {
+ width: 100%;
}
`;
+
+export const TableWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ width: 100%;
+`;
diff --git a/src/templates/connector/TakeATour/index.tsx b/src/templates/connector/TakeATour/index.tsx
index 8cbb6efe..d8830d6e 100644
--- a/src/templates/connector/TakeATour/index.tsx
+++ b/src/templates/connector/TakeATour/index.tsx
@@ -5,8 +5,8 @@ import { estuaryProductFlowVideoUrl } from '../../../../shared';
import useWindowExistence from '../../../hooks/useWindowExistence';
import { DefaultWrapperDark } from '../../../styles/wrappers';
import { ContainerIcon } from '../styles';
+import Container from '../../../components/Container';
import {
- Container,
ContainerButton,
ContainerContent,
ContainerIcons,
@@ -23,7 +23,7 @@ const TakeATour = () => {
return (
-
+
{hasWindow ? (
{
- console.log(xVendor);
return (
-
);
};