diff options
Diffstat (limited to 'packages/website/ts')
14 files changed, 446 insertions, 235 deletions
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) => ( + <Wrap> + <div> + <Icon + name={props.icon} + size="large" + margin={[0, 0, 'default', 0]} + /> + </div> + </Wrap> +); + +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) => ( + <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}> + <Icon + name="ready-to-build" + size={props.iconSize || 'medium'} + margin={[0, 0, 'default', 0]} + /> + + <TextWrap> + <Title> + {props.title} + </Title> + + <Paragraph> + {props.description} + </Paragraph> + + {props.actions && + <LinkWrap> + {props.actions.map((item, index) => ( + <Link + href={item.url} + isWithArrow={true} + isTransparent={true} + isNoBorder={true} + isAccentColor={true} + > + {item.label} + </Link> + ))} + </LinkWrap> + } + </TextWrap> + </Wrap> +); + +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) => ( + <Section> + <Wrap isCentered={!props.figure}> + {props.figure && + <Content width="400px"> + {props.figure} + </Content> + } + + <Content width={props.figure ? '546px' : '678px'}> + <Title isLarge={props.figure}> + {props.title} + </Title> + + <Description> + {props.description} + </Description> + + {props.actions && + <ButtonWrap> + {props.actions} + </ButtonWrap> + } + </Content> + </Wrap> + </Section> +); + +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) => ( + <Wrap> + {props.image} + </Wrap> +); + +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<ColumnProps>` } @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) => ( + <SectionBase bgColor={props.bgColor}> + <Wrap + isPadded={props.isPadded} + > + {props.children} + </Wrap> + </SectionBase> +); + +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 = () => ( - <Section bgColor={colors.backgroundDark} isPadLarge={true}> - <WrapCentered width="narrow"> - <InlineIconWrap> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - </InlineIconWrap> - - <Paragraph - size="large" - isCentered={true} - padding={['large', 0, 'default', 0]} - > - 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. - </Paragraph> - - <Link - href="#" - isTransparent={true} - isWithArrow={true} - isAccentColor={true} - > - Discover how developers use 0x - </Link> - - <hr - style={{ - width: '340px', - borderColor: '#3C4746', - margin: '60px auto 0 auto', - }} - /> - </WrapCentered> - - {/* Note you can also pass in a string "large/default" or a number for custom margins */} - <Wrap padding={['large', 0, 0, 0]}> - {/* NOTE: this probably should be withComponent as part of a <dl> */} - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - marginBottom="20px" - > - 873,435 - </Heading> +import {Section} from 'ts/@next/components/newLayout'; - <Paragraph - isMuted={0.4} - isCentered={true} - isNoMargin={true} - > - Number of transactions - </Paragraph> - </Column> - - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - marginBottom="20px" - > - $203M - </Heading> - - <Paragraph - isMuted={0.4} - isCentered={true} - marginBottom="20px" - > - Total volume - </Paragraph> - </Column> - - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - isNoMargin={true} - > - 227,372 - </Heading> - - <Paragraph - isMuted={0.4} - isCentered={true} - isNoMargin={true} - > - Number of relayers - </Paragraph> - </Column> - </Wrap> +export const SectionLandingAbout = () => ( + <Section bgColor="dark"> + <InlineIconWrap> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + </InlineIconWrap> + + <Paragraph + size="large" + isCentered={true} + padding={['large', 0, 'default', 0]} + > + 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. + </Paragraph> + + <Link + href="#" + isTransparent={true} + isWithArrow={true} + isAccentColor={true} + > + Discover how developers use 0x + </Link> + + <hr + style={{ + width: '340px', + borderColor: '#3C4746', + margin: '60px auto 0 auto', + }} + /> </Section> ); 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 = () => ( - <Section isPadLarge={true}> + <Section> <WrapCentered> <Heading size="small"> 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]} /> - <Paragraph size="medium" color="#00AE99"> + <Paragraph size="medium" color="#00AE99" marginBottom="15px"> Ready to build on 0x? </Paragraph> @@ -45,7 +45,7 @@ export const SectionLandingCta = () => ( margin={[0, 0, 'default', 0]} /> - <Paragraph size="medium" color="#00AE99"> + <Paragraph size="medium" color="#00AE99" marginBottom="15px"> Want help from the 0x team? </Paragraph> 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 = () => ( - <Section isPadLarge={true}> - <Wrap isReversed={true}> - <Column colWidth="1/2"> - <WrapCentered> - <LogoOutlined/> - </WrapCentered> - </Column> - - <Column colWidth="1/2" isMobileCentered={true}> - <Heading size="large"> - Powering Decentralized Exchange - </Heading> - - <Paragraph size="medium" isMuted={true}> - 0x is the best solution for adding<br /> - exchange functionality to your business. - </Paragraph> + <Hero + title="Powering Decentralized Exchange" + description="0x is the best solution for adding exchange functionality to your business." + figure={<LandingAnimation image={<LogoOutlined />} />} + actions={<Actions />} + /> +); - <ButtonWrap> - <Button isInline={true}> - Get Started - </Button> +const Actions = () => ( + <> + <Button isInline={true}> + Get Started + </Button> - <Button isTransparent={true} isInline={true}> - Learn More - </Button> - </ButtonWrap> - </Column> - </Wrap> - </Section> + <Button isTransparent={true} isInline={true}> + Learn More + </Button> + </> ); 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', diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 28d8e4b5e..86b9e16c5 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -70,10 +70,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` --largeHeadingHeight: 1.108695652em; // TO DO --smallParagraph: 14px; // TO DO --defaultParagraph: 16px; // TO DO - --mediumParagraph: 16px; // TO DO - --largeParagraph: 18px; // TO DO + --mediumParagraph: 20px; // TO DO + --largeParagraph: 20px; // TO DO --smallIcon: 55px; - --mediumIcon: 55px; + --mediumIcon: 85px; --largeIcon: 115px; } } diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 73aed59b2..cf316cfe6 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -5,6 +5,8 @@ import LazyLoad from 'react-lazyload'; import {colors} from 'ts/style/colors'; +import {Hero} from 'ts/@next/components/hero'; + import {Banner} from 'ts/@next/components/banner'; import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; import {Icon} from 'ts/@next/components/Icon'; @@ -12,6 +14,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; +import {Definition} from 'ts/@next/components/Definition'; + +import {Section as NewSection} from 'ts/@next/components/newLayout'; // import { Configurator } from 'ts/pages/instant/configurator'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; @@ -66,16 +71,11 @@ const featuresData = [ export const Next0xInstant = () => ( <SiteWrap> - <Section isPadLarge={true}> - <WrapCentered> - <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading> - <Paragraph size="medium" isCentered={true}> - A free and flexible way to offer simple<br /> - crypto purchasing in any app or website - </Paragraph> - <Button href="#">Get Started</Button> - </WrapCentered> - </Section> + <Hero + title="Introducing 0x Instant" + description="A free and flexible way to offer simple crypto purchasing in any app or website" + actions={<Button href="#">Get Started</Button>} + /> <Section isFullWidth={true} isNoPadding={true}> <Wrap width="full"> @@ -89,40 +89,17 @@ export const Next0xInstant = () => ( </Wrap> </Section> - <Section> - <Wrap width="narrow"> - {_.map(featuresData, (item, index) => ( - <Wrap padding={['large', 0, 'large', 0]}> - <Column colWidth="1/3"> - <Icon name={item.icon} size={240} /> - </Column> - - <Column colWidth="2/3"> - <Heading> - {item.title} - </Heading> - <Paragraph size="medium" isMuted={true}> - {item.description} - </Paragraph> - - <ButtonWrap> - {_.map(item.links, (link, i) => ( - <Link - href={link.url} - key={`link-${i}`} - isTransparent={true} - isAccentColor={true} - isWithArrow={true} - > - {link.label} - </Link> - ))} - </ButtonWrap> - </Column> - </Wrap> - ))} - </Wrap> - </Section> + <NewSection> + {_.map(featuresData, (item, index) => ( + <Definition + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + actions={item.links} + /> + ))} + </NewSection> <Section bgColor={colors.backgroundDark}> <Wrap> diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 43d78f99a..fc24fd665 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -5,6 +5,8 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; +import {Hero} from 'ts/@next/components/hero'; + import { Banner } from 'ts/@next/components/banner'; import { Link } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; @@ -13,6 +15,8 @@ import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; import { Heading, Paragraph } from 'ts/@next/components/text'; +import {Definition} from 'ts/@next/components/definition'; + const offersData = [ { icon: 'robustSmartContracts', @@ -76,57 +80,43 @@ export class NextWhy extends React.PureComponent { public render(): React.ReactNode { return ( <SiteWrap theme="dark"> - <Section isPadLarge={true}> - <WrapCentered> - <Column colWidth="2/3" isNoMargin={true}> - <Heading - maxWidth="600px" - size="medium" - isCentered={true} - > - The exchange layer for the crypto economy - </Heading> - - <Paragraph - size="medium" - isMuted={true} - isCentered={true} - marginBottom="60px" - > - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - </Paragraph> - - <Link - href="/docs" - isCentered={true} - isWithArrow={true} - isAccentColor={true} - > - Build on 0x - </Link> - </Column> - </WrapCentered> - </Section> + <Hero + title="The exchange layer for the crypto economy" + description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens." + actions={ + <Link + href="/docs" + isCentered={true} + isWithArrow={true} + isAccentColor={true} + > + Build on 0x + </Link> + } + /> <Section bgColor={colors.backgroundDark} isPadLarge={true}> <Wrap> - <Column colWidth="1/3"> - <Icon name="supportForAllEthereumStandards" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Support for all Ethereum Standards</Heading> - <Paragraph isMuted={true}>0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol...</Paragraph> - </Column> - - <Column colWidth="1/3"> - <Icon name="networkedLiquidity" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Shared Networked Liquidity</Heading> - <Paragraph isMuted={true}>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph> - </Column> - - <Column colWidth="1/3"> - <Icon name="flexibleIntegration" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Customize the User Experience</Heading> - <Paragraph isMuted={true}>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Paragraph> - </Column> + <Definition + title="Support for all Ethereum Standards" + description="0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol..." + iconSize="large" + isInline={true} + /> + + <Definition + title="Shared Networked Liquidity" + description="0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system." + iconSize="large" + isInline={true} + /> + + <Definition + title="Support for all Ethereum Standards" + description="Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces." + iconSize="large" + isInline={true} + /> </Wrap> </Section> @@ -145,17 +135,11 @@ export class NextWhy extends React.PureComponent { <Heading size="medium">What 0x offers</Heading> {_.map(offersData, (item, index) => ( - <ChapterItemWrap key={`benefits-${index}`}> - <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} /> - - <Heading marginBottom="15px"> - {item.title} - </Heading> - - <Paragraph isMuted={true} isNoMargin={true}> - {item.description} - </Paragraph> - </ChapterItemWrap> + <Definition + title={item.title} + description={item.description} + isWithMargin={true} + /> ))} </SectionWrap> |