diff --git a/src/components/Advantages/index.tsx b/src/components/Advantages/index.tsx index 4d18d067..7e432011 100644 --- a/src/components/Advantages/index.tsx +++ b/src/components/Advantages/index.tsx @@ -4,7 +4,7 @@ import Advantage from './Advantage'; import { AdvantagesList, ButtonWrapper, - Container, + Wrapper, IconWrapper, LeftColumn, RightColumn, @@ -40,7 +40,7 @@ const Advantages = ({ isImageOnTheLeft = false, }: AdvantagesProps) => { return ( - + {icon} {title} @@ -67,7 +67,7 @@ const Advantages = ({ ) : null} {image ? {image} : null} - + ); }; diff --git a/src/components/Advantages/styles.ts b/src/components/Advantages/styles.ts index 36993412..53e19c58 100644 --- a/src/components/Advantages/styles.ts +++ b/src/components/Advantages/styles.ts @@ -1,17 +1,11 @@ import styled from 'styled-components'; -import { globalMaxWidth } from '../../globalStyles'; +import Container from '../Container'; type Theme = { $isDarkTheme: boolean; }; -export const Container = styled.section<{ $isImageOnTheLeft: boolean }>` - ${globalMaxWidth} - - display: flex; - align-items: center; - justify-content: space-between; - gap: 60px; +export const Wrapper = styled(Container)<{ $isImageOnTheLeft: boolean }>` flex-direction: ${(props) => props.$isImageOnTheLeft ? 'row-reverse' : 'row'}; diff --git a/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx b/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx index 6db3e0a6..b5b7d0cf 100644 --- a/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx +++ b/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx @@ -3,7 +3,7 @@ import React from 'react'; import clsx from 'clsx'; import { StaticImage } from 'gatsby-plugin-image'; import { backgroundImage, fullHeight } from './styles.module.less'; -import { backgroundColors } from './shared'; +import { darkImgStyle } from './shared'; import BackgroundWrapper from './BackgroundWrapper'; const DarkSwoopingLinesLeftDirectionBackground = ({ @@ -18,7 +18,7 @@ const DarkSwoopingLinesLeftDirectionBackground = ({ className={clsx(backgroundImage, fullHeight)} placeholder="blurred" quality={100} - backgroundColor={backgroundColors.dark} + imgStyle={darkImgStyle} />
{children}
diff --git a/src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx b/src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx index 57fadd80..bddbda32 100644 --- a/src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx +++ b/src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StaticImage } from 'gatsby-plugin-image'; import clsx from 'clsx'; import { backgroundImage, fullHeight } from './styles.module.less'; -import { backgroundColors } from './shared'; +import { lightImgStyle } from './shared'; import BackgroundWrapper from './BackgroundWrapper'; const LightSwoopingLinesRightDirectionBackground = ({ @@ -17,7 +17,7 @@ const LightSwoopingLinesRightDirectionBackground = ({ className={clsx(backgroundImage, fullHeight)} placeholder="blurred" quality={100} - backgroundColor={backgroundColors.light} + imgStyle={lightImgStyle} />
{children}
diff --git a/src/components/BackgroundImages/StraightLinesBackground.tsx b/src/components/BackgroundImages/StraightLinesBackground.tsx index 157d3099..d502a57c 100644 --- a/src/components/BackgroundImages/StraightLinesBackground.tsx +++ b/src/components/BackgroundImages/StraightLinesBackground.tsx @@ -2,7 +2,7 @@ import React from 'react'; import clsx from 'clsx'; import { StaticImage } from 'gatsby-plugin-image'; import { backgroundImage, fullHeight } from './styles.module.less'; -import { backgroundColors } from './shared'; +import { darkImgStyle } from './shared'; import BackgroundWrapper from './BackgroundWrapper'; const StraightLinesBackground = ({ @@ -17,7 +17,7 @@ const StraightLinesBackground = ({ className={clsx(backgroundImage, fullHeight)} placeholder="blurred" quality={100} - backgroundColor={backgroundColors.dark} + imgStyle={darkImgStyle} />
{children}
diff --git a/src/components/BackgroundImages/WhyPageStepsBackground.tsx b/src/components/BackgroundImages/WhyPageStepsBackground.tsx index 5037ab7d..efc0b41c 100644 --- a/src/components/BackgroundImages/WhyPageStepsBackground.tsx +++ b/src/components/BackgroundImages/WhyPageStepsBackground.tsx @@ -23,7 +23,6 @@ const WhyPageStepsBackground = ({ placeholder: BLURRED formats: [AUTO, WEBP, AVIF] layout: FULL_WIDTH - width: 1180 ) } } @@ -34,7 +33,6 @@ const WhyPageStepsBackground = ({ placeholder: BLURRED formats: [AUTO, WEBP, AVIF] layout: FULL_WIDTH - width: 1180 ) } } @@ -45,7 +43,6 @@ const WhyPageStepsBackground = ({ placeholder: BLURRED formats: [AUTO, WEBP, AVIF] layout: FULL_WIDTH - width: 1180 ) } } @@ -56,7 +53,6 @@ const WhyPageStepsBackground = ({ placeholder: BLURRED formats: [AUTO, WEBP, AVIF] layout: FULL_WIDTH - width: 1180 ) } } diff --git a/src/components/BackgroundImages/shared.ts b/src/components/BackgroundImages/shared.ts index c3a714ef..864d6e63 100644 --- a/src/components/BackgroundImages/shared.ts +++ b/src/components/BackgroundImages/shared.ts @@ -1,4 +1,2 @@ -export const backgroundColors = { - dark: '#04192b', - light: '#f9fafc', -}; +export const darkImgStyle = { backgroundColor: '#04192b' }; +export const lightImgStyle = { backgroundColor: '#f9fafc' }; diff --git a/src/components/Connectors/index.tsx b/src/components/Connectors/index.tsx index 0f2586ef..517f2f05 100644 --- a/src/components/Connectors/index.tsx +++ b/src/components/Connectors/index.tsx @@ -277,7 +277,7 @@ export const Connectors = ({ > p { - font-weight: 400; - font-size: 17px; - line-height: 30px; - align-items: center; - color: #47506d; - margin-top: 0; + font-weight: 400; + font-size: 17px; + line-height: 30px; + align-items: center; + color: #47506d; + margin-top: 0; } &>p { - font-weight: 400; - font-size: 17px; - line-height: 30px; - align-items: center; - color: #47506d; - margin-top: 0; + font-weight: 400; + font-size: 17px; + line-height: 30px; + align-items: center; + color: #47506d; + margin-top: 0; } & img { - padding: 5px; + padding: 5px; } } @@ -214,8 +224,8 @@ margin-top: 40px; @media (max-width: 810px) { - width: 167px; - height: 44px; - font-size: var(--fontSize-0); + width: 167px; + height: 44px; + font-size: var(--fontSize-0); } -} +} \ No newline at end of file diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index 2817273a..b758b202 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,17 +1,28 @@ import React, { ReactNode } from 'react'; import clsx from 'clsx'; -import { container, vertical } from './styles.module.less'; +import { container, vertical, reverse } from './styles.module.less'; interface ContainerProps { children: ReactNode; className?: string; isVertical?: boolean; + isReverseColumnOnMobile?: boolean; } -const Container = ({ children, className, isVertical }: ContainerProps) => { +const Container = ({ + children, + className, + isVertical, + isReverseColumnOnMobile, +}: ContainerProps) => { return (
{children}
diff --git a/src/components/Container/styles.module.less b/src/components/Container/styles.module.less index 4cc03003..694483c2 100644 --- a/src/components/Container/styles.module.less +++ b/src/components/Container/styles.module.less @@ -37,3 +37,9 @@ max-width: 100%; } } + +.reverse { + @media (max-width: 1024px) { + flex-direction: column; + } +} diff --git a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less index c512401d..7834d130 100644 --- a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less +++ b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less @@ -6,8 +6,6 @@ } @media(max-width: 768px) { - gap: 40px; - h2 { font-size: 2rem; } diff --git a/src/components/DeploymentOptionsPage/Hero/index.tsx b/src/components/DeploymentOptionsPage/Hero/index.tsx index 1f0ae376..79c64e25 100644 --- a/src/components/DeploymentOptionsPage/Hero/index.tsx +++ b/src/components/DeploymentOptionsPage/Hero/index.tsx @@ -2,16 +2,13 @@ import React from 'react'; import { StaticImage } from 'gatsby-plugin-image'; import clsx from 'clsx'; import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less'; -import { OutboundLinkFilled } from '../../OutboundLink'; -import { LinkOutlined } from '../../../globalStyles'; -import { dashboardRegisterUrl } from '../../../../shared'; import CustomerCloudIcon from '../../../svgs/customer-cloud-icon.svg'; import PublicDeploymentsIcon from '../../../svgs/public-deployments-icon.svg'; import PrivateDeploymentsIcon from '../../../svgs/private-deployments-icon.svg'; import Container from '../../Container'; +import HeroSectionDetails from '../../HeroSectionDetails'; import { container, - leftColumn, rightColumn, solidBorderBox, dashedBorderBox, @@ -22,31 +19,15 @@ const Hero = () => { return (
-
-

ESTUARY FLOW DEPLOYMENT OPTIONS

-

- Estuary Flow offers three main deployment options to + - Build a pipeline - - - Contact Us - -

- + Deployment, and BYOC options." + hasCtaButtons + />
a { - white-space: nowrap; - width: 100%; - } - - @media (max-width: 1024px) { - margin: 0; - } - - @media (max-width: 360px) { - flex-direction: column; - } - } } .solidBorderBox { diff --git a/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx b/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx index 1996c47f..4c83d7bc 100644 --- a/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx +++ b/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx @@ -1,16 +1,15 @@ import React from 'react'; -import clsx from 'clsx'; import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; import DeploymentOptionDetails from '../../DeploymentOptionDetails'; import { features } from '../shared'; -import { container, reverseColumn } from '../styles.module.less'; +import { container } from '../styles.module.less'; import DeploymentOptionDiagram from '../../DeploymentOptionDiagram'; import Container from '../../Container'; const PrivateDeployment = () => { return (
- + { +const Hero = ({ vendors }: SectionOneProps) => { return (
-
-
-

ETL, ELT and CDC Tools Comparison Center

- -
+ + + } + />
{ /> ))}
-
+
); }; -export default SectionOne; +export default Hero; diff --git a/src/components/EtlToolsPage/SectionOne/styles.module.less b/src/components/EtlToolsPage/Hero/styles.module.less similarity index 66% rename from src/components/EtlToolsPage/SectionOne/styles.module.less rename to src/components/EtlToolsPage/Hero/styles.module.less index 3e45cc67..26c660f9 100644 --- a/src/components/EtlToolsPage/SectionOne/styles.module.less +++ b/src/components/EtlToolsPage/Hero/styles.module.less @@ -1,41 +1,13 @@ -@import '../../../globalStyles/sections.module.less'; - .container { - .globalMaxWidth; - - display: flex; - align-items: center; - gap: 60px; - h1 { color: #fff; - text-transform: uppercase; - line-height: 69.6px; - } - - @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: 496px; - width: 100%; - aspect-ratio: 1 / 1; position: relative; + display: flex; + align-items: center; div:not(:first-of-type) { max-width: 8.4%; diff --git a/src/components/EtlToolsPage/SectionTwo/Card/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx similarity index 100% rename from src/components/EtlToolsPage/SectionTwo/Card/index.tsx rename to src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx diff --git a/src/components/EtlToolsPage/SectionTwo/Card/styles.module.less b/src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less similarity index 100% rename from src/components/EtlToolsPage/SectionTwo/Card/styles.module.less rename to src/components/EtlToolsPage/LearnMoreArticles/Card/styles.module.less diff --git a/src/components/EtlToolsPage/SectionTwo/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx similarity index 82% rename from src/components/EtlToolsPage/SectionTwo/index.tsx rename to src/components/EtlToolsPage/LearnMoreArticles/index.tsx index 0160adf3..3b68f81d 100644 --- a/src/components/EtlToolsPage/SectionTwo/index.tsx +++ b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; import { sectionTitle } from '../styles.module.less'; -import { container, cardsWrapper } from './styles.module.less'; +import Container from '../../Container'; +import { cardsWrapper } from './styles.module.less'; import Card from './Card'; -const SectionTwo = () => { +const LearnMoreArticles = () => { return (
-
+

Learn more about ETL, ELT, and CDC alternatives

@@ -25,9 +26,9 @@ const SectionTwo = () => { buttonHref="/CDC-comparison-guide" />
-
+
); }; -export default SectionTwo; +export default LearnMoreArticles; diff --git a/src/components/EtlToolsPage/SectionTwo/styles.module.less b/src/components/EtlToolsPage/LearnMoreArticles/styles.module.less similarity index 64% rename from src/components/EtlToolsPage/SectionTwo/styles.module.less rename to src/components/EtlToolsPage/LearnMoreArticles/styles.module.less index 15148e9a..ffa93735 100644 --- a/src/components/EtlToolsPage/SectionTwo/styles.module.less +++ b/src/components/EtlToolsPage/LearnMoreArticles/styles.module.less @@ -1,14 +1,5 @@ @import '../../../globalStyles/sections.module.less'; -.container { - .globalMaxWidth; - - display: flex; - flex-direction: column; - gap: 60px; - text-align: center; -} - .cardsWrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; diff --git a/src/components/EtlToolsPage/SectionThree/XvsYCard/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx similarity index 100% rename from src/components/EtlToolsPage/SectionThree/XvsYCard/index.tsx rename to src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx diff --git a/src/components/EtlToolsPage/SectionThree/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less similarity index 100% rename from src/components/EtlToolsPage/SectionThree/XvsYCard/styles.module.less rename to src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less diff --git a/src/components/EtlToolsPage/SectionThree/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/index.tsx similarity index 89% rename from src/components/EtlToolsPage/SectionThree/index.tsx rename to src/components/EtlToolsPage/ListOfComparisons/index.tsx index 05e2e06b..110eb51d 100644 --- a/src/components/EtlToolsPage/SectionThree/index.tsx +++ b/src/components/EtlToolsPage/ListOfComparisons/index.tsx @@ -7,12 +7,13 @@ import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; import { Vendor } from '../../../../shared'; import Checkmark from '../../../svgs/checkmark.svg'; import { sectionTitle } from '../styles.module.less'; +import Container from '../../Container'; import { - container, tabs, itemImage, gridCards, tabLabel, + textWrapper, } from './styles.module.less'; import XvsYCard from './XvsYCard'; @@ -50,7 +51,7 @@ interface SectionThreeProps { vendors: Vendor[]; } -const SectionThree = ({ estuaryVendor, vendors }: SectionThreeProps) => { +const ListOfComparisons = ({ estuaryVendor, vendors }: SectionThreeProps) => { const [selectedVendorId, setSelectedVendorId] = useState(estuaryVendor.id); const handleChangeSelectedVendor = ( @@ -66,11 +67,13 @@ const SectionThree = ({ estuaryVendor, vendors }: SectionThreeProps) => { return (
-
-

- 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. - +

@@ -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 + /> diff --git a/src/components/Homepage/Hero/styles.ts b/src/components/Homepage/Hero/styles.ts index f56fe526..c06e37c6 100644 --- a/src/components/Homepage/Hero/styles.ts +++ b/src/components/Homepage/Hero/styles.ts @@ -1,10 +1,5 @@ import styled from 'styled-components'; -import { - globalMaxWidth, - LinkOutlined, - sectionTopBottomPadding, -} from '../../../globalStyles'; -import { OutboundLinkFilled } from '../../OutboundLink'; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; export const AnimationBaseStyling = ` width: 100%; @@ -64,88 +59,12 @@ export const MainContent = styled.div` ${globalMaxWidth} flex-direction: column-reverse; } -`; - -export const HomepageHeader = styled.div` - display: flex; - flex-direction: column; - margin: auto 0; - - ul { - margin-top: 24px; - } -`; - -export const HomepageTitle = styled.h1` - color: #5072eb; - margin: 0; - font-weight: 600; - font-size: 4.5rem; - - @media (max-width: 768px) { - font-size: 2.25rem; - } - - @media (max-width: 425px) { - font-size: 1.5rem; - } - - & > .white-text { - color: #fff; - } -`; - -export const HomepageDescription = styled.p` - margin-top: 24px; - font-size: 1.25rem; - color: #fff; - margin: 20px 0 0 0; - - @media (max-width: 768px) { - font-size: 1rem; - } - - @media (max-width: 425px) { - font-size: 0.875rem; - } -`; - -export const HomepageHeadingButtons = styled.div` - display: flex; - gap: 24px; - margin-top: 36px; - - @media (max-width: 320px) { - flex-direction: column; - } - - & button, - a { - white-space: nowrap; - } - - .homepage-section-one-button { - @media (max-width: 768px) { - width: 50%; - padding-left: 0; - padding-right: 0; - } - @media (max-width: 320px) { - width: 100%; - } + h1 { + max-width: 760px; } `; -export const PrimaryButton = styled(OutboundLinkFilled)` - padding: 16px 24px !important; -`; - -export const SecondaryButton = styled(LinkOutlined)` - background-color: transparent; - color: #ffffff; -`; - export const FlowAnimationContainer = styled.div` display: flex; flex: 1 1 auto; diff --git a/src/components/Homepage/InnovateFaster/index.tsx b/src/components/Homepage/InnovateFaster/index.tsx index 0dfcac77..2d144dfb 100644 --- a/src/components/Homepage/InnovateFaster/index.tsx +++ b/src/components/Homepage/InnovateFaster/index.tsx @@ -1,19 +1,22 @@ import * as React from 'react'; import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; import MainConnectors from '../../MainConnectors'; -import { Description, Title, Wrapper } from './styles'; +import { TextWrapper } from '../styles'; +import { Wrapper } from './styles'; const InnovateFaster = () => { return ( - - 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 ( - - + + @@ -51,8 +51,8 @@ const TheBestRealTimeCdc = () => { quality={100} /> - - + + ); }; 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 ? ( ) : null}
-

+

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 + /> + + + + } + /> + -
- - - } - /> - - } - /> - - } - /> - - + } + /> + + } + /> + ); }; diff --git a/src/components/ProductPage/Hero/styles.ts b/src/components/ProductPage/Hero/styles.ts index 357a69a5..65f3feec 100644 --- a/src/components/ProductPage/Hero/styles.ts +++ b/src/components/ProductPage/Hero/styles.ts @@ -1,24 +1,8 @@ import styled from 'styled-components'; -import { globalMaxWidth, LinkOutlined } from '../../../globalStyles'; -import { OutboundLinkFilled } from '../../OutboundLink'; - -export const Container = styled.div` - ${globalMaxWidth}; - background-color: #04192b; -`; - -export const Header = styled.div` - display: flex; - align-items: center; - gap: 60px; - margin-bottom: 30px; - - @media (max-width: 1024px) { - flex-direction: column-reverse; - } -`; +import { globalMaxWidth } from '../../../globalStyles'; export const Cards = styled.div` + ${globalMaxWidth}; display: flex; margin-top: 40px; gap: 20px; @@ -27,92 +11,3 @@ export const Cards = styled.div` flex-direction: column; } `; - -export const ContainerContent = styled.div` - display: flex; - flex-direction: column; - flex: 1; - - ul { - margin-top: 24px; - } -`; - -export const Title = styled.h1` - color: #5072eb; - - @media (max-width: 768px) { - font-weight: 700; - font-size: 2.5rem; - line-height: 48px; - } - - @media (max-width: 425px) { - font-weight: 600; - font-size: 2.25rem; - line-height: 43.2px; - } -`; - -export const Description = styled.p` - font-weight: 400; - font-size: 1.25rem; - line-height: 30px; - color: #ffffff; - margin: 24px 0; - - @media (max-width: 768px) { - font-size: 1rem; - line-height: 30px; - } -`; - -export const ButtonsContainer = styled.div` - display: flex; - gap: 16px; - margin-top: 6px; - - & button, - a { - white-space: nowrap; - } - - @media (max-width: 1024px) { - margin: 0; - } - - @media (max-width: 360px) { - flex-direction: column; - } -`; - -export const PrimaryButton = styled(OutboundLinkFilled)` - padding: 16px 24px !important; - - @media (max-width: 1024px) { - width: 50%; - padding-left: 0; - padding-right: 0; - } - - @media (max-width: 360px) { - width: 100%; - } -`; - -export const SecondaryButton = styled(LinkOutlined)` - background-color: transparent; - color: #ffffff; - border: 2px solid #5072eb; - padding: 16px 24px; - - @media (max-width: 1024px) { - width: 50%; - padding-left: 0; - padding-right: 0; - } - - @media (max-width: 360px) { - width: 100%; - } -`; diff --git a/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx b/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx index 8b8c0790..0b9899a5 100644 --- a/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx +++ b/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx @@ -3,12 +3,13 @@ import React from 'react'; import { LinkFilled } from '../../../globalStyles'; import { DefaultWrapperDark } from '../../../styles/wrappers'; import PipelinesTable from '../../PipelinesTable'; -import { Container, TableTitle, TableWrapper, Title } from './styles'; +import Container from '../../Container'; +import { TableTitle, TableWrapper, Title } from './styles'; const HowEstuaryFlowCompares = () => { return ( - + 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.hero ? ( @@ -170,7 +174,7 @@ const BlogPostTemplate = ({ data: { post } }) => { }} />
-
+ {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." + /> diff --git a/src/templates/connector/Hero/components/Content/styles.ts b/src/templates/connector/Hero/Content/styles.ts similarity index 50% rename from src/templates/connector/Hero/components/Content/styles.ts rename to src/templates/connector/Hero/Content/styles.ts index 4d64ed41..d6b784bd 100644 --- a/src/templates/connector/Hero/components/Content/styles.ts +++ b/src/templates/connector/Hero/Content/styles.ts @@ -1,56 +1,42 @@ import styled from 'styled-components'; -import { OutboundLinkFilled } from '../../../../../components/OutboundLink'; +import { OutboundLinkFilled } from '../../../../components/OutboundLink'; export const Container = styled.div` - display: flex; - flex-direction: column; - gap: 40px; + h1 { + span:nth-of-type(2n) { + color: #04192b; + } - @media (min-width: 1024px) { - width: 50%; + span:nth-of-type(2n + 1) { + color: #625eff; + } + } + + p:first-of-type { + color: #47506d; + margin: 0; } `; -export const ContainerPreTitle = styled.ul` - margin: 0; +export const ContainerPreTitle = styled.div` display: flex; flex-direction: row; gap: 16px; align-items: center; - - @media (min-width: 1280px) { - gap: 24px; - } -`; - -export const Pretitle = styled.p` - font-weight: 700; - font-size: 20px; - margin: 0; - color: #47506d; - text-transform: uppercase; - - @media (min-width: 1280px) { - font-size: 24px; - line-height: 29px; - } -`; - -export const Title = styled.h1` - font-weight: 600; - font-size: 36px; - line-height: 43px; - margin: 0; - color: #04192b; + margin-bottom: 32px; span { - color: #5072eb; - } + font-weight: 700; + font-size: 1.25rem; + margin: 0; + color: #47506d; + text-transform: uppercase; - @media (min-width: 1500px) { - font-size: 48px; - line-height: 58px; + @media (min-width: 1280px) { + font-size: 1.5rem; + line-height: 29px; + } } `; @@ -60,38 +46,15 @@ export const LineBreak = styled.span` } `; -export const Description = styled.h2` - font-weight: 400; - font-size: 16px; - line-height: 30px; - color: #47506d; - margin: 0; - - @media (min-width: 1500px) { - font-size: 20px; - line-height: 30px; - color: #04192b; - } -`; - export const Button = styled(OutboundLinkFilled)` - width: 100%; - text-align: center; - border-radius: 4px; - padding: 12px 24px; - background-color: #5072eb; - color: #fff; - @media (min-width: 1024px) { - width: fit-content; - padding: 12px 62px; - font-size: 16px; + max-width: 240px; } `; export const Topics = styled.ul` list-style-type: none; - margin: 0; + margin: 32px 0; position: relative; display: flex; flex-direction: column; diff --git a/src/templates/connector/Hero/index.tsx b/src/templates/connector/Hero/index.tsx index e7416988..389103f6 100644 --- a/src/templates/connector/Hero/index.tsx +++ b/src/templates/connector/Hero/index.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { ConnectorType } from '../../../../shared'; import LightSwoopingLinesRightDirectionBackground from '../../../components/BackgroundImages/LightSwoopingLinesRightDirectionBackground'; -import Content from './components/Content'; +import Container from '../../../components/Container'; +import Content from './Content'; import { - Container, ContainerImage, FlowStepOne, FlowStepThree, diff --git a/src/templates/connector/Hero/styles.ts b/src/templates/connector/Hero/styles.ts index 1b89b4d1..4549eba0 100644 --- a/src/templates/connector/Hero/styles.ts +++ b/src/templates/connector/Hero/styles.ts @@ -1,20 +1,6 @@ import styled, { CSSProperties } from 'styled-components'; import { ConnectorType } from '../../../../shared'; -import { globalMaxWidth } from '../../../globalStyles'; - -export const Container = styled.div` - ${globalMaxWidth} - - display: flex; - flex-direction: column; - gap: 40px; - - @media (min-width: 1024px) { - flex-direction: row; - align-items: center; - } -`; export const ContainerImage = styled.div` position: relative; diff --git a/src/templates/connector/Pipelines/index.tsx b/src/templates/connector/Pipelines/index.tsx index b529ecf3..47acd23b 100644 --- a/src/templates/connector/Pipelines/index.tsx +++ b/src/templates/connector/Pipelines/index.tsx @@ -1,31 +1,31 @@ import React from 'react'; import PipelinesTable from '../../../components/PipelinesTable'; -import { - Button, - Container, - Description, - LineBreak, - Title, - Wrapper, -} from './style'; +import Container from '../../../components/Container'; +import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less'; +import { Button, Description, LineBreak, Title, TableWrapper } from './style'; const Pipelines = () => { return ( - - +
+ PIPELINES AS <span>FAST</span> AS KAFKA, <LineBreak /> <span>EASY</span> AS MANAGED ELT/ETL, <LineBreak /> <span>CHEAPER</span> THAN BUILDING IT. - Feature Comparison - - + + Feature 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 ( - - + - + ); };