From c88337b5267363f3f0be5598aac1922b3a925159 Mon Sep 17 00:00:00 2001
From: Breno Salvador <60396753+Brenosalv@users.noreply.github.com>
Date: Fri, 21 Feb 2025 18:28:28 -0300
Subject: [PATCH] Update pricing calculator (#700)

* Add "Try it Free" button

* Add "Get in touch" banner

* Update comparison

* Fix condition to show the "Get in touch" banner

* Move the banner to below the number of connectors selector

* Add id to get in touch and try it free buttons

* Fix microsoft fabric name in the connectors masonry

---------

Co-authored-by: Breno <breno@estuary.dev>
---
 .../ConnectorsMasonry/index.tsx               |   4 +-
 .../PricingCalculator/ComparisonCard.tsx      |  13 +-
 src/components/PricingCalculator/index.tsx    | 121 ++++++++++--------
 .../PricingCalculator/styles.module.less      |  58 +++++++--
 4 files changed, 122 insertions(+), 74 deletions(-)

diff --git a/src/components/Homepage/SecureDataMovement/ConnectorsMasonry/index.tsx b/src/components/Homepage/SecureDataMovement/ConnectorsMasonry/index.tsx
index 788ccb29..4ae4cd08 100644
--- a/src/components/Homepage/SecureDataMovement/ConnectorsMasonry/index.tsx
+++ b/src/components/Homepage/SecureDataMovement/ConnectorsMasonry/index.tsx
@@ -221,11 +221,11 @@ const row3 = [
 const row4 = [
     ...Array(7).fill(nullConnectorLeft),
     {
-        name: 'Microsoft Fabric Warehouse',
+        name: 'Microsoft Fabric',
         logo: (
             <StaticImage
                 src="../../../../images/microsoft-fabric-warehouse-logo.png"
-                alt="Microsoft Fabric Warehouse logo"
+                alt="Microsoft Fabric logo"
                 {...commonProps}
             />
         ),
diff --git a/src/components/PricingCalculator/ComparisonCard.tsx b/src/components/PricingCalculator/ComparisonCard.tsx
index ee5cc6a6..b58369aa 100644
--- a/src/components/PricingCalculator/ComparisonCard.tsx
+++ b/src/components/PricingCalculator/ComparisonCard.tsx
@@ -1,5 +1,10 @@
+import clsx from 'clsx';
 import { currencyFormatter } from '../../utils';
-import { brandName, brandPrice, brandWrapper } from './styles.module.less';
+import {
+    brandPrice,
+    brandWrapper,
+    secondaryHighlightedCard,
+} from './styles.module.less';
 
 interface ComparisonCardProps {
     title: string;
@@ -8,10 +13,10 @@ interface ComparisonCardProps {
 
 const ComparisonCard = ({ title, price }: ComparisonCardProps) => {
     return (
-        <div className={brandWrapper}>
-            <span className={brandName}>{title}</span>
+        <div className={clsx(brandWrapper, secondaryHighlightedCard)}>
             <span className={brandPrice}>
-                <span>{currencyFormatter.format(price)}</span> / month
+                Compared to {title}, you save{' '}
+                <strong>{currencyFormatter.format(price)}</strong> / month!
             </span>
         </div>
     );
diff --git a/src/components/PricingCalculator/index.tsx b/src/components/PricingCalculator/index.tsx
index b9b90c1d..14c37216 100644
--- a/src/components/PricingCalculator/index.tsx
+++ b/src/components/PricingCalculator/index.tsx
@@ -18,8 +18,10 @@ import {
 } from '../../utils';
 import MinusSign from '../../svgs/minus-sign.svg';
 import PlusSign from '../../svgs/plus-sign.svg';
-import OpenHubspotModal from '../HubSpot/OpenModal';
 import ButtonFilled from '../LinksAndButtons/ButtonFilled';
+import OutboundLinkFilled from '../LinksAndButtons/OutboundLinkFilled';
+import { dashboardRegisterUrl } from '../../../shared';
+import OpenHubspotModal from '../HubSpot/OpenModal';
 import { maxConnectors, selfServiceConnectorLimit } from './shared';
 import {
     connectorsCounter,
@@ -42,6 +44,7 @@ import {
     highlightedBrandPrice,
     subSectionTitle,
     highlightedCard,
+    getInTouchBanner,
 } from './styles.module.less';
 import ComparisonCard from './ComparisonCard';
 
@@ -190,6 +193,10 @@ export const PricingCalculator = ({
         setSelectedGbs(inverseScale(numericValue));
     };
 
+    const isInGetInTouchRange =
+        selectedConnectors === maxConnectors ||
+        (selectedGbs <= totalMarks && selectedGbs >= totalMarks - 5);
+
     return (
         <div className={container}>
             <div className={header}>
@@ -272,74 +279,78 @@ export const PricingCalculator = ({
                     </ButtonFilled>
                 </div>
             </div>
-            <div className={divider} />
-            {selectedConnectors === maxConnectors ||
-            selectedGbs === totalMarks ? (
-                <OpenHubspotModal
-                    buttonLabel="Need More? Contact us"
-                    buttonId="section-one-hubspot"
-                    formId="698e6716-f38b-4bd5-9105-df9ba220e29b"
-                />
-            ) : (
+            {isInGetInTouchRange ? (
                 <>
-                    <div className={estuaryPrice}>
-                        <h3 className={subSectionTitle}>
-                            Your price at Estuary
-                        </h3>
-                        <div className={clsx(brandWrapper, highlightedCard)}>
-                            <span
-                                className={clsx(
-                                    brandPrice,
-                                    highlightedBrandPrice
-                                )}
-                            >
-                                {estuaryFreeTier ? (
-                                    <span>Free</span>
-                                ) : (
-                                    <>
-                                        <span>
-                                            {currencyFormatter.format(
-                                                prices.estuary
-                                            )}
-                                        </span>{' '}
-                                        / month
-                                    </>
-                                )}
-                            </span>
-                            <div className={brandDetails}>
-                                <div className={detail}>
-                                    <span>
-                                        {/*This is hacky but works. We only reset the input on blur so while typing they could see incorrect info without this override*/}
-                                        {gbInputValue === '0' ||
-                                        gbInputValue === '1'
-                                            ? '2'
-                                            : gbInputValue}
-                                        GB
-                                    </span>{' '}
-                                    of data moved
-                                </div>
-                                <div className={detail}>
-                                    <span>{selectedConnectors}</span> connector
-                                    instances
-                                </div>
-                            </div>
+                    <div className={divider} />
+                    <div className={getInTouchBanner}>
+                        <p>
+                            For high-volume deals, we provide tailored
+                            solutions.
+                        </p>
+                        <OpenHubspotModal
+                            buttonLabel="Get in touch"
+                            buttonId="get-in-touch-button/pricing-calculator-banner"
+                            formId="698e6716-f38b-4bd5-9105-df9ba220e29b"
+                        />
+                    </div>
+                </>
+            ) : null}
+            <div className={divider} />
+            <div className={estuaryPrice}>
+                <h3 className={subSectionTitle}>Your price at Estuary</h3>
+                <div className={clsx(brandWrapper, highlightedCard)}>
+                    <span className={clsx(brandPrice, highlightedBrandPrice)}>
+                        {estuaryFreeTier ? (
+                            <span>Free</span>
+                        ) : (
+                            <>
+                                <span>
+                                    {currencyFormatter.format(prices.estuary)}
+                                </span>{' '}
+                                / month
+                            </>
+                        )}
+                    </span>
+                    <div className={brandDetails}>
+                        <div className={detail}>
+                            <span>
+                                {/*This is hacky but works. We only reset the input on blur so while typing they could see incorrect info without this override*/}
+                                {gbInputValue === '0' || gbInputValue === '1'
+                                    ? '2'
+                                    : gbInputValue}
+                                GB
+                            </span>{' '}
+                            of data moved
+                        </div>
+                        <div className={detail}>
+                            <span>{selectedConnectors}</span> connector
+                            instances
                         </div>
                     </div>
+                </div>
+                <OutboundLinkFilled
+                    id="try-it-free-button/pricing-calculator"
+                    target="_blank"
+                    href={dashboardRegisterUrl}
+                >
+                    Try it Free
+                </OutboundLinkFilled>
+                {!isInGetInTouchRange ? (
                     <div className={priceComparisons}>
                         <h3 className={subSectionTitle}>Pricing comparisons</h3>
                         <div className={comparisons}>
                             <ComparisonCard
                                 title="Confluent"
-                                price={prices.confluent}
+                                price={prices.confluent - prices.estuary}
                             />
                             <ComparisonCard
                                 title="Fivetran"
-                                price={prices.fivetran}
+                                price={prices.fivetran - prices.estuary}
                             />
                         </div>
                     </div>
-                </>
-            )}
+                ) : null}
+            </div>
         </div>
     );
 };
diff --git a/src/components/PricingCalculator/styles.module.less b/src/components/PricingCalculator/styles.module.less
index 9ed7d4d3..20ad8f4f 100644
--- a/src/components/PricingCalculator/styles.module.less
+++ b/src/components/PricingCalculator/styles.module.less
@@ -6,7 +6,7 @@
     border-radius: 16px;
     padding: 28px;
     background-color: var(--white);
-    min-height: 697px;
+    min-height: 868px;
 }
 
 .subSectionTitle {
@@ -27,6 +27,14 @@
     min-height: 99.2px;
 }
 
+.secondaryHighlightedCard {
+    background-color: transparent;
+    border: 1px solid var(--grey);
+    border-radius: 16px;
+    padding: 16px;
+    flex-direction: row;
+}
+
 .header {
     display: flex;
     align-items: center;
@@ -107,6 +115,7 @@
 
 .comparisons {
     display: flex;
+    flex-direction: column;
     gap: 24px;
     align-items: center;
     justify-content: space-between;
@@ -141,20 +150,10 @@
     }
 }
 
-.brandName {
-    color: var(--dark-blue);
-    font-weight: 400;
-    font-size: 1rem;
-
-    @media (max-width: 425px) {
-        font-size: 0.875rem;
-    }
-}
-
 .brandPrice {
-    color: var(--grey);
+    color: var(--dark-blue);
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 24px;
     display: inline-block;
     white-space: nowrap;
@@ -245,4 +244,37 @@
     width: 100%;
     height: 1px;
     border: 1px solid #d5ddf8;
+}
+
+.getInTouchBanner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 23px 28px;
+    background: linear-gradient(90deg, rgba(55, 192, 193, 0.4) 0%, rgba(80, 114, 235, 0.4) 100%);
+    border-radius: 10px;
+
+    p {
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 27px;
+        color: var(--dark-blue);
+        margin: 0;
+    }
+
+    button {
+        background-color: var(--blue);
+        color: var(--white);
+        white-space: nowrap;
+    }
+
+    @media (max-width: 520px) {
+        flex-direction: column;
+
+        button {
+            width: 100%;
+            white-space: normal;
+        }
+    }
 }
\ No newline at end of file