diff options
Diffstat (limited to 'packages/website/ts')
-rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/pages/instant/instant.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/pages/instant/need_more.tsx | 48 |
3 files changed, 52 insertions, 2 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 3f5d3d8d1..96256d337 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -11,7 +11,7 @@ export interface FeatureProps { } export const Features = (props: FeatureProps) => ( - <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column"> + <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3"> <FeatureItem imgSrc="images/instant/snt_screenshot.png" title="Support ERC-20 and ERC-721 tokens" @@ -75,7 +75,7 @@ interface FeatureItemProps { const FeatureItem = (props: FeatureItemProps) => { const { imgSrc, title, description, linkInfos, screenWidth } = props; const isLargeScreen = screenWidth === ScreenWidths.Lg; - const image = <Container backgroundColor={colors.instantPrimaryBackground} width="425px" height="225px" />; + const image = <Container backgroundColor={colors.instantPrimaryBackground} maxWidth="425px" maxHeight="225px" />; const info = ( <Container maxWidth="500px"> <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}> diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index eaaeb1689..56d54cd06 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -8,6 +8,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { Container } from 'ts/components/ui/container'; import { Features } from 'ts/pages/instant/features'; import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant'; +import { NeedMore } from 'ts/pages/instant/need_more'; import { Screenshots } from 'ts/pages/instant/screenshots'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; @@ -55,6 +56,7 @@ export class Instant extends React.Component<InstantProps, InstantState> { <Introducing0xInstant /> <Screenshots /> <Features screenWidth={this.props.screenWidth} /> + <NeedMore screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </Container> ); diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx new file mode 100644 index 000000000..27835982f --- /dev/null +++ b/packages/website/ts/pages/instant/need_more.tsx @@ -0,0 +1,48 @@ +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 NeedMoreProps { + screenWidth: ScreenWidths; +} +export const NeedMore = (props: NeedMoreProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const className = isSmallScreen ? 'flex flex-column items-center' : 'flex'; + const marginRight = isSmallScreen ? undefined : '200px'; + return ( + <Container + className="flex flex-column items-center py4 px3" + backgroundColor={colors.instantSecondaryBackground} + > + <Container className={className}> + <Container className="sm-center" marginRight={marginRight}> + <Text fontColor={colors.white} fontSize="32px" lineHeight="45px"> + Need more flexibility? + </Text> + <Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px"> + View our full documentation or reach out if you have any questions. + </Text> + </Container> + <Container className="py3 flex"> + <Container marginRight="20px"> + <Button + type="button" + backgroundColor={colors.white} + fontColor={colors.instantSecondaryBackground} + fontSize="18px" + > + Get in Touch + </Button> + </Container> + <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px"> + Explore the Docs + </Button> + </Container> + </Container> + </Container> + ); +}; |