From 54b8ce3018e4a4f18837f29f2c20d8b16f45dd38 Mon Sep 17 00:00:00 2001
From: Hyejin Yoon <0327jane@gmail.com>
Date: Fri, 13 Sep 2024 08:52:01 +0900
Subject: [PATCH] fix: add cloud form & fix css (#11362)

---
 .../{Hero => DemoForm}/hubspotFormStyles.css  | 38 ++++----
 .../src/pages/cloud/DemoForm/index.jsx        | 94 +++++++++++++++++++
 .../pages/cloud/DemoForm/styles.module.scss   | 55 +++++++++++
 docs-website/src/pages/cloud/Hero/index.js    | 73 +-------------
 .../src/pages/cloud/Hero/styles.module.scss   | 40 +-------
 docs-website/src/pages/cloud/index.js         | 35 ++++---
 .../src/pages/cloud/styles.module.scss        | 69 ++++++++++++++
 7 files changed, 254 insertions(+), 150 deletions(-)
 rename docs-website/src/pages/cloud/{Hero => DemoForm}/hubspotFormStyles.css (58%)
 create mode 100644 docs-website/src/pages/cloud/DemoForm/index.jsx
 create mode 100644 docs-website/src/pages/cloud/DemoForm/styles.module.scss

diff --git a/docs-website/src/pages/cloud/Hero/hubspotFormStyles.css b/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
similarity index 58%
rename from docs-website/src/pages/cloud/Hero/hubspotFormStyles.css
rename to docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
index 4baa4fd042..9d0488bf80 100644
--- a/docs-website/src/pages/cloud/Hero/hubspotFormStyles.css
+++ b/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
@@ -1,28 +1,23 @@
-#hubspotForm {
-  text-align: left;
+.hs-input {
+  width: 100% !important;
 }
 
-#hubspotForm .input {
-  margin: 0;
-}
-
-#hubspotForm .hs-form input,
-#hubspotForm .hs-form select,
-#hubspotForm .hs-form textarea {
+.hs-form input,
+.hs-form select,
+.hs-form textarea {
   border: .5px solid #DDD;
   background-color: #FFF;
   padding: .75rem 1rem; 
   margin: 0.4rem auto;
   border-radius: 8px; 
   font-size: 16px;
-  width: 100%;
 }
 
-#hubspotForm .hs-form ::placeholder {
+.hs-form ::placeholder {
   font-style: Manrope;
 }
 
-#hubspotForm .hs-form input[type="submit"] {
+.hs-form input[type="submit"] {
   background-color: #1990FF;
   color: #fff; 
   border: none; 
@@ -34,45 +29,46 @@
   width: 100px;
 }
 
-#hubspotForm .hs-form input[type="submit"]:hover {
+.hs-form input[type="submit"]:hover {
   background-color: #0056b3; /* Button hover color */
 }
 
 /* hide the label */
 
-#hubspotForm .hs-form label span {
+.hs-form label span {
   display: none;
 }
 
 /* error labels */
 
-#hubspotForm .hs-form .hs-error-msgs {
+.hs-form .hs-error-msgs {
   font-size: 15px;
   color: red;
   list-style-type: none;
   padding: 0;
+  text-align: left;
 }
 
-#hubspotForm .hs-form .error {
+.hs-form .error {
   border: red 1.5px solid !important;
 }
 
 /* customize placeholder style */
 
-#hubspotForm .hs-form input::placeholder, 
-#hubspotForm .hs-form textarea::placeholder,
-#hubspotForm .hs-form textarea {
+.hs-form input::placeholder, 
+.hs-form textarea::placeholder,
+.hs-form textarea {
   font-size: 16px;
   font-weight: 400;
   font-family: sans-serif;
   color: gray;
 }
 
-#hubspotForm .hs-form .hs_firstname {
+.hs-form .hs_firstname {
   padding-right: 0.5rem;
 }
 
-#hubspotForm .hs-form .hs_lastname {
+.hs-form .hs_lastname {
   padding-left: 0.5rem;
 }
 
diff --git a/docs-website/src/pages/cloud/DemoForm/index.jsx b/docs-website/src/pages/cloud/DemoForm/index.jsx
new file mode 100644
index 0000000000..28777e722e
--- /dev/null
+++ b/docs-website/src/pages/cloud/DemoForm/index.jsx
@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.scss";
+import ScrollingCustomers from '../CompanyLogos';
+import './hubspotFormStyles.css';
+
+const DemoForm = ({ formId }) => {
+  useEffect(() => {
+    const formContainerId = `hubspotForm-${formId}`;
+
+    const initializeHubspotForm = () => {
+      if (!document.querySelector(`#${formContainerId} .hs-form`)) {
+        window.hbspt.forms.create({
+          region: "na1",
+          portalId: "14552909",
+          formId: "ed2447d6-e6f9-4771-8f77-825b114a9421",
+          target: `#${formContainerId}`,
+        });
+
+        setTimeout(() => {
+          const emailInput = document.querySelector(`#${formContainerId} .hs_email .input > input`);
+          const firstNameInput = document.querySelector(`#${formContainerId} .hs_firstname .input > input`);
+          const lastNameInput = document.querySelector(`#${formContainerId} .hs_lastname .input > input`);
+          const phoneInput = document.querySelector(`#${formContainerId} .hs_phone .input > input`);
+          const additionalInfoInput = document.querySelector(`#${formContainerId} .hs_additional_info .input > textarea`);
+
+          if (emailInput) emailInput.placeholder = 'Company Email';
+          if (firstNameInput) firstNameInput.placeholder = 'First Name';
+          if (lastNameInput) lastNameInput.placeholder = 'Last Name';
+          if (phoneInput) phoneInput.placeholder = 'Phone Number';
+          if (additionalInfoInput) additionalInfoInput.placeholder = 'How can we help?';
+
+          const selectNoEElement = document.getElementById(`number_of_employees-ed2447d6-e6f9-4771-8f77-825b114a9421`);
+          if (selectNoEElement) {
+            const disabledOption = selectNoEElement.querySelector('option[disabled]');
+            if (disabledOption) {
+              disabledOption.text = "Select Number of Employees";
+              disabledOption.value = "";
+            }
+          }
+          const selectfamiliarityElement = document.getElementById(`familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421`);
+          if (selectfamiliarityElement) {
+            const disabledOption = selectfamiliarityElement.querySelector('option[disabled]');
+            if (disabledOption) {
+              disabledOption.text = "How familiar are you with DataHub?";
+              disabledOption.value = "";
+            }
+          }
+        }, 1000); // Delay to ensure the form is fully loaded
+
+        window.hero = new RevenueHero({ routerId: '982' });
+        window.hero.schedule('hsForm_ed2447d6-e6f9-4771-8f77-825b114a9421');
+      }
+    };
+
+    if (!window.hbspt) {
+      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 = () => {
+        initializeHubspotForm();
+      };
+    } else {
+      initializeHubspotForm();
+    }
+
+    return () => {
+      const hubspotForm = document.querySelector(`#${formContainerId} .hs-form`);
+      if (hubspotForm) {
+        hubspotForm.remove();
+      }
+    };
+  }, [formId]);
+
+  return (
+    <div className={clsx(styles.formContainer)}>
+      <div className={clsx(styles.formContent)}>
+        <div className={clsx(styles.formHeader)}>
+          <div className={clsx(styles.formTitle)}>Book a free Demo</div>
+          <div className={clsx(styles.formSubtitle)}>
+            Schedule a personalized demo and get a free a trial.
+          </div>
+        </div>
+        <div id={`hubspotForm-${formId}`} className={styles.hubspotForm}></div> {/* Use unique ID */}
+      </div>
+    </div>
+  );
+};
+
+export default DemoForm;
diff --git a/docs-website/src/pages/cloud/DemoForm/styles.module.scss b/docs-website/src/pages/cloud/DemoForm/styles.module.scss
new file mode 100644
index 0000000000..4157a228ae
--- /dev/null
+++ b/docs-website/src/pages/cloud/DemoForm/styles.module.scss
@@ -0,0 +1,55 @@
+.col {
+  padding: 0 2rem;
+}
+
+.formContainer {
+  padding: 2rem;
+  margin: 0 auto;
+  background-color:#F3F3F3;
+  border: 1px solid #DDD;
+  align-items: center;
+  max-width: 540px;
+  border-radius: 16px;
+
+  .formContent {
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .formHeader {
+    justify-content: space-between;
+    text-align: left;
+
+    .formTitle {
+      font-size: 24px;
+      font-weight: 600;
+      color: #000;
+      line-height: 28px;
+      margin-bottom: 12px;
+    }
+  
+    .formSubtitle {
+      font-size: 14px;
+      color: #666;
+      line-height: 14px;
+      margin-bottom: 8px;
+    }
+  }
+
+}
+
+.bookButton {
+  display: none;
+}
+
+@media screen and (max-width: 999px) {
+  .bookButton {
+    display: block;
+  }
+  .formContainer {
+    display: none;
+  }
+  .productTourButton {
+    text-align: center!important;
+  }
+}
diff --git a/docs-website/src/pages/cloud/Hero/index.js b/docs-website/src/pages/cloud/Hero/index.js
index 20f13578bb..ce5af5c8b1 100644
--- a/docs-website/src/pages/cloud/Hero/index.js
+++ b/docs-website/src/pages/cloud/Hero/index.js
@@ -3,68 +3,9 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import styles from "./styles.module.scss";
 import ScrollingCustomers from '../CompanyLogos';
-import './hubspotFormStyles.css';
+import DemoForm from '../DemoForm';
 
 const Hero = () => {
-  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: "ed2447d6-e6f9-4771-8f77-825b114a9421",
-          target: '#hubspotForm',
-        });
-
-        // Modify placeholders after the form has loaded
-        setTimeout(() => {
-          const emailInput = document.querySelector('#hubspotForm .hs_email .input > input');
-          const firstNameInput = document.querySelector('#hubspotForm .hs_firstname .input > input');
-          const lastNameInput = document.querySelector('#hubspotForm .hs_lastname .input > input');
-          const phoneInput = document.querySelector('#hubspotForm .hs_phone .input > input');
-          const additionalInfoInput = document.querySelector('#hubspotForm .hs_additional_info .input > textarea');
-
-          if (emailInput) emailInput.placeholder = 'Company Email';
-          if (firstNameInput) firstNameInput.placeholder = 'First Name';
-          if (lastNameInput) lastNameInput.placeholder = 'Last Name';
-          if (phoneInput) phoneInput.placeholder = 'Phone Number';
-          if (additionalInfoInput) additionalInfoInput.placeholder = 'How can we help?';
-
-          const selectNoEElement = document.getElementById("number_of_employees-ed2447d6-e6f9-4771-8f77-825b114a9421");
-          if (selectNoEElement) {
-            const disabledOption = selectNoEElement.querySelector('option[disabled]');
-            if (disabledOption) {
-              disabledOption.text = "Select Number of Employees";
-              disabledOption.value = "";
-            }
-          }
-          const selectfamiliarityElement = document.getElementById("familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421");
-          if (selectfamiliarityElement) {
-            const disabledOption = selectfamiliarityElement.querySelector('option[disabled]');
-            if (disabledOption) {
-              disabledOption.text = "How familiar are you with DataHub?";
-              disabledOption.value = "";
-            }
-          }
-
-        }, 1000); // Delay to ensure the form is fully loaded
-
-        window.hero = new RevenueHero({ routerId: '982' });
-        window.hero.schedule('hsForm_ed2447d6-e6f9-4771-8f77-825b114a9421');
-      }
-    };
-
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
   return (
     <header className={clsx("hero", styles.hero)}>
       <div className="container">
@@ -87,17 +28,7 @@ const Hero = () => {
                 <ScrollingCustomers />
             </div>
             <div className={clsx(styles.col, "col col--5")}>
-              <div className={clsx(styles.formContainer)}>
-                <div className={clsx(styles.formContent)}>
-                  <div className={clsx(styles.formHeader)}>
-                    <div className={clsx(styles.formTitle)}>Book a free Demo</div>
-                    <div className={clsx(styles.formSubtitle)}>
-                      Schedule a personalized demo and get a free a trial.
-                    </div>
-                  </div>
-                  <div id="hubspotForm" className={styles.hubspotForm}></div>
-                </div>
-              </div>
+               <DemoForm formId="heroForm" />
             </div>
           </div>
         </div>
diff --git a/docs-website/src/pages/cloud/Hero/styles.module.scss b/docs-website/src/pages/cloud/Hero/styles.module.scss
index d2a2d333a1..5da028d017 100644
--- a/docs-website/src/pages/cloud/Hero/styles.module.scss
+++ b/docs-website/src/pages/cloud/Hero/styles.module.scss
@@ -52,42 +52,6 @@
   justify-content: flex-start;
 }
 
-.formContainer {
-  padding: 2rem;
-  margin: 0 auto;
-  background-color:#F3F3F3;
-  border: 1px solid #DDD;
-  align-items: center;
-  max-width: 540px;
-  border-radius: 16px;
-
-  .formContent {
-    width: 90%;
-    margin: 0 auto;
-  }
-
-  .formHeader {
-    justify-content: space-between;
-    text-align: left;
-
-    .formTitle {
-      font-size: 24px;
-      font-weight: 600;
-      color: #000;
-      line-height: 28px;
-      margin-bottom: 12px;
-    }
-  
-    .formSubtitle {
-      font-size: 14px;
-      color: #666;
-      line-height: 14px;
-      margin-bottom: 8px;
-    }
-  }
-
-}
-
 .bookButton {
   display: none;
 }
@@ -96,9 +60,7 @@
   .bookButton {
     display: block;
   }
-  .formContainer {
-    display: none;
-  }
+
   .productTourButton {
     text-align: center!important;
   }
diff --git a/docs-website/src/pages/cloud/index.js b/docs-website/src/pages/cloud/index.js
index a403e5dc41..8769092bed 100644
--- a/docs-website/src/pages/cloud/index.js
+++ b/docs-website/src/pages/cloud/index.js
@@ -9,12 +9,11 @@ import styles from "./styles.module.scss";
 import UnifiedTabs from "./UnifiedTabs";
 import FeatureCards from "./FeatureCards";
 import Hero from "./Hero";
+import DemoForm from "./DemoForm";
 
 function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
-  // const { colorMode } = useColorMode();
-
 
   if (siteConfig.customFields.isSaas) {
     window.location.replace("/docs");
@@ -37,24 +36,22 @@ function Home() {
       </div>
       <div className={clsx("hero", styles.hero)}>
         <div className="container" style={{ paddingTop: '12vh', paddingBottom: '12vh' }}>
-          <div className="hero__content">
-            <div>
-              <h1 className="hero__title">Get your free trial.</h1>
-              <div className={clsx(styles.hero__secondtitle)}>Data Discovery, Data Quality and Data Governance unified.</div>
-
-              <Link className="button button--primary button--lg" to="https://www.acryldata.io/datahub-sign-up?utm_source=datahub&utm_medium=referral&utm_campaign=acryl_signup">
-                Book Demo
-              </Link>
-              <Link className={clsx(styles.buttonLightBlue, "button button--secondary button--lg")} to="https://www.acryldata.io/tour">
-                Product Tour
-              </Link>
+          <div className="row row__padded">
+            <div  className={clsx(styles.col, styles.hero__cta, "col col--7")}>
+              <h1 className={styles.hero__title}>Get your free trial.</h1>
+              <div className={clsx(styles.hero__subtitle)}>Data Discovery, Data Quality and Data Governance unified.</div>
+              <div>
+                <Link className={clsx(styles.button, styles.bookButton, "button button--primary button--lg")} to="https://www.acryldata.io/datahub-sign-up?utm_source=datahub&utm_medium=referral&utm_campaign=acryl_signup">
+                  Book Demo
+                </Link>
+                <Link className={clsx(styles.button, styles.productTourButton, "button button--secondary button--lg")} to="https://www.acryldata.io/tour">
+                  Live Product Tour →
+                </Link>
+              </div>
               <div className="hero__subtitle" />
-              {/* <hr style={{margin: "3rem"}}/>
-              <div className="hero__subtitle">
-                An extension of the DataHub Core project.<br/>
-                <a className={clsx(styles.link)} href="/docs/managed-datahub/managed-datahub-overview">View Cloud Docs.
-                </a>
-              </div> */}
+            </div>
+            <div className={clsx(styles.col, "col col--5")}>
+               <DemoForm formId="footerForm"/>
             </div>
           </div>
         </div>
diff --git a/docs-website/src/pages/cloud/styles.module.scss b/docs-website/src/pages/cloud/styles.module.scss
index 7fc18253b1..66eafff461 100644
--- a/docs-website/src/pages/cloud/styles.module.scss
+++ b/docs-website/src/pages/cloud/styles.module.scss
@@ -1,3 +1,8 @@
+.col {
+  padding: 0 2rem;
+}
+
+
 .link {
   &:hover {
     text-decoration: none;
@@ -9,3 +14,67 @@
   background-color: #FAFAFA !important;
   }
 
+
+.hero {
+  .button {
+    margin: 0rem 1rem 2rem 1rem;
+  }
+
+  .hero__title {
+    font-size: 3rem;
+    text-align: left;
+  }
+
+  .hero__secondtitle {
+    font-size: 2rem;
+    font-weight: 300;
+    margin-bottom: 2rem;
+    text-align: left;
+  }
+
+  .hero__subtitle {
+    margin-bottom: 2rem;
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+    margin-left: 0;
+    text-align: left;
+  }
+
+
+.productTourButton {
+  background-color: transparent;
+  border: 0;
+  color: #1990FF !important;
+}
+
+
+}
+
+.hero__cta {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.bookButton {
+  display: none;
+}
+
+
+@media screen and (max-width: 999px) {
+  .bookButton, .productTourButton {
+    display: block;
+  }
+
+  .productTourButton {
+    text-align: center!important;
+  }
+}
+
+@media screen  and (min-width: 1000px){
+  .productTourButton {
+    padding-left: 0!important;
+    margin-left: 0!important;
+  }
+}
\ No newline at end of file