From e0240d38dbfc1f679252240b53bb6aa45da0f0be Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 14:20:12 -0300 Subject: [PATCH 01/21] Add container component to the homepage --- src/components/Advantages/index.tsx | 6 +- src/components/Advantages/styles.ts | 10 +-- src/components/Container/index.tsx | 17 +++- src/components/Container/styles.module.less | 6 ++ .../Homepage/AutomateDataops/index.tsx | 10 +-- .../Homepage/AutomateDataops/styles.ts | 29 +------ .../Homepage/BuildInMinutes/index.tsx | 25 +++--- .../Homepage/BuildInMinutes/styles.ts | 43 ---------- src/components/Homepage/CaseStudies/index.tsx | 7 +- src/components/Homepage/CaseStudies/styles.ts | 10 +-- .../Homepage/DeploymentModes/index.tsx | 5 +- .../DeploymentModes/styles.module.less | 13 --- .../Homepage/Do4xMoreWith25xLess/index.tsx | 20 ++--- .../Homepage/Do4xMoreWith25xLess/styles.ts | 82 ++++++------------- .../Homepage/InnovateFaster/index.tsx | 21 +++-- .../Homepage/InnovateFaster/styles.ts | 74 ++++++----------- src/components/Homepage/SeeHow/index.tsx | 33 ++++---- src/components/Homepage/SeeHow/styles.ts | 26 +----- .../Homepage/TheBestRealTimeCdc/index.tsx | 12 +-- .../Homepage/TheBestRealTimeCdc/styles.ts | 26 +----- .../Homepage/WhatPeopleAreSaying/index.tsx | 9 +- .../Homepage/WhatPeopleAreSaying/styles.ts | 22 ++--- src/components/Homepage/styles.ts | 40 +++++++++ 23 files changed, 207 insertions(+), 339 deletions(-) delete mode 100644 src/components/Homepage/BuildInMinutes/styles.ts create mode 100644 src/components/Homepage/styles.ts 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/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/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/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; + } + } +`; From 9277b95f202450a34651d269453749b85f250f09 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 14:50:16 -0300 Subject: [PATCH 02/21] Add container component to the pricing page sections --- .../PricingPage/ChooseYourPlan/index.tsx | 9 +-- .../ChooseYourPlan/styles.module.less | 39 +++++------ src/components/PricingPage/Faq/index.tsx | 7 +- .../PricingPage/Faq/styles.module.less | 7 -- src/components/PricingPage/Hero/index.tsx | 39 ++++------- .../PricingPage/Hero/styles.module.less | 64 ++++++++---------- .../PricingCalculatorSection/index.tsx | 12 ++-- .../styles.module.less | 65 ++++++++----------- 8 files changed, 96 insertions(+), 146 deletions(-) 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..6e961b7d 100644 --- a/src/components/PricingPage/Hero/index.tsx +++ b/src/components/PricingPage/Hero/index.tsx @@ -1,29 +1,20 @@ 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 { contentContainer, buttonsContainer } from './styles.module.less'; const Hero = () => { return (
-
+
-

SIMPLY PRICED, PAY AS YOU GO

-

+

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{' '} @@ -45,16 +36,14 @@ const Hero = () => {

-
- -
- + +
); }; diff --git a/src/components/PricingPage/Hero/styles.module.less b/src/components/PricingPage/Hero/styles.module.less index 94989069..a3943d81 100644 --- a/src/components/PricingPage/Hero/styles.module.less +++ b/src/components/PricingPage/Hero/styles.module.less @@ -1,49 +1,39 @@ -.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; + h1 { + color: #fff; + max-width: 500px; + font-weight: 600; - @media (max-width: 768px) { - font-size: 2.5rem; - line-height: 48px; - } + @media (max-width: 768px) { + font-size: 2.5rem; + line-height: 48px; + } - @media (max-width: 425px) { - font-size: 2.25rem; - line-height: 43.2px; + @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; + p { + 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; + &>span { + color: #625eff; + font-weight: 700; + } } } @@ -52,7 +42,7 @@ gap: 16px; max-width: 480px; - & > a { + &>a { white-space: nowrap; width: 100%; } @@ -64,4 +54,4 @@ @media (max-width: 360px) { flex-direction: column; } -} +} \ 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; + } } } From b2125c6c753e37fa95aa960ead6c2fb12ea14a88 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 15:22:05 -0300 Subject: [PATCH 03/21] Add container component to the product page sections --- .../CreateADataPipelineInMinutes/index.tsx | 12 +-- .../CreateADataPipelineInMinutes/styles.ts | 9 -- .../ProductPage/DontMissAThing/index.tsx | 6 +- .../ProductPage/DontMissAThing/styles.ts | 13 --- .../HowEstuaryFlowCompares/index.tsx | 5 +- .../HowEstuaryFlowCompares/styles.ts | 9 -- .../ProductPage/HowItWorks/index.tsx | 4 +- .../ProductPage/HowItWorks/styles.ts | 8 -- .../ProductPage/KeyFeatures/index.tsx | 4 +- .../ProductPage/KeyFeatures/styles.ts | 9 -- .../ProductPage/ReadyToStart/index.tsx | 4 +- .../ProductPage/ReadyToStart/styles.ts | 9 -- .../ProductPage/Streaming/index.tsx | 4 +- .../ProductPage/Streaming/styles.ts | 9 -- .../ProductPage/TheSameData/index.tsx | 14 ++- .../ProductPage/TheSameData/styles.ts | 88 ++++++++----------- 16 files changed, 60 insertions(+), 147 deletions(-) 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/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 ( <DefaultWrapperDark> - <Container> + <Container isVertical> <Title> 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; From 133f9eaf647062b7baac2ccd3859a4eb82f4ceae Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 15:33:31 -0300 Subject: [PATCH 04/21] Add container component to the comparison template page sections and rename the section components --- .../Connectors/index.tsx | 0 .../CoreFeatures/index.tsx | 0 .../{SectionTwo => Comparison}/Cost/index.tsx | 0 .../DeploymentOptions/index.tsx | 0 .../FeatureData/CheckOrCrossIcon.tsx | 0 .../FeatureData/DollarSigns.tsx | 0 .../FeatureData/index.tsx | 0 .../FeatureData/styles.module.less | 0 .../IntroductoryDetails/index.tsx | 0 .../IntroductoryDetails/styles.module.less | 0 .../{SectionTwo => Comparison}/Security/index.tsx | 0 .../{SectionTwo => Comparison}/Support/index.tsx | 0 .../TableRows/index.tsx | 0 .../TheAbilities/index.tsx | 0 .../{SectionTwo => Comparison}/UseCases/index.tsx | 0 .../VendorAvatar/index.tsx | 0 .../VendorAvatar/styles.module.less | 0 .../{SectionTwo => Comparison}/index.tsx | 4 ++-- .../{SectionTwo => Comparison}/shared.ts | 0 .../{SectionTwo => Comparison}/styles.module.less | 0 .../FeatureCard/index.tsx | 0 .../FeatureCard/styles.module.less | 0 .../{SectionThree => GettingStarted}/index.tsx | 9 +++++---- .../styles.module.less | 10 ++++------ .../{SectionOne => Hero}/index.tsx | 4 ++-- .../{SectionOne => Hero}/styles.module.less | 0 src/components/EtlToolsXvsYPage/index.tsx | 5 ----- src/templates/etl-tools/index.tsx | 15 ++++++--------- 28 files changed, 19 insertions(+), 28 deletions(-) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/Connectors/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/CoreFeatures/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/Cost/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/DeploymentOptions/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/FeatureData/CheckOrCrossIcon.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/FeatureData/DollarSigns.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/FeatureData/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/FeatureData/styles.module.less (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/IntroductoryDetails/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/IntroductoryDetails/styles.module.less (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/Security/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/Support/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/TableRows/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/TheAbilities/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/UseCases/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/VendorAvatar/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/VendorAvatar/styles.module.less (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/index.tsx (99%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/shared.ts (100%) rename src/components/EtlToolsXvsYPage/{SectionTwo => Comparison}/styles.module.less (100%) rename src/components/EtlToolsXvsYPage/{SectionThree => GettingStarted}/FeatureCard/index.tsx (100%) rename src/components/EtlToolsXvsYPage/{SectionThree => GettingStarted}/FeatureCard/styles.module.less (100%) rename src/components/EtlToolsXvsYPage/{SectionThree => GettingStarted}/index.tsx (95%) rename src/components/EtlToolsXvsYPage/{SectionThree => GettingStarted}/styles.module.less (86%) rename src/components/EtlToolsXvsYPage/{SectionOne => Hero}/index.tsx (96%) rename src/components/EtlToolsXvsYPage/{SectionOne => Hero}/styles.module.less (100%) delete mode 100644 src/components/EtlToolsXvsYPage/index.tsx 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 96% rename from src/components/EtlToolsXvsYPage/SectionOne/index.tsx rename to src/components/EtlToolsXvsYPage/Hero/index.tsx index 0d685ab7..32d9d122 100644 --- a/src/components/EtlToolsXvsYPage/SectionOne/index.tsx +++ b/src/components/EtlToolsXvsYPage/Hero/index.tsx @@ -21,7 +21,7 @@ interface SectionOneProps { yVendor: Vendor; } -const SectionOne = ({ vendors, xVendor, yVendor }: SectionOneProps) => { +const Hero = ({ vendors, xVendor, yVendor }: SectionOneProps) => { return (
@@ -80,4 +80,4 @@ const SectionOne = ({ vendors, xVendor, yVendor }: SectionOneProps) => { ); }; -export default SectionOne; +export default Hero; diff --git a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less b/src/components/EtlToolsXvsYPage/Hero/styles.module.less similarity index 100% rename from src/components/EtlToolsXvsYPage/SectionOne/styles.module.less rename to src/components/EtlToolsXvsYPage/Hero/styles.module.less 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/templates/etl-tools/index.tsx b/src/templates/etl-tools/index.tsx index 2872909f..edcd78d1 100644 --- a/src/templates/etl-tools/index.tsx +++ b/src/templates/etl-tools/index.tsx @@ -3,11 +3,9 @@ import { graphql } from 'gatsby'; import Layout from '../../components/Layout'; import Seo from '../../components/seo'; import { Vendor } from '../../../shared'; -import { - SectionOne, - SectionThree, - SectionTwo, -} from '../../components/EtlToolsXvsYPage'; +import Hero from '../../components/EtlToolsXvsYPage/Hero'; +import Comparison from '../../components/EtlToolsXvsYPage/Comparison'; +import GettingStarted from '../../components/EtlToolsXvsYPage/GettingStarted'; interface EtlToolsProps { data: { @@ -28,16 +26,15 @@ const EtlTools = ({ vendors: { nodes: vendors }, }, }: EtlToolsProps) => { - console.log(xVendor); return ( - - + - + ); }; From 9132fda8854e1d538b1dbba7aa57b1881816e997 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 15:39:11 -0300 Subject: [PATCH 05/21] Rename the section components of the etl-tools page --- .../EtlToolsPage/{SectionOne => Hero}/index.tsx | 4 ++-- .../{SectionOne => Hero}/styles.module.less | 0 .../Card/index.tsx | 0 .../Card/styles.module.less | 0 .../{SectionTwo => LearnMoreArticles}/index.tsx | 4 ++-- .../styles.module.less | 0 .../XvsYCard/index.tsx | 0 .../XvsYCard/styles.module.less | 0 .../index.tsx | 4 ++-- .../styles.module.less | 0 src/components/EtlToolsPage/index.tsx | 5 ----- src/pages/etl-tools/index.tsx | 17 +++++++++-------- 12 files changed, 15 insertions(+), 19 deletions(-) rename src/components/EtlToolsPage/{SectionOne => Hero}/index.tsx (95%) rename src/components/EtlToolsPage/{SectionOne => Hero}/styles.module.less (100%) rename src/components/EtlToolsPage/{SectionTwo => LearnMoreArticles}/Card/index.tsx (100%) rename src/components/EtlToolsPage/{SectionTwo => LearnMoreArticles}/Card/styles.module.less (100%) rename src/components/EtlToolsPage/{SectionTwo => LearnMoreArticles}/index.tsx (94%) rename src/components/EtlToolsPage/{SectionTwo => LearnMoreArticles}/styles.module.less (100%) rename src/components/EtlToolsPage/{SectionThree => ListOfComparisons}/XvsYCard/index.tsx (100%) rename src/components/EtlToolsPage/{SectionThree => ListOfComparisons}/XvsYCard/styles.module.less (100%) rename src/components/EtlToolsPage/{SectionThree => ListOfComparisons}/index.tsx (97%) rename src/components/EtlToolsPage/{SectionThree => ListOfComparisons}/styles.module.less (100%) delete mode 100644 src/components/EtlToolsPage/index.tsx diff --git a/src/components/EtlToolsPage/SectionOne/index.tsx b/src/components/EtlToolsPage/Hero/index.tsx similarity index 95% rename from src/components/EtlToolsPage/SectionOne/index.tsx rename to src/components/EtlToolsPage/Hero/index.tsx index ecfdf071..b05bed6c 100644 --- a/src/components/EtlToolsPage/SectionOne/index.tsx +++ b/src/components/EtlToolsPage/Hero/index.tsx @@ -9,7 +9,7 @@ interface SectionOneProps { vendors: Vendor[]; } -const SectionOne = ({ vendors }: SectionOneProps) => { +const Hero = ({ vendors }: SectionOneProps) => { return (
@@ -42,4 +42,4 @@ const SectionOne = ({ vendors }: SectionOneProps) => { ); }; -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 100% rename from src/components/EtlToolsPage/SectionOne/styles.module.less rename to src/components/EtlToolsPage/Hero/styles.module.less 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 94% rename from src/components/EtlToolsPage/SectionTwo/index.tsx rename to src/components/EtlToolsPage/LearnMoreArticles/index.tsx index 0160adf3..dd0b3523 100644 --- a/src/components/EtlToolsPage/SectionTwo/index.tsx +++ b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx @@ -4,7 +4,7 @@ import { sectionTitle } from '../styles.module.less'; import { container, cardsWrapper } from './styles.module.less'; import Card from './Card'; -const SectionTwo = () => { +const LearnMoreArticles = () => { return (
@@ -30,4 +30,4 @@ const SectionTwo = () => { ); }; -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 100% rename from src/components/EtlToolsPage/SectionTwo/styles.module.less rename to src/components/EtlToolsPage/LearnMoreArticles/styles.module.less 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 97% rename from src/components/EtlToolsPage/SectionThree/index.tsx rename to src/components/EtlToolsPage/ListOfComparisons/index.tsx index 05e2e06b..46af2811 100644 --- a/src/components/EtlToolsPage/SectionThree/index.tsx +++ b/src/components/EtlToolsPage/ListOfComparisons/index.tsx @@ -50,7 +50,7 @@ interface SectionThreeProps { vendors: Vendor[]; } -const SectionThree = ({ estuaryVendor, vendors }: SectionThreeProps) => { +const ListOfComparisons = ({ estuaryVendor, vendors }: SectionThreeProps) => { const [selectedVendorId, setSelectedVendorId] = useState(estuaryVendor.id); const handleChangeSelectedVendor = ( @@ -142,4 +142,4 @@ 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 100% rename from src/components/EtlToolsPage/SectionThree/styles.module.less rename to src/components/EtlToolsPage/ListOfComparisons/styles.module.less 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/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 ( - - - + + + ); }; From 637e44d0804d3484d736f762ed5d5634feb2ff68 Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 16:57:17 -0300 Subject: [PATCH 06/21] Add container component to the etl-tools page sections --- src/components/EtlToolsPage/Hero/index.tsx | 5 +++-- .../EtlToolsPage/Hero/styles.module.less | 10 ---------- .../EtlToolsPage/LearnMoreArticles/index.tsx | 7 ++++--- .../LearnMoreArticles/styles.module.less | 9 --------- .../EtlToolsPage/ListOfComparisons/index.tsx | 18 +++++++++++------- .../ListOfComparisons/styles.module.less | 13 +------------ src/components/EtlToolsPage/styles.module.less | 4 ++++ 7 files changed, 23 insertions(+), 43 deletions(-) diff --git a/src/components/EtlToolsPage/Hero/index.tsx b/src/components/EtlToolsPage/Hero/index.tsx index b05bed6c..19ebf06a 100644 --- a/src/components/EtlToolsPage/Hero/index.tsx +++ b/src/components/EtlToolsPage/Hero/index.tsx @@ -3,6 +3,7 @@ import { StaticImage, GatsbyImage } from 'gatsby-plugin-image'; import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less'; import VendorsLink from '../../VendorsLink'; import { Vendor } from '../../../../shared'; +import Container from '../../Container'; import { container, leftColumn, rightColumn } from './styles.module.less'; interface SectionOneProps { @@ -12,7 +13,7 @@ interface SectionOneProps { const Hero = ({ vendors }: SectionOneProps) => { return (
-
+

ETL, ELT and CDC Tools Comparison Center

@@ -37,7 +38,7 @@ const Hero = ({ vendors }: SectionOneProps) => { /> ))}
-
+
); }; diff --git a/src/components/EtlToolsPage/Hero/styles.module.less b/src/components/EtlToolsPage/Hero/styles.module.less index 3e45cc67..e6c13656 100644 --- a/src/components/EtlToolsPage/Hero/styles.module.less +++ b/src/components/EtlToolsPage/Hero/styles.module.less @@ -1,22 +1,12 @@ @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; diff --git a/src/components/EtlToolsPage/LearnMoreArticles/index.tsx b/src/components/EtlToolsPage/LearnMoreArticles/index.tsx index dd0b3523..3b68f81d 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/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 LearnMoreArticles = () => { return (
-
+

Learn more about ETL, ELT, and CDC alternatives

@@ -25,7 +26,7 @@ const LearnMoreArticles = () => { buttonHref="/CDC-comparison-guide" />
-
+
); }; diff --git a/src/components/EtlToolsPage/LearnMoreArticles/styles.module.less b/src/components/EtlToolsPage/LearnMoreArticles/styles.module.less index 15148e9a..ffa93735 100644 --- a/src/components/EtlToolsPage/LearnMoreArticles/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/ListOfComparisons/index.tsx b/src/components/EtlToolsPage/ListOfComparisons/index.tsx index 46af2811..110eb51d 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/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'; @@ -66,11 +67,13 @@ const ListOfComparisons = ({ 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,7 +141,7 @@ const ListOfComparisons = ({ estuaryVendor, vendors }: SectionThreeProps) => { ))} -
+
); }; diff --git a/src/components/EtlToolsPage/ListOfComparisons/styles.module.less b/src/components/EtlToolsPage/ListOfComparisons/styles.module.less index 738ffc71..6a2f191b 100644 --- a/src/components/EtlToolsPage/ListOfComparisons/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/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; From d3c003e2cbcd625a5935054d1a634e4fd486396e Mon Sep 17 00:00:00 2001 From: Breno Date: Mon, 28 Oct 2024 17:03:40 -0300 Subject: [PATCH 07/21] Add some tweaks to the deployment options page --- .../ComparisonTable/styles.module.less | 2 -- .../DeploymentOptionsPage/PrivateDeployment/index.tsx | 5 ++--- src/components/DeploymentOptionsPage/styles.module.less | 9 --------- 3 files changed, 2 insertions(+), 14 deletions(-) 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/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 (
- + Date: Mon, 28 Oct 2024 17:45:25 -0300 Subject: [PATCH 08/21] Add container component to the sections of the connector template page --- src/globalStyles.ts | 2 -- src/templates/connector/ChangeData/index.tsx | 2 +- src/templates/connector/ChangeData/style.ts | 18 ---------- .../Hero/{components => }/Content/index.tsx | 2 +- .../Hero/{components => }/Content/styles.ts | 2 +- src/templates/connector/Hero/index.tsx | 4 +-- src/templates/connector/Hero/styles.ts | 14 -------- src/templates/connector/Pipelines/index.tsx | 32 +++++++++--------- src/templates/connector/Pipelines/style.ts | 33 ++++++------------- src/templates/connector/TakeATour/index.tsx | 4 +-- src/templates/connector/TakeATour/styles.ts | 23 +++---------- 11 files changed, 38 insertions(+), 98 deletions(-) rename src/templates/connector/Hero/{components => }/Content/index.tsx (99%) rename src/templates/connector/Hero/{components => }/Content/styles.ts (97%) 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/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 99% rename from src/templates/connector/Hero/components/Content/index.tsx rename to src/templates/connector/Hero/Content/index.tsx index 218fd868..7c777f2b 100644 --- a/src/templates/connector/Hero/components/Content/index.tsx +++ b/src/templates/connector/Hero/Content/index.tsx @@ -2,7 +2,7 @@ import { StaticImage } from 'gatsby-plugin-image'; import React from 'react'; import DoneIcon from '@mui/icons-material/Done'; -import { ConnectorType, dashboardRegisterUrl } from '../../../../../../shared'; +import { ConnectorType, dashboardRegisterUrl } from '../../../../../shared'; import { Button, Container, diff --git a/src/templates/connector/Hero/components/Content/styles.ts b/src/templates/connector/Hero/Content/styles.ts similarity index 97% rename from src/templates/connector/Hero/components/Content/styles.ts rename to src/templates/connector/Hero/Content/styles.ts index 4d64ed41..9168909e 100644 --- a/src/templates/connector/Hero/components/Content/styles.ts +++ b/src/templates/connector/Hero/Content/styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { OutboundLinkFilled } from '../../../../../components/OutboundLink'; +import { OutboundLinkFilled } from '../../../../components/OutboundLink'; export const Container = styled.div` display: flex; 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 ? ( Date: Mon, 28 Oct 2024 19:25:33 -0300 Subject: [PATCH 09/21] Add container component to the sections of the blog post template page --- src/templates/blog-post/index.tsx | 5 +- src/templates/blog-post/styles.module.less | 57 ++++++++-------------- 2 files changed, 22 insertions(+), 40 deletions(-) diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx index ae9c6ad8..e3370d8f 100644 --- a/src/templates/blog-post/index.tsx +++ b/src/templates/blog-post/index.tsx @@ -29,6 +29,7 @@ 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 ShareArticle from './ShareArticle'; import { blogPost, @@ -106,7 +107,7 @@ const BlogPostTemplate = ({ data: { post } }) => { itemType="http://schema.org/Article" > -
+
@@ -170,7 +171,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..6f6cbf2d 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -134,20 +134,22 @@ } .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; } + > :nth-child(1) { + max-width: 100%; + } + + > :nth-child(2) { + max-width: 496px; + } +} + +.headerInfo { h1 { margin-top: 36px; margin-bottom: 36px; @@ -162,24 +164,6 @@ } } - 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; - } - } -} - -.headerInfo { - max-width: 1024px; - p { font-size: 1.25rem; } @@ -250,16 +234,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 +248,7 @@ .shareArticleMobile { display: none; - @media (max-width: 1150px) { + @media (max-width: 1024px) { display: flex; margin-right: auto; } @@ -285,7 +266,7 @@ justify-content: space-between; gap: 48px; - @media (max-width: 1150px) { + @media (max-width: 1024px) { flex-direction: column-reverse; gap: 14px; } @@ -328,7 +309,7 @@ width: calc(100% - 256px - 48px); padding-left: 48px; - @media (max-width: 1150px) { + @media (max-width: 1024px) { width: 100%; } @@ -356,7 +337,7 @@ padding: 48px 30px; } - @media (max-width: 1150px) { + @media (max-width: 1024px) { padding: 32px; } @@ -415,7 +396,7 @@ line-height: 3rem; } - @media (max-width: 1150px) { + @media (max-width: 1024px) { font-size: 2rem; } @@ -446,7 +427,7 @@ font-weight: 500; line-height: 30px; - @media (max-width: 1150px) { + @media (max-width: 1024px) { font-size: 1rem; } } From 299c6f2b041840c0bc241159499df001cc2a4b6f Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 10:54:06 -0300 Subject: [PATCH 10/21] Create HeroSectionDetails component and use it on the homepage hero section --- src/components/HeroSectionDetails/index.tsx | 48 ++++++++++ .../HeroSectionDetails/styles.module.less | 76 ++++++++++++++++ src/components/Homepage/Hero/index.tsx | 50 +++-------- src/components/Homepage/Hero/styles.ts | 87 +------------------ 4 files changed, 139 insertions(+), 122 deletions(-) create mode 100644 src/components/HeroSectionDetails/index.tsx create mode 100644 src/components/HeroSectionDetails/styles.module.less diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx new file mode 100644 index 00000000..38cdb77b --- /dev/null +++ b/src/components/HeroSectionDetails/index.tsx @@ -0,0 +1,48 @@ +import React, { ReactNode } from 'react'; +import { OutboundLinkFilled } from '../OutboundLink'; +import { LinkOutlined } from '../../globalStyles'; +import { dashboardRegisterUrl } from '../../../shared'; +import SubscriptionBenefits from '../SubscriptionBenefits'; +import { container, buttonsWrapper } from './styles.module.less'; + +interface HeroSectionDetailsProps { + title: ReactNode; + description: ReactNode; + hasCtaButtons?: boolean; + hasSubscriptionBenefits?: boolean; +} + +const HeroSectionDetails = ({ + title, + description, + hasCtaButtons = false, + hasSubscriptionBenefits = false, +}: HeroSectionDetailsProps) => { + return ( +
+

{title}

+

{description}

+ {hasCtaButtons ? ( +
+ + Build a Pipeline + + + Contact Us + +
+ ) : null} + {hasSubscriptionBenefits ? : 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..8ef8e96b --- /dev/null +++ b/src/components/HeroSectionDetails/styles.module.less @@ -0,0 +1,76 @@ +@import '../../globalStyles/sections.module.less'; + +.container { + display: flex; + flex-direction: column; + gap: 24px; + + 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: 2rem; + } + + span:nth-of-type(2n+1) { + color: #fff; + } + } + + p { + margin-top: 24px; + font-size: 1.25rem; + color: #fff; + margin: 0 0 16px 0; + + @media (max-width: 768px) { + font-size: 1rem; + } + + @media (max-width: 425px) { + font-size: 0.875rem; + } + } +} + +.buttonsWrapper { + display: flex; + gap: 24px; + + @media (max-width: 425px) { + 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%; + } + } + + a:first-of-type { + padding: 16px 24px !important; + } + + a:last-of-type { + background-color: transparent; + color: #ffffff; + } +} \ No newline at end of file diff --git a/src/components/Homepage/Hero/index.tsx b/src/components/Homepage/Hero/index.tsx index 59f9db7d..09110be2 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,20 @@ 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..dbe83a63 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%; @@ -66,86 +61,6 @@ export const MainContent = styled.div` } `; -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%; - } - } -`; - -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; From f1a3942bbae342b6da9b89421707b6e3919bac22 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 11:37:30 -0300 Subject: [PATCH 11/21] Use the HeroSectionDetails component on the hero section of the pricing page --- .../HeroSectionDetails/styles.module.less | 19 ++++--- src/components/PricingPage/Hero/index.tsx | 45 ++++++--------- .../PricingPage/Hero/styles.module.less | 57 ------------------- 3 files changed, 26 insertions(+), 95 deletions(-) delete mode 100644 src/components/PricingPage/Hero/styles.module.less diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less index 8ef8e96b..b7593496 100644 --- a/src/components/HeroSectionDetails/styles.module.less +++ b/src/components/HeroSectionDetails/styles.module.less @@ -6,7 +6,7 @@ gap: 24px; h1 { - color: #5072eb; + color: #fff; margin: 0; font-weight: 600; font-size: 4.5rem; @@ -19,8 +19,8 @@ font-size: 2rem; } - span:nth-of-type(2n+1) { - color: #fff; + span:nth-of-type(2n) { + color: #5072eb; } } @@ -37,6 +37,10 @@ @media (max-width: 425px) { font-size: 0.875rem; } + + span:nth-of-type(2n) { + color: #625eff; + } } } @@ -48,19 +52,16 @@ 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) { + + @media (max-width: 425px) { width: 100%; } } @@ -73,4 +74,4 @@ background-color: transparent; color: #ffffff; } -} \ No newline at end of file +} diff --git a/src/components/PricingPage/Hero/index.tsx b/src/components/PricingPage/Hero/index.tsx index 6e961b7d..f4637c32 100644 --- a/src/components/PricingPage/Hero/index.tsx +++ b/src/components/PricingPage/Hero/index.tsx @@ -1,41 +1,28 @@ import React from 'react'; import { StaticImage } from 'gatsby-plugin-image'; import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less'; - -import { OutboundLinkFilled } from '../../OutboundLink'; -import { LinkOutlined } from '../../../globalStyles'; -import { dashboardRegisterUrl } from '../../../../shared'; import Container from '../../Container'; -import { contentContainer, buttonsContainer } from './styles.module.less'; +import HeroSectionDetails from '../../HeroSectionDetails'; 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 + /> 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; - } -} \ No newline at end of file From 4a3beac898fc2dab37af5de8b6e77f6caf3f15f7 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 13:21:15 -0300 Subject: [PATCH 12/21] Use the HeroSectionDetails component on the hero section of the product page --- src/components/ProductPage/Hero/index.tsx | 129 ++++++++-------------- src/components/ProductPage/Hero/styles.ts | 109 +----------------- src/globalStyles/sections.module.less | 12 -- 3 files changed, 51 insertions(+), 199 deletions(-) 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 ( -
- - 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/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 From 900f49542fa3f6ad9d69dfbeef4b92eea43ee4a0 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 13:46:06 -0300 Subject: [PATCH 13/21] Use the HeroSectionDetails component on the hero section of the deployment options page --- .../DeploymentOptionsPage/Hero/index.tsx | 33 +++------- .../Hero/styles.module.less | 61 ------------------- 2 files changed, 7 insertions(+), 87 deletions(-) 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 { From 9ce7de46b4fd65486f55999c2bc4613d73d74e24 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 14:36:11 -0300 Subject: [PATCH 14/21] Use the HeroSectionDetails component on the hero section of the comparison XvsY page --- src/components/Connectors/styles.module.less | 78 +++++++++++-------- .../EtlToolsXvsYPage/Hero/index.tsx | 61 ++++++++------- .../EtlToolsXvsYPage/Hero/styles.module.less | 44 ----------- src/components/HeroSectionDetails/index.tsx | 3 + src/components/SearchInput/styles.module.less | 2 +- src/components/XvsYFilter/styles.module.less | 19 +---- src/style.less | 15 +++- 7 files changed, 100 insertions(+), 122 deletions(-) diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less index 9ba56aa2..69aa4db5 100644 --- a/src/components/Connectors/styles.module.less +++ b/src/components/Connectors/styles.module.less @@ -80,17 +80,17 @@ display: flex; @media (max-width: 810px) { - background-size: 60%; + background-size: 60%; - & h2 { - font-size: 1.5rem; - font-weight: 500; - } + & h2 { + font-size: 1.5rem; + font-weight: 500; + } - & p { - font-size: var(--fontSize-0); - margin: 12px 40px; - } + & p { + font-size: var(--fontSize-0); + margin: 12px 40px; + } } } @@ -98,19 +98,19 @@ display: grid; @media (min-width: 1px) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 810px) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1180px) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1600px) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); } grid-column-gap: 24px; @@ -126,10 +126,20 @@ border-radius: 4px; padding: 1rem; display: flex; - flex-direction: row; - flex-wrap: wrap; gap: 1rem; justify-content: space-between; + + div:last-of-type { + max-width: 500px; + } + + @media (max-width: 960px) { + flex-direction: column; + + div:last-of-type { + max-width: 100%; + } + } } .connectorCardTop { @@ -170,30 +180,30 @@ transition: var(--default-transition); &:hover { - border: 1px solid #5072eb; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + border: 1px solid #5072eb; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } &>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/EtlToolsXvsYPage/Hero/index.tsx b/src/components/EtlToolsXvsYPage/Hero/index.tsx index 32d9d122..ebf3656a 100644 --- a/src/components/EtlToolsXvsYPage/Hero/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, @@ -24,29 +24,38 @@ interface 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.toUpperCase()}{' '} + VS{' '} + {yVendor.name.toUpperCase()} + + } + 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 + + + + } + />
{ />
-
+
); }; diff --git a/src/components/EtlToolsXvsYPage/Hero/styles.module.less b/src/components/EtlToolsXvsYPage/Hero/styles.module.less index cd51eddc..3529944d 100644 --- a/src/components/EtlToolsXvsYPage/Hero/styles.module.less +++ b/src/components/EtlToolsXvsYPage/Hero/styles.module.less @@ -1,48 +1,4 @@ -@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; } diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx index 38cdb77b..913582e2 100644 --- a/src/components/HeroSectionDetails/index.tsx +++ b/src/components/HeroSectionDetails/index.tsx @@ -8,6 +8,7 @@ import { container, buttonsWrapper } from './styles.module.less'; interface HeroSectionDetailsProps { title: ReactNode; description: ReactNode; + additionalElements?: ReactNode; hasCtaButtons?: boolean; hasSubscriptionBenefits?: boolean; } @@ -15,6 +16,7 @@ interface HeroSectionDetailsProps { const HeroSectionDetails = ({ title, description, + additionalElements, hasCtaButtons = false, hasSubscriptionBenefits = false, }: HeroSectionDetailsProps) => { @@ -41,6 +43,7 @@ const HeroSectionDetails = ({
) : null} {hasSubscriptionBenefits ? : null} + {additionalElements ? additionalElements : null}
); }; 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/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/style.less b/src/style.less index e71b6b6e..f16ea723 100644 --- a/src/style.less +++ b/src/style.less @@ -104,6 +104,19 @@ h1 { font-size: var(--fontSize-6); color: var(--color-heading-black); font-weight: var(--fontWeight-bold); + line-height: 72px; + + span { + line-height: 80px; + } + + @media (max-width: 768px) { + line-height: 43px; + + span { + line-height: 43px; + } + } } h2 { @@ -352,4 +365,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 From c654407412c225ccaaa43ee22e8b7a1744c5b2bb Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 15:14:07 -0300 Subject: [PATCH 15/21] Use the HeroSectionDetails component on the hero section of the etl-tools page --- src/components/EtlToolsPage/Hero/index.tsx | 15 ++++++---- .../EtlToolsPage/Hero/styles.module.less | 28 ++----------------- src/components/HeroSectionDetails/index.tsx | 4 +-- .../HeroSectionDetails/styles.module.less | 19 ------------- src/components/Homepage/Hero/index.tsx | 3 +- src/components/Homepage/Hero/styles.ts | 4 +++ src/style.less | 19 +++++++------ 7 files changed, 29 insertions(+), 63 deletions(-) diff --git a/src/components/EtlToolsPage/Hero/index.tsx b/src/components/EtlToolsPage/Hero/index.tsx index 19ebf06a..5370435a 100644 --- a/src/components/EtlToolsPage/Hero/index.tsx +++ b/src/components/EtlToolsPage/Hero/index.tsx @@ -4,7 +4,8 @@ import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.le import VendorsLink from '../../VendorsLink'; import { Vendor } from '../../../../shared'; import Container from '../../Container'; -import { container, leftColumn, rightColumn } from './styles.module.less'; +import HeroSectionDetails from '../../HeroSectionDetails'; +import { rightColumn } from './styles.module.less'; interface SectionOneProps { vendors: Vendor[]; @@ -13,11 +14,13 @@ interface SectionOneProps { const Hero = ({ vendors }: SectionOneProps) => { return (
- -
-

ETL, ELT and CDC Tools Comparison Center

- -
+ + + } + />

{title}

-

{description}

+ {description ?

{description}

: null} {hasCtaButtons ? (
{ title={ <> MEET{' '} - THE FASTEST, MOST RELIABLE{' '} + THE FASTEST + , MOST RELIABLE{' '} ETL } diff --git a/src/components/Homepage/Hero/styles.ts b/src/components/Homepage/Hero/styles.ts index dbe83a63..c06e37c6 100644 --- a/src/components/Homepage/Hero/styles.ts +++ b/src/components/Homepage/Hero/styles.ts @@ -59,6 +59,10 @@ export const MainContent = styled.div` ${globalMaxWidth} flex-direction: column-reverse; } + + h1 { + max-width: 760px; + } `; export const FlowAnimationContainer = styled.div` diff --git a/src/style.less b/src/style.less index f16ea723..d120f5f7 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; @@ -104,18 +104,19 @@ h1 { font-size: var(--fontSize-6); color: var(--color-heading-black); font-weight: var(--fontWeight-bold); - line-height: 72px; + color: #fff; + margin: 0; - span { - line-height: 80px; + @media (max-width: 768px) { + font-size: 2.25rem; } - @media (max-width: 768px) { - line-height: 43px; + @media (max-width: 425px) { + font-size: 2rem; + } - span { - line-height: 43px; - } + span:nth-of-type(2n) { + color: #5072eb; } } From 92ad6e8afff74f6f8547f3e8a70e397eee336d1b Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 15:55:34 -0300 Subject: [PATCH 16/21] Use the HeroSectionDetails component on the hero section of the connector template page --- src/components/HeroSectionDetails/index.tsx | 13 +-- .../HeroSectionDetails/styles.module.less | 14 +-- .../connector/Hero/Content/index.tsx | 60 +++++++------ .../connector/Hero/Content/styles.ts | 86 ++++++------------- 4 files changed, 66 insertions(+), 107 deletions(-) diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx index a8883743..ae7c5222 100644 --- a/src/components/HeroSectionDetails/index.tsx +++ b/src/components/HeroSectionDetails/index.tsx @@ -1,9 +1,13 @@ import React, { ReactNode } from 'react'; import { OutboundLinkFilled } from '../OutboundLink'; -import { LinkOutlined } from '../../globalStyles'; import { dashboardRegisterUrl } from '../../../shared'; import SubscriptionBenefits from '../SubscriptionBenefits'; -import { container, buttonsWrapper } from './styles.module.less'; +import { LinkOutlined } from '../../globalStyles'; +import { + container, + buttonsWrapper, + outlinedButton, +} from './styles.module.less'; interface HeroSectionDetailsProps { title: ReactNode; @@ -27,16 +31,15 @@ const HeroSectionDetails = ({ {hasCtaButtons ? (
Build a Pipeline Contact Us diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less index 78522534..b8920c92 100644 --- a/src/components/HeroSectionDetails/styles.module.less +++ b/src/components/HeroSectionDetails/styles.module.less @@ -38,21 +38,15 @@ @media (max-width: 768px) { width: 50%; - padding-left: 0; - padding-right: 0; } @media (max-width: 425px) { width: 100%; } } +} - a:first-of-type { - padding: 16px 24px !important; - } - - a:last-of-type { - background-color: transparent; - color: #ffffff; - } +.outlinedButton { + background-color: transparent; + color: #ffffff; } diff --git a/src/templates/connector/Hero/Content/index.tsx b/src/templates/connector/Hero/Content/index.tsx index 7c777f2b..e3bbb296 100644 --- a/src/templates/connector/Hero/Content/index.tsx +++ b/src/templates/connector/Hero/Content/index.tsx @@ -3,16 +3,8 @@ 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 HeroSectionDetails from '../../../../components/HeroSectionDetails'; +import { Button, Container, ContainerPreTitle, Topic, Topics } from './styles'; type ContentProps = { connector: { @@ -28,32 +20,38 @@ 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.toUpperCase()}{' '} + WITH YOUR + {' '} + FREE ACCOUNT + + ) : ( + <> + STREAM{' '} + + INTO {connector.title.toUpperCase()} 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/Content/styles.ts b/src/templates/connector/Hero/Content/styles.ts index 9168909e..1340c157 100644 --- a/src/templates/connector/Hero/Content/styles.ts +++ b/src/templates/connector/Hero/Content/styles.ts @@ -3,54 +3,41 @@ import styled from 'styled-components'; 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-bottom: 32px; 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; 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 +47,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; From 20a3e84f12a6d8f93b297ec7064b91d3beab6a7b Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 16:17:21 -0300 Subject: [PATCH 17/21] Use the HeroSectionDetails component on the hero section of the blog post template page --- src/templates/blog-post/index.tsx | 7 +++++-- src/templates/blog-post/styles.module.less | 10 +--------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx index e3370d8f..ae7eadff 100644 --- a/src/templates/blog-post/index.tsx +++ b/src/templates/blog-post/index.tsx @@ -30,6 +30,7 @@ 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, @@ -148,8 +149,10 @@ const BlogPostTemplate = ({ data: { post } }) => {
-

{post.title}

-

{post.description}

+
{post.hero ? ( diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less index 6f6cbf2d..062e1d33 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -152,20 +152,12 @@ .headerInfo { 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; - } } p { - font-size: 1.25rem; + color: #47506d; } } From 4ac6825bf20657b379799188ef652f137cad7c8c Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 18:09:14 -0300 Subject: [PATCH 18/21] Fix backgroundColor prop not being recognized --- .../DarkSwoopingLinesLeftDirectionBackground.tsx | 4 ++-- .../LightSwoopingLinesRightDirectionBackground.tsx | 4 ++-- .../BackgroundImages/StraightLinesBackground.tsx | 4 ++-- src/components/BackgroundImages/shared.ts | 6 ++---- src/components/Connectors/index.tsx | 2 +- src/components/Footer/styles.module.less | 2 +- src/style.less | 1 + src/templates/connector/Hero/Content/index.tsx | 7 ++----- 8 files changed, 13 insertions(+), 17 deletions(-) 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/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 = ({ > { <> MOVE{' '} - YOUR DATA FROM {connector.title.toUpperCase()}{' '} - WITH YOUR + YOUR DATA FROM {connector.title} WITH YOUR {' '} FREE ACCOUNT ) : ( <> STREAM{' '} - - INTO {connector.title.toUpperCase()} WITH YOUR - {' '} + INTO {connector.title} WITH YOUR{' '} FREE ACCOUNT ) From e316461247f04c40aac258687fac38f83b4429d1 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 19:29:15 -0300 Subject: [PATCH 19/21] Consider SVG format for the customer logos in the homepage marquee --- src/components/Footer/styles.module.less | 2 +- src/components/TestimonialsCarousel/index.tsx | 4 +-- src/components/VanityLogosMarquee/index.tsx | 29 +++++++++---------- 3 files changed, 15 insertions(+), 20 deletions(-) diff --git a/src/components/Footer/styles.module.less b/src/components/Footer/styles.module.less index cb81d756..10010e50 100644 --- a/src/components/Footer/styles.module.less +++ b/src/components/Footer/styles.module.less @@ -132,7 +132,7 @@ justify-content: center; &>a { - font-weight: 500; + color: #B7C6DD; &:hover { text-underline-offset: 4px; 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 ? (
-
) : (
{ } />
- ) - )} + ); + })}
); From d1e057ec657fc6dcb81837bb3921b8b0c8912c34 Mon Sep 17 00:00:00 2001 From: Breno Date: Tue, 29 Oct 2024 19:48:12 -0300 Subject: [PATCH 20/21] Remove unused width from query of the tutorial page /why --- src/components/BackgroundImages/WhyPageStepsBackground.tsx | 4 ---- src/components/XvsYFilter/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 6 deletions(-) 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/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} From 5aa1f703880cc3cd4083ccc73a7053490dba3b60 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 30 Oct 2024 15:38:11 -0300 Subject: [PATCH 21/21] Apply review changes --- .../DeploymentOptionsPage/Hero/styles.module.less | 4 ++++ src/components/EtlToolsPage/Hero/index.tsx | 4 ++-- src/components/EtlToolsPage/Hero/styles.module.less | 6 ++++++ src/components/EtlToolsXvsYPage/Hero/index.tsx | 5 ++--- src/components/HeroSectionDetails/index.tsx | 8 ++------ src/components/HeroSectionDetails/styles.module.less | 7 +------ src/components/PricingPage/Hero/index.tsx | 11 +++++++++-- src/components/PricingPage/Hero/styles.module.less | 3 +++ src/style.less | 7 +++---- src/templates/connector/Hero/Content/styles.ts | 1 - 10 files changed, 32 insertions(+), 24 deletions(-) create mode 100644 src/components/PricingPage/Hero/styles.module.less diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less index 87ba53ed..5f3a1b56 100644 --- a/src/components/DeploymentOptionsPage/Hero/styles.module.less +++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less @@ -36,6 +36,10 @@ text-align: center; } + h1 { + color: #fff; + } + @media (min-width: 1441px) { span { font-size: 0.875rem; diff --git a/src/components/EtlToolsPage/Hero/index.tsx b/src/components/EtlToolsPage/Hero/index.tsx index 5370435a..f8448994 100644 --- a/src/components/EtlToolsPage/Hero/index.tsx +++ b/src/components/EtlToolsPage/Hero/index.tsx @@ -5,7 +5,7 @@ import VendorsLink from '../../VendorsLink'; import { Vendor } from '../../../../shared'; import Container from '../../Container'; import HeroSectionDetails from '../../HeroSectionDetails'; -import { rightColumn } from './styles.module.less'; +import { container, rightColumn } from './styles.module.less'; interface SectionOneProps { vendors: Vendor[]; @@ -14,7 +14,7 @@ interface SectionOneProps { const Hero = ({ vendors }: SectionOneProps) => { return (
- + { - {xVendor.name.toUpperCase()}{' '} - VS{' '} - {yVendor.name.toUpperCase()} + {xVendor.name} VS{' '} + {yVendor.name} } description={ diff --git a/src/components/HeroSectionDetails/index.tsx b/src/components/HeroSectionDetails/index.tsx index ae7c5222..e0c3b259 100644 --- a/src/components/HeroSectionDetails/index.tsx +++ b/src/components/HeroSectionDetails/index.tsx @@ -3,11 +3,7 @@ import { OutboundLinkFilled } from '../OutboundLink'; import { dashboardRegisterUrl } from '../../../shared'; import SubscriptionBenefits from '../SubscriptionBenefits'; import { LinkOutlined } from '../../globalStyles'; -import { - container, - buttonsWrapper, - outlinedButton, -} from './styles.module.less'; +import { container, buttonsWrapper } from './styles.module.less'; interface HeroSectionDetailsProps { title: ReactNode; @@ -39,7 +35,7 @@ const HeroSectionDetails = ({ Contact Us diff --git a/src/components/HeroSectionDetails/styles.module.less b/src/components/HeroSectionDetails/styles.module.less index b8920c92..f3a950df 100644 --- a/src/components/HeroSectionDetails/styles.module.less +++ b/src/components/HeroSectionDetails/styles.module.less @@ -9,7 +9,7 @@ margin-top: 24px; font-size: 1.25rem; color: #fff; - margin: 0 0 16px 0; + margin: 0 0 8px 0; @media (max-width: 768px) { font-size: 1rem; @@ -45,8 +45,3 @@ } } } - -.outlinedButton { - background-color: transparent; - color: #ffffff; -} diff --git a/src/components/PricingPage/Hero/index.tsx b/src/components/PricingPage/Hero/index.tsx index f4637c32..c7c53c92 100644 --- a/src/components/PricingPage/Hero/index.tsx +++ b/src/components/PricingPage/Hero/index.tsx @@ -3,6 +3,7 @@ import { StaticImage } from 'gatsby-plugin-image'; import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less'; import Container from '../../Container'; import HeroSectionDetails from '../../HeroSectionDetails'; +import { boldText } from './styles.module.less'; const Hero = () => { return ( @@ -17,8 +18,14 @@ const Hero = () => { 'monthly active rows.' We price predictably, based on {' '} - data moved each month and{' '} - active connector instances. + + 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 new file mode 100644 index 00000000..fad2e5fe --- /dev/null +++ b/src/components/PricingPage/Hero/styles.module.less @@ -0,0 +1,3 @@ +.boldText { + font-weight: 700; +} \ No newline at end of file diff --git a/src/style.less b/src/style.less index fc17c159..f13fa0df 100644 --- a/src/style.less +++ b/src/style.less @@ -102,9 +102,8 @@ 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); - color: #fff; margin: 0; text-transform: uppercase; @@ -116,8 +115,8 @@ h1 { font-size: 2rem; } - span:nth-of-type(2n) { - color: #5072eb; + span:nth-of-type(2n+1) { + color: #fff; } } diff --git a/src/templates/connector/Hero/Content/styles.ts b/src/templates/connector/Hero/Content/styles.ts index 1340c157..d6b784bd 100644 --- a/src/templates/connector/Hero/Content/styles.ts +++ b/src/templates/connector/Hero/Content/styles.ts @@ -25,7 +25,6 @@ export const ContainerPreTitle = styled.div` gap: 16px; align-items: center; margin-bottom: 32px; - margin: 0; span { font-weight: 700;