diff options
Diffstat (limited to 'packages/website/ts')
4 files changed, 85 insertions, 1 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx new file mode 100644 index 000000000..205982044 --- /dev/null +++ b/packages/website/ts/pages/instant/features.tsx @@ -0,0 +1,65 @@ +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'; + +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" /> + </Container> +); + +interface LinkInfo { + linkSrc: string; + displayText: string; +} + +interface FeatureItemProps { + imgSrc: string; + title: string; + description: string; + linkInfos: LinkInfo[]; + screenWidth: ScreenWidths; +} + +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"> + {title} + </Text> + <Container marginTop="32px"> + <Text fontSize="14px" lineHeight="2em"> + {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"> + {image} + <Container marginLeft="115px">{missionStatement}</Container> + </Container> + ) : ( + <Container className="flex flex-column items-center">{missionStatement}</Container> + )} + </div> + ); +}; diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 5abfaf4b2..87d6a64d4 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -6,7 +6,9 @@ import { Footer } from 'ts/components/footer'; import { MetaTags } from 'ts/components/meta_tags'; 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 { Screenshots } from 'ts/pages/instant/screenshots'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; @@ -51,6 +53,8 @@ export class Instant extends React.Component<InstantProps, InstantState> { /> <Container backgroundColor={colors.instantBackground} /> <Introducing0xInstant /> + <Screenshots /> + <Features /> <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 da457521f..183e4570c 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-py4 md-py4" style={{ backgroundColor: colors.instantBackground }}> + <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantBackground }}> <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 new file mode 100644 index 000000000..672cdef59 --- /dev/null +++ b/packages/website/ts/pages/instant/screenshots.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +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"> + <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" /> + </Container> +); |