Home page updates

src/components/Advantages/index.tsx

@@ -13,7 +13,7 @@ import {
 } from './styles.module.less';
 
 type AdvantagesProps = {
-    icon: ReactNode;
+    icon?: ReactNode;
     image?: ReactNode;
     title: ReactNode;
     subtitle?: string;
@@ -44,7 +44,9 @@ const Advantages = ({
             isReverseColumnOnMobile={isReverseColumnOnMobile}
         >
             <div className={clsx(leftColumn, isDarkTheme ? darkTheme : null)}>
-                <div className={iconWrapper}>{icon}</div>
+                {icon && !isDarkTheme ? (
+                    <div className={iconWrapper}>{icon}</div>
+                ) : null}
                 <h2>{title}</h2>
                 {subtitle ? <p>{subtitle}</p> : null}
                 {advantages ? (

src/components/DeploymentOptions/DeploymentOptionDiagram/index.tsx

@@ -25,7 +25,7 @@ import {
     privateDeploymentTag,
     metadataOnlyDarkerBlueTag,
     relativePosition,
-    privateDeploymentVpcBox,
+    ownedByEstuaryBox,
 } from './styles.module.less';
 
 const iconSize = 30;
@@ -86,22 +86,28 @@ const DeploymentOptionDiagram = ({
                             : 'Customer Cloud & Region'}
                     </span>
                     <div className={horizontalWrapper}>
-                        {deploymentOption === 'private' ? (
+                        {['private', 'byoc'].includes(deploymentOption) ? (
                             <div
                                 className={clsx(
                                     solidBorderBox,
                                     secondLevelSolidBorderBox
                                 )}
                             >
-                                <VpcIcon width={iconSize} />
-                                <span
+                                <div
                                     className={clsx(
-                                        privateDeploymentVpcBox,
-                                        vpcMarginBottom
+                                        dashedBorderBox,
+                                        ownedByEstuaryBox
                                     )}
                                 >
-                                    Private Deployment VPC
-                                </span>
+                                    <span>
+                                        Owned by <br />{' '}
+                                        {deploymentOption === 'private'
+                                            ? 'Estuary'
+                                            : 'Customer'}
+                                    </span>
+                                </div>
+                                <VpcIcon width={iconSize} />
+                                <span>Private Deployment VPC</span>
                                 <div className={dashedBorderBox}>
                                     <PrivateDataPlaneIcon width={iconSize} />
                                     <span>Private Data Plane</span>
@@ -117,22 +123,16 @@ const DeploymentOptionDiagram = ({
                             <VpcIcon width={iconSize} />
                             <span
                                 className={
-                                    deploymentOption === 'private'
+                                    ['private', 'byoc'].includes(
+                                        deploymentOption
+                                    )
                                         ? vpcMarginBottom
                                         : null
                                 }
                             >
                                 Customer VPC
                             </span>
                             <div className={horizontalWrapper}>
-                                {deploymentOption === 'byoc' ? (
-                                    <div className={dashedBorderBox}>
-                                        <PrivateDataPlaneIcon
-                                            width={iconSize}
-                                        />
-                                        <span>Private Data Plane</span>
-                                    </div>
-                                ) : null}
                                 <div
                                     className={clsx(
                                         solidBorderBox,
@@ -150,18 +150,14 @@ const DeploymentOptionDiagram = ({
                         </div>
                     </div>
                 </div>
-                {['public', 'byoc'].includes(deploymentOption) ? (
+                {deploymentOption === 'public' ? (
                     <div className={middleTag}>
                         <div className={clsx(tagArrow, tagArrowLeft)} />
-                        <span>
-                            {deploymentOption === 'public'
-                                ? 'Internet'
-                                : 'metadata only'}
-                        </span>
+                        <span>Internet</span>
                         <div className={clsx(tagArrow, tagArrowRight)} />
                     </div>
                 ) : null}
-                {deploymentOption === 'private' ? (
+                {['private', 'byoc'].includes(deploymentOption) ? (
                     <>
                         <div
                             className={clsx(

src/components/DeploymentOptions/DeploymentOptionDiagram/styles.module.less

@@ -44,11 +44,6 @@
   }
 
   @media (max-width: 600px) {
-    gap: 10px;
-    padding: 10px;
-  }
-
-  @media (max-width: 450px) {
     gap: 6px;
     padding: 6px;
   }
@@ -78,11 +73,6 @@
   height: 100%;
 
   @media (max-width: 600px) {
-    gap: 10px;
-    padding: 10px;
-  }
-
-  @media (max-width: 450px) {
     gap: 6px;
     padding: 6px;
   }
@@ -101,7 +91,7 @@
 .middleTag {
   position: absolute;
   top: 46%;
-  left: -55%;
+  left: -50%;
   text-align: center;
   display: flex;
   align-items: center;
@@ -163,10 +153,6 @@
   gap: 16px;
 
   @media (max-width: 600px) {
-    gap: 10px;
-  }
-
-  @media (max-width: 450px) {
     gap: 6px;
   }
 }
@@ -180,11 +166,12 @@
 }
 
 .privateLinkTag {
-  top: 41%;
-  left: -2%;
+  top: 39%;
+  left: 6%;
 
   @media (max-width: 600px) {
-    top: 44.5%;
+    top: 42%;
+    left: 10%;
   }
 }
 
@@ -197,7 +184,7 @@
 }
 
 .metadataOnlyDarkerBlueTag {
-  top: 85%;
+  top: 70%;
 
   span {
     background-color: @secondaryTagColor;
@@ -212,6 +199,9 @@
   }
 
   @media (max-width: 600px) {
+    left: -60%;
+    top: 89%;
+
     span {
       min-width: 80px;
     }
@@ -222,10 +212,12 @@
   position: relative;
 }
 
-.privateDeploymentVpcBox {
-  margin-bottom: 26px;
+.ownedByEstuaryBox {
+  border-radius: 100px;
+  height: fit-content;
+  padding: 8px;
 
-  @media (max-width: 600px) {
-    margin-bottom: 25px;
+  @media (min-width: 601px) {
+    min-width: 100px;
   }
-}
+}

src/components/DeploymentOptions/styles.module.less

@@ -16,6 +16,12 @@
     }
   }
 
+  @media (max-width: 1280px) and (min-width: 1025px) {
+    > :nth-child(1) {
+      max-width: 60%;
+    }
+  }
+
   @media (max-width: 1024px) {
     h2 {
       font-size: 2.25rem;
@@ -40,4 +46,4 @@
     max-width: 220px;
     margin-top: 16px;
   }
-}
+}

src/components/DeploymentOptionsPage/ByocDeployment/index.tsx

@@ -1,14 +1,15 @@
+import clsx from 'clsx';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
 import DeploymentOptionDetails from '../../DeploymentOptions/DeploymentOptionDetails';
 import { features } from '../shared';
-import { container } from '../styles.module.less';
+import { container, adaptedContainer } from '../styles.module.less';
 import DeploymentOptionDiagram from '../../DeploymentOptions/DeploymentOptionDiagram';
 import Container from '../../Container';
 
 const ByocDeployment = () => {
     return (
         <section className={defaultWrapperGrey}>
-            <Container className={container}>
+            <Container className={clsx(container, adaptedContainer)}>
                 <DeploymentOptionDiagram deploymentOption="byoc" />
                 <DeploymentOptionDetails
                     title="BRING YOUR OWN CLOUD"

src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx

@@ -1,14 +1,18 @@
+import clsx from 'clsx';
 import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
 import DeploymentOptionDetails from '../../DeploymentOptions/DeploymentOptionDetails';
 import { features } from '../shared';
-import { container } from '../styles.module.less';
+import { container, reverseAdaptedContainer } from '../styles.module.less';
 import DeploymentOptionDiagram from '../../DeploymentOptions/DeploymentOptionDiagram';
 import Container from '../../Container';
 
 const PrivateDeployment = () => {
     return (
         <section className={defaultWrapperDark}>
-            <Container isReverseColumnOnMobile className={container}>
+            <Container
+                isReverseColumnOnMobile
+                className={clsx(container, reverseAdaptedContainer)}
+            >
                 <DeploymentOptionDetails
                     title="PRIVATE DEPLOYMENT"
                     description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data."

src/components/DeploymentOptionsPage/PublicDeployment/index.tsx

@@ -1,14 +1,15 @@
+import clsx from 'clsx';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
 import DeploymentOptionDetails from '../../DeploymentOptions/DeploymentOptionDetails';
 import { features } from '../shared';
-import { container } from '../styles.module.less';
+import { container, adaptedContainer } from '../styles.module.less';
 import DeploymentOptionDiagram from '../../DeploymentOptions/DeploymentOptionDiagram';
 import Container from '../../Container';
 
 const PublicDeployment = () => {
     return (
         <section className={defaultWrapperGrey}>
-            <Container className={container}>
+            <Container className={clsx(container, adaptedContainer)}>
                 <DeploymentOptionDiagram deploymentOption="public" />
                 <DeploymentOptionDetails
                     title="PUBLIC DEPLOYMENT"

src/components/DeploymentOptionsPage/styles.module.less

@@ -16,3 +16,19 @@
     }
   }
 }
+
+.adaptedContainer {
+  @media (max-width: 1280px) and (min-width: 1025px) {
+    > :nth-child(1) {
+      max-width: 60%;
+    }
+  }
+}
+
+.reverseAdaptedContainer {
+  @media (max-width: 1280px) and (min-width: 1025px) {
+    > :nth-child(2) {
+      max-width: 60%;
+    }
+  }
+}

src/components/HeaderNavbar/Resources/index.tsx

@@ -107,28 +107,24 @@ const HeaderNavbarResources = ({ active, setActive }) => {
                         <CardItem title="READ" items={read} onlyContent />
                         <CardItem title="LISTEN" items={listen} onlyContent />
                     </div>
-                    <CardItem
-                        className={hideOnMobile}
-                        title="TOURS"
-                        onlyContent
-                    >
-                        <Carousel aria-label="Tours carousel" hasFullWidthSlide>
-                            <div key="header-carousel-tour-1" className={slide}>
+                    <CardItem className={hideOnMobile} title="DEMO" onlyContent>
+                        <Carousel aria-label="Demos carousel" hasFullWidthSlide>
+                            <div key="header-carousel-demo-1" className={slide}>
                                 <div className={imageWrapper}>
                                     <StaticImage
                                         src="../../../images/product-tour-2min.png"
-                                        alt="Estuary Flow Product tour - 2 minutes"
+                                        alt="Estuary Flow Product demo"
                                     />
                                 </div>
                                 <LinkOutlined
                                     target="_blank"
                                     href="/demo/"
                                     fullWidth
                                 >
-                                    Watch Product Tour (2 min)
+                                    Watch Interactive Demo
                                 </LinkOutlined>
                             </div>
-                            <div key="header-carousel-tour-2" className={slide}>
+                            <div key="header-carousel-demo-2" className={slide}>
                                 <div className={imageWrapper}>
                                     <StaticImage
                                         src="../../../images/real-time-101-30min.png"

src/components/HeaderNavbar/Resources/items.tsx

@@ -68,9 +68,9 @@ export const listen = [
     },
 ];
 
-export const tours = [
+export const demo = [
     {
-        name: 'Product Tour [2 min]',
+        name: 'Watch Interactive Demo',
         to: '/demo/',
     },
     {

src/components/HeaderNavbar/index.tsx

@@ -1,7 +1,6 @@
 import { Link } from 'gatsby';
 import { useCallback } from 'react';
 import { globalHeaderLink } from '../styles.module.less';
-import OutboundLink from '../LinksAndButtons/OutboundLink';
 import LinkProduct from './Product';
 import LinkResources from './Resources';
 import { globalHeaderLinks } from './styles.module.less';
@@ -33,14 +32,6 @@ const HeaderNavbar = ({ activeMenu, setActiveMenu }) => {
                 active={activeMenu === 'resources'}
                 setActive={setActiveMenu}
             />
-            <OutboundLink
-                target="_blank"
-                className={globalHeaderLink}
-                href="https://docs.estuary.dev"
-                onMouseEnter={closeMenus}
-            >
-                Docs
-            </OutboundLink>
         </div>
     );
 };

src/components/HeroSectionActions/RegisterCta.tsx

@@ -4,7 +4,7 @@ import OutboundLinkFilled from '../LinksAndButtons/OutboundLinkFilled';
 function RegisterCta() {
     return (
         <OutboundLinkFilled href={dashboardRegisterUrl} target="_blank">
-            Build a Pipeline
+            Start Building For Free
         </OutboundLinkFilled>
     );
 }