From f378fb6c8066027fae671cb63a4ec3db60dd9744 Mon Sep 17 00:00:00 2001
From: Hyejin Yoon <0327jane@gmail.com>
Date: Tue, 30 Jan 2024 04:33:17 +0900
Subject: [PATCH] docs: Add slack survey page (#9590)

Co-authored-by: Harshal Sheth <hsheth2@gmail.com>
---
 docs-website/docusaurus.config.js             |  2 +-
 docs-website/src/pages/slack/index.js         | 48 +++++++++++++++++++
 .../src/pages/slack/slacksurvey.module.scss   |  0
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 docs-website/src/pages/slack/index.js
 create mode 100644 docs-website/src/pages/slack/slacksurvey.module.scss

diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
index 22edf749acaed..6138f33244d03 100644
--- a/docs-website/docusaurus.config.js
+++ b/docs-website/docusaurus.config.js
@@ -62,7 +62,7 @@ module.exports = {
           position: "right",
           items: [
             {
-              href: "https://slack.datahubproject.io",
+              to: "/slack",
               label: "Join Slack",
             },
             {
diff --git a/docs-website/src/pages/slack/index.js b/docs-website/src/pages/slack/index.js
new file mode 100644
index 0000000000000..c85a1eefe5545
--- /dev/null
+++ b/docs-website/src/pages/slack/index.js
@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function SlackSurvey() {
+    const { siteConfig = {} } = useDocusaurusContext();
+
+    useEffect(() => {
+        const script = document.createElement('script');
+        script.src = "//js.hsforms.net/forms/embed/v2.js";
+        script.async = true;
+        script.type = 'text/javascript';
+        document.body.appendChild(script);
+
+        script.onload = () => {
+            if (window.hbspt) {
+                window.hbspt.forms.create({
+                    region: "na1",
+                    portalId: "14552909",
+                    formId: "91357965-a8dc-4e20-875e-5f87e6b9defb",
+                    target: '#hubspotForm' // Targeting the div with the specific ID
+                });
+            }
+        };
+
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <Layout
+            title={siteConfig.tagline}
+            description="Description of the page">
+            <header className={"hero"}>
+                <div className="container">
+                    <div className="hero__content">
+                        <h1>Join the DataHub Slack Community!</h1>
+                        <div style={{ fontSize: "18px" }}>We will send the link to join our Slack community to your email.</div>
+                        <div id="hubspotForm" style={{ width: "50%", margin: "3rem auto"}}></div> 
+                    </div>
+                </div>
+            </header>
+        </Layout>
+    );
+}
+
+export default SlackSurvey;
diff --git a/docs-website/src/pages/slack/slacksurvey.module.scss b/docs-website/src/pages/slack/slacksurvey.module.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d