From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/pages/instant.tsx | 261 ++++++++++++++++++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 packages/website/ts/pages/instant.tsx (limited to 'packages/website/ts/pages/instant.tsx') diff --git a/packages/website/ts/pages/instant.tsx b/packages/website/ts/pages/instant.tsx new file mode 100644 index 000000000..d08fd566a --- /dev/null +++ b/packages/website/ts/pages/instant.tsx @@ -0,0 +1,261 @@ +import { utils as sharedUtils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled, { keyframes } from 'styled-components'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; +import { Section, SectionProps } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { Configurator } from 'ts/@next/pages/instant/configurator'; +import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; +import { utils } from 'ts/utils/utils'; + +import { ModalContact } from '../components/modals/modal_contact'; + +const CONFIGURATOR_MIN_WIDTH_PX = 1050; + +export const getStartedClick = () => { + if (window.innerWidth < CONFIGURATOR_MIN_WIDTH_PX) { + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); + } else { + sharedUtils.setUrlHash('configurator'); + sharedUtils.scrollToHash('configurator', ''); + } +}; + +const featuresData = [ + { + title: 'Support ERC-20 and ERC-721 tokens', + icon: 'supportForAllEthereumStandards-large', + description: + 'Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.', + links: [ + { + label: 'Get Started', + onClick: getStartedClick, + shouldUseAnchorTag: true, + }, + { + label: 'Explore the Docs', + url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, + }, + ], + }, + { + title: 'Generate revenue for your business', + icon: 'generateRevenueForYourBusiness-large', + description: + 'With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.', + links: [ + { + label: 'Learn about affiliate fees', + url: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, + }, + ], + }, + { + title: 'Easy and flexible integration', + icon: 'flexibleIntegration0xInstant', + description: + 'Use our out-of-the-box design or customize the user interface by integrating via the AssetBuyer engine.. You can also tap into 0x networked liquidity or choose your own liquidity pool.', + links: [ + { + label: 'Explore AssetBuyer', + url: `${WebsitePaths.Docs}/asset-buyer`, + }, + ], + }, +]; + +interface Props { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + }; +} + +export class Next0xInstant extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + + + Get Started} + /> + +
+ +
+ {[...Array(18)].map((item, index) => ( + + + + ))} +
+ +
+ +
+ {_.map(featuresData, (item, index) => ( + + ))} +
+ + + 0x Instant Configurator + + + + + + +
+ + Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and + blockchain-native tokens, including through any software developed using the licensed work + created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, + Version 2.0 applicable to the Work, developers are “solely responsible for determining the + appropriateness of using or redistributing the Work,” which includes responsibility for ensuring + compliance with any such applicable laws and regulations. + + + See the Apache License, Version 2.0 for the specific language governing all applicable + permissions and limitations. + +
+ + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +// scroll animation calc is simply (imageWidth * totalRepetitions) / 2 +// img width is 370px +const scroll = keyframes` + 0% { transform: translate3d(-2220px, 0, 0) } + 100% { transform: translate3d(-4440px, 0, 0) } +`; + +const scrollMobile = keyframes` + 0% { transform: translate3d(0, 0, 0) } + 100% { transform: translate3d(-1800px, 0, 0) } +`; + +const fadeUp = keyframes` + 0% { + opacity: 0; + transform: translateY(50px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +`; + +const ConfiguratorSection = + styled(Section) < + SectionProps > + ` + @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { + display: none; + } +`; + +// width = 370 * 12 +// mobile width = 300 +const MarqueeWrap = styled.div` + width: 100vw; + height: 514px; + padding-bottom: 60px; + + @media (max-width: 768px) { + width: calc(100% + 60px); + margin-left: -30px; + overflow: hidden; + } + + > div { + height: auto; + display: flex; + will-change: transform; + transform: translate3d(-2220px, 0, 0); + } + + @media (min-width: 768px) { + > div { + width: 6660px; + animation: ${scroll} 70s linear infinite; + } + } + + @media (max-width: 768px) { + > div { + width: 5400px; + animation: ${scrollMobile} 70s linear infinite; + } + } +`; + +const Card = + styled.div < + { index: number } > + ` + opacity: 0; + flex-shrink: 0; + transform: translateY(10px); + will-change: opacity, transform; + animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; + + img { + height: auto; + } + + @media (min-width: 768px) { + img { + width: 370px; + } + } + + @media (max-width: 768px) { + img { + width: 300px; + } + } +`; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/pages/instant.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'packages/website/ts/pages/instant.tsx') diff --git a/packages/website/ts/pages/instant.tsx b/packages/website/ts/pages/instant.tsx index d08fd566a..b97bb35a4 100644 --- a/packages/website/ts/pages/instant.tsx +++ b/packages/website/ts/pages/instant.tsx @@ -4,14 +4,14 @@ import * as React from 'react'; import DocumentTitle from 'react-document-title'; import styled, { keyframes } from 'styled-components'; -import { Banner } from 'ts/@next/components/banner'; -import { Button } from 'ts/@next/components/button'; -import { Definition } from 'ts/@next/components/definition'; -import { Hero } from 'ts/@next/components/hero'; -import { Section, SectionProps } from 'ts/@next/components/newLayout'; -import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Paragraph } from 'ts/@next/components/text'; -import { Configurator } from 'ts/@next/pages/instant/configurator'; +import { Banner } from 'ts/components/banner'; +import { Button } from 'ts/components/button'; +import { Definition } from 'ts/components/definition'; +import { Hero } from 'ts/components/hero'; +import { Section, SectionProps } from 'ts/components/newLayout'; +import { SiteWrap } from 'ts/components/siteWrap'; +import { Heading, Paragraph } from 'ts/components/text'; +import { Configurator } from 'ts/pages/instant/configurator'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -100,7 +100,7 @@ export class Next0xInstant extends React.Component {
{[...Array(18)].map((item, index) => ( - + ))}
-- cgit v1.2.3