blob: 205982044d9fe126f4267eff22b981dcbc604847 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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>
);
};
|