aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/instant/introducing_0x_instant.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/instant/introducing_0x_instant.tsx')
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx67
1 files changed, 41 insertions, 26 deletions
diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
index 50a7a1b2d..92183ba98 100644
--- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -4,32 +4,47 @@ 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';
+import { ScreenWidths } from 'ts/types';
-export const Introducing0xInstant = () => (
- <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
- <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">
- Get Started
- </Button>
+export interface Introducing0xInstantProps {
+ screenWidth: ScreenWidths;
+}
+
+export const Introducing0xInstant = (props: Introducing0xInstantProps) => {
+ const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ const title = isSmallScreen ? (
+ <div>
+ Introducing<br />0x Instant
+ </div>
+ ) : (
+ <div>Introducing 0x Instant</div>
+ );
+ return (
+ <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
+ <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"
+ >
+ {title}
+ </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">
+ Get Started
+ </Button>
+ </div>
</div>
</div>
- </div>
-);
+ );
+};