Add security certificates section on the homepage

src/components/BackgroundImages/BackgroundWrapper.tsx

@@ -1,12 +1,29 @@
 import React from 'react';
+import clsx from 'clsx';
+import { sectionTopBottomPadding } from '../../globalStyles/wrappers.module.less';
 import { wrapper } from './styles.module.less';
 
 interface BackgroundWrapperProps {
     children: React.ReactNode;
+    isSection?: boolean;
 }
 
-const BackgroundWrapper = ({ children }: BackgroundWrapperProps) => {
-    return <div className={wrapper}>{children}</div>;
+const BackgroundWrapper = ({
+    children,
+    isSection = false,
+}: BackgroundWrapperProps) => {
+    const HtmlElementTag = isSection ? 'section' : 'div';
+
+    return (
+        <HtmlElementTag
+            className={clsx(
+                wrapper,
+                isSection ? sectionTopBottomPadding : null
+            )}
+        >
+            {children}
+        </HtmlElementTag>
+    );
 };
 
 export default BackgroundWrapper;

src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx

@@ -11,7 +11,7 @@ const DarkSwoopingLinesLeftDirectionBackground = ({
     className,
 }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <BackgroundWrapper>
+        <BackgroundWrapper isSection>
             <StaticImage
                 alt=""
                 src="../../images/overlay-vector-left.png"

src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx

@@ -10,7 +10,7 @@ const LightSwoopingLinesRightDirectionBackground = ({
     className,
 }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <BackgroundWrapper>
+        <BackgroundWrapper isSection>
             <StaticImage
                 alt=""
                 src="../../images/swooping-lines-to-the-right.png"

src/components/Homepage/SectionSeven/index.tsx → src/components/Homepage/AutomateDataops/index.tsx

@@ -13,7 +13,7 @@ import {
     Wrapper,
 } from './styles';
 
-const SectionSeven = () => {
+const AutomateDataops = () => {
     return (
         <Container>
             <Wrapper>
@@ -48,4 +48,4 @@ const SectionSeven = () => {
     );
 };
 
-export default SectionSeven;
+export default AutomateDataops;

src/components/Homepage/SectionSix/index.tsx → src/components/Homepage/BuildInMinutes/index.tsx

@@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar
 import FlowDemoVideo from '../../FlowDemoVideo';
 import { Description, Title, Wrapper } from './styles';
 
-const SectionSix = () => {
+const BuildInMinutes = () => {
     return (
         <DarkSwoopingLinesLeftDirectionBackground>
             <Wrapper>
@@ -21,4 +21,4 @@ const SectionSix = () => {
     );
 };
 
-export default SectionSix;
+export default BuildInMinutes;

src/components/Homepage/SectionSix/styles.ts → src/components/Homepage/BuildInMinutes/styles.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
+import { globalMaxWidth } from '../../../globalStyles';
 
 export const Wrapper = styled.div`
     ${globalMaxWidth}
-    ${sectionTopBottomPadding}
 
     display: flex;
     justify-content: center;

src/components/Homepage/SectionThree/index.tsx → src/components/Homepage/CaseStudies/index.tsx

@@ -8,7 +8,7 @@ import { Cards, SectionTitle, Wrapper } from './styles';
 
 const cardsPerSlide = 3;
 
-const SectionThree = () => {
+const CaseStudies = () => {
     const {
         allStrapiCaseStudy: { nodes: allCaseStudies },
     } = useStaticQuery(graphql`
@@ -81,4 +81,4 @@ const SectionThree = () => {
     );
 };
 
-export default SectionThree;
+export default CaseStudies;

src/components/Homepage/SectionThree/styles.ts → src/components/Homepage/CaseStudies/styles.ts

@@ -1,13 +1,8 @@
 import styled from 'styled-components';
-import {
-    LinkOutlined,
-    globalMaxWidth,
-    sectionTopBottomPadding,
-} from '../../../globalStyles';
+import { LinkOutlined, globalMaxWidth } from '../../../globalStyles';
 
 export const Wrapper = styled.div`
     ${globalMaxWidth}
-    ${sectionTopBottomPadding}
 
     display: flex;
     flex-direction: column;

src/components/Homepage/SectionNine/index.tsx → src/components/Homepage/Do4xMoreWith25xLess/index.tsx

@@ -12,7 +12,7 @@ import {
     Wrapper,
 } from './styles';
 
-const SectionNine = () => {
+const Do4xMoreWith25xLess = () => {
     return (
         <Container>
             <Wrapper>
@@ -26,8 +26,8 @@ const SectionNine = () => {
                         <span>WITH 2-5X LESS</span>
                     </Title>
                     <Description>
-                        Estuary customers aren’t just benefitting from being
-                        more real-time. They are 4x more productive. They
+                        Estuary customers aren&apos;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.
                     </Description>
@@ -43,4 +43,4 @@ const SectionNine = () => {
     );
 };
 
-export default SectionNine;
+export default Do4xMoreWith25xLess;

src/components/Homepage/SectionOne/index.tsx → src/components/Homepage/Hero/index.tsx

@@ -23,7 +23,7 @@ import {
 
 const metricIconColor = '#FFFFFF';
 
-const SectionOne = () => {
+const Hero = () => {
     return (
         <Container>
             <MainContent>
@@ -84,4 +84,4 @@ const SectionOne = () => {
     );
 };
 
-export default SectionOne;
+export default Hero;

src/components/Homepage/SectionEight/index.tsx → src/components/Homepage/InnovateFaster/index.tsx

@@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar
 import MainConnectors from '../../MainConnectors';
 import { Description, Title, Wrapper } from './styles';
 
-const SectionEight = () => {
+const InnovateFaster = () => {
     return (
         <DarkSwoopingLinesLeftDirectionBackground>
             <Wrapper>
@@ -20,4 +20,4 @@ const SectionEight = () => {
     );
 };
 
-export default SectionEight;
+export default InnovateFaster;

src/components/Homepage/SectionEight/styles.ts → src/components/Homepage/InnovateFaster/styles.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
+import { globalMaxWidth } from '../../../globalStyles';
 
 export const Wrapper = styled.div`
     ${globalMaxWidth}
-    ${sectionTopBottomPadding}
 
     padding-right: 0;
     display: flex;

src/components/Homepage/SectionTwo/index.tsx → src/components/Homepage/MoveAndTransform/index.tsx

@@ -20,7 +20,7 @@ import {
     Title,
 } from './styles';
 
-const SectionTwo = () => {
+const MoveAndTransform = () => {
     return (
         <Container>
             <Header>
@@ -109,4 +109,4 @@ const SectionTwo = () => {
     );
 };
 
-export default SectionTwo;
+export default MoveAndTransform;

src/components/Homepage/SecureYourData/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import SecurityCertificates from '../../SecuriityCertificates';
+import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground';
+
+const SecureYourData = () => {
+    return (
+        <DarkSwoopingLinesLeftDirectionBackground>
+            <SecurityCertificates isDarkTheme />
+        </DarkSwoopingLinesLeftDirectionBackground>
+    );
+};
+
+export default SecureYourData;

src/components/Homepage/SectionEleven/index.tsx → src/components/Homepage/SeeHow/index.tsx

@@ -3,7 +3,7 @@ import { dashboardRegisterUrl, webinarsUrl } from '../../../../shared';
 import { OutboundLinkOutlined } from '../../OutboundLink';
 import { ButtonFilled, Buttons, HubspotButton, Title, Wrapper } from './styles';
 
-const SectionEleven = () => {
+const SeeHow = () => {
     return (
         <Wrapper>
             <Title>
@@ -25,4 +25,4 @@ const SectionEleven = () => {
     );
 };
 
-export default SectionEleven;
+export default SeeHow;

src/components/Homepage/SectionFive/index.tsx → src/components/Homepage/UseTheBestRealTimeCdc/index.tsx

@@ -14,7 +14,7 @@ import {
     Wrapper,
 } from './styles';
 
-const SectionFive = () => {
+const UseTheBestRealTimeCdc = () => {
     return (
         <Container>
             <Wrapper>
@@ -56,4 +56,4 @@ const SectionFive = () => {
     );
 };
 
-export default SectionFive;
+export default UseTheBestRealTimeCdc;

src/components/Homepage/SectionTen/index.tsx → src/components/Homepage/WhatPeopleAreSaying/index.tsx

@@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar
 import TestimonialsCarousel from '../../TestimonialsCarousel';
 import { Wrapper } from './styles';
 
-const SectionTen = () => {
+const WhatPeopleAreSaying = () => {
     return (
         <DarkSwoopingLinesLeftDirectionBackground>
             <Wrapper>
@@ -14,4 +14,4 @@ const SectionTen = () => {
     );
 };
 
-export default SectionTen;
+export default WhatPeopleAreSaying;

src/components/Homepage/SectionTen/styles.ts → src/components/Homepage/WhatPeopleAreSaying/styles.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
+import { globalMaxWidth } from '../../../globalStyles';
 
 export const Wrapper = styled.div`
     ${globalMaxWidth}
-    ${sectionTopBottomPadding}
 
     h2 {
         font-size: 2.5rem;

src/components/SecuriityCertificates/index.tsx

@@ -3,7 +3,11 @@ import { StaticImage } from 'gatsby-plugin-image';
 import Advantages from '../Advantages';
 import { sectionTenAdvantages } from '../Product/advantages';
 
-const SecurityCertificates = () => {
+interface SecurityCertificatesProps {
+    isDarkTheme?: boolean;
+}
+
+const SecurityCertificates = ({ isDarkTheme }: SecurityCertificatesProps) => {
     return (
         <Advantages
             icon={
@@ -28,6 +32,7 @@ const SecurityCertificates = () => {
                 />
             }
             advantages={sectionTenAdvantages}
+            isDarkTheme={isDarkTheme}
         />
     );
 };

src/pages/index.tsx

@@ -2,32 +2,32 @@ import * as React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import Layout from '../components/Layout';
 import Seo from '../components/seo';
-import SectionOne from '../components/Homepage/SectionOne';
-import SectionTwo from '../components/Homepage/SectionTwo';
-import SectionThree from '../components/Homepage/SectionThree';
-import SectionFour from '../components/Homepage/SectionFour';
-import SectionFive from '../components/Homepage/SectionFive';
-import SectionSix from '../components/Homepage/SectionSix';
-import SectionSeven from '../components/Homepage/SectionSeven';
-import SectionEight from '../components/Homepage/SectionEight';
-import SectionNine from '../components/Homepage/SectionNine';
-import SectionTen from '../components/Homepage/SectionTen';
-import SectionEleven from '../components/Homepage/SectionEleven';
+import Hero from '../components/Homepage/Hero';
+import MoveAndTransform from '../components/Homepage/MoveAndTransform';
+import CaseStudies from '../components/Homepage/CaseStudies';
+import SecureYourData from '../components/Homepage/SecureYourData';
+import UseTheBestRealTimeCdc from '../components/Homepage/UseTheBestRealTimeCdc';
+import BuildInMinutes from '../components/Homepage/BuildInMinutes';
+import AutomateDataops from '../components/Homepage/AutomateDataops';
+import InnovateFaster from '../components/Homepage/InnovateFaster';
+import Do4xMoreWith25xLess from '../components/Homepage/Do4xMoreWith25xLess';
+import WhatPeopleAreSaying from '../components/Homepage/WhatPeopleAreSaying';
+import SeeHow from '../components/Homepage/SeeHow';
 
 const IndexPage = () => {
     return (
         <Layout>
-            <SectionOne />
-            <SectionTwo />
-            <SectionThree />
-            <SectionFour />
-            <SectionFive />
-            <SectionSix />
-            <SectionSeven />
-            <SectionEight />
-            <SectionNine />
-            <SectionTen />
-            <SectionEleven />
+            <Hero />
+            <MoveAndTransform />
+            <CaseStudies />
+            <SecureYourData />
+            <UseTheBestRealTimeCdc />
+            <BuildInMinutes />
+            <AutomateDataops />
+            <InnovateFaster />
+            <Do4xMoreWith25xLess />
+            <WhatPeopleAreSaying />
+            <SeeHow />
         </Layout>
     );
 };

src/templates/author/SectionOne/styles.module.less

@@ -2,7 +2,6 @@
 
 .container {
   .globalMaxWidth;
-  .sectionTopBottomPadding;
 
   display: flex;
   gap: 60px;

src/templates/blog-post/styles.module.less

@@ -135,7 +135,6 @@
 
 .blogPostHeaderWrapper {
   .globalMaxWidth;
-  .sectionTopBottomPadding;
 
   display: flex;
   flex-direction: row;

src/templates/connector/Hero/styles.ts

@@ -1,11 +1,10 @@
 import styled, { CSSProperties } from 'styled-components';
 
 import { ConnectorType } from '../../../../shared';
-import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles';
+import { globalMaxWidth } from '../../../globalStyles';
 
 export const Container = styled.div`
     ${globalMaxWidth}
-    ${sectionTopBottomPadding};
 
     display: flex;
     flex-direction: column;