-
Notifications
You must be signed in to change notification settings - Fork 114
/
WhyPaste.tsx
87 lines (85 loc) · 4.03 KB
/
WhyPaste.tsx
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { Box } from "@twilio-paste/box";
import { DisplayHeading } from "@twilio-paste/display-heading";
import { Column, Grid } from "@twilio-paste/grid";
import { Heading } from "@twilio-paste/heading";
import Image from "next/image";
import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrowLarge";
import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png";
import WhyPasteImg from "../../assets/images/customization/why-paste.png";
import { A11yIcon } from "../icons/A11yIcon";
import { CustomizableIcon } from "../icons/CustomizableIcon";
import { ThemableIcon } from "../icons/ThemableIcon";
import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayoutUtils";
import { ReasonBlock } from "./ReasonBlock";
export const WhyPaste = (): JSX.Element => {
return (
<LandingPageSection
backgroundColor="colorBackgroundPrimaryWeakest"
paddingTop={["space0", "space0", "space0"]}
paddingBottom={["space0", "space0", "space0"]}
maxWidth="96%"
marginX="auto"
>
<Box position="relative" maxWidth="1400px" marginX="auto">
<LandingPageSectionContent variant="narrow" zIndex="zIndex10">
<Box maxWidth="size60" marginBottom="space130">
<Heading as="h2" variant="heading40">
Why Paste
</Heading>
<DisplayHeading as="h3" variant="displayHeading30">
A fully extensible and accessible customization platform
</DisplayHeading>
</Box>
<Grid gutter={["space60", "space120", "space200"]} vertical={[true, false, false]}>
<Column span={6}>
<ReasonBlock
icon={<ThemableIcon decorative />}
headingText="Themeable"
subHeadingText="To meet your brand needs"
description="Change a single color or customize your full palette—with our theming system, your UIs come out looking exactly the way you want them."
href="/customization/creating-a-custom-theme"
linkText="Learn about theming"
/>
</Column>
<Column span={6}>
<ReasonBlock
icon={<CustomizableIcon decorative />}
headingText="Customizable"
subHeadingText="To meet your application needs"
description="Fully customize all components of the same type across an application, or extend Paste components to create your own custom components."
href="/customization/customizing-component-elements"
linkText="Learn about customizing components"
/>
</Column>
<Column span={6}>
<ReasonBlock
icon={<A11yIcon decorative />}
headingText="Accessible"
subHeadingText="To meet your customers’ needs"
description="Do the right thing for all your customers' needs with accessible UIs built out of the box that support high contrast, screen reader support, and much more."
href="/inclusive-design"
linkText="Read our Inclusive Design Checklist"
/>
</Column>
</Grid>
<Box display={["block", "none"]} width="100%" maxWidth="400px" marginX="auto" marginTop="space70">
<Image src={WhyPasteMobile} alt="" placeholder="blur" style={{ width: "100%", height: "100%" }} />
</Box>
<Box as="span" position="absolute" display={["none", "none", "block"]} bottom={-280} left={0}>
<DoodleLoopArrowLarge />
</Box>
</LandingPageSectionContent>
<Box
display={["none", "block"]}
position="absolute"
bottom={["-300px", "-300px", "-300px", "-350px"]}
right="0"
width={["700px", "700px", "700px", "800px"]}
maxWidth="100%"
>
<Image src={WhyPasteImg} alt="" placeholder="blur" style={{ width: "100%", height: "100%" }} />
</Box>
</Box>
</LandingPageSection>
);
};