aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/containers/instant.ts3
-rw-r--r--packages/website/ts/pages/instant/features.tsx70
-rw-r--r--packages/website/ts/pages/instant/instant.tsx6
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx2
-rw-r--r--packages/website/ts/pages/instant/screenshots.tsx2
-rw-r--r--packages/website/ts/style/colors.ts3
6 files changed, 55 insertions, 31 deletions
diff --git a/packages/website/ts/containers/instant.ts b/packages/website/ts/containers/instant.ts
index 9bcfb903b..12ae7454e 100644
--- a/packages/website/ts/containers/instant.ts
+++ b/packages/website/ts/containers/instant.ts
@@ -4,10 +4,12 @@ import { Dispatch } from 'redux';
import { Instant as InstantComponent, InstantProps } from 'ts/pages/instant/instant';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
interface ConnectedState {
translate: Translate;
+ screenWidth: ScreenWidths;
}
interface ConnectedDispatch {
@@ -16,6 +18,7 @@ interface ConnectedDispatch {
const mapStateToProps = (state: State, _ownProps: InstantProps): ConnectedState => ({
translate: state.translate,
+ screenWidth: state.screenWidth,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
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" />
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 119d22df7..522132f03 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -13,7 +13,8 @@ const appColors = {
jobsPageOpenPositionRow: sharedColors.grey100,
metaMaskOrange: '#f68c24',
metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)',
- instantBackground: '#222222',
+ instantPrimaryBackground: '#222222',
+ instantSecondaryBackground: '#333333',
};
export const colors = {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-14 23:13:36 +0800