added webinar

marketing/src/components/modal/component.tsx

@@ -83,11 +83,11 @@ export const Modal: React.FC<ModalProps> = ({
                   }}
                 >
                   {dismissable && (
-                    <div className="relative flex items-center mb-4">
+                    <div className="absolute flex items-center z-50 top-0 right-0">
                       <button
                         type="button"
                         onClick={onDismiss}
-                        className="absolute flex items-center px-4 py-4 text-sm text-gray-300 rounded-md -right-4 -top-4 focus:text-black hover:text-black"
+                        className="flex items-center px-4 py-4 text-sm text-gray-300 rounded-md"
                       >
                         <XIcon className="w-6 h-6 text-gray-500" />
                       </button>

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}`,

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';

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 = () => {
       <Developed />
       <BlogPosts />
       <Newsletter />
+      <WelcomeModal />
     </>
   );
 };

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 (
+    <Modal open={isOpen} onDismiss={handleDismissModal}>
+      <Webinar />
+    </Modal>
+  );
+};
+
+export default WelcomeModal;

marketing/src/containers/methodology/webinar/component.tsx

@@ -1,49 +1,35 @@
 import { FC } from 'react';
 
-import Wrapper from 'containers/wrapper';
-
-const Webinar: FC = () => {
-  return (
-    <section className="bg-white" id="stay-up-to-date">
-      <div className="relative z-20">
-        <Wrapper>
-          <div
-            className="relative max-w-[993px] h-[495px] space-y-12 py-12 px-14 mx-auto text-white bg-blue-900 bg-cover bg-center bg-no-repeat"
-            style={{
-              backgroundImage: 'url(/images/methodology/webinar-bg.png)',
-            }}
-          >
-            <div className="space-y-2">
-              <div className="uppercase text-xl font-display font-black">Coming soon</div>
-              <h2 className="uppercase text-[55px] leading-tight font-display font-black">
-                5 New, <span className="bg-orange-500 text-blue-900">Open-Access Datasets</span>
-                <br /> and our SBTN-Aligned
-                <br /> Methodology.
-              </h2>
-            </div>
-            <div className="flex justify-between items-end">
-              <div className="space-y-4">
-                <p className="text-2xl">Join our webinar to find out more.</p>
-                <div>
-                  <strong>Date & Time:</strong> Tues 21st Nov | 3pm CEST | 9am ET
-                </div>
-              </div>
-              <a
-                href="https://us02web.zoom.us/webinar/register/3516986785955/WN_jrVPnHiySFKNXd1nDRPwNQ#/registration"
-                className="font-semibold block w-[195px] h-[82px] flex items-center hover:cursor-pointer justify-center border-2 border-white"
-              >
-                Register now
-              </a>
-            </div>
-          </div>
-        </Wrapper>
-      </div>
-
-      <div className="flex flex-col justify-end overflow-hidden relative z-10 aspect-[1440/580] -mt-80">
-        <video src="/videos/earth.mp4" className="w-full aspect-auto" loop muted />
+const Webinar: FC = () => (
+  <div
+    className="relative max-w-[993px] h-[495px] space-y-12 py-12 px-14 mx-auto text-white bg-blue-900 bg-cover bg-center bg-no-repeat"
+    style={{
+      backgroundImage: 'url(/images/methodology/webinar-bg.png)',
+    }}
+  >
+    <div className="space-y-2">
+      <div className="uppercase text-xl font-display font-black">Coming soon</div>
+      <h2 className="uppercase text-[55px] leading-tight font-display font-black">
+        5 New, <span className="bg-orange-500 text-blue-900">Open-Access Datasets</span>
+        <br /> and our SBTN-Aligned
+        <br /> Methodology.
+      </h2>
+    </div>
+    <div className="flex justify-between items-end">
+      <div className="space-y-4">
+        <p className="text-2xl">Join our webinar to find out more.</p>
+        <div>
+          <strong>Date & Time:</strong> Tues 21st Nov | 3pm CEST | 9am ET
+        </div>
       </div>
-    </section>
-  );
-};
+      <a
+        href="https://us02web.zoom.us/webinar/register/3516986785955/WN_jrVPnHiySFKNXd1nDRPwNQ#/registration"
+        className="font-semibold block w-[195px] h-[82px] flex items-center hover:cursor-pointer justify-center border-2 border-white"
+      >
+        Register now
+      </a>
+    </div>
+  </div>
+);
 
 export default Webinar;

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 = () => (
+  <section className="bg-white" id="stay-up-to-date">
+    <div className="relative z-20">
+      <Wrapper>
+        <WebinarContent />
+      </Wrapper>
+    </div>
+
+    <div className="flex flex-col justify-end overflow-hidden relative z-10 aspect-[1440/580] -mt-80">
+      <video src="/videos/earth.mp4" className="w-full aspect-auto" loop muted />
+    </div>
+  </section>
+);
+
+export default Webinar;