Replace integration page components names to more semantic ones

src/components/Integration/SectionSeven/index.tsx → src/components/Integration/DataopsMadeSimple/index.tsx

@@ -4,7 +4,7 @@ import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.le
 import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg';
 import Advantages from '../../Advantages';
 
-const SectionSeven = () => {
+const DataopsMadeSimple = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <Advantages
@@ -30,4 +30,4 @@ const SectionSeven = () => {
     );
 };
 
-export default SectionSeven;
+export default DataopsMadeSimple;

src/components/Integration/SectionFive/index.tsx → src/components/Integration/EstuaryFlowVideo/index.tsx

@@ -11,7 +11,7 @@ import {
     title,
 } from './styles.module.less';
 
-const SectionFive = () => {
+const EstuaryFlowVideo = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <div className={container}>
@@ -39,4 +39,4 @@ const SectionFive = () => {
     );
 };
 
-export default SectionFive;
+export default EstuaryFlowVideo;

src/components/Integration/SectionTwo/index.tsx → src/components/Integration/FromConnector/index.tsx

@@ -17,7 +17,7 @@ import {
     whiteFilledCircle,
 } from '../styles.module.less';
 
-const SectionTwo = ({
+const FromConnector = ({
     title,
     longDescription,
     shortDescription,
@@ -83,4 +83,4 @@ const SectionTwo = ({
     );
 };
 
-export default SectionTwo;
+export default FromConnector;

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

@@ -32,12 +32,12 @@ import {
 
 const metricIconColor = '#FFFFFF';
 
-export interface SectionOneProps {
+export interface HeroProps {
     sourceConnector: Connector;
     destConnector: Connector;
 }
 
-const SectionOne = ({ sourceConnector, destConnector }: SectionOneProps) => {
+const Hero = ({ sourceConnector, destConnector }: HeroProps) => {
     const sourceConnectorLogo = getImage(
         sourceConnector.logo?.childImageSharp?.gatsbyImageData
     );
@@ -139,4 +139,4 @@ const SectionOne = ({ sourceConnector, destConnector }: SectionOneProps) => {
     );
 };
 
-export default SectionOne;
+export default Hero;

src/components/Integration/SectionEight/index.tsx → src/components/Integration/IncreaseProductivity4x/index.tsx

@@ -3,7 +3,7 @@ import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
 import MainConnectors from '../../MainConnectors';
 import { container, description, title } from './styles.module.less';
 
-const SectionEight = () => {
+const IncreaseProductivity4x = () => {
     return (
         <section className={defaultWrapperGrey}>
             <div className={container}>
@@ -22,4 +22,4 @@ const SectionEight = () => {
     );
 };
 
-export default SectionEight;
+export default IncreaseProductivity4x;

src/components/Integration/SectionSix/index.tsx → src/components/Integration/RealTimeAndBatch/index.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
 import RealTimeCdc from '../../../svgs/real-time-cdc.svg';
 import Advantages from '../../Advantages';
-import { sectionSixAdvantages } from '../advantages';
+import { estuaryFlowAdvantages } from '../advantages';
 
-const SectionSix = () => {
+const RealTimeAndBatch = () => {
     return (
         <section className={defaultWrapperGrey}>
             <Advantages // Move the style of the Avantages component from styled-components to LESS.
@@ -25,10 +25,10 @@ const SectionSix = () => {
                         quality={100}
                     />
                 }
-                advantages={sectionSixAdvantages}
+                advantages={estuaryFlowAdvantages}
             />
         </section>
     );
 };
 
-export default SectionSix;
+export default RealTimeAndBatch;

src/components/Integration/SectionTen/index.tsx → src/components/Integration/SeeHow/index.tsx

@@ -10,7 +10,7 @@ import {
     title,
 } from './styles.module.less';
 
-const SectionTen = () => {
+const SeeHow = () => {
     return (
         <section className={defaultWrapperGrey}>
             <div className={container}>
@@ -35,4 +35,4 @@ const SectionTen = () => {
     );
 };
 
-export default SectionTen;
+export default SeeHow;

src/components/Integration/SectionNine/index.tsx → src/components/Integration/Spend25xLess/index.tsx

@@ -4,7 +4,7 @@ import DatabaseSavingWithLowPrice from '../../../svgs/database-saving-with-low-p
 import Advantages from '../../Advantages';
 import { PricingCalculator } from '../../PricingCalculator';
 
-const SectionNine = () => {
+const Spend25xLess = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <Advantages // TODO: Move the Advantages component's styles from styled-components to LESS
@@ -29,4 +29,4 @@ const SectionNine = () => {
     );
 };
 
-export default SectionNine;
+export default Spend25xLess;

src/components/Integration/SectionFour/index.tsx → src/components/Integration/Testimonials/index.tsx

@@ -3,7 +3,7 @@ import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
 import TestimonialsCarousel from '../../TestimonialsCarousel';
 import { container, title } from './styles.module.less';
 
-const SectionFour = () => {
+const Testimonials = () => {
     return (
         <section className={defaultWrapperGrey}>
             <div className={container}>
@@ -16,4 +16,4 @@ const SectionFour = () => {
     );
 };
 
-export default SectionFour;
+export default Testimonials;

src/components/Integration/SectionThree/index.tsx → src/components/Integration/ToConnector/index.tsx

@@ -18,7 +18,7 @@ import {
     whiteFilledCircle,
 } from '../styles.module.less';
 
-const SectionThree = ({
+const ToConnector = ({
     title,
     longDescription,
     shortDescription,
@@ -94,4 +94,4 @@ const SectionThree = ({
     );
 };
 
-export default SectionThree;
+export default ToConnector;

src/components/Integration/advantages.tsx

@@ -1,4 +1,4 @@
-export const sectionSixAdvantages = [
+export const estuaryFlowAdvantages = [
     {
         title: 'Fastest real-time capture with sub-100ms latency.',
     },

src/templates/connection.tsx

@@ -1,20 +1,18 @@
 import { graphql } from 'gatsby';
 import React from 'react';
-import {
-    SectionEight,
-    SectionFive,
-    SectionFour,
-    SectionNine,
-    SectionOne,
-    SectionSeven,
-    SectionSix,
-    SectionTen,
-    SectionThree,
-    SectionTwo,
-} from '../components/Integration';
 import Layout from '../components/Layout';
 import Seo from '../components/seo';
 import { normalizeConnector } from '../utils';
+import Hero from '../components/Integration/Hero';
+import FromConnector from '../components/Integration/FromConnector';
+import ToConnector from '../components/Integration/ToConnector';
+import Testimonials from '../components/Integration/Testimonials';
+import EstuaryFlowVideo from '../components/Integration/EstuaryFlowVideo';
+import RealTimeAndBatch from '../components/Integration/RealTimeAndBatch';
+import DataopsMadeSimple from '../components/Integration/DataopsMadeSimple';
+import IncreaseProductivity4x from '../components/Integration/IncreaseProductivity4x';
+import Spend25xLess from '../components/Integration/Spend25xLess';
+import SeeHow from '../components/Integration/SeeHow';
 
 export interface ConnectorProps {
     data: {
@@ -42,7 +40,7 @@ const Connector = ({
 
     return (
         <Layout>
-            <SectionOne
+            <Hero
                 sourceConnector={{
                     title: source_mapped.title,
                     logo: source_mapped.logo,
@@ -52,25 +50,25 @@ const Connector = ({
                     logo: dest_mapped.logo,
                 }}
             />
-            <SectionTwo
+            <FromConnector
                 title={source_mapped.title}
                 logo={source_mapped.logo}
                 longDescription={source_mapped.longDescription}
                 shortDescription={source_mapped.shortDescription}
             />
-            <SectionThree
+            <ToConnector
                 title={dest_mapped.title}
                 logo={dest_mapped.logo}
                 longDescription={dest_mapped.longDescription}
                 shortDescription={dest_mapped.shortDescription}
             />
-            <SectionFour />
-            <SectionFive />
-            <SectionSix />
-            <SectionSeven />
-            <SectionEight />
-            <SectionNine />
-            <SectionTen />
+            <Testimonials />
+            <EstuaryFlowVideo />
+            <RealTimeAndBatch />
+            <DataopsMadeSimple />
+            <IncreaseProductivity4x />
+            <Spend25xLess />
+            <SeeHow />
         </Layout>
     );
 };