diff options
Diffstat (limited to 'packages/website/ts/pages/instant/features.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 106 |
1 files changed, 56 insertions, 50 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 73be793d5..9c1668c1c 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -6,63 +6,65 @@ 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'; +import { utils } from 'ts/utils/utils'; export interface FeatureProps { screenWidth: ScreenWidths; + onGetStartedClick: () => void; } -export const Features = (props: FeatureProps) => ( - <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3"> - <FeatureItem - 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={[ - { - displayText: 'Get started', - linkSrc: 'google.com', - }, - { - displayText: 'Explore the docs', - linkSrc: 'google.com', - }, - ]} - screenWidth={props.screenWidth} - /> - <FeatureItem - 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={[ - { - displayText: 'Learn about affiliate fees', - linkSrc: 'google.com', - }, - ]} - screenWidth={props.screenWidth} - /> - <FeatureItem - 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={[ - { - displayText: 'Explore AssetBuyer', - linkSrc: 'google.com', - }, - { - displayText: 'Learn about liquidity', - linkSrc: 'google.com', - }, - ]} - screenWidth={props.screenWidth} - /> - </Container> -); +export const Features = (props: FeatureProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const getStartedLinkInfo = { + displayText: 'Get started', + onClick: props.onGetStartedClick, + }; + const exploreTheDocsLinkInfo = { + displayText: 'Explore the docs', + linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`, + }; + const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo]; + return ( + <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3"> + <FeatureItem + 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={tokenLinkInfos} + screenWidth={props.screenWidth} + /> + <FeatureItem + 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={[ + { + displayText: 'Learn about affiliate fees', + linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`, + }, + ]} + screenWidth={props.screenWidth} + /> + <FeatureItem + 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={[ + { + displayText: 'Explore AssetBuyer', + linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`, + }, + ]} + screenWidth={props.screenWidth} + /> + </Container> + ); +}; interface LinkInfo { displayText: string; - linkSrc: string; + linkSrc?: string; + onClick?: () => void; } interface FeatureItemProps { @@ -95,7 +97,11 @@ const FeatureItem = (props: FeatureItemProps) => { <Container className="flex" marginTop="28px"> {_.map(linkInfos, linkInfo => { const onClick = (event: React.MouseEvent<HTMLElement>) => { - window.open(linkInfo.linkSrc, '_blank'); + if (!_.isUndefined(linkInfo.onClick)) { + linkInfo.onClick(); + } else if (!_.isUndefined(linkInfo.linkSrc)) { + utils.openUrl(linkInfo.linkSrc); + } }; return ( <Container |