Merge pull request #146 from estuary/doug-pricing-firstpass

Doug pricing firstpass

package.json

@@ -9,10 +9,11 @@
     "@fontsource/merriweather": "^4.5.14",
     "@fontsource/montserrat": "^4.5.14",
     "@loadable/component": "^5.15.3",
-    "@mui/base": "^5.0.0-alpha.121",
-    "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.13",
-    "@svgr/webpack": "^7.0.0",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/base": "^5.0.0-beta.21",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/material": "^5.14.15",
+    "@svgr/webpack": "^8.1.0",
     "@types/loadable__component": "^5.13.4",
     "@types/lunr": "^2.3.4",
     "@types/react-dom": "^18.0.11",
@@ -65,6 +66,7 @@
     "react-lunr": "^1.1.0",
     "react-player": "^2.12.0",
     "react-sticky-box": "^2.0.4",
+    "react-swipeable-views": "^0.14.0",
     "react-use-flexsearch": "^0.1.1",
     "rehype-highlight": "^6.0.0",
     "rehype-parse": "^8.0.4",

src/components/ContextTooltip.tsx

@@ -0,0 +1,45 @@
+import { styled } from "@mui/material/styles"
+import { Tooltip, TooltipProps, tooltipClasses } from "@mui/material"
+import React, { useState } from "react"
+
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: "#70D3D6",
+        color: "#3F3F46",
+        maxWidth: 320,
+        fontSize: theme.typography.pxToRem(15),
+        border: "1px solid #dadde9",
+        padding: "20px",
+        textAlign: "center"
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        color: "#70D3D6",
+        "&::before": {
+            border: "1px solid #dadde9",
+        }
+    },
+}))
+
+export const ContextToolTip = React.forwardRef((props: TooltipProps) => {
+    const [open, setOpen] = useState(false)
+
+    const handleTooltipClose = () => {
+        setOpen(false)
+    }
+
+    const handleTooltipOpen = () => {
+        setOpen(true)
+    }
+
+    return (
+        <HtmlTooltip
+            open={open}
+            onClick={handleTooltipOpen}
+            onClose={handleTooltipClose}
+            arrow
+            {...props}
+        />
+    )
+})

src/components/PlanTabs.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import PricingCloud from "../svgs/cloud-pricing.svg"
+import PricingOpenSource from "../svgs/pricing-open-source-black.svg"
+import BlackCheckmark from "../svgs/checkmark-black.svg"
+import WhiteCheckmark from "../svgs/light-checkmark.svg"
+import { Link } from "gatsby"
+import { OutboundLink } from "gatsby-plugin-google-gtag"
+
+
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+CustomTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function BasicTabs() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const ChecklistItem = ({ children, white = false }) => (
+    <div className="pricing-page-checklist-item">
+      {white ? (
+        <>
+          <WhiteCheckmark className="pricing-page-tile-checkmark-image" />
+          <p className="pricing-page-tile-checklist-item-text text-white">{children}</p>
+        </>
+      ) : (
+        <>
+          <BlackCheckmark className="pricing-page-tile-checkmark-image" />
+          <p className="pricing-page-tile-checklist-item-text">{children}</p>
+        </>
+      )}
+    </div>
+  )
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="pricing plan tabs">
+          <Tab
+            icon={<PricingOpenSource className="pricing-page-tile-icon" />}
+            label="Free"
+            {...a11yProps(0)}
+          />
+          <Tab icon={<PricingCloud />} label="Cloud" {...a11yProps(1)} />
+          <Tab icon={<PricingCloud />} label="Enterprise" {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        <div className="pricing-page-tile">
+          <div className="pricing-page-checklist-wrapper">
+            <ChecklistItem>
+              Up to 10GB / mo for any 2 connectors
+            </ChecklistItem>
+            <ChecklistItem>
+              Millisecond Latency
+            </ChecklistItem>
+            <ChecklistItem>
+              UI & CLI for building & monitoring pipelines
+            </ChecklistItem>
+            <ChecklistItem>
+              Limited Data Retention in Estuary Cloud
+            </ChecklistItem>
+            <ChecklistItem>
+              Incremental Syncing for lower CDC cost
+            </ChecklistItem>
+            <ChecklistItem>
+              Streaming Infrastructure
+            </ChecklistItem>
+          </div>
+          <Link
+            className="pricing-page-tile-button"
+            to="https://github.com/estuary/flow"
+          >
+            Get started
+          </Link>
+        </div>
+      </CustomTabPanel>
+      <CustomTabPanel style={{ backgroundColor: "#5072EB" }} value={value} index={1}>
+        <div className="pricing-page-checklist-wrapper">
+          <ChecklistItem white>
+            $1/GB change data moved +$.14/hour/connector
+          </ChecklistItem>
+          <ChecklistItem white>All features of Free plan, plus... </ChecklistItem>
+          <ChecklistItem white>
+            Data stored in your cloud
+          </ChecklistItem>
+          <ChecklistItem white>99.9% uptime SLA</ChecklistItem>
+
+
+          <ChecklistItem white>
+            Unlimited Connectors
+          </ChecklistItem>
+          <ChecklistItem white>
+            9x5 Customer Support via Slack/Email
+          </ChecklistItem>
+        </div>
+        <OutboundLink
+          target="_blank"
+          href="https://dashboard.estuary.dev/register"
+          className="pricing-page-tile-button-white"
+        >
+          Try it free
+        </OutboundLink>
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        <div className="pricing-page-checklist-wrapper-custom">
+          <ChecklistItem>
+            All features of Free + Cloud, plus...
+          </ChecklistItem>
+          <ChecklistItem>
+            SOC2 & HIPPA Certificates
+          </ChecklistItem>
+          <ChecklistItem>
+            Customer Success Manager
+          </ChecklistItem>
+          <ChecklistItem>
+            24x7 support available
+          </ChecklistItem>
+          <ChecklistItem>
+            Provisioned servers
+          </ChecklistItem>
+
+        </div>
+        <Link
+          className="pricing-page-tile-button"
+          to="/about#contact-us"
+        >
+          Contact us
+        </Link>
+      </CustomTabPanel>
+    </Box>
+  );
+}