email sign up modal and fixes

packages/fakeyou.com/src/components/common/Modal/Modal.scss

@@ -4,7 +4,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(darken($panel, 8%), 0.7) !important;
+  background-color: rgba(darken($panel, 8%), 0.8) !important;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,7 +67,7 @@
 .fy-core-modal {
   .modal-content {
     // width: 85vw;
-    min-height: 70vh;
+    // min-height: 70vh;
     padding: 1.5rem;
   }
 }

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/EmailSignUp.tsx

@@ -1,15 +1,27 @@
 import React, { useState } from "react";
 import { Widget } from "@typeform/embed-react";
+import ModalHeader from "components/modals/ModalHeader";
 
 interface EmailSignUpProps {
   mobile?: boolean;
+  showHanashi?: boolean;
+  handleClose?: any;
 }
 
-export default function EmailSignUp({ mobile }: EmailSignUpProps) {
+export default function EmailSignUp({
+  mobile,
+  showHanashi = true,
+  handleClose,
+}: EmailSignUpProps) {
   const [isHanashiHovered, setIsHanashiHovered] = useState(false);
 
   return (
     <div>
+      {handleClose && (
+        <div style={{ marginBottom: "56px" }}>
+          <ModalHeader title=" " handleClose={handleClose} />
+        </div>
+      )}
       <h1 className="text-center mb-5 fw-bold display-5">
         Join the waitlist today!
       </h1>
@@ -18,11 +30,11 @@ export default function EmailSignUp({ mobile }: EmailSignUpProps) {
           paddingTop: mobile ? "0px" : "60px",
           backgroundColor: "#242433",
           borderRadius: "1rem",
-          borderTop: "3px solid #e66462",
+          borderTop: handleClose ? "none" : "3px solid #e66462",
           position: "relative",
         }}
       >
-        {!mobile && (
+        {showHanashi && (
           <img
             src={
               isHanashiHovered

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PostlaunchLanding/PostlaunchLanding.tsx

@@ -20,6 +20,7 @@ import {
 import ScrollingSceneCarousel from "./ScrollingSceneCarousel";
 import EmailSignUp from "./EmailSignUp";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useModal } from "hooks";
 
 interface PostlaunchLandingProps {
   sessionWrapper: SessionWrapper;
@@ -28,6 +29,12 @@ interface PostlaunchLandingProps {
 export default function PostlaunchLanding(props: PostlaunchLandingProps) {
   const [imageHeight, setImageHeight] = useState("100vh");
   const domain: WebsiteConfig = useDomainConfig();
+  const { open } = useModal();
+  const openModal = () =>
+    open({
+      component: EmailSignUp,
+      props: { mobile: true, showHanashi: false, handleClose: openModal },
+    });
 
   const webpageTitle =
     domain.website === Website.FakeYou
@@ -117,7 +124,7 @@ export default function PostlaunchLanding(props: PostlaunchLandingProps) {
         fontLarge={true}
         icon={faArrowRight}
         iconFlip={true}
-        href="https://7mjlxvmjq8u.typeform.com/to/ZQTkv9ha"
+        onClick={openModal}
       />
     </div>
   );
@@ -228,7 +235,7 @@ export default function PostlaunchLanding(props: PostlaunchLandingProps) {
 
           {!props.sessionWrapper.canAccessStudio() ? (
             <div style={{ marginTop: "100px" }}>
-              <EmailSignUp mobile={true} />
+              <EmailSignUp mobile={true} showHanashi={false} />
             </div>
           ) : null}
         </div>