aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/instant/features.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/instant/features.tsx')
-rw-r--r--packages/website/ts/pages/instant/features.tsx115
1 files changed, 0 insertions, 115 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
deleted file mode 100644
index ed98ceb53..000000000
--- a/packages/website/ts/pages/instant/features.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths, WebsitePaths } from 'ts/types';
-
-export interface FeatureProps {
- screenWidth: ScreenWidths;
- onGetStartedClick: () => void;
-}
-
-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: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
- };
- 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: `${WebsitePaths.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: `${WebsitePaths.Docs}/asset-buyer`,
- },
- ]}
- screenWidth={props.screenWidth}
- />
- </Container>
- );
-};
-
-interface FeatureItemProps {
- imgSrc: string;
- title: string;
- description: string;
- linkInfos: ActionLinkProps[];
- screenWidth: ScreenWidths;
-}
-
-const FeatureItem = (props: FeatureItemProps) => {
- const { imgSrc, title, description, linkInfos, screenWidth } = props;
- const isLargeScreen = screenWidth === ScreenWidths.Lg;
- const maxWidth = isLargeScreen ? '500px' : undefined;
- const image = (
- <Container className="center" minWidth="435px" maxHeight="225px">
- <Image src={imgSrc} additionalStyle={{ filter: 'drop-shadow(0px 4px 4px rgba(0,0,0,.25))' }} />
- </Container>
- );
- const info = (
- <Container maxWidth={maxWidth}>
- <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
- {title}
- </Text>
- <Container marginTop="28px">
- <Text fontFamily="Roboto Mono" fontSize="14px" lineHeight="2em" fontColor={colors.grey500}>
- {description}
- </Text>
- </Container>
- <Container className="flex" marginTop="28px">
- {_.map(linkInfos, linkInfo => (
- <Container key={linkInfo.displayText} marginRight="32px">
- <ActionLink {...linkInfo} />
- </Container>
- ))}
- </Container>
- </Container>
- );
- return (
- <Container className="flex flex-column items-center py4 px3">
- {isLargeScreen ? (
- <Container className="flex">
- {image}
- <Container marginLeft="115px">{info}</Container>
- </Container>
- ) : (
- <Container className="flex flex-column items-center" width="100%">
- {image}
- <Container marginTop="48px">{info}</Container>
- </Container>
- )}
- </Container>
- );
-};