Skip to content

Commit

Permalink
feat: add new pricing template
Browse files Browse the repository at this point in the history
  • Loading branch information
@flavioriper
flavioriper committed Nov 24, 2023
1 parent 976cdd5 commit adbd473
Show file tree
Hide file tree
Showing 13 changed files with 1,043 additions and 1,894 deletions.
Binary file modified src/images/dude_desk_plant.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 19 additions & 11 deletions src/pages/pricing/PricingSlider/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { Slider, styled } from "@mui/material"

const PricingSlider = styled(Slider)({
color: "#5272EB",
width: "87%",
margin: "auto",
borderRadius: "3px",
marginLeft: "25px",
marginTop: "50px",
width: "100%",
marginTop: 50,
padding: "18px 0 !important",
borderRadius: 3,
boxSizing: "border-box",

"& .MuiSlider-thumb": {
height: 36,
width: 36,
height: 40,
width: 40,
backgroundColor: "#5272EB",
border: "6px solid white",
boxShadow: "0px 2px 7px rgba(0, 0, 0, 0.25)",
Expand All @@ -21,13 +22,15 @@ const PricingSlider = styled(Slider)({
},
},
'& .MuiSlider-track': {
height: 28,
height: 16,
},
'& .MuiSlider-rail': {
color: '#D9D9D9',
opacity: 1,
height: 28,
width: '100.5%'
height: 16,
width: '101%',
borderRadius: 3,
left: 0,
},
'& .MuiSlider-mark': {
color: '#D9D9D9',
Expand All @@ -40,7 +43,12 @@ const PricingSlider = styled(Slider)({
}
},
'& .MuiSlider-markLabel': {
top: "-32px"
top: "-24px",
fontSize: 13,
fontWeight: 500,
color: "#3F3F46",
fontFamily: "Inter"

}
})

Expand Down
57 changes: 29 additions & 28 deletions src/pages/pricing/Sections/CostCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,27 +25,29 @@ const PricingCostCalculator = () => {
return (
<div className="cost-calculator">
<div className="heading">
<h2>Price Comparison</h2>
<h2>Pricing Comparison</h2>
</div>
<div className="cost-calculator-container">
<div className="cost-calculator-left">
<div className="cost-calculator-subcontainer">
<div className="cost-calculator-title">
<p className="cost-calculator-left-title zero-margin-bottom">Calculator</p>
<p className="cost-calculator-subtitle">{gByteLabel(scale(selectedGbs))} of Data Moved</p>
<p className="cost-calculator-left-title">Calculator</p>
<p className="cost-calculator-subtitle">{gByteLabel(scale(selectedGbs))} of Change Data</p>

</div>
<SliderComponent
value={selectedGbs}
min={1}
max={gbPoints.length}
step={0.0001}
valueLabelFormat={val => gByteLabel(scale(val))}
valueLabelDisplay="auto"
marks={marks}
// scale={scale}
onChange={(_, val: number) => setSelectedGbs(val)}
/>
<div className="cost-calculator-slider">
<SliderComponent
value={selectedGbs}
min={1}
max={gbPoints.length}
step={0.0001}
valueLabelFormat={val => gByteLabel(scale(val))}
valueLabelDisplay="auto"
marks={marks}
// scale={scale}
onChange={(_, val: number) => setSelectedGbs(val)}
/>
</div>
</div>
<div className="content-bottom">
<div className="cost-calculator-title">
Expand Down Expand Up @@ -77,11 +79,11 @@ const PricingCostCalculator = () => {
</div>
</div>
<div className="cost-calculator-results-wrapper">
<p className="results-title zero-margin-bottom">
<p className="results-title">
Results
</p>
<div className="results-text-wrapper">
<p className="results-title zero-margin-bottom">{currencyFormatter.format(prices.estuary)} / Month</p>
<p className="results-subtitle">{currencyFormatter.format(prices.estuary)} / Month</p>
<ContextToolTip
placement="top-start"
title={(<Typography className="context-tooltip-text">
Expand All @@ -90,7 +92,7 @@ const PricingCostCalculator = () => {
<QuestionMarkIconWhite id="change-data" className="question-mark" />
</ContextToolTip>
</div>
<p className="results-subtext zero-margin-bottom">
<p className="results-subtext">
{gByteLabel(scale(selectedGbs))} of data moved
</p>
<p className="results-subtext">
Expand All @@ -101,14 +103,14 @@ const PricingCostCalculator = () => {
<div className="cost-calculator-right">
<div className="comparisons-wrapper">
<div className="cost-calculator-right-wrapper">
<p className="cost-calculator-left-title zero-margin-bottom">
<p className="cost-calculator-left-title">
Comparisons
</p>
</div>
<div className="content-bottom">
<div className="cost-calculator-right-wrapper">
<div className="comparisons-competition">
<p className="comparisons-subtext zero-margin-bottom">
<p className="comparisons-subtext">
The Competition
</p>
<ContextToolTip
Expand All @@ -119,17 +121,16 @@ const PricingCostCalculator = () => {
<QuestionMarkIcon id="change-data" className="question-mark-dark" />
</ContextToolTip>
</div>

</div>
<div className="comparisons-competitor">
<p className="zero-margin-bottom">Fivetran</p>
<p className="zero-margin-bottom">{currencyFormatter.format(prices.fivetran)} / Mo</p>
</div>
<div className="comparisons-competitor">
<p className="zero-margin-bottom">Confluent</p>
<p className="zero-margin-bottom">{currencyFormatter.format(prices.confluent)} / Mo</p>
</div>
</div>
<div className="comparisons-competitor">
<p>Fivetran</p>
<p>{currencyFormatter.format(prices.fivetran)} / Mo</p>
</div>
<div className="comparisons-competitor">
<p>Confluent</p>
<p>{currencyFormatter.format(prices.confluent)} / Mo</p>
</div>
</div>
</div>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/pricing/Sections/FrequentlyQuestions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const PricingFrequentlyQuestions = () => {
</div>
<div className="frequently-container">
<div className="question">

{frequentlyQuestions.map((item, index) => (
<Accordion defaultExpanded={true} key={index}>
<AccordionSummary
Expand All @@ -28,12 +27,11 @@ const PricingFrequentlyQuestions = () => {
<Typography className="faq-text">{item.title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography className="faq-text" sx={{ lineHeight: "2.5rem", color: "#3F3F46" }}>
<Typography className="faq-description" sx={{ lineHeight: "2.5rem", color: "#3F3F46" }}>
{item.description}
</Typography>
</AccordionDetails>
</Accordion>

))}
</div>
</div>
Expand Down
30 changes: 18 additions & 12 deletions src/pages/pricing/Sections/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from "react"
import React, { useState } from "react"
import { StaticImage } from "gatsby-plugin-image"
import { OutboundLink } from "gatsby-plugin-google-gtag"

import HubspotModal from "../../../components/HubspotModal"

const PricingHero = () => {
const [open, setOpen] = useState(false)

return (
<div className="pricing-page-top">
<div className="pricing-page-top-left">
<h1 className="product-flow-section-one-h1">
Simply priced, <br /> pay as you go
<div>
<h1>
Simply priced, pay as you go
</h1>
<p className="pricing-page-subheader-text">
<p>
Get instant back-fills without instant
bad-bills. We price predictably, on{" "}
<strong>GB of change data</strong> moved per
Expand All @@ -26,21 +30,22 @@ const PricingHero = () => {
>
Build free pipeline
</OutboundLink>
<OutboundLink
target="_blank"
href="/about/#contact-us"
<button
className="section-one-demo-button"
onClick={() => setOpen(true)}
>
Contact Us
</OutboundLink>
</button>
</div>
</div>
<div className="pricing-page-top-right">
<div className="image-container">
<StaticImage
placeholder="none"
alt="pricing logo"
src="../images/dude_desk_plant.png"
layout="fixed"
src="../../../images/dude_desk_plant.png"
width={400}
height={400}
loading="eager"
className="icon-image pricing-landing-image"
/>
</div>
Expand All @@ -53,6 +58,7 @@ const PricingHero = () => {
Build free pipeline
</OutboundLink>
</div>
<HubspotModal open={open} onClose={() => setOpen(false)} portalId="8635875" formId="698e6716-f38b-4bd5-9105-df9ba220e29b" />
</div>
)
}
Expand Down
Loading

0 comments on commit adbd473

Please sign in to comment.