aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/pages/instant/instant.tsx7
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx41
-rw-r--r--packages/website/ts/style/colors.ts1
3 files changed, 48 insertions, 1 deletions
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index ae91d7094..5abfaf4b2 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -6,7 +6,9 @@ import { Footer } from 'ts/components/footer';
import { MetaTags } from 'ts/components/meta_tags';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Container } from 'ts/components/ui/container';
+import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant';
import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
@@ -43,9 +45,12 @@ export class Instant extends React.Component<InstantProps, InstantState> {
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
- style={{ position: 'relative' }}
+ style={{ backgroundColor: colors.instantBackground, position: 'relative' }}
translate={this.props.translate}
+ isNightVersion={true}
/>
+ <Container backgroundColor={colors.instantBackground} />
+ <Introducing0xInstant />
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
</Container>
);
diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
new file mode 100644
index 000000000..da457521f
--- /dev/null
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+
+export const Introducing0xInstant = () => (
+ <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.instantBackground }}>
+ <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
+ <Container className="sm-center sm-pt3">
+ <Text
+ fontColor={colors.white}
+ fontSize="42px"
+ lineHeight="52px"
+ fontFamily="Roboto Mono"
+ fontWeight="600"
+ >
+ Introducing 0x Instant
+ </Text>
+ </Container>
+ <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
+ <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
+ A free and flexible way to offer simple crypto
+ <br /> purchasing in any app or website.
+ </Text>
+ </Container>
+ <div className="py3">
+ <Button
+ type="button"
+ backgroundColor={colors.mediumBlue}
+ fontColor={colors.white}
+ fontSize="18px"
+ fontFamily="Roboto Mono"
+ >
+ Get Started
+ </Button>
+ </div>
+ </div>
+ </div>
+);
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 0620bae0f..119d22df7 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -13,6 +13,7 @@ const appColors = {
jobsPageOpenPositionRow: sharedColors.grey100,
metaMaskOrange: '#f68c24',
metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)',
+ instantBackground: '#222222',
};
export const colors = {