Skip to content

Commit

Permalink
Update pricing calculator (#700)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@Brenosalv
Brenosalv and Breno authored Feb 21, 2025
1 parent 77bd7f1 commit c88337b
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 74 deletions.
4 changes: 2 additions & 2 deletions src/components/Homepage/SecureDataMovement/ConnectorsMasonry/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
),
Expand Down
13 changes: 9 additions & 4 deletions src/components/PricingCalculator/ComparisonCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
);
Expand Down
121 changes: 66 additions & 55 deletions src/components/PricingCalculator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -42,6 +44,7 @@ import {
highlightedBrandPrice,
subSectionTitle,
highlightedCard,
getInTouchBanner,
} from './styles.module.less';
import ComparisonCard from './ComparisonCard';

Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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>
);
};
58 changes: 45 additions & 13 deletions src/components/PricingCalculator/styles.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
border-radius: 16px;
padding: 28px;
background-color: var(--white);
min-height: 697px;
min-height: 868px;
}

.subSectionTitle {
Expand All @@ -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;
Expand Down Expand Up @@ -107,6 +115,7 @@

.comparisons {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}

0 comments on commit c88337b

Please sign in to comment.