diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-29 21:18:19 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-29 21:18:19 +0800 |
commit | 1bba985124549aab3b79fa9834c613c2fe829b51 (patch) | |
tree | a86d20e6471902189b6682b830e9a22d891a3e76 /packages/website | |
parent | 8bcb5b00ba464188b790ff61192d441842fb6b25 (diff) | |
download | dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar.gz dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar.bz2 dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar.lz dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar.xz dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.tar.zst dexon-0x-contracts-1bba985124549aab3b79fa9834c613c2fe829b51.zip |
Add text and illustrations for home
Diffstat (limited to 'packages/website')
5 files changed, 38 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 624ab760d..5b1ee9d92 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -4,7 +4,8 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; export interface Props { - size?: string; + size?: 'normal' | 'medium' | 'large'; + center?: boolean; } const StyledHeading = styled.h1` @@ -20,6 +21,18 @@ const StyledIntro = styled.p` line-height: 1.823529412em; `; +const StyledText = styled.p<Props>` + color: ${colors.white}; + font-size: 1rem; + ${(props: Props) => props.size === 'medium' && ` + font-size: 1.555555556rem; + line-height: 1.357142857em; + `} + ${(props: Props) => props.center && ` + text-align: center + `} +`; + export const Heading: React.StatelessComponent<Props> = ({ children }) => ( <StyledHeading>{children}</StyledHeading> ); @@ -27,3 +40,12 @@ export const Heading: React.StatelessComponent<Props> = ({ children }) => ( export const Intro: React.StatelessComponent<Props> = ({ children }) => ( <StyledIntro>{children}</StyledIntro> ); + +export const Text: React.StatelessComponent<Props> = ({ children, ...props }) => ( + <StyledText {...props}>{children}</StyledText> +); + +Text.defaultProps = { + size: 'normal', + center: false, +}; diff --git a/packages/website/ts/@next/icons/illustrations/protocol.svg b/packages/website/ts/@next/icons/illustrations/protocol.svg new file mode 100644 index 000000000..71453194a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/protocol.svg @@ -0,0 +1 @@ +<svg width="144" height="144" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:screen" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"><path d="M72 132.722c33.536 0 60.722-27.186 60.722-60.722S105.536 11.278 72 11.278 11.278 38.464 11.278 72 38.464 132.722 72 132.722z"/><path d="M72 20.557A9.278 9.278 0 1 0 72 2a9.278 9.278 0 0 0 0 18.557zM114.942 38.336a9.278 9.278 0 1 0-9.278-9.278 9.278 9.278 0 0 0 9.278 9.278zM132.722 81.278A9.278 9.278 0 0 0 142 72a9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 1 0 0 18.556zM114.942 124.221a9.279 9.279 0 1 0 0-18.557 9.279 9.279 0 0 0 0 18.557zM72 142a9.278 9.278 0 0 0 9.278-9.278 9.278 9.278 0 1 0-18.556 0A9.278 9.278 0 0 0 72 142zM29.058 124.221a9.278 9.278 0 0 0 9.278-9.279 9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 0 0-9.279 9.278 9.278 9.278 0 0 0 9.279 9.279zM11.278 81.278a9.278 9.278 0 1 0 0-18.556 9.278 9.278 0 0 0 0 18.556zM29.058 38.336a9.278 9.278 0 1 0 0-18.557 9.278 9.278 0 0 0 0 18.557zM68.114 75.886c-2.138-2.137-2.138-5.635 0-7.82 2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.634 0 7.82-2.185 2.138-5.683 2.138-7.82 0zM49.363 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.137-2.138 5.635-2.138 7.821 0 2.137 2.137 2.137 5.634 0 7.82a5.571 5.571 0 0 1-7.821 0zM30.66 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.636-2.138 7.822 0 2.137 2.137 2.137 5.634 0 7.82-2.186 2.138-5.684 2.138-7.821 0zM86.816 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.82 0zM105.518 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.821 0zM53.25 58.738c0-3.06 2.477-5.489 5.489-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489-3.011.048-5.489-2.43-5.489-5.49zM40.036 45.525c0-3.06 2.478-5.489 5.49-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489a5.453 5.453 0 0 1-5.489-5.49zM79.724 85.213c0-3.06 2.477-5.49 5.49-5.49 3.06 0 5.488 2.478 5.488 5.49 0 3.06-2.477 5.49-5.489 5.49-3.06.048-5.49-2.43-5.49-5.49zM92.937 98.475c0-3.06 2.477-5.49 5.49-5.49a5.483 5.483 0 0 1 5.488 5.49c0 3.06-2.477 5.489-5.489 5.489s-5.49-2.478-5.49-5.49zM85.213 53.25c3.06 0 5.49 2.477 5.49 5.488 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.49-5.49 5.483 5.483 0 0 1 5.49-5.489zM98.475 40.036c3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.477 5.489-5.49 5.489a5.484 5.484 0 0 1-5.489-5.49c-.048-3.06 2.43-5.489 5.49-5.489zM58.739 79.724c3.06 0 5.489 2.477 5.489 5.489 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.489-5.49c0-3.06 2.478-5.49 5.49-5.49zM45.525 92.937c3.06 0 5.49 2.477 5.49 5.49a5.483 5.483 0 0 1-5.49 5.488 5.483 5.483 0 0 1-5.489-5.489 5.484 5.484 0 0 1 5.49-5.49zM68.114 49.363c2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.635 0 7.82-2.137 2.138-5.634 2.138-7.82 0a5.483 5.483 0 0 1 0-7.82zM68.114 30.66c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.636 0 7.822-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.684 0-7.821zM68.114 86.816c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.683 0-7.82zM68.114 105.518c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.138-5.634 2.138-7.82 0-2.186-2.186-2.186-5.683 0-7.821z"/></g></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg new file mode 100644 index 000000000..f3e44d53a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg @@ -0,0 +1 @@ +<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76 1.502l-30.852 44.8H76L76.05 76l30.803-44.9H76.001V1.502zM76 75.997l-30.853 44.799H76l.05 29.699 30.803-44.899H76V75.997z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M1.502 75.998l44.8 30.852V75.998L76 75.948 31.1 45.144v30.853H1.503zM76 76l45.101 31.522V76L151 75.95l-45.202-31.47V76H76z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/support.svg b/packages/website/ts/@next/icons/illustrations/support.svg new file mode 100644 index 000000000..d3f2294cc --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/support.svg @@ -0,0 +1 @@ +<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M114.869 14.138H38.226v124.818h76.643V14.138z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M101.73 26.189H51.365v100.73h50.365V26.189z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76.547 76.554c13.908 0 25.183-11.275 25.183-25.183 0-13.907-11.275-25.182-25.183-25.182-13.907 0-25.182 11.275-25.182 25.182 0 13.908 11.275 25.183 25.182 25.183zM76.547 126.919c13.908 0 25.183-11.274 25.183-25.182S90.455 76.554 76.547 76.554c-13.907 0-25.182 11.275-25.182 25.183s11.275 25.182 25.182 25.182z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 463d53d44..849437c26 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,12 +5,15 @@ import { colors } from 'ts/style/colors' import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro } from 'ts/@next/components/text'; +import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import protocol from 'ts/@next/icons/illustrations/protocol.svg'; const Icon = styled.div` flex-shrink: 0; + + ${props => props.center && `text-align: center`} `; export const NextLanding = () => ( @@ -22,7 +25,7 @@ export const NextLanding = () => ( <Intro>0x is the best solution for adding exchange functionality to your business.</Intro> <div> <Button text="Get Started" inline={true} /> - <Button text="Learn More" transparent={true} inline={true} /> + <ButtonTransparent text="Learn More" inline={true} /> </div> </Column> @@ -31,6 +34,13 @@ export const NextLanding = () => ( </Column> </Wrap> </Section> + + <Section bgColor={colors.backgroundDark} noPadding> + <Icon as={protocol as 'svg'} /> + <Text size="medium" center={true}>0x is the best solution for adding exchange functionality to your business.</Text> + <Text size="medium" center={true}>Discover how developers use 0x (need arrow + line under)</Text> + </Section> + <Section> <Wrap> <Column colWidth="2/3"> |