diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/slider/slider.tsx | 78 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 39 |
2 files changed, 112 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx new file mode 100644 index 000000000..6292a8c9e --- /dev/null +++ b/packages/website/ts/@next/components/slider/slider.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Icon } from 'ts/@next/components/icon'; +import { Paragraph, Heading } from 'ts/@next/components/text'; + +interface SliderProps { +} + +interface SlideProps { + icon: string; + heading: string; + text: string; + href?: string; +} + +export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) => { + const { heading, text, href, icon } = props; + + return ( + <StyledSlide> + <SlideHead> + <Icon name={icon} size="large" margin="auto" /> + </SlideHead> + <SlideContent> + <Heading asElement="h4" size="small" marginBottom="15px">{heading}</Heading> + <Paragraph isMuted={true}>{text}</Paragraph> + </SlideContent> + </StyledSlide> + ); +}; + +export const Slider: React.StatelessComponent<SliderProps> = props => { + return ( + <StyledSlider> + <SliderInner> + {props.children} + </SliderInner> + </StyledSlider> + ); +}; + +const StyledSlider = styled.div` + overflow: hidden; + width: 100%; + height: 520px; +`; + +const SliderInner = styled.div` + position: absolute; + display: flex; + width: 100%; +`; + +const StyledSlide = styled.div` + background-color: ${colors.backgroundDark}; + width: 560px; + height: 520px; + flex: 0 0 auto; + + & + & { + margin-left: 30px; + } +`; + +const SlideHead = styled.div` + background-color: ${colors.brandDark}; + height: 300px; + display: flex; + justify-content: center; + align-items: center; +`; + +const SlideContent = styled.div` + padding: 30px; +`; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index b31cbb277..0872ade7d 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -10,12 +10,9 @@ import { Link } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout'; 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 CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; -import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; - const offersData = [ { icon: 'coin', @@ -62,6 +59,29 @@ const functionalityData = [ }, ]; +const useCaseSlides = [ + { + icon: 'coin', + title: 'Games & Collectibles', + description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + }, + { + icon: 'coin', + title: 'Games & Collectibles', + description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + }, + { + icon: 'coin', + title: 'Games & Collectibles', + description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + }, + { + icon: 'coin', + title: 'Games & Collectibles', + description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + }, +]; + export class NextWhy extends React.PureComponent { public render(): React.ReactNode { return ( @@ -151,7 +171,16 @@ export class NextWhy extends React.PureComponent { <SectionWrap id="cases"> <Heading size="medium">Use Cases</Heading> - <Paragraph isMuted={true}>slider</Paragraph> + <Slider> + {_.map(useCaseSlides, (item, index) => ( + <Slide + key={`useCaseSlide-${index}`} + heading={item.title} + text={item.description} + icon={item.icon} + /> + ))} + </Slider> </SectionWrap> <SectionWrap id="functionality"> |