Create deployment options page (#543)

* Add section one * Add title and meta description of the page * Update the hero image alt text * Add the three deployment option sections * Replace the selectedTab prop name with deploymentOption names for a better semantic * Add some tweaks * Make the headings dynamic * Replace the names of the section components to more semantic ones * Add comparison table section * Make deployment option sections responsible for mobile screen width * Make hero section responsible for mobile screen width * Replace the hero image with HTML+CSS * Add missing icons to the hero image * Fix the section component names from the home, product, and pricing pages * Add deployment options menu item below product link button and refactor part of the menu code * Create a container component and add it to deployment options page * Fix DeploymentOption typing --------- Co-authored-by: Breno <[email protected]>
estuary · Oct 25, 2024 · f531fd0 · f531fd0
1 parent edef63f
commit f531fd0
Show file tree

Hide file tree

Showing 104 changed files with 1,387 additions and 619 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -238,6 +238,7 @@ const cfg: GatsbyConfig = {
                                 `500`,
                                 `600`,
                                 `700`,
+                                `900`,
                             ],
                         },
                     ],

diff --git a/shared.ts b/shared.ts
@@ -1,3 +1,5 @@
+import { features } from './src/components/DeploymentOptionsPage/shared';
+
 export const webinarsUrl =
     'https://try.estuary.dev/webinar-estuary101-ondemand';
 
@@ -144,3 +146,5 @@ export interface Vendor {
         };
     };
 }
+
+export type DeploymentOption = keyof typeof features;
diff --git a/src/components/ContactUs/index.tsx b/src/components/ContactUs/index.tsx
diff --git a/...components/ContactUs/SectionTwo/index.tsx → ...omponents/ContactUsPage/Address/index.tsx b/...components/ContactUs/SectionTwo/index.tsx → ...omponents/ContactUsPage/Address/index.tsx
@@ -11,7 +11,7 @@ import {
     address,
 } from './styles.module.less';
 
-const SectionTwo = () => {
+const Address = () => {
     const {
         streetAddress,
         addressLocality,
@@ -39,4 +39,4 @@ const SectionTwo = () => {
     );
 };
 
-export default SectionTwo;
+export default Address;
diff --git a/...s/ContactUs/SectionTwo/styles.module.less → .../ContactUsPage/Address/styles.module.less b/...s/ContactUs/SectionTwo/styles.module.less → .../ContactUsPage/Address/styles.module.less
diff --git a/...components/ContactUs/SectionOne/index.tsx → ...nents/ContactUsPage/FormSection/index.tsx b/...components/ContactUs/SectionOne/index.tsx → ...nents/ContactUsPage/FormSection/index.tsx
@@ -7,7 +7,7 @@ import {
     redirectLink,
 } from './styles.module.less';
 
-const SectionOne = () => {
+const FormSection = () => {
     return (
         <section className={section}>
             <ContactUsForm titleHeadingLevel="h1" />
@@ -26,4 +26,4 @@ const SectionOne = () => {
     );
 };
 
-export default SectionOne;
+export default FormSection;
diff --git a/...s/ContactUs/SectionOne/styles.module.less → ...tactUsPage/FormSection/styles.module.less b/...s/ContactUs/SectionOne/styles.module.less → ...tactUsPage/FormSection/styles.module.less
diff --git a/...mponents/ContactUs/SectionThree/index.tsx → ...mponents/ContactUsPage/GetEmail/index.tsx b/...mponents/ContactUs/SectionThree/index.tsx → ...mponents/ContactUsPage/GetEmail/index.tsx
@@ -4,7 +4,7 @@ import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
 import { dashboardRegisterUrl } from '../../../../shared';
 import { container, title } from './styles.module.less';
 
-const SectionThree = () => {
+const GetEmail = () => {
     return (
         <section className={defaultWrapperDark}>
             <div className={container}>
@@ -21,4 +21,4 @@ const SectionThree = () => {
     );
 };
 
-export default SectionThree;
+export default GetEmail;
diff --git a/...ContactUs/SectionThree/styles.module.less → ...ContactUsPage/GetEmail/styles.module.less b/...ContactUs/SectionThree/styles.module.less → ...ContactUsPage/GetEmail/styles.module.less
diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import { container, vertical } from './styles.module.less';
+
+interface ContainerProps {
+    children: ReactNode;
+    className?: string;
+    isVertical?: boolean;
+}
+
+const Container = ({ children, className, isVertical }: ContainerProps) => {
+    return (
+        <div
+            className={clsx(container, className, isVertical ? vertical : null)}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Container;
diff --git a/src/components/Container/styles.module.less b/src/components/Container/styles.module.less
@@ -0,0 +1,39 @@
+@import '../../globalStyles/sections.module.less';
+
+.container {
+  .globalMaxWidth;
+  display: flex;
+  gap: 60px;
+  align-items: center;
+  justify-content: space-between;
+
+  > :nth-child(1),
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 50%;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column-reverse;
+    gap: 40px;
+
+    > :nth-child(1),
+    > :nth-child(2) {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 425px) {
+    gap: 20px;
+  }
+}
+
+.vertical {
+  flex-direction: column;
+
+  > :nth-child(1),
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 100%;
+  }
+}
diff --git a/...ntModes/DeploymentOptionDetails/index.tsx → ...ponents/DeploymentOptionDetails/index.tsx b/...ntModes/DeploymentOptionDetails/index.tsx → ...ponents/DeploymentOptionDetails/index.tsx
@@ -1,23 +1,29 @@
 import React from 'react';
-import KeyFeature from '../KeyFeature';
+import KeyFeature from '../Homepage/DeploymentModes/KeyFeature';
 import { wrapper } from './styles.module.less';
 
 interface DeploymentOptionDetailsProps {
     title: string;
     description: string;
     keyFeatures: string[];
+    TitleHeadingLevel?: keyof JSX.IntrinsicElements;
+    KeyFeaturesTitleHeadingLevel?: keyof JSX.IntrinsicElements;
 }
 
 const DeploymentOptionDetails = ({
     title,
     description,
     keyFeatures,
+    TitleHeadingLevel = 'h3',
+    KeyFeaturesTitleHeadingLevel = 'h4',
 }: DeploymentOptionDetailsProps) => {
     return (
         <div className={wrapper}>
-            <h3>{title}</h3>
+            <TitleHeadingLevel>{title}</TitleHeadingLevel>
             <p>{description}</p>
-            <h4>Key Features:</h4>
+            <KeyFeaturesTitleHeadingLevel>
+                Key Features:
+            </KeyFeaturesTitleHeadingLevel>
             <ul>
                 {keyFeatures.map((keyFeature, index) => (
                     <KeyFeature key={index} title={keyFeature} />

diff --git a/...eploymentOptionDetails/styles.module.less → ...eploymentOptionDetails/styles.module.less b/...eploymentOptionDetails/styles.module.less → ...eploymentOptionDetails/styles.module.less
@@ -4,9 +4,12 @@
   gap: 16px;
   font-size: 1rem;
 
-  h3 {
+  h2, h3 {
     font-size: 1.25rem;
     line-height: 24px;
+    color: #47506D;
+    text-transform: uppercase;
+    font-weight: 700;
   }
 
   p {

diff --git a/...ntModes/DeploymentOptionDiagram/index.tsx → ...ponents/DeploymentOptionDiagram/index.tsx b/...ntModes/DeploymentOptionDiagram/index.tsx → ...ponents/DeploymentOptionDiagram/index.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import clsx from 'clsx';
-import CloudProviderIcon from '../../../../svgs/cloud-provider-icon.svg';
-import CustomerCloudIcon from '../../../../svgs/customer-cloud-icon.svg';
-import ControlPlaneIcon from '../../../../svgs/control-plane-icon.svg';
-import VpcIcon from '../../../../svgs/vpc-icon.svg';
-import DatabaseIcon from '../../../../svgs/database-icon.svg';
-import FlowStorageIcon from '../../../../svgs/flow-storage-icon.svg';
-import UsaFlagIcon from '../../../../svgs/usa-flag-icon.svg';
-import EuropeFlagIcon from '../../../../svgs/europe-flag-icon.svg';
-import PrivateDataPlaneIcon from '../../../../svgs/private-data-plane-icon.svg';
+import CloudProviderIcon from '../../svgs/cloud-provider-icon.svg';
+import CustomerCloudIcon from '../../svgs/customer-cloud-icon.svg';
+import ControlPlaneIcon from '../../svgs/control-plane-icon.svg';
+import VpcIcon from '../../svgs/vpc-icon.svg';
+import DatabaseIcon from '../../svgs/database-icon.svg';
+import FlowStorageIcon from '../../svgs/flow-storage-icon.svg';
+import UsaFlagIcon from '../../svgs/usa-flag-icon.svg';
+import EuropeFlagIcon from '../../svgs/europe-flag-icon.svg';
+import PrivateDataPlaneIcon from '../../svgs/private-data-plane-icon.svg';
+import { DeploymentOption } from '../../../shared';
 import {
+    container,
     solidBorderBox,
     secondLevelSolidBorderBox,
     dashedBorderBox,
@@ -23,22 +25,21 @@ import {
     vpcMarginBottom,
     privateDeploymentTag,
     metadataOnlyDarkerBlueTag,
-    metadataOnlyLighterBlueTag,
     relativePosition,
     privateDeploymentVpcBox,
-} from '../styles.module.less';
+} from './styles.module.less';
 
 const iconSize = 30;
 
 interface DeploymentDiagramProps {
-    selectedTab: string;
+    deploymentOption: DeploymentOption;
 }
 
 const DeploymentOptionDiagram = ({
-    selectedTab = '1',
+    deploymentOption = 'public',
 }: DeploymentDiagramProps) => {
     return (
-        <>
+        <div className={container}>
             <div className={solidBorderBox}>
                 <div className={dashedBorderBox}>
                     <CloudProviderIcon width={iconSize} />
@@ -53,7 +54,7 @@ const DeploymentOptionDiagram = ({
                         <ControlPlaneIcon width={iconSize} />
                         <span>Control Plane</span>
                     </div>
-                    {selectedTab === '1' ? (
+                    {deploymentOption === 'public' ? (
                         <div className={horizontalWrapper}>
                             <div
                                 className={clsx(
@@ -81,12 +82,12 @@ const DeploymentOptionDiagram = ({
                 <div className={dashedBorderBox}>
                     <CustomerCloudIcon width={iconSize} />
                     <span>
-                        {selectedTab === '1'
+                        {deploymentOption === 'public'
                             ? 'Customer Cloud'
                             : 'Customer Cloud & Region'}
                     </span>
                     <div className={horizontalWrapper}>
-                        {selectedTab === '2' ? (
+                        {deploymentOption === 'private' ? (
                             <div
                                 className={clsx(
                                     solidBorderBox,
@@ -117,13 +118,15 @@ const DeploymentOptionDiagram = ({
                             <VpcIcon width={iconSize} />
                             <span
                                 className={
-                                    selectedTab === '2' ? vpcMarginBottom : null
+                                    deploymentOption === 'private'
+                                        ? vpcMarginBottom
+                                        : null
                                 }
                             >
                                 Customer VPC
                             </span>
                             <div className={horizontalWrapper}>
-                                {selectedTab === '3' ? (
+                                {deploymentOption === 'byoc' ? (
                                     <div className={dashedBorderBox}>
                                         <PrivateDataPlaneIcon
                                             width={iconSize}
@@ -148,23 +151,18 @@ const DeploymentOptionDiagram = ({
                         </div>
                     </div>
                 </div>
-                {['1', '3'].includes(selectedTab) ? (
-                    <div
-                        className={clsx(
-                            middleTag,
-                            selectedTab === '3'
-                                ? metadataOnlyLighterBlueTag
-                                : null
-                        )}
-                    >
+                {['public', 'byoc'].includes(deploymentOption) ? (
+                    <div className={middleTag}>
                         <div className={clsx(tagArrow, tagArrowLeft)} />
                         <span>
-                            {selectedTab === '1' ? 'Internet' : 'metadata only'}
+                            {deploymentOption === 'public'
+                                ? 'Internet'
+                                : 'metadata only'}
                         </span>
                         <div className={clsx(tagArrow, tagArrowRight)} />
                     </div>
                 ) : null}
-                {selectedTab === '2' ? (
+                {deploymentOption === 'private' ? (
                     <>
                         <div
                             className={clsx(
@@ -191,7 +189,7 @@ const DeploymentOptionDiagram = ({
                     </>
                 ) : null}
             </div>
-        </>
+        </div>
     );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -238,6 +238,7 @@ const cfg: GatsbyConfig = { @@
                                     `500`,
                                     `600`,
                                     `700`,
+                                    `900`,
                                 ],
                             },
                         ],
@@ Expand Down @@