aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-14 19:49:27 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-14 19:49:59 +0800
commit388c7afb5029d733e59ee86b6af211e93df71f7a (patch)
tree2b655ffc65944db4f409bfb83972a6ad6c8ccf68 /packages/website/ts/@next/pages
parent51f2711796ff1fab06cdc83d7248d3181ca3bb34 (diff)
downloaddexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar.gz
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar.bz2
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar.lz
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar.xz
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.tar.zst
dexon-0x-contracts-388c7afb5029d733e59ee86b6af211e93df71f7a.zip
Added launch kit page
Diffstat (limited to 'packages/website/ts/@next/pages')
-rw-r--r--packages/website/ts/@next/pages/launch_kit.tsx177
1 files changed, 177 insertions, 0 deletions
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx
new file mode 100644
index 000000000..9318d8a6a
--- /dev/null
+++ b/packages/website/ts/@next/pages/launch_kit.tsx
@@ -0,0 +1,177 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+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 { Button } from 'ts/@next/components/button';
+import { Icon } from 'ts/@next/components/icon';
+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';
+import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
+
+const offersData = [
+ {
+ icon: 'supportForAllEthereumStandards',
+ title: 'Perfect for developers who need a simple drop-in marketplace',
+ description: (
+ <ul>
+ <li>
+ Quickly launch a market for your project’s token
+ </li>
+ <li>
+ Seamlessly create an in-game marketplace for digital items and collectables
+ </li>
+ <li>
+ Easily build a 0x relayer for your local market
+ </li>
+ </ul>
+ ),
+ },
+];
+
+export class NextLaunchKit extends React.PureComponent {
+ public render(): React.ReactNode {
+ return (
+ <SiteWrap theme="dark">
+ <Hero
+ title="0x Launch Kit"
+ description="Launch a relayer in under a minute"
+ figure={<Icon name="launchKit_versionB" size="hero" />}
+ actions={<HeroActions/>}
+ />
+
+ <Section
+ bgColor="dark"
+ isFlex={true}
+ maxWidth="1170px"
+ >
+ <Definition
+ title="Networked Liquidity Pool"
+ description="Tap into and share liquidity with other relayers"
+ icon="supportForAllEthereumStandards"
+ iconSize="large"
+ isInline={true}
+ />
+
+ <Definition
+ title="Extensible Code Repo"
+ description="Fork and extend to support modes of exchange"
+ icon="networkedLiquidity"
+ iconSize="large"
+ isInline={true}
+ />
+
+ <Definition
+ title="Exchange Ethereum based Tokens"
+ description="Enable trading for any ERC-20 or ERC-721 asset"
+ icon="flexibleIntegration"
+ iconSize="large"
+ isInline={true}
+ />
+ </Section>
+
+ <Section>
+ {_.map(offersData, (item, index) => (
+ <Definition
+ key={`offers-${index}`}
+ icon={item.icon}
+ title={item.title}
+ description={item.description}
+ isWithMargin={true}
+ />
+ ))}
+ </Section>
+
+ <Banner
+ heading="Need more flexibility?"
+ subline="Dive into our docs, or contact us if needed"
+ mainCta={{ text: 'Get Started', href: '/docs' }}
+ secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
+ />
+ </SiteWrap>
+ );
+ }
+}
+
+const HeroActions = () => (
+ <>
+ <Button href="https://0xproject.com/docs" isInline={true}>
+ Get Started
+ </Button>
+
+ <Button to="/next/why" isTransparent={true} isInline={true}>
+ Learn More
+ </Button>
+ </>
+);
+
+interface SectionProps {
+ isNotRelative?: boolean;
+}
+
+const SectionWrap = styled.div<SectionProps>`
+ position: ${props => !props.isNotRelative && 'relative'};
+
+ & + & {
+ padding-top: 60px;
+ margin-top: 60px;
+ }
+
+ & + &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 1px;
+ background-color: #3d3d3d;
+ }
+
+ @media (min-width: 768px) {
+ & + &:before {
+ width: 100vw;
+ }
+ }
+
+ @media (max-width: 768px) {
+ text-align: left;
+
+ & + &:before {
+ width: 100%;
+ }
+ }
+`;
+
+const NavStickyWrap = styled(WrapSticky)`
+ padding-left: 60px;
+ z-index: 15;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+`;
+
+const ChapterLink = styled(AnchorLink)`
+ color: ${props => props.theme.textColor};
+ font-size: 22px;
+ margin-bottom: 25px;
+ display: block;
+ opacity: 0.8;
+
+ &:hover,
+ &:active {
+ opacity: 1;
+ }
+`;
+
+const ChapterItemWrap = styled.div`
+ max-width: 560px;
+ margin-top: 60px;
+`;