aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/banner.tsx59
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx42
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx3
-rw-r--r--packages/website/ts/@next/pages/ecosystem.tsx118
-rw-r--r--packages/website/ts/@next/pages/launch_kit.tsx68
-rw-r--r--packages/website/ts/utils/constants.ts2
6 files changed, 144 insertions, 148 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 2620b92ef..982e764af 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
-import {Button} from 'ts/@next/components/button';
-import {ThemeInterface} from 'ts/@next/components/siteWrap';
-import {Paragraph} from 'ts/@next/components/text';
+import { Button } from 'ts/@next/components/button';
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { Paragraph } from 'ts/@next/components/text';
-import {Column, Section} from 'ts/@next/components/newLayout';
+import { Column, Section } from 'ts/@next/components/newLayout';
interface Props {
heading?: string;
@@ -21,6 +21,7 @@ interface CTAButton {
text: string;
href?: string;
onClick?: () => void;
+ shouldOpenInNewTab?: boolean;
}
interface BorderProps {
@@ -28,44 +29,35 @@ interface BorderProps {
}
export const Banner: React.StatelessComponent<Props> = (props: Props) => {
- const {
- heading,
- subline,
- mainCta,
- secondaryCta,
- } = props;
+ const { heading, subline, mainCta, secondaryCta } = props;
return (
- <CustomSection
- bgColor="light"
- isFlex={true}
- flexBreakpoint="900px"
- paddingMobile="120px 0"
- >
- <Border/>
+ <CustomSection bgColor="light" isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0">
+ <Border />
<Border isBottom={true} />
<Column>
<CustomHeading>{heading}</CustomHeading>
- {subline &&
+ {subline && (
<Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}>
{subline}
</Paragraph>
- }
+ )}
</Column>
<Column>
<ButtonWrap>
- {mainCta &&
+ {mainCta && (
<Button
color={colors.white}
isTransparent={false}
href={mainCta.href}
+ target={mainCta.shouldOpenInNewTab ? '_blank' : ''}
>
{mainCta.text}
</Button>
- }
+ )}
- {secondaryCta &&
+ {secondaryCta && (
<Button
color={colors.white}
href={secondaryCta.href}
@@ -74,7 +66,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
>
{secondaryCta.text}
</Button>
- }
+ )}
</ButtonWrap>
</Column>
</CustomSection>
@@ -101,9 +93,7 @@ const CustomSection = styled(Section)`
const CustomHeading = styled.h2`
font-size: 34px;
font-weight: 400;
- margin-bottom: 10px
-
- @media (max-width: 768px) {
+ margin-bottom: 10px @media (max-width: 768px) {
font-size: 30px;
}
`;
@@ -118,7 +108,8 @@ const ButtonWrap = styled.div`
}
@media (max-width: 768px) {
- a, button {
+ a,
+ button {
display: block;
width: 220px;
}
@@ -132,15 +123,19 @@ const ButtonWrap = styled.div`
// Note let's refactor this
// is it absolutely necessary to have a stateless component
// to pass props down into the styled icon?
-const Border = styled.div<BorderProps>`
+const Border =
+ styled.div <
+ BorderProps >
+ `
position: absolute;
- background-image: ${props => props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);' };
- background-position: ${props => props.isBottom ? 'left top' : 'left bottom' };
+ background-image: ${props =>
+ props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);'};
+ background-position: ${props => (props.isBottom ? 'left top' : 'left bottom')};
left: 0;
width: calc(100% + 214px);
height: 40px;
- top: ${props => !props.isBottom && 0 };
- bottom: ${props => props.isBottom && 0 };
+ top: ${props => !props.isBottom && 0};
+ bottom: ${props => props.isBottom && 0};
transform: translate(-112px);
@media (max-width: 768px) {
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 1677d3c08..886cee44a 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,22 +1,22 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
import styled from 'styled-components';
-import {Heading, Paragraph} from 'ts/@next/components/text';
+import { Heading, Paragraph } from 'ts/@next/components/text';
import { WebsitePaths } from 'ts/types';
const navData = [
- {
- title: '0x Instant',
- description: 'Simple crypto purchasing',
- url: WebsitePaths.Instant,
- },
- {
- title: '0x Launch kit',
- description: 'Build on the 0x protocol',
- url: WebsitePaths.LaunchKit,
- },
+ {
+ title: '0x Instant',
+ description: 'Simple crypto purchasing',
+ url: WebsitePaths.Instant,
+ },
+ {
+ title: '0x Launch Kit',
+ description: 'Build on the 0x protocol',
+ url: WebsitePaths.LaunchKit,
+ },
];
export const DropdownProducts: React.FunctionComponent<{}> = () => (
@@ -24,25 +24,15 @@ export const DropdownProducts: React.FunctionComponent<{}> = () => (
{_.map(navData, (item, index) => (
<li key={`productLink-${index}`}>
<Link to={item.url}>
- <Heading
- asElement="h3"
- color="inherit"
- isNoMargin={true}
- size="small"
- >
+ <Heading asElement="h3" color="inherit" isNoMargin={true} size="small">
{item.title}
</Heading>
- {item.description &&
- <Paragraph
- color="inherit"
- isNoMargin={true}
- size="small"
- isMuted={0.5}
- >
+ {item.description && (
+ <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}>
{item.description}
</Paragraph>
- }
+ )}
</Link>
</li>
))}
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 9c2c29446..e7346a797 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -5,6 +5,7 @@ import { Button } from 'ts/@next/components/button';
import { Icon, InlineIconWrap } from 'ts/@next/components/icon';
import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
import { Paragraph } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
interface FigureProps {
value: string;
@@ -25,7 +26,7 @@ export const SectionLandingAbout = () => (
instruments to assets that could have never existed before.
</Paragraph>
- <Button href="#" isWithArrow={true} isAccentColor={true}>
+ <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}>
Discover how developers use 0x
</Button>
diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx
index 2f996d3e4..ab73cc52f 100644
--- a/packages/website/ts/@next/pages/ecosystem.tsx
+++ b/packages/website/ts/@next/pages/ecosystem.tsx
@@ -4,11 +4,12 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
-import {Button} from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
+import { constants } from 'ts/utils/constants';
interface BenefitProps {
title: string;
@@ -20,7 +21,8 @@ const benefits: BenefitProps[] = [
{
icon: 'milestoneGrants',
title: 'Milestone Grants',
- description: 'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.',
+ description:
+ 'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.',
},
{
icon: 'vcIntroductions',
@@ -40,7 +42,8 @@ const benefits: BenefitProps[] = [
{
icon: 'eficientDesign',
title: 'Marketing and Design Help',
- description: 'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.',
+ description:
+ 'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.',
},
{
icon: 'legalResources',
@@ -50,56 +53,67 @@ const benefits: BenefitProps[] = [
];
export const NextEcosystem = () => (
- <SiteWrap theme="light">
- <Section isTextCentered={true}>
- <Column>
- <Heading size="medium" isCentered={true}>
- Jumpstart your Business on 0x
- </Heading>
- <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
- The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x.
- </Paragraph>
- <LinkWrap>
- <Button
- to="#"
- isWithArrow={true}
- isAccentColor={true}
- >
- Apply now
- </Button>
- <Button
- to="#"
- isWithArrow={true}
- isAccentColor={true}
- >
- Learn More
- </Button>
- </LinkWrap>
- </Column>
- </Section>
+ <SiteWrap theme="light">
+ <Section isTextCentered={true}>
+ <Column>
+ <Heading size="medium" isCentered={true}>
+ Jumpstart your Business on 0x
+ </Heading>
+ <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
+ The Ecosystem Acceleration Program gives teams access to a variety of services including funding,
+ dedicated technical support, and recruiting assistance. We created the Ecosystem Acceleration
+ Program to bolster the expansion of both infrastructure projects and relayers building on 0x.
+ </Paragraph>
+ <LinkWrap>
+ <Button
+ href={constants.URL_ECOSYSTEM_APPLY}
+ isWithArrow={true}
+ isAccentColor={true}
+ useAnchorTag={true}
+ >
+ Apply now
+ </Button>
+ <Button
+ href={constants.URL_ECOSYSTEM_BLOG_POST}
+ isWithArrow={true}
+ isAccentColor={true}
+ useAnchorTag={true}
+ target="_blank"
+ >
+ Learn More
+ </Button>
+ </LinkWrap>
+ </Column>
+ </Section>
- <Section bgColor={colors.backgroundLight} isFullWidth={true}>
- <Column>
- <Heading size={34} fontWeight="400" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="70px">
- Join a vibrant ecosystem of projects in the 0x Network.
- </Heading>
- </Column>
- <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}>
- {_.map(benefits, (benefit: BenefitProps, index) => (
- <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px">
- <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} />
- <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}>
- {benefit.title}
- </Heading>
- <Paragraph isMuted={true} isCentered={true}>
- {benefit.description}
- </Paragraph>
- </Column>
- ))}
- </WrapGrid>
- </Section>
-
- </SiteWrap>
+ <Section bgColor={colors.backgroundLight} isFullWidth={true}>
+ <Column>
+ <Heading
+ size={34}
+ fontWeight="400"
+ asElement="h2"
+ isCentered={true}
+ maxWidth="507px"
+ marginBottom="70px"
+ >
+ Join a vibrant ecosystem of projects in the 0x Network.
+ </Heading>
+ </Column>
+ <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}>
+ {_.map(benefits, (benefit: BenefitProps, index) => (
+ <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px">
+ <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} />
+ <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}>
+ {benefit.title}
+ </Heading>
+ <Paragraph isMuted={true} isCentered={true}>
+ {benefit.description}
+ </Paragraph>
+ </Column>
+ ))}
+ </WrapGrid>
+ </Section>
+ </SiteWrap>
);
const LinkWrap = styled.div`
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx
index bef5d2164..7ae54293b 100644
--- a/packages/website/ts/@next/pages/launch_kit.tsx
+++ b/packages/website/ts/@next/pages/launch_kit.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Hero} from 'ts/@next/components/hero';
+import { Hero } from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
@@ -9,10 +9,10 @@ import { Definition } from 'ts/@next/components/definition';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';
-import {Section} from 'ts/@next/components/newLayout';
-import { ModalContact } from '../components/modals/modal_contact';
+import { Section } from 'ts/@next/components/newLayout';
+import { constants } from 'ts/utils/constants';
-import { WebsitePaths } from 'ts/types';
+import { ModalContact } from '../components/modals/modal_contact';
const offersData = [
{
@@ -20,15 +20,9 @@ const offersData = [
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>
+ <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>
),
},
@@ -47,14 +41,10 @@ export class NextLaunchKit extends React.Component {
title="0x Launch Kit"
description="Launch a relayer in under a minute"
figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />}
- actions={<HeroActions/>}
+ actions={<HeroActions />}
/>
- <Section
- bgColor="dark"
- isFlex={true}
- maxWidth="1170px"
- >
+ <Section bgColor="dark" isFlex={true} maxWidth="1170px">
<Definition
title="Networked Liquidity Pool"
titleSize="small"
@@ -84,22 +74,26 @@ export class NextLaunchKit extends React.Component {
</Section>
<Section>
- {_.map(offersData, (item, index) => (
- <Definition
- key={`offers-${index}`}
- icon={item.icon}
- title={item.title}
- description={item.description}
- isInlineIcon={true}
- iconSize={240}
- />
- ))}
+ {_.map(offersData, (item, index) => (
+ <Definition
+ key={`offers-${index}`}
+ icon={item.icon}
+ title={item.title}
+ description={item.description}
+ isInlineIcon={true}
+ iconSize={240}
+ />
+ ))}
</Section>
<Banner
heading="Need more flexibility?"
subline="Dive into our docs, or contact us if needed"
- mainCta={{ text: 'Get Started', href: '/docs' }}
+ mainCta={{
+ text: 'Get Started',
+ href: `${constants.URL_LAUNCH_KIT}/#table-of-contents`,
+ shouldOpenInNewTab: true,
+ }}
secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
/>
<ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
@@ -109,21 +103,21 @@ export class NextLaunchKit extends React.Component {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
- }
+ };
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
- }
+ };
}
const HeroActions = () => (
- <>
- <Button href="https://github.com/0xProject/0x-launch-kit" isInline={true}>
+ <React.Fragment>
+ <Button href={constants.URL_LAUNCH_KIT} isInline={true} target="_blank">
Get Started
</Button>
- <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}>
- Learn More
+ <Button href={constants.URL_LAUNCH_KIT_BLOG_POST} isTransparent={true} isInline={true} target="_blank">
+ Learn More!
</Button>
- </>
+ </React.Fragment>
);
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index c8c8099c9..ada8de549 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -76,6 +76,8 @@ export const constants = {
URL_BITLY_API: 'https://api-ssl.bitly.com',
URL_BLOG: 'https://blog.0xproject.com/latest',
URL_DISCOURSE_FORUM: 'https://forum.0x.org',
+ URL_ECOSYSTEM_APPLY: 'https://0x.smapply.io/',
+ URL_ECOSYSTEM_BLOG_POST: 'https://blog.0xproject.com/announcing-the-0x-ecosystem-acceleration-program-89d1cb89d565',
URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
URL_TESTNET_FAUCET: 'https://faucet.0x.org',
URL_GITHUB_ORG: 'https://github.com/0xProject',