diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-11-27 16:49:49 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-11-29 02:59:54 +0800 |
commit | 6c43fa8f7253083bb5e50a3f8940f35d105c8bf1 (patch) | |
tree | a37599f231af9533e773c1419c91bfac8fe8debb /packages/website/ts/pages/instant/features.tsx | |
parent | 8a4e5dfb68852f11275eea7dd24cc442740a2332 (diff) | |
download | dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.gz dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.bz2 dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.lz dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.xz dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.zst dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.zip |
feat(website): add screenshots to instant page
Diffstat (limited to 'packages/website/ts/pages/instant/features.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 65 |
1 files changed, 65 insertions, 0 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> + ); +}; |