diff options
Diffstat (limited to 'packages/website/ts/pages')
4 files changed, 50 insertions, 30 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 205982044..b460796c1 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -6,14 +6,33 @@ import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; -export const Features = () => ( - <Container backgroundColor={colors.instantBackground} className="py3 flex justify-center"> - <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" /> - <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" /> +export interface FeatureProps { + screenWidth: ScreenWidths; +} + +export const Features = (props: FeatureProps) => ( + <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column"> + <FeatureItem + imgSrc="images/instant/snt_screenshot.png" + title="Support ERC-20 and ERC-721 tokens" + description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins." + linkInfos={[]} + screenWidth={props.screenWidth} + /> + <FeatureItem + imgSrc="images/instant/snt_screenshot.png" + title="Generate revenue for your business" + description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp." + linkInfos={[]} + screenWidth={props.screenWidth} + /> + <FeatureItem + imgSrc="images/instant/snt_screenshot.png" + title="Easy and Flexible Integration" + description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool." + linkInfos={[]} + screenWidth={props.screenWidth} + /> </Container> ); @@ -32,34 +51,35 @@ interface FeatureItemProps { const FeatureItem = (props: FeatureItemProps) => { const { imgSrc, title, description, linkInfos, screenWidth } = props; - const shouldShowImage = screenWidth === ScreenWidths.Lg; - const image = <Image src={imgSrc} maxWidth="500px" maxHeight="280px" />; - const missionStatementClassName = !shouldShowImage ? 'center' : undefined; - const missionStatement = ( - <Container className={missionStatementClassName} maxWidth="388px"> - <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px"> + const isLargeScreen = screenWidth === ScreenWidths.Lg; + const image = <Container backgroundColor={colors.instantPrimaryBackground} width="425px" height="225px" />; + const info = ( + <Container maxWidth="500px"> + <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}> {title} </Text> - <Container marginTop="32px"> - <Text fontSize="14px" lineHeight="2em"> + <Container marginTop="28px"> + <Text fontFamily="Roboto Mono" fontSize="14px" lineHeight="2em" fontColor={colors.grey500}> {description} </Text> </Container> </Container> ); return ( - <div - className="flex flex-column items-center py4 px3" - style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} - > - {shouldShowImage ? ( - <Container className="flex items-center" maxWidth="1200px"> + <Container className="flex flex-column items-center py4 px3"> + {isLargeScreen ? ( + <Container className="flex"> {image} - <Container marginLeft="115px">{missionStatement}</Container> + <Container marginLeft="115px">{info}</Container> </Container> ) : ( - <Container className="flex flex-column items-center">{missionStatement}</Container> + <Container className="flex flex-column items-center"> + {image} + <Container className="center" marginTop="32px"> + {info} + </Container> + </Container> )} - </div> + </Container> ); }; diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 87d6a64d4..eaaeb1689 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -47,14 +47,14 @@ export class Instant extends React.Component<InstantProps, InstantState> { <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{ backgroundColor: colors.instantBackground, position: 'relative' }} + style={{ backgroundColor: colors.instantPrimaryBackground, position: 'relative' }} translate={this.props.translate} isNightVersion={true} /> - <Container backgroundColor={colors.instantBackground} /> + <Container backgroundColor={colors.instantPrimaryBackground} /> <Introducing0xInstant /> <Screenshots /> - <Features /> + <Features screenWidth={this.props.screenWidth} /> <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 index 183e4570c..173fd98a6 100644 --- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx +++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx @@ -6,7 +6,7 @@ import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; export const Introducing0xInstant = () => ( - <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantBackground }}> + <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 diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx index 672cdef59..4c87f1a19 100644 --- a/packages/website/ts/pages/instant/screenshots.tsx +++ b/packages/website/ts/pages/instant/screenshots.tsx @@ -4,7 +4,7 @@ import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; export const Screenshots = () => ( - <Container backgroundColor={colors.instantBackground} className="py3 flex justify-center"> + <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center"> <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" /> <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" /> <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" /> |