mirror of
https://github.com/datahub-project/datahub.git
synced 2025-12-28 10:28:22 +00:00
fix: display demo form modal on mobile (#11581)
This commit is contained in:
Hyejin Yoon
GitHub
parent
f43720e4ec
commit
43c185df01
@ -46,9 +46,7 @@
|
||||
.bookButton {
|
||||
display: block;
|
||||
}
|
||||
.formContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.productTourButton {
|
||||
text-align: center!important;
|
||||
}
|
||||
|
||||
17
docs-website/src/pages/cloud/DemoFormModal/index.jsx
Normal file
17
docs-website/src/pages/cloud/DemoFormModal/index.jsx
Normal file
@ -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;
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user