Merge branch 'master' into doug-pricing-firstpass

estuary · Nov 16, 2023 · 8cfb211 · 8cfb211
2 parents a906097 + 5e068ac
commit 8cfb211
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 76 deletions.
diff --git 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
                 },
             },
         },

diff --git a/src/components/HubspotModal.tsx b/src/components/HubspotModal.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import HubspotForm from "react-hubspot-form"
+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 (
+        <Dialog
+            open={open}
+            onClose={() => onClose()}
+            keepMounted
+            fullWidth
+            className="hubspot-modal-container"
+        >
+            <DialogTitle style={{ display: 'flex', justifyContent: 'end' }}>
+                <IconButton onClick={() => onClose()}>
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent>
+                <HubspotForm portalId={portalId} formId={formId} />
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default HubspotModal
diff --git 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"
@@ -8,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 = (
     <div className="section-one-right-image">
@@ -103,36 +102,35 @@ const SectionOne = () => {
 
     const theme = useTheme();
     const isSmall = useMediaQuery(theme.breakpoints.down("sm"))
+    const [open, setOpen] = React.useState(false)
 
 
     return (
         <div className="section-one">
             <div className="section-one-wrapper">
                 <div className="section-one-left">
-                    <h1>Your data,</h1>
-                    <h1>where you <span style={{ whiteSpace: "nowrap" }}>want it,</span></h1>
-                    <h1>in <span style={{ wordBreak: "break-word", hyphens: "auto" }}>milliseconds</span></h1>
+                    <h1>Real-time ETL & CDC</h1>
+                    <h1>for apps, analytics, and AI.</h1>
+                    <h1>Up in <span style={{ wordBreak: "break-word", hyphens: "auto" }}>minutes.</span></h1>
                     <div className="section-one-subtext-wrapper">
                         <p className="section-one-subtext">
-                            Managed CDC and Real-time ETL pipelines with streaming SQL transforms.
+                            Streaming CDC with SQL and Typescript transforms, all at a fraction of the cost of the alternatives
                         </p>
-                    </div>
-                    <div style={{ display: "flex", flexShrink: 1 }}>
-                        <OutboundLink
-                            target="_blank"
-                            href="https://dashboard.estuary.dev/register"
-                            className="section-one-try-it-button"
-                        >
-                            Build a pipeline
-                        </OutboundLink>
-                        {isDesktop && !isSmall && (
+                        <div className="section-one-container-cta">
                             <OutboundLink
                                 target="_blank"
-                                href="/why"
-                                className="section-one-tour-button"
-                                style={{ marginLeft: 16 }}
-                            >Product Tour</OutboundLink>
-                        )}
+                                href="https://dashboard.estuary.dev/register"
+                                className="section-one-button"
+                            >
+                                Build a pipeline
+                            </OutboundLink>
+                            <button
+                                className="section-one-button-secondary"
+                                onClick={() => setOpen(true)}
+                            >
+                                Book Demo
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div className="section-one-right">
@@ -141,7 +139,6 @@ const SectionOne = () => {
             </div>
             <div className="custom-slides slide-container">
             <Marquee>
-
                     {logos.allStrapiVanityLogo.nodes?.map((logo) =>
                         logo.logo.localFile.internal.mediaType === "image/svg+xml" ? (
                             <div className="custom-slider" key={logo.id} >
@@ -152,21 +149,20 @@ const SectionOne = () => {
                                 />
                             </div>
                         ) : (
-                            <div className="custom-slider">
-                            <GatsbyImage
-                                key={logo.id}
-                                alt={`logo`}
-                                loading="eager"
-                                image={
-                                    logo.logo.localFile.childImageSharp.gatsbyImageData
-                                }
-                            />
+                            <div className="custom-slider" key={logo.id}>
+                                <GatsbyImage
+                                    alt={`logo`}
+                                    loading="eager"
+                                    image={
+                                        logo.logo.localFile.childImageSharp.gatsbyImageData
+                                    }
+                                />
                             </div>
                         )
                     )}
                 </Marquee>
-
             </div>
+            <HubspotModal open={open} onClose={() => setOpen(false)} portalId="8635875" formId="698e6716-f38b-4bd5-9105-df9ba220e29b" />
         </div>
     )
 }

diff --git a/src/components/TakeATour.tsx b/src/components/TakeATour.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { OutboundLink } from "gatsby-plugin-google-gtag"
+
+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 (
+        <div className="take-a-tour">
+            <OutboundLink
+                target="_blank"
+                href="/why"
+            >
+                Take a Product Tour
+            </OutboundLink>
+            <IconButton onClick={onClick}>
+                <CloseIcon color="inherit" fontSize="small" />
+            </IconButton>
+        </div>
+    )
+}
+
+export default TakeATour
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -22,10 +22,6 @@ const useNavItems = (): NavItem[] => {
             }
         }`)
     return [
-    {
-        title: "Home",
-        path: "/",
-    },
     {
         title: "Product",
         children: [
@@ -61,6 +57,10 @@ const useNavItems = (): NavItem[] => {
         title: "Pricing",
         path: "/pricing",
     },
+    {
+        title: "Connectors",
+        path: "https://estuary.dev/sources/",
+    },
     {
         title: "Resources",
         children: [
@@ -143,13 +143,12 @@ const Header = (props: { theme: "light" | "dark" }) => {
                     />
                     <h1 className={"global-header-title"}>Estuary</h1>
                 </Link>
-                <div style={{ flex: "1 2 45px" }} />
+                <div style={{ flex: "1 2 140px" }} />
                 <div className="global-header-wrapper">
                     <div className="global-header-link-wrapper">
                         {navItems.map(item => (
                             <React.Fragment key={`${item.path}-${item.title}`}>
                                 <NavMenuTopLevel item={item} />
-                                <div style={{ flex: "0 1 1rem" }} />
                             </React.Fragment>
                         ))}
                     </div>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -1,10 +1,14 @@
 import * as React from "react"
 import Header from "./header"
 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(typeof window !== 'undefined' && !!localStorage.getItem('@estuary/closeTour'))
 
-const Layout = ({headerTheme, children}: {headerTheme: "light"|"dark", children: React.ReactNode|React.ReactNode[]}) => {
   return (
     <div className="global-wrapper">
+      {showTour && !closeTour && <TakeATour onClose={() => setCloseTour(true)} />}
       <Header theme={headerTheme}/>
       <main>{children}</main>
       <Footer />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,7 +12,7 @@ import Seo from "../components/seo"
 const IndexPage = () => {
     return (
         //@ts-ignore
-        <Layout headerTheme="dark">
+        <Layout headerTheme="dark" showTour>
             <SectionOne />
             <SectionTwo />
             <SectionThree />

diff --git a/src/style.less b/src/style.less
@@ -307,7 +307,7 @@ input {
     }
 
     & .global-header-link {
-        color: #9aa8be;
+        color: #fff;
     }
 }
 
@@ -379,14 +379,15 @@ input {
 .global-header-link-wrapper {
     display: flex;
     flex-grow: 1;
+    gap: 35px;
     justify-content: flex-start;
 }
 
 .global-header-link {
     text-decoration: none;
     font-family: "Inter", sans-serif;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 600;
     font-size: 16px;
     white-space: nowrap;
     cursor: pointer;
@@ -455,8 +456,37 @@ input {
     display: none;
 }
 
+.hubspot-modal-container h2 {
+    display: flex;
+    justify-content: end;
+}
+
 /* SECTION ONE */
 
+.take-a-tour {
+    background-color: #5072EB;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    & a {
+        font-size: 12px;
+        text-decoration-line: underline;
+        color: #fff;
+    }
+
+    & button {
+        color: #fff;
+        position: absolute;
+        right: 5px;
+    }
+}
+
 .section-one {
     padding-left: ~"calc(min(9%, 146px))";
     display: flex;
@@ -490,56 +520,43 @@ input {
 
 .section-one-subtext-wrapper {
     margin-top: 40px;
-    max-width: 500px;
+    max-width: 470px;
 }
 
 .section-one-subtext {
     color: #b7c6dd;
+    line-height: 22px;
 }
 
-.section-one-try-it-button {
-    background-color: #5072eb;
-    color: #ffffff;
-    text-decoration: none;
-    border-radius: 4px;
-    padding: 10px 10px;
+.section-one-container-cta {
+    display: flex;
+    gap: 15px;
+    flex-direction: column;
+    margin-top: 60px;
 
-    @media (min-width: 811px) {
-        flex-grow: 1;
+    @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-tour-button {
+.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;
+    flex-grow: 1;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
 
-    @media (max-width: 810px) {
-        display: none;
-    }
+.section-one-button-secondary {
+    background-color: transparent;
 }
 
 .section-one-right {