-
-
-
Get your free trial.
-
Data Discovery, Data Quality and Data Governance unified.
-
-
- Book Demo
-
-
- Product Tour
-
+
+
+
+
Get your free trial.
+
Data Discovery, Data Quality and Data Governance unified.
+
+
+ Book Demo
+
+
+ Live Product Tour →
+
+
- {/*
-
*/}
+
+
+
+
diff --git a/docs-website/src/pages/cloud/styles.module.scss b/docs-website/src/pages/cloud/styles.module.scss
index 7fc18253b13a0d..7d02392ffa90d4 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,68 @@
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
From a7701214d8a957ddb1e1a463cf6401db77950954 Mon Sep 17 00:00:00 2001
From: yoonhyejin <0327jane@gmail.com>
Date: Thu, 12 Sep 2024 14:49:05 +0900
Subject: [PATCH 2/2] fix: fix form loading issue
---
.../cloud/DemoForm/hubspotFormStyles.css | 38 +++++-----
.../src/pages/cloud/DemoForm/index.jsx | 71 +++++++++++--------
docs-website/src/pages/cloud/Hero/index.js | 2 +-
docs-website/src/pages/cloud/index.js | 6 +-
.../src/pages/cloud/styles.module.scss | 1 -
5 files changed, 61 insertions(+), 57 deletions(-)
diff --git a/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css b/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
index 4baa4fd042d7cc..9d0488bf8064ba 100644
--- a/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
+++ b/docs-website/src/pages/cloud/DemoForm/hubspotFormStyles.css
@@ -1,28 +1,23 @@
-#hubspotForm {
- text-align: left;
-}
-
-#hubspotForm .input {
- margin: 0;
+.hs-input {
+ width: 100% !important;
}
-#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
index 1268608eceb3fd..28777e722e962d 100644
--- a/docs-website/src/pages/cloud/DemoForm/index.jsx
+++ b/docs-website/src/pages/cloud/DemoForm/index.jsx
@@ -5,30 +5,25 @@ import styles from "./styles.module.scss";
import ScrollingCustomers from '../CompanyLogos';
import './hubspotFormStyles.css';
-const DemoForm = () => {
+const DemoForm = ({ formId }) => {
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);
+ const formContainerId = `hubspotForm-${formId}`;
- script.onload = () => {
- if (window.hbspt) {
+ const initializeHubspotForm = () => {
+ if (!document.querySelector(`#${formContainerId} .hs-form`)) {
window.hbspt.forms.create({
region: "na1",
portalId: "14552909",
formId: "ed2447d6-e6f9-4771-8f77-825b114a9421",
- target: '#hubspotForm',
+ target: `#${formContainerId}`,
});
- // 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');
+ 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';
@@ -36,7 +31,7 @@ const DemoForm = () => {
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");
+ const selectNoEElement = document.getElementById(`number_of_employees-ed2447d6-e6f9-4771-8f77-825b114a9421`);
if (selectNoEElement) {
const disabledOption = selectNoEElement.querySelector('option[disabled]');
if (disabledOption) {
@@ -44,7 +39,7 @@ const DemoForm = () => {
disabledOption.value = "";
}
}
- const selectfamiliarityElement = document.getElementById("familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421");
+ const selectfamiliarityElement = document.getElementById(`familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421`);
if (selectfamiliarityElement) {
const disabledOption = selectfamiliarityElement.querySelector('option[disabled]');
if (disabledOption) {
@@ -52,7 +47,6 @@ const DemoForm = () => {
disabledOption.value = "";
}
}
-
}, 1000); // Delay to ensure the form is fully loaded
window.hero = new RevenueHero({ routerId: '982' });
@@ -60,23 +54,40 @@ const DemoForm = () => {
}
};
+ 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 () => {
- document.body.removeChild(script);
+ const hubspotForm = document.querySelector(`#${formContainerId} .hs-form`);
+ if (hubspotForm) {
+ hubspotForm.remove();
+ }
};
- }, []);
+ }, [formId]);
return (
-
-
-
-
Book a free Demo
-
- Schedule a personalized demo and get a free a trial.
-
-
-
-
+
+
+
+
Book a free Demo
+
+ Schedule a personalized demo and get a free a trial.
+
+
{/* Use unique ID */}
+
+
);
};
diff --git a/docs-website/src/pages/cloud/Hero/index.js b/docs-website/src/pages/cloud/Hero/index.js
index 8c7c6b4f7b23fe..ce5af5c8b1248f 100644
--- a/docs-website/src/pages/cloud/Hero/index.js
+++ b/docs-website/src/pages/cloud/Hero/index.js
@@ -28,7 +28,7 @@ const Hero = () => {
-
+