Add section one

src/components/DeploymentOptionsPage/SectionOne/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
+import { OutboundLinkFilled } from '../../OutboundLink';
+import { LinkOutlined } from '../../../globalStyles';
+import { dashboardRegisterUrl } from '../../../../shared';
+import { container, leftColumn } from './styles.module.less';
+
+const SectionOne = () => {
+    return (
+        <section className={defaultWrapperDarkBlue}>
+            <div className={container}>
+                <div className={leftColumn}>
+                    <h1>ESTUARY FLOW DEPLOYMENT OPTIONS</h1>
+                    <p>
+                        Estuary Flow offers three main deployment options to
+                        cater to various organizational needs and security
+                        requirements. This section provides a high-level
+                        overview and comparison of Public Deployment, Private
+                        Deployment, and BYOC options.
+                    </p>
+                    <div>
+                        <OutboundLinkFilled
+                            target="_blank"
+                            href={dashboardRegisterUrl}
+                        >
+                            Build a pipeline
+                        </OutboundLinkFilled>
+                        <LinkOutlined
+                            href="/contact-us"
+                            target="_blank"
+                            theme="dark"
+                        >
+                            Contact Us
+                        </LinkOutlined>
+                    </div>
+                </div>
+                <div>
+                    <StaticImage
+                        src="../../../images/deployment-options-page/deployment-options-meta-image.png"
+                        alt="Private BYOC; secure public Deployments; secure and enterprise-ready private deployments"
+                        quality={100}
+                        placeholder="blurred"
+                        loading="eager"
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default SectionOne;

src/components/DeploymentOptionsPage/SectionOne/styles.module.less

@@ -0,0 +1,63 @@
+@import '../../../globalStyles/sections.module.less';
+
+.container {
+  .globalMaxWidth;
+  display: flex;
+  gap: 60px;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  @media (max-width: 425px) {
+    gap: 20px;
+  }
+
+  h1,
+  p {
+    color: #fff;
+  }
+
+  h1 {
+    line-height: 72px;
+  }
+
+  p {
+    font-size: 1.25rem;
+    color: #F2F3F5;
+    margin: 0;
+  }
+
+  img {
+    min-width: 536px;
+  }
+}
+
+.leftColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  div {
+    display: flex;
+    gap: 16px;
+    max-width: 480px;
+    flex-direction: row;
+
+    &>a {
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    @media (max-width: 1024px) {
+      margin: 0;
+    }
+
+    @media (max-width: 360px) {
+      flex-direction: column;
+    }
+  }
+}

src/pages/deployment-options/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import Layout from '../../components/Layout';
+import Seo from '../../components/seo';
+import SectionOne from '../../components/DeploymentOptionsPage/SectionOne';
+
+const DeploymentOptions = () => {
+    return (
+        <Layout>
+            <SectionOne />
+        </Layout>
+    );
+};
+
+export const Head = () => {
+    const { metaImg } = useStaticQuery(graphql`
+        query {
+            metaImg: file(
+                relativePath: {
+                    eq: "deployment-options-page/deployment-options-meta-image.png"
+                }
+            ) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 536)
+                }
+            }
+        }
+    `);
+
+    return (
+        //TODO: Ask title and description to Sourabh
+        <Seo
+            title=""
+            description=""
+            image={metaImg.childImageSharp.gatsbyImageData.images.fallback.src}
+        />
+    );
+};
+
+export default DeploymentOptions;