diff --git a/marketing/src/components/modal/component.tsx b/marketing/src/components/modal/component.tsx index 5d7c23760..4fa687ed6 100644 --- a/marketing/src/components/modal/component.tsx +++ b/marketing/src/components/modal/component.tsx @@ -83,11 +83,11 @@ export const Modal: React.FC = ({ }} > {dismissable && ( -
+
diff --git a/marketing/src/components/modal/constants.ts b/marketing/src/components/modal/constants.ts index bcaffe466..2bf75e10d 100644 --- a/marketing/src/components/modal/constants.ts +++ b/marketing/src/components/modal/constants.ts @@ -1,5 +1,5 @@ export const COMMON_CONTENT_CLASSES = - 'w-11/12 absolute top-1/2 inset-x-4 left-1/2 transform -translate-y-1/2 sm:-translate-x-1/2 outline-none bg-white flex flex-col grow overflow-hidden rounded rounded-md p-6'; + 'w-11/12 absolute top-1/2 inset-x-4 left-1/2 transform -translate-y-1/2 sm:-translate-x-1/2 outline-none bg-white flex flex-col grow overflow-hidden'; export const CONTENT_CLASSES = { narrow: `sm:w-4/6 md:w-1/2 lg:w-5/12 xl:w-1/3 ${COMMON_CONTENT_CLASSES}`, diff --git a/marketing/src/components/modal/index.ts b/marketing/src/components/modal/index.ts index bb2f52567..ff2d4a4b2 100644 --- a/marketing/src/components/modal/index.ts +++ b/marketing/src/components/modal/index.ts @@ -1,2 +1,6 @@ -export { default } from './component'; +import dynamic from 'next/dynamic'; + +const ModalComponent = dynamic(() => import('./component'), { ssr: false }); + +export default ModalComponent; export type { ModalProps } from './types'; diff --git a/marketing/src/containers/home/component.tsx b/marketing/src/containers/home/component.tsx index bea67cfb1..6fae5df1a 100644 --- a/marketing/src/containers/home/component.tsx +++ b/marketing/src/containers/home/component.tsx @@ -8,6 +8,7 @@ import Developed from 'containers/home/developed'; import Newsletter from 'containers/newsletter'; import ScrollDown from 'containers/scroll-down'; import BlogPosts from 'containers/blog-posts'; +import WelcomeModal from 'containers/home/welcome-modal'; const Home: React.FC = () => { return ( @@ -20,6 +21,7 @@ const Home: React.FC = () => { + ); }; diff --git a/marketing/src/containers/home/welcome-modal/component.tsx b/marketing/src/containers/home/welcome-modal/component.tsx new file mode 100644 index 000000000..521ca7ca8 --- /dev/null +++ b/marketing/src/containers/home/welcome-modal/component.tsx @@ -0,0 +1,17 @@ +import { useCallback, useState } from 'react'; + +import Webinar from 'containers/methodology/webinar/component'; +import Modal from 'components/modal'; + +export const WelcomeModal: React.FC = () => { + const [isOpen, setIsOpen] = useState(true); + const handleDismissModal = useCallback(() => setIsOpen(!isOpen), [isOpen]); + + return ( + + + + ); +}; + +export default WelcomeModal; diff --git a/marketing/src/containers/methodology/webinar/index.ts b/marketing/src/containers/home/welcome-modal/index.ts similarity index 100% rename from marketing/src/containers/methodology/webinar/index.ts rename to marketing/src/containers/home/welcome-modal/index.ts diff --git a/marketing/src/containers/methodology/webinar/component.tsx b/marketing/src/containers/methodology/webinar/component.tsx index 2270e5e29..ba3744766 100644 --- a/marketing/src/containers/methodology/webinar/component.tsx +++ b/marketing/src/containers/methodology/webinar/component.tsx @@ -1,49 +1,35 @@ import { FC } from 'react'; -import Wrapper from 'containers/wrapper'; - -const Webinar: FC = () => { - return ( -
-
- -
-
-
Coming soon
-

- 5 New, Open-Access Datasets -
and our SBTN-Aligned -
Methodology. -

-
-
-
-

Join our webinar to find out more.

-
- Date & Time: Tues 21st Nov | 3pm CEST | 9am ET -
-
- - Register now - -
-
-
-
- -
-
- ); -}; + + Register now + +
+
+); export default Webinar; diff --git a/marketing/src/containers/methodology/webinar/index.tsx b/marketing/src/containers/methodology/webinar/index.tsx new file mode 100644 index 000000000..3bfabc37c --- /dev/null +++ b/marketing/src/containers/methodology/webinar/index.tsx @@ -0,0 +1,21 @@ +import { FC } from 'react'; + +import Wrapper from 'containers/wrapper'; + +import WebinarContent from './component'; + +const Webinar: FC = () => ( +
+
+ + + +
+ +
+
+
+); + +export default Webinar;