Create components for the page sections (#549)

* Add container component to the homepage * Add container component to the pricing page sections * Add container component to the product page sections * Add container component to the comparison template page sections and rename the section components * Rename the section components of the etl-tools page * Add container component to the etl-tools page sections * Add some tweaks to the deployment options page * Add container component to the sections of the connector template page * Add container component to the sections of the blog post template page * Create HeroSectionDetails component and use it on the homepage hero section * Use the HeroSectionDetails component on the hero section of the pricing page * Use the HeroSectionDetails component on the hero section of the product page * Use the HeroSectionDetails component on the hero section of the deployment options page * Use the HeroSectionDetails component on the hero section of the comparison XvsY page * Use the HeroSectionDetails component on the hero section of the etl-tools page * Use the HeroSectionDetails component on the hero section of the connector template page * Use the HeroSectionDetails component on the hero section of the blog post template page * Fix backgroundColor prop not being recognized * Consider SVG format for the customer logos in the homepage marquee * Remove unused width from query of the tutorial page /why * Apply review changes --------- Co-authored-by: Breno <[email protected]>
estuary · Oct 31, 2024 · ac3ea68 · ac3ea68
1 parent f531fd0
commit ac3ea68
Show file tree

Hide file tree

Showing 128 changed files with 866 additions and 1,645 deletions.
diff --git 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 (
-        <Container $isImageOnTheLeft={isImageOnTheLeft}>
+        <Wrapper $isImageOnTheLeft={isImageOnTheLeft}>
             <LeftColumn>
                 <IconWrapper $isDarkTheme={isDarkTheme}>{icon}</IconWrapper>
                 <Title $isDarkTheme={isDarkTheme}>{title}</Title>
@@ -67,7 +67,7 @@ const Advantages = ({
                 ) : null}
             </LeftColumn>
             {image ? <RightColumn>{image}</RightColumn> : null}
-        </Container>
+        </Wrapper>
     );
 };
 

diff --git a/src/components/Advantages/styles.ts b/src/components/Advantages/styles.ts
@@ -1,17 +1,11 @@
 import styled from 'styled-components';
-import { globalMaxWidth } from '../../globalStyles';
+import Container from '../Container';
 
 type Theme = {
     $isDarkTheme: boolean;
 };
 
-export const Container = styled.section<{ $isImageOnTheLeft: boolean }>`
-    ${globalMaxWidth}
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 60px;
+export const Wrapper = styled(Container)<{ $isImageOnTheLeft: boolean }>`
     flex-direction: ${(props) =>
         props.$isImageOnTheLeft ? 'row-reverse' : 'row'};
 

diff --git a/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx b/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx
@@ -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}
             />
             <div className={className}>{children}</div>
         </BackgroundWrapper>

diff --git 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}
             />
             <div className={className}>{children}</div>
         </BackgroundWrapper>

diff --git 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}
             />
             <div className={className}>{children}</div>
         </BackgroundWrapper>

diff --git a/src/components/BackgroundImages/WhyPageStepsBackground.tsx b/src/components/BackgroundImages/WhyPageStepsBackground.tsx
@@ -23,7 +23,6 @@ const WhyPageStepsBackground = ({
                         placeholder: BLURRED
                         formats: [AUTO, WEBP, AVIF]
                         layout: FULL_WIDTH
-                        width: 1180
                     )
                 }
             }
@@ -34,7 +33,6 @@ const WhyPageStepsBackground = ({
                         placeholder: BLURRED
                         formats: [AUTO, WEBP, AVIF]
                         layout: FULL_WIDTH
-                        width: 1180
                     )
                 }
             }
@@ -45,7 +43,6 @@ const WhyPageStepsBackground = ({
                         placeholder: BLURRED
                         formats: [AUTO, WEBP, AVIF]
                         layout: FULL_WIDTH
-                        width: 1180
                     )
                 }
             }
@@ -56,7 +53,6 @@ const WhyPageStepsBackground = ({
                         placeholder: BLURRED
                         formats: [AUTO, WEBP, AVIF]
                         layout: FULL_WIDTH
-                        width: 1180
                     )
                 }
             }

diff --git a/src/components/BackgroundImages/shared.ts b/src/components/BackgroundImages/shared.ts
@@ -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
@@ -277,7 +277,7 @@ export const Connectors = ({
                         >
                             <FlowLogo className={connectorBottomFlow} />
                             <StaticImage
-                                src="../images/connectors-bottom.png"
+                                src="../../images/connectors-bottom.png"
                                 alt={
                                     bottomTitle ??
                                     'Connectors logos background image'

diff --git a/src/components/Connectors/styles.module.less b/src/components/Connectors/styles.module.less
@@ -80,37 +80,37 @@
   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;
+    }
   }
 }
 
 .connectorCards {
   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);
   }
-}
+}
diff --git 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 (
         <div
-            className={clsx(container, className, isVertical ? vertical : null)}
+            className={clsx(
+                container,
+                className,
+                isVertical ? vertical : null,
+                isReverseColumnOnMobile ? reverse : null
+            )}
         >
             {children}
         </div>

diff --git a/src/components/Container/styles.module.less b/src/components/Container/styles.module.less
@@ -37,3 +37,9 @@
     max-width: 100%;
   }
 }
+
+.reverse {
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less
@@ -6,8 +6,6 @@
   }
 
   @media(max-width: 768px) {
-    gap: 40px;
-
     h2 {
       font-size: 2rem;
     }

diff --git a/src/components/DeploymentOptionsPage/Hero/index.tsx b/src/components/DeploymentOptionsPage/Hero/index.tsx
@@ -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 (
         <section className={defaultWrapperDarkBlue}>
             <Container className={container}>
-                <div className={leftColumn}>
-                    <h1>ESTUARY FLOW DEPLOYMENT OPTIONS</h1>
-                    <p>
-                        Estuary Flow offers three main deployment options to
+                <HeroSectionDetails
+                    title="ESTUARY FLOW DEPLOYMENT OPTIONS"
+                    description="Estuary Flow offers three main deployment options to
                         cater to various organizational needs and security
                         requirements. This section provides a high-level
                         overview and comparison of Public Deployment, Private
-                        Deployment, and BYOC options.
-                    </p>
-                    <div>
-                        <OutboundLinkFilled
-                            target="_blank"
-                            href={dashboardRegisterUrl}
-                        >
-                            Build a pipeline
-                        </OutboundLinkFilled>
-                        <LinkOutlined
-                            href="/contact-us"
-                            target="_blank"
-                            theme="dark"
-                        >
-                            Contact Us
-                        </LinkOutlined>
-                    </div>
-                </div>
+                        Deployment, and BYOC options."
+                    hasCtaButtons
+                />
                 <div className={rightColumn}>
                     <StaticImage
                         src="../../../images/deployment-options-page/deployment-options-page-hero-background-image.png"