From c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 12 Dec 2018 09:47:55 +0100 Subject: WIP --- .../website/ts/@next/components/blockIconLink.tsx | 32 +++++ .../website/ts/@next/components/definition.tsx | 106 ++++++++++++++++ packages/website/ts/@next/components/hero.tsx | 103 ++++++++++++++++ packages/website/ts/@next/components/heroImage.tsx | 34 ++++++ packages/website/ts/@next/components/layout.tsx | 2 +- packages/website/ts/@next/components/newLayout.tsx | 39 ++++++ .../ts/@next/components/sections/landing/about.tsx | 133 ++++++--------------- .../@next/components/sections/landing/clients.tsx | 6 +- .../ts/@next/components/sections/landing/cta.tsx | 4 +- .../ts/@next/components/sections/landing/hero.tsx | 47 +++----- packages/website/ts/@next/components/siteWrap.tsx | 2 + 11 files changed, 379 insertions(+), 129 deletions(-) create mode 100644 packages/website/ts/@next/components/blockIconLink.tsx create mode 100644 packages/website/ts/@next/components/definition.tsx create mode 100644 packages/website/ts/@next/components/hero.tsx create mode 100644 packages/website/ts/@next/components/heroImage.tsx create mode 100644 packages/website/ts/@next/components/newLayout.tsx (limited to 'packages/website/ts/@next/components') diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx new file mode 100644 index 000000000..be3ded71f --- /dev/null +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {Link} from 'ts/@next/components/button'; +import {Icon} from 'ts/@next/components/icon'; + +interface Props { + icon: string; + title: string; + linkLabel: string; + linkUrl: string; +} + +export const BlockIconLink = (props: Props) => ( + +
+ +
+ +); + +const Wrap = styled.div` + padding: 40px; + display: flex; + align-items: center; + text-align: center; + background-color: ${props => props.theme.lightBgColor}; +`; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx new file mode 100644 index 000000000..88ef6acdc --- /dev/null +++ b/packages/website/ts/@next/components/definition.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {Link} from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; + +interface Action { + label: string; + url: string; +} + +interface Props { + isInline?: boolean; + isInlineIcon?: boolean; + isCentered?: boolean; + isWithMargin?: boolean; + iconSize?: 'medium' | 'large' | number; + title: string; + description: React.Node; + actions?: Action[]; +} + +export const Definition = (props: Props) => ( + + + + + + {props.title} + + + + {props.description} + + + {props.actions && + + {props.actions.map((item, index) => ( + + {item.label} + + ))} + + } + + +); + +const Wrap = styled.div` + max-width: ${props => props.isInline && '354px'}; + + & + & { + margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'}; + } + + @media (min-width: 768px) { + width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'}; + display: ${props => props.isInlineIcon && 'flex'}; + justify-content: ${props => props.isInlineIcon && 'space-between'}; + align-items: ${props => props.isInlineIcon && 'center'}; + text-align: ${props => props.isInlineIcon && 'left'}; + } + + @media (max-width: 768px) { + margin: 0 auto; + + & + & { + margin-top: ${props => props.isInline && '60px'}; + } + } +`; + +const TextWrap = styled.div` + width: 100%; + max-width: 560px; +`; + +const Title = styled.h2` + font-size: 20px; + line-height: 1.3; + margin-bottom: 15px; +`; + +const Paragraph = styled.p` + font-size: 17px; + opacity: 0.75; +`; + +const LinkWrap = styled.div` + display: inline-flex; + margin-top: 60px; + + a + a { + margin-left: 60px; + } +`; diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx new file mode 100644 index 000000000..d17856b8a --- /dev/null +++ b/packages/website/ts/@next/components/hero.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + title: string; + description: string; + figure?: React.Node; + actions?: React.Node; +} + +export const Hero = (props: Props) => ( +
+ + {props.figure && + + {props.figure} + + } + + + + {props.title} + + + + {props.description} + + + {props.actions && + + {props.actions} + + } + + +
+); + +const Section = styled.section` + padding: 120px 0; + + @media (max-width: 768px) { + padding: 60px 0; + } +`; + +const Wrap = styled.div` + width: calc(100% - 60px); + margin: 0 auto; + + @media (min-width: 768px) { + max-width: 1136px; + flex-direction: row-reverse; + display: flex; + align-items: center; + text-align: ${props => props.isCentered && 'center'}; + justify-content: ${props => props.isCentered ? 'center' : 'space-between'}; + } + + @media (max-width: 768px) { + text-align: center; + } +`; + +const Title = styled.h1` + font-size: ${props => props.isLarge ? '80px' : '58px'}; + font-weight: 300; + line-height: 1.1; + margin-bottom: 30px; + + @media (max-width: 1024px) { + font-size: 60px; + } + + @media (max-width: 768px) { + font-size: 46px; + } +`; + +const Description = styled.p` + font-size: 22px; + line-height: 31px; + padding: 0; + margin-bottom: 30px; + opacity: 0.75; +`; + +const Content = styled.div` + width: 100%; + + @media (min-width: 768px) { + max-width: ${props => props.width}; + } +`; + +const ButtonWrap = styled.div` + display: inline-flex; + align-items: center; + + * + * { + margin-left: 12px; + } +`; diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx new file mode 100644 index 000000000..51b35480b --- /dev/null +++ b/packages/website/ts/@next/components/heroImage.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; + +interface Props { + image: React.Node; +} + +export const LandingAnimation = (props: Props) => ( + + {props.image} + +); + +const Wrap = styled.figure` + border: 1px solid red; + display: inline-block; + + svg { + width: 100%; + height: auto; + } + + @media (min-width: 768px) { + width: 100%; + max-width: 400px; + } + + @media (max-width: 768px) { + width: 180px; + margin-bottom: 40px; + } +`; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index ce15bd2b3..32e92aa34 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -152,7 +152,7 @@ export const Column = styled.div` } @media (max-width: ${BREAKPOINTS.mobile}) { - padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : 0)}; margin-bottom: 20px; text-align: ${props => props.isMobileCentered && 'center'}; } diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx new file mode 100644 index 000000000..8a3514bd9 --- /dev/null +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + isPadded: boolean; + bgColor?: 'dark' | 'light' | string; +} + +export const Section = (props: Props) => ( + + + {props.children} + + +); + +Section.defaultProps = { + isPadded: true, +}; + +const SectionBase = styled.section` + width: calc(100% - 60px); + margin: 0 auto; + padding: 120px 0; + background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; + + @media (max-width: 768px) { + padding: 40px 0; + } +`; + +const Wrap = styled.div` + width: calc(100% - 60px); + max-width: 895px; + margin: 0 auto; + text-align: center; +`; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 0efa25215..4c246ec3e 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -1,105 +1,46 @@ import * as React from 'react'; import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; -import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; import {colors} from 'ts/style/colors'; -export const SectionLandingAbout = () => ( -
- - - - - - - - - - 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based - tokens. Anyone in the world can use 0x to service a wide variety of markets - ranging from gaming items to financial instruments to assets that could have - near existed before. - - - - Discover how developers use 0x - - -
- - - {/* Note you can also pass in a string "large/default" or a number for custom margins */} - - {/* NOTE: this probably should be withComponent as part of a
*/} - - - 873,435 - +import {Section} from 'ts/@next/components/newLayout'; - - Number of transactions - - - - - - $203M - - - - Total volume - - - - - - 227,372 - - - - Number of relayers - - - +export const SectionLandingAbout = () => ( +
+ + + + + + + + + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based + tokens. Anyone in the world can use 0x to service a wide variety of markets + ranging from gaming items to financial instruments to assets that could have + near existed before. + + + + Discover how developers use 0x + + +
); diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index a858f0c34..302100ac9 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,9 +1,11 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; +import {Section} from 'ts/@next/components/newLayout'; + interface ProjectLogo { name: string; imageUrl?: string; @@ -59,7 +61,7 @@ const projects: ProjectLogo[] = [ ]; export const SectionLandingClients = () => ( -
+
Join the growing number of projects developing on 0x diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index 2f853f95b..ad78a1ab4 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -19,7 +19,7 @@ export const SectionLandingCta = () => ( margin={[0, 0, 'default', 0]} /> - + Ready to build on 0x? @@ -45,7 +45,7 @@ export const SectionLandingCta = () => ( margin={[0, 0, 'default', 0]} /> - + Want help from the 0x team? diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 9e7ed7402..9c6ff7151 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -1,39 +1,30 @@ import * as React from 'react'; import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {LandingAnimation} from 'ts/@next/components/heroImage'; import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; +import {Hero} from 'ts/@next/components/hero'; + import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; export const SectionLandingHero = () => ( -
- - - - - - - - - - Powering Decentralized Exchange - - - - 0x is the best solution for adding
- exchange functionality to your business. - + } />} + actions={} + /> +); - - +const Actions = () => ( + <> + - - - - -
+ + ); diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 5071b8ef4..ae642f193 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -26,6 +26,8 @@ export interface ThemeInterface { const GLOBAL_THEMES: ThemeInterface = { dark: { bgColor: '#000000', + darkBgColor: '#111A19', + lightBgColor: '#003831', textColor: '#FFFFFF', linkColor: colors.brandLight, dropdownBg: '#111A19', -- cgit v1.2.3