diff --git a/shared.ts b/shared.ts index 39c51c61..e7679ea7 100644 --- a/shared.ts +++ b/shared.ts @@ -5,11 +5,13 @@ import { Author } from './src/templates/author/shared'; export const webinarsUrl = 'https://try.estuary.dev/webinar-estuary101-ondemand'; -export const dashboardRegisterUrl = 'https://dashboard.estuary.dev/register'; +export const dashboardUrl = 'https://dashboard.estuary.dev'; +export const dashboardRegisterUrl = `${dashboardUrl}/register`; export const statusPageUrl = 'https://status.estuary.dev/'; export const docsPageUrl = 'https://docs.estuary.dev'; export const slackUrl = 'https://estuary-dev.slack.com/join/shared_invite/zt-86nal6yr-VPbv~YfZE9Q~6Zl~gmZdFQ#/shared-invite/email'; +export const estuaryFlowGithubUrl = 'https://github.com/estuary/flow/'; export const estuaryProductFlowVideoUrl = 'https://www.youtube.com/embed/hlCh81ZbBik'; @@ -192,3 +194,5 @@ export interface Vendor { } export type DeploymentOption = keyof typeof features; + +export const activeUsersAmount = '5500+'; diff --git a/src/components/Advantages/index.tsx b/src/components/Advantages/index.tsx index 7e432011..afbfdd7b 100644 --- a/src/components/Advantages/index.tsx +++ b/src/components/Advantages/index.tsx @@ -24,6 +24,7 @@ type AdvantagesProps = { link?: { title: string; href: string; + openNewTab?: boolean; }; isDarkTheme?: boolean; isImageOnTheLeft?: boolean; @@ -60,7 +61,10 @@ const Advantages = ({ ) : null} {link ? ( - + {link.title} diff --git a/src/components/ConnectorsLink/index.tsx b/src/components/ConnectorsLink/index.tsx index cedbd732..32d3e56c 100644 --- a/src/components/ConnectorsLink/index.tsx +++ b/src/components/ConnectorsLink/index.tsx @@ -79,7 +79,7 @@ const ConnectorsLink = ({ return `/integrations/${captureConnectors.find((c) => c.id === sourceId)?.slugified_name}-to-${ materializationConnectors.find((c) => c.id === destinationId) ?.slugified_name - }`; + }/`; } else { return '#'; } diff --git a/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx index fef1c884..454213cb 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx +++ b/src/components/EtlToolsPage/LearnMoreArticles/Card/index.tsx @@ -15,9 +15,7 @@ const Card = ({ title, buttonHref }: CardProps) => {

{title}

- - Read - + Read ); }; diff --git a/src/components/EtlToolsPage/LearnMoreArticles/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx index 3b68f81d..79232196 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/index.tsx +++ b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx @@ -15,15 +15,15 @@ const LearnMoreArticles = () => {
diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx index 042efb63..7e3d0d34 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/index.tsx @@ -26,8 +26,6 @@ const XvsYCard = ({ xVendor, yVendor }: XvsYCardProps) => { return ( {xVendorLogo && yVendorLogo ? ( diff --git a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less index e32cce0d..37637abf 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less +++ b/src/components/EtlToolsPage/ListOfComparisons/XvsYCard/styles.module.less @@ -37,6 +37,7 @@ font-weight: 700; line-height: 28px; color: #47506D; + text-align: center; @media (max-width: 824px) { font-size: 1rem; diff --git a/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx index 88aafe96..eca2d72c 100644 --- a/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx +++ b/src/components/EtlToolsXvsYPage/GettingStarted/index.tsx @@ -94,7 +94,7 @@ const GettingStarted = () => { } button={{ title: 'Contact us', - href: '/contact-us', + href: '/contact-us/', }} /> diff --git a/src/components/EtlToolsXvsYPage/Hero/index.tsx b/src/components/EtlToolsXvsYPage/Hero/index.tsx index 962a12a2..048dd844 100644 --- a/src/components/EtlToolsXvsYPage/Hero/index.tsx +++ b/src/components/EtlToolsXvsYPage/Hero/index.tsx @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less'; import VendorsLink from '../../VendorsLink'; import { Vendor } from '../../../../shared'; -import NewTabLink from '../../NewTabLink'; +import InternalLink from '../../InternalLink'; import ChevronRightIcon from '../../../svgs/chevron-right.svg'; import HeroSectionDetails from '../../HeroSectionDetails'; import Container from '../../Container'; @@ -48,10 +48,10 @@ const Hero = ({ vendors, xVendor, yVendor }: SectionOneProps) => { yVendor={yVendor} isDarkTheme /> - + View all comparisons - + } /> diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 4fdddfa9..82f5ff18 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -9,7 +9,12 @@ import SlackIcon from '../../svgs/slack-outline.svg'; import TwitterIcon from '../../svgs/twitter-outline.svg'; import { ButtonOutlinedPrimary } from '../../globalStyles'; import NewsletterSignupForm from '../NewsletterSignupForm'; -import { docsPageUrl, slackUrl, statusPageUrl } from '../../../shared'; +import { + docsPageUrl, + estuaryFlowGithubUrl, + slackUrl, + statusPageUrl, +} from '../../../shared'; import { footer, globalFooterWrapper, @@ -86,15 +91,14 @@ const Footer = () => { Github Contact Us @@ -168,7 +172,7 @@ const Footer = () => { diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 141711e3..67422250 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -14,7 +14,12 @@ import { globalHeaderLogo, globalHeaderTitle, } from '../styles.module.less'; -import { dashboardRegisterUrl, slackUrl } from '../../../shared'; +import { + dashboardRegisterUrl, + dashboardUrl, + estuaryFlowGithubUrl, + slackUrl, +} from '../../../shared'; import { globalHeader, globalHeaderWrapper, @@ -211,7 +216,7 @@ const Header = ({ fixedHeader }: HeaderProps) => { @@ -222,7 +227,7 @@ const Header = ({ fixedHeader }: HeaderProps) => { Log in diff --git a/src/components/HeaderNavbar/Resources/index.tsx b/src/components/HeaderNavbar/Resources/index.tsx index 1a01333d..bf3a098c 100644 --- a/src/components/HeaderNavbar/Resources/index.tsx +++ b/src/components/HeaderNavbar/Resources/index.tsx @@ -99,7 +99,7 @@ const HeaderNavbarResources = ({ active, setActive }) => { diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx index e0c3b259..16ed3f73 100644 --- a/src/components/HeroSectionDetails/index.tsx +++ b/src/components/HeroSectionDetails/index.tsx @@ -32,11 +32,7 @@ const HeroSectionDetails = ({ > Build a Pipeline - + Contact Us diff --git a/src/components/Homepage/CaseStudies/Card.tsx b/src/components/Homepage/CaseStudies/Card.tsx index edebada3..487166f2 100644 --- a/src/components/Homepage/CaseStudies/Card.tsx +++ b/src/components/Homepage/CaseStudies/Card.tsx @@ -20,7 +20,6 @@ const Card = ({ href, title, description, image }: CardProps) => { {description}. + diff --git a/src/components/Homepage/Hero/index.tsx b/src/components/Homepage/Hero/index.tsx index 9ef0c866..d8352604 100644 --- a/src/components/Homepage/Hero/index.tsx +++ b/src/components/Homepage/Hero/index.tsx @@ -5,6 +5,7 @@ import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg'; import MetricCard from '../../MetricCard'; import VanityLogosMarquee from '../../VanityLogosMarquee'; import HeroSectionDetails from '../../HeroSectionDetails'; +import { activeUsersAmount } from '../../../../shared'; import AnimFallback from './AnimFallback'; import AnimatedHero from './AnimatedHero'; import { @@ -44,7 +45,7 @@ const Hero = () => { } - value="5500+" + value={activeUsersAmount} label="Active users" /> { Watch Demo - + Contact Us diff --git a/src/components/Homepage/TheBestRealTimeCdc/index.tsx b/src/components/Homepage/TheBestRealTimeCdc/index.tsx index 5fbd0efa..cf5e4cd9 100644 --- a/src/components/Homepage/TheBestRealTimeCdc/index.tsx +++ b/src/components/Homepage/TheBestRealTimeCdc/index.tsx @@ -39,9 +39,7 @@ const TheBestRealTimeCdc = () => { - - View Connectors - + View Connectors { +const DataopsMadeSimple = () => { return (
{ ); }; -export default SectionSeven; +export default DataopsMadeSimple; diff --git a/src/components/Integration/SectionFive/index.tsx b/src/components/Integration/EstuaryFlowVideo/index.tsx similarity index 95% rename from src/components/Integration/SectionFive/index.tsx rename to src/components/Integration/EstuaryFlowVideo/index.tsx index 5790ebae..3d068ecd 100644 --- a/src/components/Integration/SectionFive/index.tsx +++ b/src/components/Integration/EstuaryFlowVideo/index.tsx @@ -11,7 +11,7 @@ import { title, } from './styles.module.less'; -const SectionFive = () => { +const EstuaryFlowVideo = () => { return (
@@ -39,4 +39,4 @@ const SectionFive = () => { ); }; -export default SectionFive; +export default EstuaryFlowVideo; diff --git a/src/components/Integration/SectionFive/styles.module.less b/src/components/Integration/EstuaryFlowVideo/styles.module.less similarity index 100% rename from src/components/Integration/SectionFive/styles.module.less rename to src/components/Integration/EstuaryFlowVideo/styles.module.less diff --git a/src/components/Integration/SectionTwo/index.tsx b/src/components/Integration/FromConnector/index.tsx similarity index 98% rename from src/components/Integration/SectionTwo/index.tsx rename to src/components/Integration/FromConnector/index.tsx index f8d463dc..9e563dd6 100644 --- a/src/components/Integration/SectionTwo/index.tsx +++ b/src/components/Integration/FromConnector/index.tsx @@ -17,7 +17,7 @@ import { whiteFilledCircle, } from '../styles.module.less'; -const SectionTwo = ({ +const FromConnector = ({ title, longDescription, shortDescription, @@ -83,4 +83,4 @@ const SectionTwo = ({ ); }; -export default SectionTwo; +export default FromConnector; diff --git a/src/components/Integration/SectionOne/index.tsx b/src/components/Integration/Hero/index.tsx similarity index 58% rename from src/components/Integration/SectionOne/index.tsx rename to src/components/Integration/Hero/index.tsx index 04b37a57..c4fd0a4d 100644 --- a/src/components/Integration/SectionOne/index.tsx +++ b/src/components/Integration/Hero/index.tsx @@ -12,38 +12,32 @@ import NewsletterSignupForm from '../../NewsletterSignupForm'; import VanityLogosMarquee from '../../VanityLogosMarquee'; import { Connector } from '../shared'; import { LinkOutlined } from '../../../globalStyles'; -import { dashboardRegisterUrl } from '../../../../shared'; +import { activeUsersAmount, dashboardRegisterUrl } from '../../../../shared'; +import Container from '../../Container'; import { + container, backgroundImageWraper, bgImage, bgMiddleImageWrapper, bgSideImageWrapper, - buttonWrapper, - columnLeft, - columnRight, contactUsCta, iconWrapper, - imageWrapper, - mainContent, metricCardsList, middleLine, - preTitle, preTitleWrapper, - secondaryButton, semiCircleLeftSide, semiCircleMiddle, semiCircleRightSide, - title, } from './styles.module.less'; const metricIconColor = '#FFFFFF'; -export interface SectionOneProps { +export interface HeroProps { sourceConnector: Connector; destConnector: Connector; } -const SectionOne = ({ sourceConnector, destConnector }: SectionOneProps) => { +const Hero = ({ sourceConnector, destConnector }: HeroProps) => { const sourceConnectorLogo = getImage( sourceConnector.logo?.childImageSharp?.gatsbyImageData ); @@ -53,8 +47,8 @@ const SectionOne = ({ sourceConnector, destConnector }: SectionOneProps) => { return (
-
-
+ +
{ loading="eager" />
- - Fastest, Most Reliable CDC and ETL - + FASTEST, MOST RELIABLE CDC AND ETL
-

+

STREAM DATA FROM {sourceConnector.title} TO{' '} {destConnector.title} -

-
-
+
{sourceConnectorLogo && destinationConnectorLogo ? ( -
-
-
-
- -
+
+
+
+
-
-
- -
-
+
+
+
+ +
-
-
- -
+
+
+
+
) : null}
Schedule an appointment -
- - Contact Us - -
+ + Contact Us +
-
+
    } @@ -136,7 +120,7 @@ const SectionOne = ({ sourceConnector, destConnector }: SectionOneProps) => { /> } - value="3000+" + value={activeUsersAmount} label="Active users" /> { ); }; -export default SectionOne; +export default Hero; diff --git a/src/components/Integration/SectionOne/styles.module.less b/src/components/Integration/Hero/styles.module.less similarity index 81% rename from src/components/Integration/SectionOne/styles.module.less rename to src/components/Integration/Hero/styles.module.less index 16dc49cd..2b4e91d4 100644 --- a/src/components/Integration/SectionOne/styles.module.less +++ b/src/components/Integration/Hero/styles.module.less @@ -1,57 +1,69 @@ @import '../../../globalStyles/sections.module.less'; -.mainContent { - .globalMaxWidth; - - display: flex; - width: 100%; - justify-content: space-between; - gap: 60px; - - @media (max-width: 1024px) { - flex-direction: column-reverse; - } +.ctaTitle { + color: #FFFFFFB2; + font-size: 1.25rem; + font-weight: 700; + line-height: 24px; + text-align: center; - @media (max-width: 768px) { - gap: 0; + @media (max-width: 680px) { + font-size: 1rem; } } -.columnLeft { - display: flex; - flex-direction: column; - margin: auto 0; - max-width: 620px; +.container { + > :nth-child(1) { + display: flex; + flex-direction: column; + margin: auto 0; + max-width: 620px; - @media (max-width: 1024px) { - max-width: 100%; - } + @media (max-width: 1024px) { + max-width: 100%; + } - &>label { - .ctaTitle; - text-align: left; - margin-bottom: 26px; + label { + .ctaTitle; + text-align: left; + margin-bottom: 26px; + } + + span { + font-size: 1.5rem; + line-height: 28.8px; + font-weight: 700; + color: #5072EB; + + @media (max-width: 768px) { + font-size: 1.25rem; + line-height: 24px; + } + + @media (max-width: 425px) { + font-size: 1rem; + } + } + + h1 { + color: #fff; + margin: 28px 0 36px 0; + } } -} -.columnRight { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 42px; - margin: auto 0; -} + > :nth-child(2) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 42px; + margin: auto 0; -.ctaTitle { - color: #FFFFFFB2; - font-size: 1.25rem; - font-weight: 700; - line-height: 24px; - text-align: center; + @media (max-width: 768px) { + display: none; + } - @media (max-width: 680px) { - font-size: 1rem; + flex: none; } } @@ -68,10 +80,6 @@ .contactUsCta { .cta; - - @media (max-width: 768px) { - display: none; - } } .preTitleWrapper { @@ -98,68 +106,6 @@ } } -.preTitle { - font-size: 1.5rem; - line-height: 28.8px; - font-weight: 700; - color: #5072EB; - text-transform: uppercase; - - @media (max-width: 768px) { - font-size: 1.25rem; - line-height: 24px; - } - - @media (max-width: 425px) { - font-size: 1rem; - } -} - -.title { - color: #ffffff; - text-transform: uppercase; - margin: 28px 0 36px 0; - - @media (max-width: 1024px) { - line-height: 48px; - font-size: 2.5rem; - font-weight: 700; - } -} - -.buttonWrapper { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - - @media (min-width: 426px) { - max-width: 280px; - } -} - -.secondaryButton { - background-color: transparent !important; - color: #ffffff !important; - border: 2px solid #5072eb !important; - - &:hover { - background-color: #625EFF !important; - } - - &:active { - background-color: #5072EB !important; - } -} - -.imageWrapper { - margin: auto; - - @media (max-width: 768px) { - display: none; - } -} - .connectorLogo { position: absolute; max-width: 11%; diff --git a/src/components/Integration/SectionEight/index.tsx b/src/components/Integration/IncreaseProductivity4x/index.tsx similarity index 92% rename from src/components/Integration/SectionEight/index.tsx rename to src/components/Integration/IncreaseProductivity4x/index.tsx index cbe8667d..a123af9c 100644 --- a/src/components/Integration/SectionEight/index.tsx +++ b/src/components/Integration/IncreaseProductivity4x/index.tsx @@ -3,7 +3,7 @@ import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; import MainConnectors from '../../MainConnectors'; import { container, description, title } from './styles.module.less'; -const SectionEight = () => { +const IncreaseProductivity4x = () => { return (
    @@ -22,4 +22,4 @@ const SectionEight = () => { ); }; -export default SectionEight; +export default IncreaseProductivity4x; diff --git a/src/components/Integration/SectionEight/styles.module.less b/src/components/Integration/IncreaseProductivity4x/styles.module.less similarity index 100% rename from src/components/Integration/SectionEight/styles.module.less rename to src/components/Integration/IncreaseProductivity4x/styles.module.less diff --git a/src/components/Integration/SectionSix/index.tsx b/src/components/Integration/RealTimeAndBatch/index.tsx similarity index 88% rename from src/components/Integration/SectionSix/index.tsx rename to src/components/Integration/RealTimeAndBatch/index.tsx index cf4b8c7c..03b6efdd 100644 --- a/src/components/Integration/SectionSix/index.tsx +++ b/src/components/Integration/RealTimeAndBatch/index.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; import RealTimeCdc from '../../../svgs/real-time-cdc.svg'; import Advantages from '../../Advantages'; -import { sectionSixAdvantages } from '../advantages'; +import { estuaryFlowAdvantages } from '../advantages'; -const SectionSix = () => { +const RealTimeAndBatch = () => { return (
    { quality={100} /> } - advantages={sectionSixAdvantages} + advantages={estuaryFlowAdvantages} />
    ); }; -export default SectionSix; +export default RealTimeAndBatch; diff --git a/src/components/Integration/SectionTen/index.tsx b/src/components/Integration/SeeHow/index.tsx similarity index 96% rename from src/components/Integration/SectionTen/index.tsx rename to src/components/Integration/SeeHow/index.tsx index c06602a3..d1cb349a 100644 --- a/src/components/Integration/SectionTen/index.tsx +++ b/src/components/Integration/SeeHow/index.tsx @@ -10,7 +10,7 @@ import { title, } from './styles.module.less'; -const SectionTen = () => { +const SeeHow = () => { return (
    @@ -35,4 +35,4 @@ const SectionTen = () => { ); }; -export default SectionTen; +export default SeeHow; diff --git a/src/components/Integration/SectionTen/styles.module.less b/src/components/Integration/SeeHow/styles.module.less similarity index 100% rename from src/components/Integration/SectionTen/styles.module.less rename to src/components/Integration/SeeHow/styles.module.less diff --git a/src/components/Integration/SectionNine/index.tsx b/src/components/Integration/Spend25xLess/index.tsx similarity index 92% rename from src/components/Integration/SectionNine/index.tsx rename to src/components/Integration/Spend25xLess/index.tsx index 29b0598a..b78ced67 100644 --- a/src/components/Integration/SectionNine/index.tsx +++ b/src/components/Integration/Spend25xLess/index.tsx @@ -4,7 +4,7 @@ import DatabaseSavingWithLowPrice from '../../../svgs/database-saving-with-low-p import Advantages from '../../Advantages'; import { PricingCalculator } from '../../PricingCalculator'; -const SectionNine = () => { +const Spend25xLess = () => { return (
    { isDarkTheme link={{ title: 'See Pricing', - href: '/pricing', + href: '/pricing/', }} />
    ); }; -export default SectionNine; +export default Spend25xLess; diff --git a/src/components/Integration/SectionFour/index.tsx b/src/components/Integration/Testimonials/index.tsx similarity index 90% rename from src/components/Integration/SectionFour/index.tsx rename to src/components/Integration/Testimonials/index.tsx index 959e5d1c..ec202de9 100644 --- a/src/components/Integration/SectionFour/index.tsx +++ b/src/components/Integration/Testimonials/index.tsx @@ -3,7 +3,7 @@ import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; import TestimonialsCarousel from '../../TestimonialsCarousel'; import { container, title } from './styles.module.less'; -const SectionFour = () => { +const Testimonials = () => { return (
    @@ -16,4 +16,4 @@ const SectionFour = () => { ); }; -export default SectionFour; +export default Testimonials; diff --git a/src/components/Integration/SectionFour/styles.module.less b/src/components/Integration/Testimonials/styles.module.less similarity index 100% rename from src/components/Integration/SectionFour/styles.module.less rename to src/components/Integration/Testimonials/styles.module.less diff --git a/src/components/Integration/SectionThree/index.tsx b/src/components/Integration/ToConnector/index.tsx similarity index 98% rename from src/components/Integration/SectionThree/index.tsx rename to src/components/Integration/ToConnector/index.tsx index 2a01a6f2..a2f2450e 100644 --- a/src/components/Integration/SectionThree/index.tsx +++ b/src/components/Integration/ToConnector/index.tsx @@ -18,7 +18,7 @@ import { whiteFilledCircle, } from '../styles.module.less'; -const SectionThree = ({ +const ToConnector = ({ title, longDescription, shortDescription, @@ -94,4 +94,4 @@ const SectionThree = ({ ); }; -export default SectionThree; +export default ToConnector; diff --git a/src/components/Integration/advantages.tsx b/src/components/Integration/advantages.tsx index c591fbcb..5754511f 100644 --- a/src/components/Integration/advantages.tsx +++ b/src/components/Integration/advantages.tsx @@ -1,4 +1,4 @@ -export const sectionSixAdvantages = [ +export const estuaryFlowAdvantages = [ { title: 'Fastest real-time capture with sub-100ms latency.', }, diff --git a/src/components/Integration/index.tsx b/src/components/Integration/index.tsx deleted file mode 100644 index 402f20d1..00000000 --- a/src/components/Integration/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import SectionEight from './SectionEight'; -import SectionFive from './SectionFive'; -import SectionFour from './SectionFour'; -import SectionNine from './SectionNine'; -import SectionOne from './SectionOne'; -import SectionSeven from './SectionSeven'; -import SectionSix from './SectionSix'; -import SectionTen from './SectionTen'; -import SectionThree from './SectionThree'; -import SectionTwo from './SectionTwo'; - -export { - SectionEight, - SectionFive, - SectionFour, - SectionNine, - SectionOne, - SectionSeven, - SectionSix, - SectionTen, - SectionThree, - SectionTwo, -}; diff --git a/src/components/NewTabLink/index.tsx b/src/components/InternalLink/index.tsx similarity index 50% rename from src/components/NewTabLink/index.tsx rename to src/components/InternalLink/index.tsx index 7d7e52b7..715f5e33 100644 --- a/src/components/NewTabLink/index.tsx +++ b/src/components/InternalLink/index.tsx @@ -1,17 +1,17 @@ import React, { ReactNode } from 'react'; import { linkStyling } from './styles.module.less'; -interface NewTabLinkProps { +interface InternalLinkProps { href: string; children: ReactNode; } -const NewTabLink = ({ children, href }: NewTabLinkProps) => { +const InternalLink = ({ children, href }: InternalLinkProps) => { return ( - + {children} ); }; -export default NewTabLink; +export default InternalLink; diff --git a/src/components/NewTabLink/styles.module.less b/src/components/InternalLink/styles.module.less similarity index 100% rename from src/components/NewTabLink/styles.module.less rename to src/components/InternalLink/styles.module.less diff --git a/src/components/Layout/ReleaseBanner/index.tsx b/src/components/Layout/ReleaseBanner/index.tsx index ee2ad737..0bbedbc3 100644 --- a/src/components/Layout/ReleaseBanner/index.tsx +++ b/src/components/Layout/ReleaseBanner/index.tsx @@ -20,7 +20,7 @@ const ReleaseBanner = ({ theme = 'dark' }) => { )} >
    - + A Step Ahead

    Private deployments are now live! Explore how Estuary diff --git a/src/components/PricingPage/ChooseYourPlan/utils.tsx b/src/components/PricingPage/ChooseYourPlan/utils.tsx index d62639da..9a2db90a 100644 --- a/src/components/PricingPage/ChooseYourPlan/utils.tsx +++ b/src/components/PricingPage/ChooseYourPlan/utils.tsx @@ -48,7 +48,7 @@ export const plans = [ icon: , title: 'Enterprise', description: 'Get to the next level for mission-critical deployments.', - button: { title: 'Contact Us', href: '/contact-us' }, + button: { title: 'Contact Us', href: '/contact-us/' }, benefits: [ 'SOC2 & HIPAA Reports', 'Customer Success Manager', diff --git a/src/components/ProductPage/DeliverRealTimeData/index.tsx b/src/components/ProductPage/DeliverRealTimeData/index.tsx index 9451c460..291e2e94 100644 --- a/src/components/ProductPage/DeliverRealTimeData/index.tsx +++ b/src/components/ProductPage/DeliverRealTimeData/index.tsx @@ -7,6 +7,7 @@ import LatencyIcon from '../../../svgs/metric-latency.svg'; import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg'; import Advantages from '../../Advantages'; import { sectionNineAdvantages } from '../advantages'; +import { activeUsersAmount } from '../../../../shared'; import { ActiveUsersMetric, IconWrapper, @@ -65,7 +66,7 @@ const DeliverRealTimeData = () => { -

    3000+

    +

    {activeUsersAmount}

    Active users

    diff --git a/src/components/ProductPage/DontMissAThing/index.tsx b/src/components/ProductPage/DontMissAThing/index.tsx index 24223a34..0ae49fcb 100644 --- a/src/components/ProductPage/DontMissAThing/index.tsx +++ b/src/components/ProductPage/DontMissAThing/index.tsx @@ -40,9 +40,7 @@ const DontMissAThing = () => { By subscribing I agree with{' '} -
    - Terms and Conditions - + Terms and Conditions diff --git a/src/components/ProductPage/ModernDataops/index.tsx b/src/components/ProductPage/ModernDataops/index.tsx index fd41b2dd..79b72a2d 100644 --- a/src/components/ProductPage/ModernDataops/index.tsx +++ b/src/components/ProductPage/ModernDataops/index.tsx @@ -37,6 +37,7 @@ const ModernDataops = () => { link={{ title: 'See The Docs', href: docsPageUrl, + openNewTab: true, }} /> diff --git a/src/components/ProductPage/ReadyToStart/index.tsx b/src/components/ProductPage/ReadyToStart/index.tsx index c9593da7..e96f2d14 100644 --- a/src/components/ProductPage/ReadyToStart/index.tsx +++ b/src/components/ProductPage/ReadyToStart/index.tsx @@ -54,7 +54,7 @@ const ReadyToStart = () => { overview. - + diff --git a/src/components/ProductPage/advantages.tsx b/src/components/ProductPage/advantages.tsx index 20421223..9a254bc0 100644 --- a/src/components/ProductPage/advantages.tsx +++ b/src/components/ProductPage/advantages.tsx @@ -86,7 +86,7 @@ export const sectionEightAdvantages = [ title: ( <> Spend 2-5x less with low, predictable pricing (see{' '} - + pricing .) diff --git a/src/components/Signup/index.tsx b/src/components/Signup/index.tsx index b23b8f90..9c35bb1a 100644 --- a/src/components/Signup/index.tsx +++ b/src/components/Signup/index.tsx @@ -18,9 +18,7 @@ const SignUp = () => { > Sign up - - Contact us - + Contact us
    diff --git a/src/components/TakeATour/index.tsx b/src/components/TakeATour/index.tsx index 3638ee3a..c4afb879 100644 --- a/src/components/TakeATour/index.tsx +++ b/src/components/TakeATour/index.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Container, Link } from './styles'; const DEFAULTS = { - href: '/why', + href: '/why/', message: 'Take a Product Tour', version: '', }; diff --git a/src/components/XvsYFilter/index.tsx b/src/components/XvsYFilter/index.tsx index 9f3ba2c3..27fd629a 100644 --- a/src/components/XvsYFilter/index.tsx +++ b/src/components/XvsYFilter/index.tsx @@ -142,7 +142,6 @@ const XvsYFilter = ({ { return ( -
    +

    @@ -215,32 +209,25 @@ const AboutPage = () => {

    We're creating a new kind of DataOps platform - that{' '} - - empowers engineering teams - {' '} - to build real-time, data-intensive pipelines and + that empowers engineering teams to + build real-time, data-intensive pipelines and applications at scale, with minimal friction, in a UI or CLI. We aim to make real-time data accessible to the analyst, while bringing power tooling to the - streaming enthusiast. Flow{' '} - unifies a + streaming enthusiast. Flow unifies a team's databases, pub/sub systems, and SaaS around their data,{' '} - + without requiring new investments in infrastructure {' '} or development.

    - Estuary{' '} - - develops in the open - {' '} - to produce both the runtime for our managed service - and an ecosystem of open-source connectors. You can - read more about{' '} + Estuary develops in the open to produce + both the runtime for our managed service and an + ecosystem of open-source connectors. You can read + more about{' '} our story here. @@ -248,13 +235,11 @@ const AboutPage = () => {

    -
    +
    -
    - {companyAge} years of real-time innovation -
    + {companyAge} years of real-time innovation { />
    -

    about us

    -

    History

    + ABOUT US +

    History

    We didn't start at trying to make real-time data flows more accessible by abstracting away the @@ -294,10 +279,8 @@ const AboutPage = () => {

    -

    - what's happening -

    -

    In the Media

    + WHAT'S HAPPENING +

    In the Media

    @@ -376,9 +359,9 @@ const AboutPage = () => {
    -

    say hello

    -

    Meet Our Team

    -
      + SAY HELLO +

      Meet Our Team

      +
        {employees.map((employee, index) => (
        {
    -

    Our Investors

    +

    Our Investors

    {
    -

    Come work with us

    + COME WORK WITH US

    Careers

    @@ -427,8 +410,7 @@ const AboutPage = () => {
    - -

    +

    About you: You're passionate about the complexities and potential of our data-driven world, self-motivated, @@ -439,7 +421,7 @@ const AboutPage = () => {

    -

    +

    About us: We're a rapidly growing, highly technical team built by successful repeat founders that's @@ -457,9 +439,9 @@ const AboutPage = () => {

    -

    What's it like

    + WHAT'S IT LIKE
    -

    Working at Estuary

    +

    Working at Estuary

    @@ -518,8 +500,8 @@ const AboutPage = () => {
    -

    Apply today

    -

    Current Openings

    + APPLY TODAY +

    Current Openings

    {jobs.length > 0 @@ -552,9 +534,7 @@ const AboutPage = () => { currentOpeningsTitleWrapper } > -

    - {job.title} -

    +

    {job.title}

    { currentOpeningsLocationWrapper } > -

    +

    Location:{' '} {job.location}

    diff --git a/src/pages/about/styles.module.less b/src/pages/about/styles.module.less index 14065a01..c8e5e934 100644 --- a/src/pages/about/styles.module.less +++ b/src/pages/about/styles.module.less @@ -30,7 +30,7 @@ width: 600px; color: #04192b; margin-top: 0; - + @media (max-width: 810px) { font-size: 3rem; max-width: 320px; @@ -41,24 +41,35 @@ font-size: 1.25rem; color: #47506d; margin-bottom: 0; - + @media (max-width: 810px) { font-size: var(--fontSize-0); } - + a { color: #47506d; font-size: 1.25rem; text-decoration-line: underline; } + + span { + font-weight: 700; + } } } -.sectionTwoHeaderSmall { +.preTitle { color: #5072eb; margin-bottom: 0px; font-size: var(--fontSize-0); - text-transform: uppercase; + margin-left: auto; + margin-right: auto; + + @media (max-width: 1512px) { + max-width: 100%; + padding-left: ~'calc(min(9%, 146px))'; + padding-right: ~'calc(min(9%, 146px))'; + } } .sectionTwoGif { @@ -91,10 +102,6 @@ } } -.textBold { - font-weight: 700; -} - .sectionTwo { .sectionTopBottomPadding; @@ -154,16 +161,6 @@ } } -.careersText { - font-size: var(--fontSize-1); - color: #b7c6dd; - margin-left: 24px; - - @media (max-width: 810px) { - font-size: var(--fontSize-0); - } -} - .textBoldRegular { font-weight: bold; } @@ -177,6 +174,16 @@ @media (max-width: 810px) { padding: 0 16px; } + + p { + font-size: var(--fontSize-1); + color: #b7c6dd; + margin-left: 24px; + + @media (max-width: 810px) { + font-size: var(--fontSize-0); + } + } } .sectionThree { @@ -191,7 +198,7 @@ .globalMaxWidth; } -.sectionHeaderTop { +.sectionTitle { color: #04192b; margin-top: 12px; @@ -321,6 +328,17 @@ display: flex; width: 100%; margin-bottom: 8px; + + p { + font-size: 1.5rem; + color: var(--background-color-primary); + font-weight: 600; + color: #47506d; + + @media (max-width: 810px) { + font-size: var(--fontSize-1); + } + } } .sectionCurrentOpeningsWrapper { @@ -334,30 +352,19 @@ .currentOpeningsLocationWrapper { display: flex; -} -.link { - margin: auto 12px; -} - -.openingTitle { - font-size: 1.5rem; - color: var(--background-color-primary); - font-weight: 600; - color: #47506d; + p { + margin: 0px; + color: #47506d; - @media (max-width: 810px) { - font-size: var(--fontSize-1); + @media (max-width: 810px) { + font-size: var(--fontSize-0); + } } } -.openingText { - margin: 0px; - color: #47506d; - - @media (max-width: 810px) { - font-size: var(--fontSize-0); - } +.link { + margin: auto 12px; } .currentOpeningsDivider { @@ -403,22 +410,23 @@ @media (max-width: 811px) { max-width: 100%; } -} -.imageHeading { - font-style: normal; - font-weight: 700; - font-size: 18px; - line-height: 24px; - text-align: center; - letter-spacing: 2px; - text-transform: uppercase; - color: #47506d; - margin-bottom: 24px; + span { + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 24px; + text-align: center; + letter-spacing: 2px; + text-transform: uppercase; + color: #47506d; + margin-bottom: 24px; + display: block; - @media (max-width: 811px) { - font-size: 11.622px; - line-height: 15px; + @media (max-width: 811px) { + font-size: 11.622px; + line-height: 15px; + } } } @@ -461,17 +469,6 @@ padding: 32px 0; } - .sectionTwoHeaderSmall { - margin-left: auto; - margin-right: auto; - - @media (max-width: 1512px) { - max-width: 100%; - padding-left: ~'calc(min(9%, 146px))'; - padding-right: ~'calc(min(9%, 146px))'; - } - } - h2 { margin-left: auto; margin-right: auto; @@ -628,34 +625,39 @@ .meetTheTeam { .sectionTopBottomPadding; + span { + display: block; + } + + span, p, h2 { .globalMaxWidth; text-align: center; } -} -.teamWrap { - .globalMaxWidth; + ul { + .globalMaxWidth; - margin: 35px auto 0; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 24px; - grid-row-gap: 48px; + margin: 35px auto 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 24px; + grid-row-gap: 48px; - @media (max-width: 1512px) { - max-width: 100%; - } + @media (max-width: 1512px) { + max-width: 100%; + } - @media (max-width: 1024px) { - grid-template-columns: repeat(2, 1fr); - grid-row-gap: 40px; - } + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 40px; + } - @media (max-width: 480px) { - grid-template-columns: repeat(1, 1fr); + @media (max-width: 480px) { + grid-template-columns: repeat(1, 1fr); + } } } diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx index 08857967..3d758484 100644 --- a/src/templates/blog-post/index.tsx +++ b/src/templates/blog-post/index.tsx @@ -388,7 +388,7 @@ const BlogPostTemplate = ({ data: { post } }) => { Build a Pipeline diff --git a/src/templates/connection.tsx b/src/templates/connection.tsx index cc5becb5..c0d6e780 100644 --- a/src/templates/connection.tsx +++ b/src/templates/connection.tsx @@ -1,20 +1,18 @@ import { graphql } from 'gatsby'; import React from 'react'; -import { - SectionEight, - SectionFive, - SectionFour, - SectionNine, - SectionOne, - SectionSeven, - SectionSix, - SectionTen, - SectionThree, - SectionTwo, -} from '../components/Integration'; import Layout from '../components/Layout'; import Seo from '../components/seo'; import { normalizeConnector } from '../utils'; +import Hero from '../components/Integration/Hero'; +import FromConnector from '../components/Integration/FromConnector'; +import ToConnector from '../components/Integration/ToConnector'; +import Testimonials from '../components/Integration/Testimonials'; +import EstuaryFlowVideo from '../components/Integration/EstuaryFlowVideo'; +import RealTimeAndBatch from '../components/Integration/RealTimeAndBatch'; +import DataopsMadeSimple from '../components/Integration/DataopsMadeSimple'; +import IncreaseProductivity4x from '../components/Integration/IncreaseProductivity4x'; +import Spend25xLess from '../components/Integration/Spend25xLess'; +import SeeHow from '../components/Integration/SeeHow'; export interface ConnectorProps { data: { @@ -42,7 +40,7 @@ const Connector = ({ return ( - - - - - - - - - - + + + + + + + ); }; diff --git a/src/templates/connector/Pipelines/index.tsx b/src/templates/connector/Pipelines/index.tsx index 47acd23b..04f37455 100644 --- a/src/templates/connector/Pipelines/index.tsx +++ b/src/templates/connector/Pipelines/index.tsx @@ -17,10 +17,7 @@ const Pipelines = () => { Feature Comparison - diff --git a/src/templates/connector/RealTime/style.ts b/src/templates/connector/RealTime/style.ts index 88afe06e..4620be95 100644 --- a/src/templates/connector/RealTime/style.ts +++ b/src/templates/connector/RealTime/style.ts @@ -80,6 +80,6 @@ export const Button = styled(OutboundLinkFilled)` width: 100%; @media (min-width: 1280px) { - width: 189px; + width: 220px; } `; diff --git a/src/templates/connector/TakeATour/TakeATourButtons/index.tsx b/src/templates/connector/TakeATour/TakeATourButtons/index.tsx index acf8995a..2c239358 100644 --- a/src/templates/connector/TakeATour/TakeATourButtons/index.tsx +++ b/src/templates/connector/TakeATour/TakeATourButtons/index.tsx @@ -10,7 +10,7 @@ const TakeATourButtons = () => { Self-Guided Tour [1 min]