aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-11-29 21:18:19 +0800
committerFred Carlsen <fred@sjelfull.no>2018-11-29 21:18:19 +0800
commit1bba985124549aab3b79fa9834c613c2fe829b51 (patch)
treea86d20e6471902189b6682b830e9a22d891a3e76 /packages/website
parent8bcb5b00ba464188b790ff61192d441842fb6b25 (diff)
downloaddexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar.gz
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar.bz2
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar.lz
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar.xz
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.tar.zst
dexon-sol-tools-1bba985124549aab3b79fa9834c613c2fe829b51.zip
Add text and illustrations for home
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/text.tsx24
-rw-r--r--packages/website/ts/@next/icons/illustrations/protocol.svg1
-rw-r--r--packages/website/ts/@next/icons/illustrations/ready-to-build.svg1
-rw-r--r--packages/website/ts/@next/icons/illustrations/support.svg1
-rw-r--r--packages/website/ts/@next/pages/landing.tsx14
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">