From dce3bf4df92826e4c65c2a0cc9e9ee906648c319 Mon Sep 17 00:00:00 2001
From: Breno <breno@estuary.dev>
Date: Wed, 9 Oct 2024 17:46:18 -0300
Subject: [PATCH] Add copy to clipboard button next to the pricing calculator
 section title

---
 src/components/PricingPage/SectionThree/index.tsx          | 6 +++++-
 src/components/PricingPage/SectionThree/styles.module.less | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx
index 77f2de1d..c5699590 100644
--- 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
index ffeea651..0d6deb70 100644
--- 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 {