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: (
),
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 (
-
-
{title}
+
- {currencyFormatter.format(price)} / month
+ Compared to {title}, you save{' '}
+ {currencyFormatter.format(price)} / month!
);
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 (
@@ -272,74 +279,78 @@ export const PricingCalculator = ({
-
- {selectedConnectors === maxConnectors ||
- selectedGbs === totalMarks ? (
-
- ) : (
+ {isInGetInTouchRange ? (
<>
-
-
- Your price at Estuary
-
-
-
- {estuaryFreeTier ? (
- Free
- ) : (
- <>
-
- {currencyFormatter.format(
- prices.estuary
- )}
- {' '}
- / month
- >
- )}
-
-
-
-
- {/*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
- {' '}
- of data moved
-
-
- {selectedConnectors} connector
- instances
-
-
+
+
+
+ For high-volume deals, we provide tailored
+ solutions.
+
+
+
+ >
+ ) : null}
+
+
+
Your price at Estuary
+
+
+ {estuaryFreeTier ? (
+ Free
+ ) : (
+ <>
+
+ {currencyFormatter.format(prices.estuary)}
+ {' '}
+ / month
+ >
+ )}
+
+
+
+
+ {/*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
+ {' '}
+ of data moved
+
+
+ {selectedConnectors} connector
+ instances
+
+
+ Try it Free
+
+ {!isInGetInTouchRange ? (
- >
- )}
+ ) : null}
+
);
};
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