crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): need more section for instant marketing page

Browse Source
This commit is contained in:
Brandon Millman
2018-11-27 12:31:27 -08:00
parent 3d88b7f289
commit 6c76731408
3 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/ts/pages/instant/features.tsx
View File

@@ -11,7 +11,7 @@ export interface FeatureProps {
}
export const Features = (props: FeatureProps) => (
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column">
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
<FeatureItem
imgSrc="images/instant/snt_screenshot.png"
title="Support ERC-20 and ERC-721 tokens"
@@ -75,7 +75,7 @@ interface FeatureItemProps {
const FeatureItem = (props: FeatureItemProps) => {
const { imgSrc, title, description, linkInfos, screenWidth } = props;
const isLargeScreen = screenWidth === ScreenWidths.Lg;
const image = <Container backgroundColor={colors.instantPrimaryBackground} width="425px" height="225px" />;
const image = <Container backgroundColor={colors.instantPrimaryBackground} maxWidth="425px" maxHeight="225px" />;
const info = (
<Container maxWidth="500px">
<Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>

2
packages/website/ts/pages/instant/instant.tsx
View File

@@ -8,6 +8,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
import { Container } from 'ts/components/ui/container';
import { Features } from 'ts/pages/instant/features';
import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant';
import { NeedMore } from 'ts/pages/instant/need_more';
import { Screenshots } from 'ts/pages/instant/screenshots';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
@@ -55,6 +56,7 @@ export class Instant extends React.Component<InstantProps, InstantState> {
<Introducing0xInstant />
<Screenshots />
<Features screenWidth={this.props.screenWidth} />
<NeedMore screenWidth={this.props.screenWidth} />
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
</Container>
);

48
packages/website/ts/pages/instant/need_more.tsx Normal file
View File

@@ -0,0 +1,48 @@
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
export interface NeedMoreProps {
screenWidth: ScreenWidths;
}
export const NeedMore = (props: NeedMoreProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
const className = isSmallScreen ? 'flex flex-column items-center' : 'flex';
const marginRight = isSmallScreen ? undefined : '200px';
return (
<Container
className="flex flex-column items-center py4 px3"
backgroundColor={colors.instantSecondaryBackground}
>
<Container className={className}>
<Container className="sm-center" marginRight={marginRight}>
<Text fontColor={colors.white} fontSize="32px" lineHeight="45px">
Need more flexibility?
</Text>
<Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px">
View our full documentation or reach out if you have any questions.
</Text>
</Container>
<Container className="py3 flex">
<Container marginRight="20px">
<Button
type="button"
backgroundColor={colors.white}
fontColor={colors.instantSecondaryBackground}
fontSize="18px"
>
Get in Touch
</Button>
</Container>
<Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
Explore the Docs
</Button>
</Container>
</Container>
</Container>
);
};