Create a pricing calculator jump link and add copy button into section

src/components/ArticleSidebar/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import ShareArticle from '../../templates/blog-post/ShareArticle';
+import { RenderToc } from '../BlogPostToc';
+import SidebarCta from '../SidebarCta';
+import {
+    container,
+    shareArticleDesktop,
+    tableOfContentsWrapper,
+} from './styles.module.less';
+
+interface ArticleSidebarProps {
+    article: {
+        title: string;
+        slug: string;
+    };
+    tableOfContents: any;
+}
+
+const ArticleSidebar = ({ article, tableOfContents }: ArticleSidebarProps) => {
+    return (
+        <div className={container}>
+            <div className={shareArticleDesktop}>
+                <ShareArticle article={article} />
+            </div>
+            {tableOfContents.length > 0 ? (
+                <div className={tableOfContentsWrapper}>
+                    <RenderToc items={tableOfContents} />
+                </div>
+            ) : null}
+            <SidebarCta />
+        </div>
+    );
+};
+
+export default ArticleSidebar;

src/components/ArticleSidebar/styles.module.less

@@ -0,0 +1,58 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 256px;
+  width: 100%;
+  gap: 24px;
+  height: fit-content;
+
+  @media (max-width: 1150px) {
+    max-width: 100%;
+  }
+
+  @media (min-width: 1151px) {
+    position: sticky;
+    top: 140px;
+  }
+
+  @media (max-width: 767px) {
+    padding-right: 0;
+    position: relative !important;
+  }
+}
+
+.shareArticleDesktop {
+  display: flex;
+
+  @media (max-width: 1150px) {
+    display: none;
+  }
+}
+
+.tableOfContentsWrapper {
+  overflow: auto;
+
+  @media (max-width: 1150px) {
+    margin-bottom: 32px;
+  }
+
+  @media (min-width: 769px) {
+    max-height: 45vh;
+
+    @media (max-height: 1160px) {
+      max-height: 36vh;
+    }
+
+    @media (max-height: 1000px) {
+      max-height: 25vh;
+    }
+
+    @media (max-height: 900px) {
+      max-height: 20vh;
+    }
+
+    @media (max-height: 790px) {
+      max-height: 50vh;
+    }
+  }
+}

src/components/BlogPostToc/index.tsx

@@ -117,7 +117,7 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
         null
     );
     const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-    const isMobile = useMediaQuery('(max-width:768px)');
+    const isMobile = useMediaQuery('(max-width: 768px) or (max-height: 790px)');
 
     React.useEffect(() => {
         intersectionObserver.current = new IntersectionObserver(

src/components/BlogPostToc/styles.module.less

@@ -1,7 +1,6 @@
 .tableOfContents {
   background: #fff;
   counter-reset: toc-counter;
-  margin-top: 18px;
   padding: 0 8px;
 
   h3 {

src/components/CopyToClipboardButton/index.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+import Tooltip from '@mui/material/Tooltip';
+import clsx from 'clsx';
+import { TextField } from '@mui/material';
+import CopyIcon from '../../svgs/share-social-icons/copy.svg';
+import {
+    buttonStyling,
+    isCopiedStyling,
+    copyFailed,
+    container,
+} from './styles.module.less';
+
+interface CopyToClipboardButtonProps {
+    contentToCopy: string;
+}
+
+const CopyToClipboardButton = ({
+    contentToCopy,
+}: CopyToClipboardButtonProps) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const [isCopyFailed, setIsCopyFailed] = useState(false);
+
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(contentToCopy).then(
+            () => {
+                setIsCopied(true);
+                setIsCopyFailed(false);
+                setTimeout(() => setIsCopied(false), 2000);
+            },
+            () => {
+                setIsCopied(false);
+                setIsCopyFailed(false);
+            }
+        );
+    };
+    return (
+        <div className={container}>
+            <Tooltip
+                title="Copied"
+                arrow
+                open={isCopied}
+                slotProps={{
+                    popper: {
+                        modifiers: [
+                            {
+                                name: 'offset',
+                                options: {
+                                    offset: [0, -4],
+                                },
+                            },
+                        ],
+                    },
+                }}
+            >
+                <button
+                    onClick={copyToClipboard}
+                    className={clsx(
+                        buttonStyling,
+                        isCopied ? isCopiedStyling : null
+                    )}
+                >
+                    {isCopied ? (
+                        <CheckIcon fontSize="small" htmlColor="#00A99D" />
+                    ) : (
+                        <CopyIcon />
+                    )}
+                </button>
+            </Tooltip>
+            {isCopyFailed ? (
+                <TextField
+                    value={contentToCopy}
+                    variant="filled"
+                    className={copyFailed}
+                />
+            ) : null}
+        </div>
+    );
+};
+
+export default CopyToClipboardButton;

src/components/CopyToClipboardButton/styles.module.less

@@ -0,0 +1,40 @@
+@import '../styles.module.less';
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.buttonStyling {
+  .socialShareButton;
+
+  transition: background-color,
+    border 300ms ease-in-out;
+
+  background-color: #FFFFFF;
+  border-color: #D7DCE5;
+
+  &:hover {
+    background-color: #f9fafc;
+    border-color: #D7DCE5;
+  }
+}
+
+.isCopiedStyling {
+  background-color: #00A99D30;
+  border-color: #00A99D;
+
+  &:hover {
+    background-color: #00A99D30;
+    border-color: #00A99D;
+  }
+}
+
+.copyFailed {
+  width: 100%;
+
+  .MuiInputBase-input {
+    padding: 12px;
+  }
+}

src/components/EtlToolsPage/SectionOne/styles.module.less

@@ -34,6 +34,7 @@
 .rightColumn {
   max-width: 496px;
   width: 100%;
+  aspect-ratio: 1 / 1;
   position: relative;
 
   div:not(:first-of-type) {

src/components/EtlToolsXvsYPage/SectionOne/styles.module.less

@@ -42,6 +42,7 @@
 
 .rightColumn {
   max-width: 536px;
+  aspect-ratio: 15 / 9;
   width: 100%;
   position: relative;
 }

src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less

@@ -4,10 +4,13 @@
   justify-content: center;
   gap: 10px;
   flex-direction: column;
-  padding: 24px;
   width: 100%;
   text-align: center;
   transition: background-color 200ms ease-in;
+
+  span {
+    white-space: nowrap;
+  }
 }
 
 .tableLogoWrapper {

src/components/EtlToolsXvsYPage/SectionTwo/index.tsx

@@ -5,16 +5,9 @@ import {
     Vendor,
 } from '../../../../shared';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
-import ShareArticle from '../../../templates/blog-post/ShareArticle';
 import BlogBanner from '../../BlogBanner';
-import { RenderToc } from '../../BlogPostToc';
-import {
-    container,
-    leftColumn,
-    rightColumn,
-    bold,
-    tableOfContentsWrapper,
-} from './styles.module.less';
+import ArticleSidebar from '../../ArticleSidebar';
+import { container, rightColumn, bold } from './styles.module.less';
 import UseCases from './UseCases';
 import Connectors from './Connectors';
 import CoreFeatures from './CoreFeatures';
@@ -135,20 +128,16 @@ const SectionTwo = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
     return (
         <section className={defaultWrapperGrey}>
             <div className={container}>
-                <div className={leftColumn}>
-                    <ShareArticle
-                        article={{
-                            title: `${xVendor.name} vs ${yVendor.name}`,
-                            slug: getComparisonSlug(
-                                xVendor.slugKey,
-                                yVendor.slugKey
-                            ),
-                        }}
-                    />
-                    <div className={tableOfContentsWrapper}>
-                        <RenderToc items={tableOfContents} />
-                    </div>
-                </div>
+                <ArticleSidebar
+                    article={{
+                        title: `${xVendor.name} vs ${yVendor.name}`,
+                        slug: getComparisonSlug(
+                            xVendor.slugKey,
+                            yVendor.slugKey
+                        ),
+                    }}
+                    tableOfContents={tableOfContents}
+                />
                 <div className={rightColumn}>
                     <h2 id={intro.id}>{intro.heading}</h2>
                     <p className={bold}>

src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less

@@ -6,7 +6,7 @@
   display: flex;
   gap: 48px;
 
-  @media (max-width: 1240px) {
+  @media (max-width: 1150px) {
     flex-direction: column;
   }
 
@@ -180,47 +180,6 @@
   }
 }
 
-.leftColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  height: 100%;
-
-  @media (min-width: 426px) {
-    min-width: 256px;
-  }
-
-  @media (min-width: 1241px) {
-    position: sticky;
-    top: 140px;
-  }
-}
-
-.tableOfContentsWrapper {
-  overflow: auto;
-  max-height: 70vh;
-
-  @media (max-height: 880px) {
-    max-height: 65vh;
-  }
-
-  @media (max-height: 740px) {
-    max-height: 60vh;
-  }
-
-  @media (max-height: 740px) {
-    max-height: 50vh;
-  }
-
-  @media (max-height: 540px) {
-    max-height: 40vh;
-  }
-
-  @media (max-height: 440px) {
-    display: none;
-  }
-}
-
 .bold {
   font-weight: 600;
 }