aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/launch_kit/launch_kit.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/launch_kit/launch_kit.tsx')
-rw-r--r--packages/website/ts/pages/launch_kit/launch_kit.tsx335
1 files changed, 0 insertions, 335 deletions
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
deleted file mode 100644
index 4ea56dbd4..000000000
--- a/packages/website/ts/pages/launch_kit/launch_kit.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { colors, Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ScreenWidths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-export interface LaunchKitProps {
- location: Location;
- translate: Translate;
- dispatcher: Dispatcher;
-}
-
-interface LaunchKitState {
- screenWidth: ScreenWidths;
-}
-
-const THROTTLE_TIMEOUT = 100;
-const lighterBackgroundColor = '#222222';
-const darkerBackgroundColor = '#1B1B1B';
-const grayText = '#999999';
-
-interface Benefit {
- icon: string;
- description: string;
-}
-
-export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> {
- private readonly _throttledScreenWidthUpdate: () => void;
- constructor(props: LaunchKitProps) {
- super(props);
- this.state = {
- screenWidth: utils.getScreenWidth(),
- };
- this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
- }
- public componentDidMount(): void {
- window.addEventListener('resize', this._throttledScreenWidthUpdate);
- window.scrollTo(0, 0);
- }
- public componentWillUnmount(): void {
- window.removeEventListener('resize', this._throttledScreenWidthUpdate);
- }
- public render(): React.ReactNode {
- return (
- <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}>
- <DocumentTitle title="0x Launch Kit" />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- isNightVersion={true}
- style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }}
- translate={this.props.translate}
- />
- {this._renderHero()}
- {this._renderSection()}
- {this._renderCallToAction()}
- {this._renderDisclaimer()}
- <Footer
- backgroundColor={darkerBackgroundColor}
- translate={this.props.translate}
- dispatcher={this.props.dispatcher}
- />
- </div>
- );
- }
- private _renderHero(): React.ReactNode {
- const BENEFITS_1: Benefit[] = [
- {
- icon: '/images/launch_kit/shared_liquidity.svg',
- description: this.props.translate.get(Key.TapIntoAndShare, Deco.Cap),
- },
- {
- icon: '/images/launch_kit/fork.svg',
- description: this.props.translate.get(Key.ForkAndExtend, Deco.Cap),
- },
- {
- icon: '/images/launch_kit/enable_trading.svg',
- description: this.props.translate.get(Key.EnableTrading, Deco.Cap),
- },
- ];
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const smallButtonPadding = '12px 30px 12px 30px';
- const largeButtonPadding = '14px 60px 14px 60px';
- const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center';
- const flexClassName = isSmallScreen
- ? 'flex items-center flex-column justify-center'
- : 'flex items-center justify-center';
- return (
- <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}>
- <div className="mx-auto max-width-4 clearfix">
- <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}>
- <div className={left} style={{ color: colors.white }}>
- <div
- className="inline-block lg-align-middle md-align-middle sm-align-top"
- style={{
- paddingLeft: isSmallScreen ? 0 : 12,
- lineHeight: '36px',
- }}
- >
- <Text
- className="sm-pb2"
- fontFamily="Roboto"
- display="inline-block"
- fontColor={colors.white}
- fontWeight="bold"
- lineHeight="1.3em"
- letterSpacing="1px"
- fontSize={isSmallScreen ? '38px' : '46px'}
- >
- {this.props.translate.get(Key.LaunchKit, Deco.CapWords)}
- </Text>
- <Container paddingTop="18px">
- <Text fontColor={colors.linkSectionGrey} fontSize="18px">
- {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)}
- </Text>
- </Container>
- <Container
- paddingTop="54px"
- className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
- >
- <Container paddingRight="20px">
- <Link to={constants.URL_LAUNCH_KIT} shouldOpenInNewTab={true}>
- <Button
- padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
- borderRadius="4px"
- borderColor={colors.white}
- >
- <Text fontSize="16px" fontWeight="bold">
- {this.props.translate.get(Key.GetStarted, Deco.Cap)}
- </Text>
- </Button>
- </Link>
- </Container>
- <div>
- <Link to={constants.URL_LAUNCH_KIT_BLOG_POST} shouldOpenInNewTab={true}>
- <Button
- backgroundColor={lighterBackgroundColor}
- borderColor={colors.white}
- fontColor={colors.white}
- padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
- borderRadius="4px"
- >
- <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
- {this.props.translate.get(Key.LearnMore, Deco.Cap)}
- </Text>
- </Button>
- </Link>
- </div>
- </Container>
- </div>
- </div>
- <Container
- marginTop={isSmallScreen ? '60px' : '30px'}
- marginBottom="30px"
- marginLeft="15px"
- marginRight="15px"
- >
- <Image
- src="/images/launch_kit/0x_cupboard.svg"
- maxWidth={isSmallScreen ? '75%' : '100%'}
- height="auto"
- />
- </Container>
- </div>
- </div>
- {this._renderBenefits(BENEFITS_1)}
- </div>
- );
- }
- private _renderSection(): React.ReactNode {
- const BENEFITS_2: Benefit[] = [
- {
- icon: '/images/launch_kit/secondary_market.svg',
- description: this.props.translate.get(Key.QuicklyLaunch, Deco.Cap),
- },
- {
- icon: '/images/launch_kit/in_game_marketplace.svg',
- description: this.props.translate.get(Key.SeemlesslyCreate, Deco.Cap),
- },
- {
- icon: '/images/launch_kit/local_market.svg',
- description: this.props.translate.get(Key.LocalMarket, Deco.Cap),
- },
- ];
- return (
- <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}>
- <Container
- className="mx-auto"
- textAlign="center"
- paddingTop="89px"
- paddingBottom="89px"
- maxWidth="421px"
- paddingLeft="10px"
- paddingRight="10px"
- >
- <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}>
- {this.props.translate.get(Key.PerfectForDevelopers, Deco.Cap)}
- </Text>
- </Container>
- {this._renderBenefits(BENEFITS_2)}
- </div>
- );
- }
- private _renderCallToAction(): React.ReactNode {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const smallButtonPadding = '8px 14px 8px 14px';
- const largeButtonPadding = '8px 14px 8px 14px';
- return (
- <Container
- className="clearfix"
- backgroundColor={lighterBackgroundColor}
- paddingTop="90px"
- paddingBottom="90px"
- >
- <Container className="clearfix mx-auto" maxWidth="850px">
- <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px">
- <Text fontColor={colors.white} fontSize="18px">
- View our comprehensive documentation to start building today.
- </Text>
- </Container>
- <Container
- className={`lg-right md-right flex clearfix sm-mx-auto ${
- isSmallScreen ? 'justify-center' : ''
- }`}
- paddingTop="5px"
- >
- <Container paddingRight="20px">
- <Link to={`${constants.URL_LAUNCH_KIT}/#table-of-contents`} shouldOpenInNewTab={true}>
- <Button
- padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
- borderRadius="4px"
- backgroundColor={lighterBackgroundColor}
- borderColor={colors.white}
- >
- <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
- {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)}
- </Text>
- </Button>
- </Link>
- </Container>
- <div>
- <Link to={constants.URL_ZEROEX_CHAT} shouldOpenInNewTab={true}>
- <Button
- padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
- borderRadius="4px"
- >
- <Text fontSize="16px" fontWeight="bold">
- {this.props.translate.get(Key.GetInTouch, Deco.Cap)}
- </Text>
- </Button>
- </Link>
- </div>
- </Container>
- </Container>
- </Container>
- );
- }
- private _renderBenefits(benefits: Benefit[]): React.ReactNode {
- return (
- <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px">
- {_.map(benefits, benefit => {
- return (
- <Container className="mx-auto sm-pb4" width="240px">
- <Container textAlign="center">
- <img src={benefit.icon} />
- </Container>
- <Container paddingTop="26px">
- <Text
- fontSize="18px"
- lineHeight="28px"
- textAlign="center"
- fontColor={colors.linkSectionGrey}
- >
- {benefit.description}
- </Text>
- </Container>
- </Container>
- );
- })}
- </Container>
- );
- }
- private _renderDisclaimer(): React.ReactNode {
- return (
- <Container
- className="clearfix"
- backgroundColor={darkerBackgroundColor}
- paddingTop="70px"
- paddingBottom="70px"
- >
- <Container className="mx-auto" maxWidth="850px" paddingLeft="20px" paddingRight="20px">
- <Text fontColor={grayText} fontSize="10px">
- <b>Disclaimer:</b> 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.
- </Text>
- <Container paddingTop="15px">
- <Text fontColor={grayText} fontSize="10px">
- See the{' '}
- <Link
- to={constants.URL_APACHE_LICENSE}
- shouldOpenInNewTab={true}
- textDecoration="underline"
- >
- Apache License, Version 2.0
- </Link>{' '}
- for the specific language governing all applicable permissions and limitations.
- </Text>
- </Container>
- </Container>
- </Container>
- );
- }
- private _updateScreenWidth(): void {
- const newScreenWidth = utils.getScreenWidth();
- if (newScreenWidth !== this.state.screenWidth) {
- this.setState({
- screenWidth: newScreenWidth,
- });
- }
- }
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 07:30:10 +0800