diff options
Diffstat (limited to 'packages/website/ts/pages/instant/features.tsx')
| -rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 28 |
1 files changed, 20 insertions, 8 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 96256d337..9b61df354 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; @@ -13,7 +14,7 @@ export interface FeatureProps { export const Features = (props: FeatureProps) => ( <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3"> <FeatureItem - imgSrc="images/instant/snt_screenshot.png" + imgSrc="images/instant/feature_1.svg" 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={[ @@ -29,7 +30,7 @@ export const Features = (props: FeatureProps) => ( screenWidth={props.screenWidth} /> <FeatureItem - imgSrc="images/instant/snt_screenshot.png" + imgSrc="images/instant/feature_2.svg" 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={[ @@ -41,7 +42,7 @@ export const Features = (props: FeatureProps) => ( screenWidth={props.screenWidth} /> <FeatureItem - imgSrc="images/instant/snt_screenshot.png" + imgSrc="images/instant/feature_3.svg" 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={[ @@ -75,9 +76,14 @@ interface FeatureItemProps { const FeatureItem = (props: FeatureItemProps) => { const { imgSrc, title, description, linkInfos, screenWidth } = props; const isLargeScreen = screenWidth === ScreenWidths.Lg; - const image = <Container backgroundColor={colors.instantPrimaryBackground} maxWidth="425px" maxHeight="225px" />; + const maxWidth = isLargeScreen ? '500px' : undefined; + const image = ( + <Container className="center" minWidth="435px" maxHeight="225px"> + <Image src={imgSrc} /> + </Container> + ); const info = ( - <Container maxWidth="500px"> + <Container maxWidth={maxWidth}> <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}> {title} </Text> @@ -92,7 +98,13 @@ const FeatureItem = (props: FeatureItemProps) => { window.open(linkInfo.linkSrc, '_blank'); }; return ( - <Container className="flex items-center" marginRight="32px" onClick={onClick} cursor="pointer"> + <Container + key={linkInfo.linkSrc} + className="flex items-center" + marginRight="32px" + onClick={onClick} + cursor="pointer" + > <Container> <Text fontSize="16px" fontColor={colors.white}> {linkInfo.displayText} @@ -118,9 +130,9 @@ const FeatureItem = (props: FeatureItemProps) => { <Container marginLeft="115px">{info}</Container> </Container> ) : ( - <Container className="flex flex-column items-center"> + <Container className="flex flex-column items-center" width="100%"> {image} - <Container marginTop="32px">{info}</Container> + <Container marginTop="48px">{info}</Container> </Container> )} </Container> |