From b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 12 Dec 2018 13:24:13 +0100 Subject: More layout changes --- .../website/ts/@next/components/blockIconLink.tsx | 27 ++++++ .../website/ts/@next/components/definition.tsx | 7 +- packages/website/ts/@next/components/footer.tsx | 7 +- packages/website/ts/@next/components/newLayout.tsx | 98 +++++++++++++++---- .../ts/@next/components/sections/landing/about.tsx | 55 ++++++++++- .../@next/components/sections/landing/clients.tsx | 17 ++-- .../ts/@next/components/sections/landing/cta.tsx | 76 +++++---------- .../ts/@next/components/sections/landing/hero.tsx | 10 +- packages/website/ts/@next/pages/landing.tsx | 7 ++ packages/website/ts/@next/pages/why.tsx | 108 ++++++++++----------- packages/website/tsconfig.json | 5 +- 11 files changed, 263 insertions(+), 154 deletions(-) diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index be3ded71f..cc3e88280 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => ( size="large" margin={[0, 0, 'default', 0]} /> + + + {props.title} + + + + {props.linkLabel} + ); const Wrap = styled.div` + width: calc(50% - 15px); + height: 400px; padding: 40px; display: flex; + justify-content: center; align-items: center; text-align: center; background-color: ${props => props.theme.lightBgColor}; + + @media (max-width: 900px) { + width: 100%; + margin-top: 30px; + } +`; + +const Title = styled.h2` + font-size: 20px; + margin-bottom: 30px; + color: ${props => props.theme.linkColor}; `; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 88ef6acdc..da72fe805 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -21,7 +21,7 @@ interface Props { } export const Definition = (props: Props) => ( - + props.isInline && '354px'}; & + & { - margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'}; + margin-top: ${props => props.isInlineIcon && '120px'}; + margin-top: ${props => props.isWithMargin && '60px'}; } @media (min-width: 768px) { @@ -68,7 +69,7 @@ const Wrap = styled.div` display: ${props => props.isInlineIcon && 'flex'}; justify-content: ${props => props.isInlineIcon && 'space-between'}; align-items: ${props => props.isInlineIcon && 'center'}; - text-align: ${props => props.isInlineIcon && 'left'}; + text-align: ${props => (props.isInlineIcon || !props.isCentered) && 'left'}; } @media (max-width: 768px) { diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 9c2ed1ea8..d6f11b653 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -108,7 +108,12 @@ const LinkList = (props: LinkListProps) => ( ); -const FooterSection = Section.withComponent('footer'); +const FooterSection = styled.section` + padding: 30px; + margin-top: 30px; + background-color: #181818; +`; + const FooterWrap = styled(FooterSection)` color: ${colors.white}; diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 8a3514bd9..8598b8f12 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -1,39 +1,99 @@ import * as React from 'react'; import styled from 'styled-components'; -interface Props { - isPadded: boolean; +interface WrapProps { + isFullWidth?: boolean; + isTextCentered?: boolean; +} + +interface SectionProps { + isPadded?: boolean; + isFullWidth?: boolean; + isFlex?: boolean; + flexBreakpoint?: string; + maxWidth?: string; bgColor?: 'dark' | 'light' | string; } -export const Section = (props: Props) => ( - - - {props.children} - - -); +interface FlexProps { + padding?: string; + isFlex?: boolean; +} -Section.defaultProps = { - isPadded: true, +interface ColumnProps { + padding?: string; +} + +export const Section = (props: SectionProps) => { + return ( + + + {props.children} + + + ); }; +export const Column = styled.div` + width: ${props => props.width}; + max-width: ${props => props.maxWidth}; + padding: ${props => props.padding}; + + @media (max-width: 768px) { + width: 100%; + margin-bottom: 60px; + } +`; + +export const FlexWrap = styled.div` + padding: ${props => props.padding}; + + @media (min-width: ${props => props.flexBreakpoint || '768px'}) { + display: ${props => props.isFlex && 'flex'}; + justify-content: ${props => props.isFlex && 'space-between'}; + } +`; + +export const WrapSticky = styled.div` + position: sticky; + top: ${props => props.offsetTop || '60px'}; +`; + const SectionBase = styled.section` - width: calc(100% - 60px); margin: 0 auto; - padding: 120px 0; + padding: ${props => props.isPadded && '120px 0'}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; @media (max-width: 768px) { - padding: 40px 0; + padding: ${props => props.isPadded && '40px 0'}; } `; -const Wrap = styled.div` +const Wrap = styled(FlexWrap)` width: calc(100% - 60px); - max-width: 895px; + max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; margin: 0 auto; - text-align: center; + text-align: ${props => props.isTextCentered && 'center'}; +`; + +export const WrapGrid = styled(Wrap)` + display: flex; + flex-wrap: ${props => props.isWrapped && `wrap`}; + justify-content: ${props => props.isCentered ? `center` : 'space-between'}; `; + +Section.defaultProps = { + isPadded: true, +}; + +FlexWrap.defaultProps = { + isFlex: true, +}; + +WrapGrid.defaultProps = { + isCentered: true, +}; + +Wrap.defaultProps = { + isFlex: false, +}; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 4c246ec3e..22abe6c26 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -1,13 +1,18 @@ import * as React from 'react'; -import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; +import styled from 'styled-components'; + +import {Link} from 'ts/@next/components/button'; import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; +import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import {colors} from 'ts/style/colors'; -import {Section} from 'ts/@next/components/newLayout'; +interface FigureProps { + value: string; + description: string; +} export const SectionLandingAbout = () => ( -
+
@@ -39,8 +44,48 @@ export const SectionLandingAbout = () => ( style={{ width: '340px', borderColor: '#3C4746', - margin: '60px auto 0 auto', + margin: '60px auto', }} /> + + +
+ +
+ +
+
); + +const Figure = (props: FigureProps) => ( + + + {props.value} + + + {props.description} + + +); + +const FigureValue = styled.dt` + font-size: 50px; + font-size: 40px; + font-weight: 300; + margin-bottom: 15px; +`; + +const FigureDescription = styled.dd` + font-size: 18px; + color: #999999; +`; diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index 302100ac9..8f6429328 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,10 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import {Section} from 'ts/@next/components/newLayout'; +import {Section, WrapGrid} from 'ts/@next/components/newLayout'; interface ProjectLogo { name: string; @@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [ ]; export const SectionLandingClients = () => ( -
- - - Join the growing number of projects developing on 0x - - +
+ + Join the growing number of projects developing on 0x + {_.map(projects, (item: ProjectLogo, index) => ( @@ -90,13 +87,13 @@ const StyledProject = styled.div` height: 100%; } - @media (min-width: ${BREAKPOINTS.mobile}) { + @media (min-width: 768px) { width: 120px; height: 120px; margin: 30px; } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 768px) { width: 100px; height: 100px; margin: 15px; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index ad78a1ab4..4c06982e4 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -1,63 +1,31 @@ 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 {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -export const SectionLandingCta = () => ( -
- - - - - - - Ready to build on 0x? - - - - Get Started - - - +import {Column, Section} from 'ts/@next/components/newLayout'; - - - +import {BlockIconLink} from 'ts/@next/components/blockIconLink'; - - Want help from the 0x team? - - - - Get in Touch - - - - +export const SectionLandingCta = () => ( +
+ +
); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 9c6ff7151..930b80e89 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -1,10 +1,8 @@ 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 {Button} from 'ts/@next/components/button'; import {Hero} from 'ts/@next/components/hero'; +import {LandingAnimation} from 'ts/@next/components/heroImage'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; @@ -13,11 +11,11 @@ export const SectionLandingHero = () => ( title="Powering Decentralized Exchange" description="0x is the best solution for adding exchange functionality to your business." figure={} />} - actions={} + actions={} /> ); -const Actions = () => ( +const HeroActions = () => ( <>