diff --git a/landing/global.css b/landing/global.css --- a/landing/global.css +++ b/landing/global.css @@ -27,7 +27,7 @@ --violet-dark-80: #6d49ab; --violet-dark-60: #563894; --violet-dark-40: #44297a; - --violet-dark-40: #331f5c; + --violet-dark-20: #331f5c; --success-light-10: #d5f6e3; --success-light-50: #6cdf9c; --success-primary: #00c853; diff --git a/landing/request-access.css b/landing/request-access.css new file mode 100644 --- /dev/null +++ b/landing/request-access.css @@ -0,0 +1,34 @@ +.requestAccessSection { + display: flex; + flex-direction: column; + align-items: center; + padding: 144px 16px; + overflow: hidden; + position: relative; +} + +.header { + color: var(--white-80); + text-align: center; + margin-bottom: 56px; + z-index: var(--glow-z-index); +} + +.subscriptionform { + width: 624px; + max-width: 100vw; + display: flex; + justify-content: center; + padding: 0 16px; + z-index: var(--glow-z-index); +} + +.glow { + position: absolute; + width: 328px; + height: 328px; + border-radius: 164px; + background-color: var(--violet-dark-40); + bottom: -295px; + filter: blur(200px); +} diff --git a/landing/request-access.react.js b/landing/request-access.react.js new file mode 100644 --- /dev/null +++ b/landing/request-access.react.js @@ -0,0 +1,24 @@ +// @flow + +import classNames from 'classnames'; +import * as React from 'react'; + +import css from './request-access.css'; +import SubscriptionForm from './subscription-form.react.js'; +import typography from './typography.css'; + +function RequestAccess(): React.Node { + const headerClassName = classNames([typography.heading1, css.header]); + + return ( +
+

Request access for our beta today

+
+ +
+
+
+ ); +} + +export default RequestAccess;