aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/slider/slider.tsx78
-rw-r--r--packages/website/ts/@next/pages/why.tsx39
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">