feat(docs-site) tours to open in a modal (datahub-project#11420)

acryldata · Sep 18, 2024 · cc6cbe2 · cc6cbe2
1 parent b57de90
commit cc6cbe2
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 16 deletions.
diff --git a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
@@ -167,14 +167,14 @@
       font-family: "Manrope";
 
       div {
-        width: 70%;
+        width: 80%;
         margin: auto;
         font-size: 2rem;
         line-height: normal;
         font-weight: 400;
       }
       p {
-        width: 60%;
+        width: 80%;
         margin: auto;
         font-size: 1.1rem;
         line-height: 1.5rem;

diff --git a/docs-website/src/pages/_components/Community/index.js b/docs-website/src/pages/_components/Community/index.js
@@ -74,8 +74,7 @@ const Community = () => {
               </div>
             </div>
             <p>
-              Q&A.&emsp;Office Hours.&emsp; Monthly Town Hall.&emsp; Job
-              Postings.
+              Q&A.&nbsp;&nbsp;Office Hours.&nbsp;&nbsp;Think Tanks.&nbsp;&nbsp;Job Postings.
             </p>
             <a href="/slack">Join Slack</a>
           </div>

diff --git a/docs-website/src/pages/_components/Hero/hero.module.scss b/docs-website/src/pages/_components/Hero/hero.module.scss
@@ -83,7 +83,7 @@
           margin-left: 4px;
           height: 1.8rem;
           padding-left: 2px;
-          padding-right: 8px;
+          padding-right: 6px;
           font-family: 'Manrope';
           font-style: normal;
           font-weight: 400;
@@ -213,6 +213,7 @@
             font-size: .8rem;
             height: 1.2rem;
             padding-left: 0px;
+            padding-right: 4px;
           }
         }
         .hero__cta {

diff --git a/docs-website/src/pages/_components/Hero/index.js b/docs-website/src/pages/_components/Hero/index.js
@@ -24,7 +24,7 @@ import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 
 const SOLUTION_TEXTS = ["AI Governance", "Data Discovery", "AI Collaboration", "Data Governance", "Data Democratization", "Data Observability"];
 
-const Hero = ({}) => {
+const Hero = ({ onOpenTourModal }) => {
   // const { colorMode } = useColorMode();
   const textIndex = useMotionValue(0);
   const baseText = useTransform(textIndex, (latest) => SOLUTION_TEXTS[latest] || "");
@@ -71,12 +71,13 @@ const Hero = ({}) => {
               <Link className="cta__primary" to="/cloud">
                 Book a Demo
               </Link>
-              <Link
+              <a
                 className="cta__secondary"
-                to="https://www.acryldata.io/tour"
+                // to="https://www.acryldata.io/tour"
+                onClick={onOpenTourModal}
               >
                 Product Tour
-              </Link>
+              </a>
             </div>
             <Link className="hero__footer_cta" to="/docs">
               Get started with Core →

diff --git a/docs-website/src/pages/_components/Trial/index.js b/docs-website/src/pages/_components/Trial/index.js
@@ -3,7 +3,7 @@ import styles from "./trial.module.scss";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Link from "@docusaurus/Link";
 
-const Trial = () => {
+const Trial = ({onOpenTourModal}) => {
   return (
     <div className={styles.container}>
       <div className={styles.trial}>
@@ -15,7 +15,10 @@ const Trial = () => {
             </p>
             <div className={styles.btn_div}>
               <Link to="/cloud">Book a Demo</Link>
-              <Link to="https://www.acryldata.io/tour">Product Tour</Link>
+              <a
+                // to="https://www.acryldata.io/tour"
+                onClick={onOpenTourModal}
+              >Product Tour</a>
             </div>
             <Link className={styles.start_arrow} to="/docs">Get started with Core →</Link>
           </div>

diff --git a/docs-website/src/pages/_components/Trial/trial.module.scss b/docs-website/src/pages/_components/Trial/trial.module.scss
@@ -191,7 +191,7 @@
     flex-direction: column;
     width: 90vw;
     min-width: 0;
-    margin: 2rem auto;
+    margin: 4rem auto;
   }
   .trial {
     flex-direction: column;

diff --git a/docs-website/src/pages/cloud/UnifiedTabs/index.js b/docs-website/src/pages/cloud/UnifiedTabs/index.js
@@ -56,7 +56,7 @@ const TabbedComponent = () => {
               {activeTab === index && (
                 <div className={clsx(styles.imageContainer, styles.mobileImageContainer)}>
                   <div className={clsx(styles.tabImage)}>
-                    <video src={tabs[activeTab].image} controls={false} autoPlay muted loop />
+                    <video playsInline src={tabs[activeTab].image} controls={false} autoPlay muted loop />
                   </div>
                 </div>
               )}

diff --git a/docs-website/src/pages/index.js b/docs-website/src/pages/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";
@@ -17,6 +17,7 @@ import Community from "./_components/Community";
 import SocialMedia from "./_components/SocialMedia";
 import CaseStudy from "./_components/CaseStudy";
 import Trial from "./_components/Trial";
+import CloseButton from "@ant-design/icons/CloseCircleFilled";
 
 const companyIndexes = require("../../adoptionStoriesIndexes.json");
 const companies = companyIndexes.companies;
@@ -33,12 +34,27 @@ function Home() {
     window.location.replace("/docs");
   }
 
+  const [isTourModalVisible, setIsTourModalVisible] = useState(false);
+  const onOpenTourModal = () => {
+    setIsTourModalVisible(true);
+  };
+  const onCloseTourModal = () => {
+    setIsTourModalVisible(false);
+  };
   return !siteConfig.customFields.isSaas ? (
     <Layout
       title={siteConfig.tagline}
       description="DataHub is a data discovery application built on an extensible data catalog that helps you tame the complexity of diverse data ecosystems."
     >
-      <Hero />
+      {isTourModalVisible ? (
+        <div className="tourModal">
+          <div className="closeButtonWrapper" onClick={onCloseTourModal}>
+            <CloseButton />
+          </div>
+          <iframe src="https://www.acryldata.io/tour" />
+        </div>
+      ) : null}
+      <Hero onOpenTourModal={onOpenTourModal} />
       <div className="comapny__logos">
         <div className="text">
           Trusted by industry leaders&nbsp;
@@ -73,7 +89,7 @@ function Home() {
       <Community />
       <SocialMedia />
       <CaseStudy />
-      <Trial />
+      <Trial onOpenTourModal={onOpenTourModal} />
       {/* <Section>
         <div className="container">
           <div className="row row--centered">

diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss
@@ -416,6 +416,53 @@ div[class^="announcementBar"] {
     }
   }
 }
+
+@keyframes openModal {
+  0% {
+    opacity: 0;
+    scale: .8;
+  }
+  100% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.tourModal {
+  position: fixed;
+  top: 0; left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #000000CC;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  animation: openModal .3s ease-out;
+
+  iframe {
+    border-radius: 24px;
+    overflow: hidden;
+    width: 98%;
+    height: 98%;
+  }
+  .closeButtonWrapper {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    z-index: 100;
+    cursor: pointer;
+
+    span {
+      font-size: 36px;
+      path {
+        color: #CCC;
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 800px) {
   .comapny__logos {
     flex-direction: column;