added mobile friendly signup screen

package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/plugin-google-gtag": "^2.0.1",
         "@docusaurus/preset-classic": "2.0.1",
         "@mdx-js/react": "^1.6.22",
+        "@typeform/embed-react": "^1.21.0",
         "clsx": "^1.1.1",
         "docusaurus-plugin-openapi-docs": "github:philip-ellis-sp/docusaurus-plugin-openapi-docs",
         "docusaurus-theme-openapi-docs": "^1.1.10",
@@ -3298,6 +3299,29 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@typeform/embed": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@typeform/embed/-/embed-1.38.0.tgz",
+      "integrity": "sha512-qYxtwckEcRt++F1sUeILb/qmUFQ3PwcUxKedCBSseC8lFo1ukD1wmsBf+Il8YSRPKPqhTrGUG5WPaJg83n1xuw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typeform/embed-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@typeform/embed-react/-/embed-react-1.21.0.tgz",
+      "integrity": "sha512-nZi7OD5mxZUKQjkzxAll05JU6QNWuHuCE+L/S1Vagy7fgb/rdx4iEIfvqFogTcrVw61bCS6TaAJ+ateD7vR7sw==",
+      "dependencies": {
+        "@typeform/embed": "1.38.0",
+        "fast-deep-equal": "^3.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -17359,6 +17383,20 @@
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
     },
+    "@typeform/embed": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@typeform/embed/-/embed-1.38.0.tgz",
+      "integrity": "sha512-qYxtwckEcRt++F1sUeILb/qmUFQ3PwcUxKedCBSseC8lFo1ukD1wmsBf+Il8YSRPKPqhTrGUG5WPaJg83n1xuw=="
+    },
+    "@typeform/embed-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@typeform/embed-react/-/embed-react-1.21.0.tgz",
+      "integrity": "sha512-nZi7OD5mxZUKQjkzxAll05JU6QNWuHuCE+L/S1Vagy7fgb/rdx4iEIfvqFogTcrVw61bCS6TaAJ+ateD7vR7sw==",
+      "requires": {
+        "@typeform/embed": "1.38.0",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "@docusaurus/plugin-google-gtag": "^2.0.1",
     "@docusaurus/preset-classic": "2.0.1",
     "@mdx-js/react": "^1.6.22",
+    "@typeform/embed-react": "^1.21.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-openapi-docs": "github:philip-ellis-sp/docusaurus-plugin-openapi-docs",
     "docusaurus-theme-openapi-docs": "^1.1.10",

src/components/conference/Hero/index.js

@@ -4,6 +4,9 @@ import styles from "./styles.module.css";
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
 import { addDarkToFileName } from "../../../util/util";
+import { Widget } from '@typeform/embed-react'
+import { SliderButton } from '@typeform/embed-react'
+import { PopupButton } from '@typeform/embed-react'
 export default function ConferenceHero() {
   const background = '/conf/Shipyard-WaveBackground.png'
   const learnBuildDeploy = '/conf/LearnBuildDeploy-Light.png'
@@ -16,8 +19,11 @@ export default function ConferenceHero() {
 
   return (
     <div className={styles.mainCard}>
+      <div>
       <ThemedImage className={styles.background} sources={{light: useBaseUrl(background), dark: useBaseUrl(background)}}></ThemedImage>
       <ThemedImage className={styles.learnDeployText} sources={{light: useBaseUrl(learnBuildDeploy), dark: useBaseUrl(learnBuildDeploy)}}></ThemedImage>
+      </div>
+
       <div className={styles.signUpSection}>
         <div className={styles.imageContainer}>
           <ThemedImage className={styles.sailpointImage} sources={{light: useBaseUrl(sailpointImage), dark: useBaseUrl(sailpointImage)}}></ThemedImage>
@@ -31,15 +37,13 @@ export default function ConferenceHero() {
         <div className={styles.welcomeText}>
           Be the first to hear more about our innaugural conference for developers!
         </div>
-        <div className={styles.emailText}>
+        {/* <div className={styles.emailText}>
           Email Address
         </div>
-        <input className={styles.emailInput} type="text" id="fname" name="fname" placeholder="user.name@email.com"></input>
+        <input className={styles.emailInput} type="text" id="fname" name="fname" placeholder="user.name@email.com"></input> */}
-        <div className={styles.button} onClick={handleSubmit}>
+        <SliderButton id="gVCODdMc" className={styles.button}>
-          <div className={styles.link}>
             Join the Waitlist
-          </div>
+        </SliderButton >
-        </div>
       </div>
     </div>
   );

src/components/conference/Hero/styles.module.css

@@ -17,6 +17,22 @@
     top: 425px;
 }
 
+@media only screen and (max-width: 1324px) {
+    .mainCard {
+        grid-template-columns: auto;
+    }
+    .background {
+        width: 100%;
+        height: 265px;
+    }
+    .learnDeployText {
+        height: 187px;
+        right: 50px;
+        left: auto;
+        top: 99px;
+    }
+  }
+
 .signUpSection {
     min-width: 368px;
     width: 368px;
@@ -71,7 +87,7 @@
     border: 1px solid #DFE3E7;
     border-radius: 4px;
     height: 52px;
-    width: 433px;
+    width: 360px;
     font-size: 20px;
     padding-left: 15px;
 }
@@ -84,11 +100,11 @@
     font-size: 20px;
     font-weight: bold;
     line-height: 100%;
-  
+    color: #df61ca;
   
     /* Layout Properties */
     margin-top: 20px;
-    width: 433px;
+    width: 360px;
     height: 52px;
     line-height: 52px;
     /* UI Properties */
@@ -100,10 +116,18 @@
     border-radius: 5px;
   }
   
+  .button:hover {
+    cursor: pointer;
+    top: -2px;
+    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+    background-color: #c552ae10;
+    color: #cc27b0;
+  }
+
   .link {
     color: #df61ca;
   }
-  .link:hover {
+  .button:hover {
     color: #df61ca;
     cursor: pointer;
   }