blob: da3f09faa003dbf4c18e43d9694c49aef893e8c8 (
plain) (
tree)
|
|
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';
import { ScreenWidths } from 'ts/types';
export interface Introducing0xInstantProps {
screenWidth: ScreenWidths;
onCTAClick: () => void;
}
export const Introducing0xInstant = (props: Introducing0xInstantProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
const zero = (
<Text fontColor={colors.white} fontSize="42px" fontWeight="600" fontFamily="Roboto Mono" Tag="span">
0
</Text>
);
const title = isSmallScreen ? (
<div>
Introducing<br />
{zero}x Instant
</div>
) : (
<div>Introducing {zero}x 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" 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"
onClick={props.onCTAClick}
>
Get Started
</Button>
</div>
</div>
</div>
);
};
|