LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-06 04:19:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

added mobile friendly signup screen

Browse Source
This commit is contained in:
philip-ellis-sp
2022-09-26 17:15:20 -04:00
parent 18d6dc6b85
commit 873016b46a
4 changed files with 77 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

16
src/components/conference/Hero/index.js
View File

@@ -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>
<div className={styles.button} onClick={handleSubmit}>
<div className={styles.link}>
<input className={styles.emailInput} type="text" id="fname" name="fname" placeholder="user.name@email.com"></input> */}
<SliderButton id="gVCODdMc" className={styles.button}>
Join the Waitlist
</div>
</div>
</SliderButton >
</div>
</div>
);

32
src/components/conference/Hero/styles.module.css
View File

@@ -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;
}