From 43c185df01e2441a2d884b8682680af59a0c5832 Mon Sep 17 00:00:00 2001
From: Hyejin Yoon <0327jane@gmail.com>
Date: Fri, 11 Oct 2024 11:27:11 +0900
Subject: [PATCH] fix: display demo form modal on mobile (#11581)

---
 .../pages/cloud/DemoForm/styles.module.scss   |  4 +-
 .../src/pages/cloud/DemoFormModal/index.jsx   | 17 +++++++
 .../cloud/DemoFormModal/styles.module.scss    | 45 +++++++++++++++++
 docs-website/src/pages/cloud/Hero/index.js    | 48 +++++++++++++------
 .../src/pages/cloud/Hero/styles.module.scss   |  6 ++-
 docs-website/src/pages/cloud/index.js         | 31 ++++++++----
 .../src/pages/cloud/styles.module.scss        | 13 ++++-
 7 files changed, 135 insertions(+), 29 deletions(-)
 create mode 100644 docs-website/src/pages/cloud/DemoFormModal/index.jsx
 create mode 100644 docs-website/src/pages/cloud/DemoFormModal/styles.module.scss

diff --git a/docs-website/src/pages/cloud/DemoForm/styles.module.scss b/docs-website/src/pages/cloud/DemoForm/styles.module.scss
index 4157a228ae739..c56dd1d598605 100644
--- a/docs-website/src/pages/cloud/DemoForm/styles.module.scss
+++ b/docs-website/src/pages/cloud/DemoForm/styles.module.scss
@@ -46,9 +46,7 @@
   .bookButton {
     display: block;
   }
-  .formContainer {
-    display: none;
-  }
+
   .productTourButton {
     text-align: center!important;
   }
diff --git a/docs-website/src/pages/cloud/DemoFormModal/index.jsx b/docs-website/src/pages/cloud/DemoFormModal/index.jsx
new file mode 100644
index 0000000000000..7c890950bda97
--- /dev/null
+++ b/docs-website/src/pages/cloud/DemoFormModal/index.jsx
@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import styles from "./styles.module.scss";
+import DemoForm from '../DemoForm';
+
+const DemoFormModal = ({ formId, handleCloseModal }) => {
+
+  return (
+    <div className={styles.modal}>
+    <div className={styles.modalContent}>
+      <button className={styles.closeButton} onClick={handleCloseModal}>✕</button>
+      <DemoForm formId={formId} />
+    </div>
+  </div>
+  );
+};
+
+export default DemoFormModal;
diff --git a/docs-website/src/pages/cloud/DemoFormModal/styles.module.scss b/docs-website/src/pages/cloud/DemoFormModal/styles.module.scss
new file mode 100644
index 0000000000000..44461567e578b
--- /dev/null
+++ b/docs-website/src/pages/cloud/DemoFormModal/styles.module.scss
@@ -0,0 +1,45 @@
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Modal background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  overflow-y: scroll;
+
+  .modalContent {
+    width: 90%;
+    max-width: 540px;
+    background: #fff;
+    border-radius: 16px;
+    position: relative;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    animation: modalShow 0.3s ease-in-out;
+
+    .closeButton {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      cursor: pointer;
+    }
+  }
+}
+
+@keyframes modalShow {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/docs-website/src/pages/cloud/Hero/index.js b/docs-website/src/pages/cloud/Hero/index.js
index eeb982544ddca..8e4cb2145c514 100644
--- a/docs-website/src/pages/cloud/Hero/index.js
+++ b/docs-website/src/pages/cloud/Hero/index.js
@@ -1,38 +1,56 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import styles from "./styles.module.scss";
 import ScrollingCustomers from '../CompanyLogos';
 import DemoForm from '../DemoForm';
+import DemoFormModal from '../DemoFormModal';
 
 const Hero = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
+
   return (
     <header className={clsx("hero", styles.hero)}>
       <div className="container">
         <div className="hero__content">
           <div className="row row__padded">
             <div className={clsx(styles.hero__cta, styles.col, "col col--7")}>
-                <h1 className={clsx("hero__title", styles.hero__title)}>DataHub Cloud</h1>
-                <div className={clsx("hero__subtitle", styles.hero__subtitle)}>
+              <h1 className={clsx("hero__title", styles.hero__title)}>DataHub Cloud</h1>
+              <div className={clsx("hero__subtitle", styles.hero__subtitle)}>
                 Experience the premium version of DataHub
-                  <div style={{ fontWeight: "500" }}>
-                    with Observability and Governance built-in.
-                  </div>
+                <div style={{ fontWeight: "500" }}>
+                  with Observability and Governance built-in.
                 </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>
-                <ScrollingCustomers />
+              </div>
+
+              <button
+                className={clsx(styles.button, styles.bookButton, "button button--primary button--lg")}
+                onClick={handleOpenModal}
+              >
+                Book Demo
+              </button>
+
+              <Link
+                className={clsx(styles.button, styles.productTourButton, "button button--secondary button--lg")}
+                to="https://www.acryldata.io/tour"
+              >
+                Live Product Tour →
+              </Link>
+              <ScrollingCustomers />
             </div>
-            <div className={clsx(styles.col, "col col--5")}>
-               <DemoForm formId="heroForm" />
+            <div className={clsx(styles.col, styles.hideOnMobile, "col col--5")}>
+              <DemoForm formId="heroForm" />
             </div>
           </div>
         </div>
       </div>
+
+      {isModalOpen && (
+        <DemoFormModal formId="heroFormMobile" handleCloseModal={handleCloseModal} />
+      )}
     </header>
   );
 };
diff --git a/docs-website/src/pages/cloud/Hero/styles.module.scss b/docs-website/src/pages/cloud/Hero/styles.module.scss
index 5da028d017155..c073b8590d214 100644
--- a/docs-website/src/pages/cloud/Hero/styles.module.scss
+++ b/docs-website/src/pages/cloud/Hero/styles.module.scss
@@ -64,6 +64,10 @@
   .productTourButton {
     text-align: center!important;
   }
+
+  .hideOnMobile{
+    display: none;
+  }
 }
 
 @media screen  and (min-width: 1000px){
@@ -71,4 +75,4 @@
     padding-left: 0!important;
     margin-left: 0!important;
   }
-}
\ No newline at end of file
+}
diff --git a/docs-website/src/pages/cloud/index.js b/docs-website/src/pages/cloud/index.js
index 99768ca721078..4d323450e2906 100644
--- a/docs-website/src/pages/cloud/index.js
+++ b/docs-website/src/pages/cloud/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -10,11 +10,16 @@ import UnifiedTabs from "./UnifiedTabs";
 import FeatureCards from "./FeatureCards";
 import Hero from "./Hero";
 import DemoForm from "./DemoForm";
+import DemoFormModal from "./DemoFormModal";
 
 function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
   if (siteConfig.customFields.isSaas) {
     window.location.replace("/docs");
   }
@@ -28,7 +33,7 @@ function Home() {
       <div className={clsx(styles.bgSection)}>
         <UnifiedTabs />
       </div>
-      <FeatureCards/>
+      <FeatureCards />
       <div className={clsx(styles.bgSection)}>
         <Section>
           <Enterprise />
@@ -41,25 +46,33 @@ function Home() {
       <div className={clsx("hero", styles.hero)}>
         <div className="container" style={{ paddingTop: '12vh', paddingBottom: '12vh' }}>
           <div className="row row__padded">
-            <div  className={clsx(styles.col, styles.hero__cta, "col col--7")}>
-              <h1 className={styles.hero__title}>Start your free trial<br/>today.</h1>
-              <div className={clsx(styles.hero__subtitle)}>Unify Discovery, Observability and Governance<br/>for data and AI.</div>
+            <div className={clsx(styles.col, styles.hero__cta, "col col--7")}>
+              <h1 className={styles.hero__title}>Start your free trial<br />today.</h1>
+              <div className={clsx(styles.hero__subtitle)}>
+                Unify Discovery, Observability and Governance<br />for data and AI.
+              </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">
+                <button
+                  className={clsx(styles.button, styles.bookButton, "button button--primary button--lg")}
+                  onClick={handleOpenModal}
+                >
                   Book Demo
-                </Link>
+                </button>
                 <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" />
             </div>
-            <div className={clsx(styles.col, "col col--5")}>
-               <DemoForm formId="footerForm"/>
+            <div className={clsx(styles.col, "col col--5", styles.hideOnMobile)}>
+              <DemoForm formId="footerForm" />
             </div>
           </div>
         </div>
       </div>
+      {isModalOpen && (
+        <DemoFormModal formId="footerFormMobile" handleCloseModal={handleCloseModal} />
+      )}
     </Layout>
   ) : null;
 }
diff --git a/docs-website/src/pages/cloud/styles.module.scss b/docs-website/src/pages/cloud/styles.module.scss
index 0590b8baf12c8..1a873df9a8118 100644
--- a/docs-website/src/pages/cloud/styles.module.scss
+++ b/docs-website/src/pages/cloud/styles.module.scss
@@ -86,11 +86,22 @@
 @media screen and (max-width: 999px) {
   .bookButton, .productTourButton {
     display: block;
+    width: 100%;
   }
 
   .productTourButton {
     text-align: center!important;
   }
+
+
+  .hideOnMobile {
+    display: none;
+  }
+
+  .formContainer {
+    display: none; 
+  }
+
 }
 
 @media screen  and (min-width: 1000px){
@@ -98,4 +109,4 @@
     padding-left: 0!important;
     margin-left: 0!important;
   }
-}
\ No newline at end of file
+}