From 37cd73bebdc4445d1a58b0c0f29c2626b7f12d19 Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Tue, 14 Nov 2023 17:50:59 -0300 Subject: [PATCH 01/11] feat: add take a tour component to the template --- src/components/TakeATour.tsx | 17 +++++++++++++++++ src/components/layout.tsx | 4 +++- src/pages/index.tsx | 2 +- src/style.less | 15 +++++++++++++++ 4 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/components/TakeATour.tsx diff --git a/src/components/TakeATour.tsx b/src/components/TakeATour.tsx new file mode 100644 index 00000000..e5de4fa1 --- /dev/null +++ b/src/components/TakeATour.tsx @@ -0,0 +1,17 @@ +import * as React from "react" +import { OutboundLink } from "gatsby-plugin-google-gtag" + +const TakeATour = () => { + return ( +
+ + Take a Product Tour + +
+ ) +} + +export default TakeATour diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 74cf2f32..e6556325 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -1,10 +1,12 @@ import * as React from "react" import Header from "./header" import Footer from "./footer" +import TakeATour from "./TakeATour" -const Layout = ({headerTheme, children}: {headerTheme: "light"|"dark", children: React.ReactNode|React.ReactNode[]}) => { +const Layout = ({headerTheme, showTour, children}: {headerTheme: "light"|"dark", showTour: boolean, children: React.ReactNode|React.ReactNode[]}) => { return (
+ {showTour && }
{children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5c853626..b9bca3a4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,7 +12,7 @@ import Seo from "../components/seo" const IndexPage = () => { return ( //@ts-ignore - + diff --git a/src/style.less b/src/style.less index 63dbab63..c12fcf92 100644 --- a/src/style.less +++ b/src/style.less @@ -458,6 +458,21 @@ input { /* SECTION ONE */ +.take-a-tour { + background-color: #757575; + height: 41px; + + & a { + text-decoration-line: underline; + color: #fff; + display: flex; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + } +} + .section-one { padding-left: ~"calc(min(9%, 146px))"; display: flex; From 2262a509f6cbd5403f13a4c623d300cbf6a609e4 Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Tue, 14 Nov 2023 17:52:54 -0300 Subject: [PATCH 02/11] fix: change key to the container div --- src/components/SectionOne.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/SectionOne.tsx b/src/components/SectionOne.tsx index 4beece25..29910bc3 100644 --- a/src/components/SectionOne.tsx +++ b/src/components/SectionOne.tsx @@ -141,7 +141,6 @@ const SectionOne = () => {
- {logos.allStrapiVanityLogo.nodes?.map((logo) => logo.logo.localFile.internal.mediaType === "image/svg+xml" ? (
@@ -152,20 +151,18 @@ const SectionOne = () => { />
) : ( -
- +
+
) )}
-
) From d314de7de9ae601837e1c17eb12fd08ac713e64d Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 13:58:49 -0300 Subject: [PATCH 03/11] feat: change button to book demo, change taglines --- src/components/SectionOne.tsx | 15 ++++++++------- src/style.less | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/SectionOne.tsx b/src/components/SectionOne.tsx index 29910bc3..c325c208 100644 --- a/src/components/SectionOne.tsx +++ b/src/components/SectionOne.tsx @@ -1,5 +1,4 @@ import * as React from "react" -import { Link } from "gatsby" import { isDesktop, isMobile } from "react-device-detect" import { useStaticQuery, graphql } from "gatsby" import { GatsbyImage, StaticImage } from "gatsby-plugin-image" @@ -109,12 +108,12 @@ const SectionOne = () => {
-

Your data,

-

where you want it,

-

in milliseconds

+

Real-time ETL & DCD

+

for apps, analytics, and AI.

+

Up in minutes.

- Managed CDC and Real-time ETL pipelines with streaming SQL transforms. + Real-time ETL & CDC, with native streaming and batch SQL and Typescript, at a fraction of the cost

@@ -129,9 +128,11 @@ const SectionOne = () => { Product Tour + > + Book Demo + )}
diff --git a/src/style.less b/src/style.less index c12fcf92..5c82f4cf 100644 --- a/src/style.less +++ b/src/style.less @@ -533,7 +533,7 @@ input { font-size: 18px; } -.section-one-tour-button { +.section-one-book-demo { border: 2px solid #5072eb; color: #ffffff; text-decoration: none; From 827dfc81bbd5a85213ae4b38926324987dad726f Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 15:52:47 -0300 Subject: [PATCH 04/11] feat: add hubspot modal to the section one --- src/components/HubspotModal.tsx | 29 +++++++++++++++ src/components/SectionOne.tsx | 30 +++++++-------- src/style.less | 65 +++++++++++++++++---------------- 3 files changed, 77 insertions(+), 47 deletions(-) create mode 100644 src/components/HubspotModal.tsx diff --git a/src/components/HubspotModal.tsx b/src/components/HubspotModal.tsx new file mode 100644 index 00000000..c4f32a80 --- /dev/null +++ b/src/components/HubspotModal.tsx @@ -0,0 +1,29 @@ +import * as React from "react" + +import HubspotForm from "react-hubspot-form" +import { Dialog, DialogContent, DialogTitle } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; + +const HubspotModal = ({ open, onClose, portalId, formId }) => { + return ( + onClose()} + keepMounted + fullWidth + className="hubspot-modal-container" + > + + onClose()}> + + + + + + + + ) +} + +export default HubspotModal diff --git a/src/components/SectionOne.tsx b/src/components/SectionOne.tsx index c325c208..e0ae961b 100644 --- a/src/components/SectionOne.tsx +++ b/src/components/SectionOne.tsx @@ -7,7 +7,7 @@ import { useMediaQuery, useTheme } from "@mui/material" import { OutboundLink } from "gatsby-plugin-google-gtag" import Marquee from "react-fast-marquee"; - +import HubspotModal from "./HubspotModal" const animFallback = (
@@ -102,6 +102,7 @@ const SectionOne = () => { const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down("sm")) + const [open, setOpen] = React.useState(false) return ( @@ -115,25 +116,21 @@ const SectionOne = () => {

Real-time ETL & CDC, with native streaming and batch SQL and Typescript, at a fraction of the cost

-
-
- - Build a pipeline - - {isDesktop && !isSmall && ( +
- Book Demo + Build a pipeline - )} + +
@@ -165,6 +162,7 @@ const SectionOne = () => { )}
+ setOpen(false)} portalId="8635875" formId="698e6716-f38b-4bd5-9105-df9ba220e29b" />
) } diff --git a/src/style.less b/src/style.less index 5c82f4cf..ae784561 100644 --- a/src/style.less +++ b/src/style.less @@ -456,13 +456,19 @@ input { display: none; } +.hubspot-modal-container h2 { + display: flex; + justify-content: end; +} + /* SECTION ONE */ .take-a-tour { background-color: #757575; - height: 41px; + height: 35px; & a { + font-size: 14px; text-decoration-line: underline; color: #fff; display: flex; @@ -471,6 +477,14 @@ input { justify-content: center; align-items: center; } + + @media (min-width: 900px) { + height: 41px; + + & a { + font-size: 22px; + } + } } .section-one { @@ -513,45 +527,34 @@ input { color: #b7c6dd; } -.section-one-try-it-button { - background-color: #5072eb; - color: #ffffff; - text-decoration: none; - border-radius: 4px; - padding: 10px 10px; - @media (min-width: 811px) { - flex-grow: 1; +.section-one-container-cta { + display: flex; + gap: 15px; + flex-direction: column; + + @media (min-width: 600px) { + flex-direction: row; } - min-width: 100px; - height: 60px; - text-align: center; - line-height: 40px; - margin-top: 8px; - font-family: "Inter", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; } -.section-one-book-demo { +.section-one-button, .section-one-button-secondary { border: 2px solid #5072eb; + background-color: #5072eb; color: #ffffff; text-decoration: none; border-radius: 4px; - padding: 10px 10px; - flex-grow: 1; - min-width: 100px; - height: 60px; - text-align: center; - line-height: 40px; - margin-top: 8px; - font-family: "Inter", sans-serif; - font-style: normal; font-weight: 400; font-size: 18px; - @media (max-width: 810px) { - display: none; - } + flex-grow: 1; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.section-one-button-secondary { + background-color: transparent; } .section-one-right { From 1ddad183834ab309512f0273f7140c2d337edf7f Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 15:53:10 -0300 Subject: [PATCH 05/11] fix: changed gatsby-config-plugin --- gatsby-config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index 1b71843d..4e020be2 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -372,7 +372,7 @@ const cfg: GatsbyConfig = { resolve: "gatsby-plugin-react-svg", options: { rule: { - include: /src\/svgs/, // See below to configure properly + include: /svgs/, // See below to configure properly }, }, }, @@ -384,6 +384,7 @@ const cfg: GatsbyConfig = { // refetchInterval: 60, // Refetch data every 60 seconds }, }, + `gatsby-plugin-material-ui`, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, // { From 46b05aefaa0a17649e8a0ea190f9b78f32ddfcdc Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 15:59:32 -0300 Subject: [PATCH 06/11] fix: remove gatsby-plugin-material-ui --- gatsby-config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index 4e020be2..caa3f8b2 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -384,7 +384,6 @@ const cfg: GatsbyConfig = { // refetchInterval: 60, // Refetch data every 60 seconds }, }, - `gatsby-plugin-material-ui`, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, // { From 49f8dff4d6aa74ac6f9fd7fb998d2d5efad9a6d2 Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 16:46:27 -0300 Subject: [PATCH 07/11] fix: DCD to CDC tagline --- src/components/SectionOne.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SectionOne.tsx b/src/components/SectionOne.tsx index e0ae961b..8bc372d4 100644 --- a/src/components/SectionOne.tsx +++ b/src/components/SectionOne.tsx @@ -109,7 +109,7 @@ const SectionOne = () => {
-

Real-time ETL & DCD

+

Real-time ETL & CDC

for apps, analytics, and AI.

Up in minutes.

From b85955993fa4e172ff8cd06e5daf13a6b6409f52 Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 17:40:34 -0300 Subject: [PATCH 08/11] feat: change showTour to optional --- src/components/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index e6556325..bc326453 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -3,7 +3,7 @@ import Header from "./header" import Footer from "./footer" import TakeATour from "./TakeATour" -const Layout = ({headerTheme, showTour, children}: {headerTheme: "light"|"dark", showTour: boolean, children: React.ReactNode|React.ReactNode[]}) => { +const Layout = ({headerTheme, showTour = false, children}: {headerTheme: "light"|"dark", showTour?: boolean, children: React.ReactNode|React.ReactNode[]}) => { return (
{showTour && } From d56e566b0f13a6d1b005cd529caa31cd749fc076 Mon Sep 17 00:00:00 2001 From: Flavio Riper Date: Wed, 15 Nov 2023 20:41:07 -0300 Subject: [PATCH 09/11] feat: add close action to take a tour --- src/components/HubspotModal.tsx | 8 +++++--- src/components/TakeATour.tsx | 13 ++++++++++++- src/components/layout.tsx | 4 +++- src/style.less | 28 ++++++++++++++-------------- 4 files changed, 34 insertions(+), 19 deletions(-) diff --git a/src/components/HubspotModal.tsx b/src/components/HubspotModal.tsx index c4f32a80..86da04a3 100644 --- a/src/components/HubspotModal.tsx +++ b/src/components/HubspotModal.tsx @@ -1,9 +1,11 @@ import * as React from "react" import HubspotForm from "react-hubspot-form" -import { Dialog, DialogContent, DialogTitle } from '@mui/material'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; +import Dialog from '@mui/material/Dialog' +import DialogContent from '@mui/material/DialogContent' +import DialogTitle from '@mui/material/DialogTitle' +import IconButton from '@mui/material/IconButton' +import CloseIcon from '@mui/icons-material/Close' const HubspotModal = ({ open, onClose, portalId, formId }) => { return ( diff --git a/src/components/TakeATour.tsx b/src/components/TakeATour.tsx index e5de4fa1..c5cfb50f 100644 --- a/src/components/TakeATour.tsx +++ b/src/components/TakeATour.tsx @@ -1,7 +1,15 @@ import * as React from "react" import { OutboundLink } from "gatsby-plugin-google-gtag" -const TakeATour = () => { +import IconButton from '@mui/material/IconButton' +import CloseIcon from '@mui/icons-material/Close' + +const TakeATour = ({ onClose }) => { + const onClick = () => { + localStorage.setItem('@estuary/closeTour', "1") + onClose?.() + } + return (
{ > Take a Product Tour + + +
) } diff --git a/src/components/layout.tsx b/src/components/layout.tsx index bc326453..24d9e175 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -4,9 +4,11 @@ import Footer from "./footer" import TakeATour from "./TakeATour" const Layout = ({headerTheme, showTour = false, children}: {headerTheme: "light"|"dark", showTour?: boolean, children: React.ReactNode|React.ReactNode[]}) => { + const [closeTour, setCloseTour] = React.useState(!!localStorage.getItem('@estuary/closeTour')) + return (
- {showTour && } + {showTour && !closeTour && setCloseTour(true)} />}
{children}