Add copy to clipboard button next to the pricing calculator section t…

…itle
estuary · Oct 9, 2024 · dce3bf4 · dce3bf4
1 parent af2c52e
commit dce3bf4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
 import { PricingCalculator } from '../../PricingCalculator';
+import CopyToClipboardButton from '../../CopyToClipboardButton';
 import {
     container,
     title,
@@ -19,7 +20,10 @@ const SectionThree = () => {
         >
             <div className={container}>
                 <div className={textWrapper}>
-                    <h2 className={title}>PRICING CALCULATOR</h2>
+                    <div>
+                        <h2 className={title}>PRICING CALCULATOR</h2>
+                        <CopyToClipboardButton contentToCopy="https://www.estuary.dev/pricing/#pricing-calculator" />
+                    </div>
                     <p className={description}>
                         Use our intuitive pricing calculator to easily estimate
                         your monthly costs. Simply input your requirements, and

diff --git a/src/components/PricingPage/SectionThree/styles.module.less b/src/components/PricingPage/SectionThree/styles.module.less
@@ -29,6 +29,12 @@
   @media (max-width: 1024px) {
     text-align: center;
   }
+
+  div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+  }
 }
 
 .title {