aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:35:17 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:35:17 +0800
commit82d6f2150b5a96b9effbaf86b9c28abb5b2b750a (patch)
tree6c148213d45a99634b43193fa41f073f5235b450 /packages/website/ts/@next
parent5f177108d17357fae990679b68a7836ba53f648e (diff)
downloaddexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar.gz
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar.bz2
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar.lz
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar.xz
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.tar.zst
dexon-sol-tools-82d6f2150b5a96b9effbaf86b9c28abb5b2b750a.zip
Adds wrapGrid, bit of cleanup
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/layout.tsx7
-rw-r--r--packages/website/ts/@next/components/text.tsx2
-rw-r--r--packages/website/ts/@next/pages/landing.tsx84
3 files changed, 41 insertions, 52 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 9bf063040..ce5d6d578 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
import styled from 'styled-components';
interface WrapWidths {
@@ -106,6 +105,12 @@ export const WrapCentered = styled(WrapBase)`
align-items: center;
`;
+export const WrapGrid = styled(WrapBase)`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+`;
+
export const Column = styled.div<ColumnProps>`
padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
border: 1px dotted rgba(255, 0, 0, 0.3);
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 7954a5f28..6c45cc211 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors';
interface HeadingProps {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
- size?: 'default' | 'medium' | 'large';
+ size?: 'default' | 'medium' | 'large' | 'small';
center?: boolean;
children: Node | string;
noMargin?: any;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 69be9ee79..61d07641b 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,8 +1,10 @@
import * as React from 'react';
+import * as _ from 'lodash';
+import styled from 'styled-components';
import {colors} from 'ts/style/colors';
import {Button, ButtonWrap} from 'ts/@next/components/button';
-import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
+import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -11,6 +13,16 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg';
+/**
+ Note(ez): Maybe when we're done at least with a basic structure,
+ we can take out each section into e.g. LandingSectionIntro.tsx in
+ @next/sections/landing ? so then our routes would only look like
+
+ <SiteWrap>
+ <LandingSectionIntro />
+ <LandingSectionWhatever />
+ </SiteWrap>
+*/
export const NextLanding = () => (
<SiteWrap>
<Section>
@@ -41,7 +53,7 @@ export const NextLanding = () => (
</Wrap>
</Section>
- <Section bgColor={colors.backgroundDark}>
+ <Section bgColor={colors.backgroundDark} padLarge>
<WrapCentered width="narrow">
<ProtocolIcon/>
@@ -91,6 +103,18 @@ export const NextLanding = () => (
</Wrap>
</Section>
+ <Section padLarge>
+ <WrapCentered>
+ <Heading size="small">You're in good company</Heading>
+ </WrapCentered>
+
+ <WrapGrid width="narrow">
+ {_.map([...Array(9)], (item, index) => (
+ <SampleLogo />
+ ))}
+ </WrapGrid>
+ </Section>
+
<Section>
<Wrap>
<Column bgColor="#003831" colWidth="1/2" padLarge>
@@ -108,53 +132,13 @@ export const NextLanding = () => (
</Column>
</Wrap>
</Section>
-
- <Section>
- <Wrap>
- <Column colWidth="2/3">
- Powering Decentralized Exchange<br/>
- Example of a 2/3 1/3 assymetric composition
- </Column>
-
- <Column colWidth="1/3">
- RIGHT IMAGE
- </Column>
- </Wrap>
- </Section>
-
- <Section
- bgColor="#ff0000"
- fullWidth
- noPadding>
- <Wrap width="full">
- <Column colWidth="2/3">
- SAMPLE FLUSHED width
- </Column>
-
- <Column colWidth="1/3">
- RIGHT IMAGE
- </Column>
- </Wrap>
- </Section>
-
- <Section bgColor="#003831">
- <Wrap width="narrow">
- 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets.
- </Wrap>
-
- <Wrap>
- <Column colWidth="1/3">
- This
- </Column>
-
- <Column colWidth="1/3">
- is a
- </Column>
-
- <Column colWidth="1/3">
- three-column module
- </Column>
- </Wrap>
- </Section>
</SiteWrap>
);
+
+
+const SampleLogo = styled.div`
+ width: 60px;
+ height: 60px;
+ border: 1px solid blue;
+ margin: 30px 60px;
+`;