diff options
Diffstat (limited to 'packages/website')
64 files changed, 2627 insertions, 5 deletions
diff --git a/packages/website/.gitignore b/packages/website/.gitignore new file mode 100644 index 000000000..1e8d1ceb4 --- /dev/null +++ b/packages/website/.gitignore @@ -0,0 +1 @@ +.awcache diff --git a/packages/website/less/normalize.less b/packages/website/less/normalize.less new file mode 100644 index 000000000..c45a85f89 --- /dev/null +++ b/packages/website/less/normalize.less @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + }
\ No newline at end of file diff --git a/packages/website/package.json b/packages/website/package.json index dc10c7b1c..52d5c8f96 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -29,6 +29,7 @@ "@0x/types": "^1.3.0", "@0x/typescript-typings": "^3.0.4", "@0x/utils": "^2.0.6", + "@types/styled-components": "^4.1.1", "@0x/web3-wrapper": "^3.1.6", "accounting": "^0.4.1", "basscss": "^8.0.3", @@ -60,7 +61,7 @@ "redux-devtools-extension": "^2.13.2", "rollbar": "^2.4.7", "semver-sort": "0.0.4", - "styled-components": "^3.3.0", + "styled-components": "^4.1.1", "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3-provider-engine": "14.0.6", @@ -77,7 +78,7 @@ "@types/node": "*", "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", - "@types/react": "^16.4.2", + "@types/react": "^16.7.7", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", @@ -91,6 +92,7 @@ "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", + "react-svg-loader": "^2.1.0", "rollbar-sourcemap-webpack-plugin": "^2.4.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", diff --git a/packages/website/public/css/formular.css b/packages/website/public/css/formular.css new file mode 100644 index 000000000..84f68584c --- /dev/null +++ b/packages/website/public/css/formular.css @@ -0,0 +1,45 @@ +/** + * @license + * MyFonts Webfont Build ID 3678880, 2018-11-27T05:59:35-0500 + * + * The fonts listed in this notice are subject to the End User License + * Agreement(s) entered into by the website owner. All other parties are + * explicitly restricted from using the Licensed Webfonts(s). + * + * You may obtain a valid license at the URLs below. + * + * Webfont: Formular-Light by Brownfox + * URL: https://www.myfonts.com/fonts/brownfox/formular/light/ + * + * Webfont: Formular by Brownfox + * URL: https://www.myfonts.com/fonts/brownfox/formular/regular/ + * + * + * License: https://www.myfonts.com/viewlicense?type=web&buildid=3678880 + * Licensed pageviews: 200,000 + * Webfonts copyright: Copyright (c) 2014 by Vyacheslav Kirilenko, Gayane Bagdasaryan. All rights reserved. + * + * © 2018 MyFonts Inc +*/ + + +/* @import must be at top of file, otherwise CSS will not work */ +@import url("//hello.myfonts.net/count/3822a0"); + + +@font-face { + font-family: 'Formular'; + font-weight: 300; + src: url('/fonts/formular/3822A0_0_0.eot'); + src: url('/fonts/formular/3822A0_0_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_0_0.woff2') format('woff2'), url('/fonts/formular/3822A0_0_0.woff') format('woff'), url('/fonts/formular/3822A0_0_0.ttf') format('truetype'); + font-display: swap; +} + + +@font-face { + font-family: 'Formular'; + font-weight: 400; + src: url('/fonts/formular/3822A0_1_0.eot'); + src: url('/fonts/formular/3822A0_1_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_1_0.woff2') format('woff2'), url('/fonts/formular/3822A0_1_0.woff') format('woff'), url('/fonts/formular/3822A0_1_0.ttf') format('truetype'); + font-display: swap; +} diff --git a/packages/website/public/fonts/Formular-Light.woff b/packages/website/public/fonts/Formular-Light.woff Binary files differnew file mode 100644 index 000000000..79c774b40 --- /dev/null +++ b/packages/website/public/fonts/Formular-Light.woff diff --git a/packages/website/public/fonts/Formular-Light.woff2 b/packages/website/public/fonts/Formular-Light.woff2 Binary files differnew file mode 100644 index 000000000..6502d5da1 --- /dev/null +++ b/packages/website/public/fonts/Formular-Light.woff2 diff --git a/packages/website/public/fonts/Formular-Regular.woff b/packages/website/public/fonts/Formular-Regular.woff Binary files differnew file mode 100644 index 000000000..651364b9b --- /dev/null +++ b/packages/website/public/fonts/Formular-Regular.woff diff --git a/packages/website/public/fonts/Formular-Regular.woff2 b/packages/website/public/fonts/Formular-Regular.woff2 Binary files differnew file mode 100644 index 000000000..91cdbf29f --- /dev/null +++ b/packages/website/public/fonts/Formular-Regular.woff2 diff --git a/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png b/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png Binary files differnew file mode 100644 index 000000000..707f0eccc --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png diff --git a/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png b/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png Binary files differnew file mode 100644 index 000000000..35d51387c --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png diff --git a/packages/website/public/images/@next/about/about-mission@2x.jpg b/packages/website/public/images/@next/about/about-mission@2x.jpg Binary files differnew file mode 100644 index 000000000..bc701d812 --- /dev/null +++ b/packages/website/public/images/@next/about/about-mission@2x.jpg diff --git a/packages/website/public/images/@next/jobs/map@2x.png b/packages/website/public/images/@next/jobs/map@2x.png Binary files differnew file mode 100644 index 000000000..08fa60ec0 --- /dev/null +++ b/packages/website/public/images/@next/jobs/map@2x.png diff --git a/packages/website/public/images/@next/press/logo-fortune.png b/packages/website/public/images/@next/press/logo-fortune.png Binary files differnew file mode 100644 index 000000000..981f8c357 --- /dev/null +++ b/packages/website/public/images/@next/press/logo-fortune.png diff --git a/packages/website/public/images/@next/relayer-logos/logo.png b/packages/website/public/images/@next/relayer-logos/logo.png Binary files differnew file mode 100755 index 000000000..d810cef4a --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_1.png b/packages/website/public/images/@next/relayer-logos/logo_1.png Binary files differnew file mode 100755 index 000000000..0068a7445 --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_1.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.1.png b/packages/website/public/images/@next/relayer-logos/logo_2.1.png Binary files differnew file mode 100755 index 000000000..f6cd92b0e --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_2.1.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.2.png b/packages/website/public/images/@next/relayer-logos/logo_2.2.png Binary files differnew file mode 100755 index 000000000..9461e91ee --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_2.2.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.3.png b/packages/website/public/images/@next/relayer-logos/logo_2.3.png Binary files differnew file mode 100755 index 000000000..fde896972 --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_2.3.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.png b/packages/website/public/images/@next/relayer-logos/logo_2.png Binary files differnew file mode 100755 index 000000000..e3015110c --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_2.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_3.png b/packages/website/public/images/@next/relayer-logos/logo_3.png Binary files differnew file mode 100755 index 000000000..b3d397fe1 --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_3.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_4.png b/packages/website/public/images/@next/relayer-logos/logo_4.png Binary files differnew file mode 100755 index 000000000..578be0af8 --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_4.png diff --git a/packages/website/public/images/@next/relayer-logos/logo_5.png b/packages/website/public/images/@next/relayer-logos/logo_5.png Binary files differnew file mode 100755 index 000000000..baf3c4080 --- /dev/null +++ b/packages/website/public/images/@next/relayer-logos/logo_5.png diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx new file mode 100644 index 000000000..b2ce9eb73 --- /dev/null +++ b/packages/website/ts/@next/components/button.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +interface ButtonInterface { + color?: string; + children?: Node | string; + isTransparent?: boolean; + isNoBorder?: boolean; + isNoPadding?: boolean; + hasIcon?: boolean | string; + isInline?: boolean; + href?: string; + onClick?: () => any; + theme?: { + textColor: string; + }; +} + +export const Button = styled.button<ButtonInterface>` + appearance: none; + border: 1px solid transparent; + display: ${props => props.isInline && 'inline-block'}; + background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; + border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'}; + color: ${props => props.color || props.theme.textColor}; + padding: ${props => !props.isNoPadding && '18px 30px'}; + text-align: center; + font-size: 18px; + text-decoration: none; +`; + +export const Link = (props: ButtonInterface) => { + const { + children, + href, + } = props; + const Component = Button.withComponent(ReactRouterLink); + + return ( + <Component to={href} {...props}> + {children} + </Component> + ); +}; + +// Added this, & + & doesnt really work since we switch with element types... +export const ButtonWrap = styled.div` + button + button, + a + a, + a + button, + button + a { + margin-left: 10px; + } +`; diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx new file mode 100644 index 000000000..13b681572 --- /dev/null +++ b/packages/website/ts/@next/components/footer.tsx @@ -0,0 +1,119 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { Logo } from 'ts/@next/components/logo'; +import { NewsletterForm } from 'ts/@next/components/newsletterForm'; + +interface FooterInterface { +} + +interface LinkInterface { + text: string; + url: string; + newWindow?: boolean; +} + +interface LinkRows { + heading: string; + links: LinkInterface[]; +} + +interface LinkListProps { + links: LinkInterface[]; +} + +const linkRows: LinkRows[] = [ + { + heading: 'Products', + links: [ + { url: '/next/0x-instant', text: '0x Instant' }, + { url: '#', text: '0x Launch Kit' }, + ], + }, + { + heading: 'About', + links: [ + { url: '#', text: 'Mission' }, + { url: '#', text: 'Team' }, + { url: '#', text: 'Jobs' }, + { url: '#', text: 'Press Kit' }, + ], + }, + { + heading: 'Community', + links: [ + { url: '#', text: 'Twitter' }, + { url: '#', text: 'Rocket Chat' }, + { url: '#', text: 'Facebook' }, + { url: '#', text: 'Reddit' }, + ], + }, +]; + +export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( + <FooterWrap bgColor="#181818" isNoMargin={true}> + <Wrap> + <Column colWidth="1/2" isNoPadding={true}> + <Logo isLight={true} /> + <NewsletterForm /> + </Column> + + <Column colWidth="1/2" isNoPadding={true}> + <Wrap> + {_.map(linkRows, (row, index) => ( + <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}> + <RowHeading> + {row.heading} + </RowHeading> + + <LinkList links={row.links} /> + </Column> + ))} + </Wrap> + </Column> + </Wrap> + </FooterWrap> +); + +const LinkList = (props: LinkListProps) => ( + <ul> + {_.map(props.links, (link, index) => ( + <li key={`fl-${index}`}> + <Link to={link.url}> + {link.text} + </Link> + </li> + ))} + </ul> +); + +const FooterSection = Section.withComponent('footer'); +const FooterWrap = styled(FooterSection)` + color: ${colors.white}; +`; + +const RowHeading = styled.h3` + color: ${colors.white}; + font-weight: 500; + font-size: 16px; + line-height: 20px; + margin-bottom: 1.25em; +`; + +const Link = styled(ReactRouterLink)` + color: rgba(255, 255, 255, 0.5); + display: block; + font-size: 16px; + line-height: 20px; + transition: color 0.25s ease-in-out; + text-decoration: none; + + &:hover { + color: rgba(255, 255, 255, 1); + } +`; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx new file mode 100644 index 000000000..a6bbe4d65 --- /dev/null +++ b/packages/website/ts/@next/components/header.tsx @@ -0,0 +1,50 @@ +import _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; +import { Section, Wrap } from 'ts/@next/components/layout'; +import { Logo } from 'ts/@next/components/logo'; + +interface HeaderProps { +} + +const links = [ + { url: '/next/why', text: 'Why 0x' }, + { url: '/next/0x-instant', text: 'Products' }, + { url: '#', text: 'Developers' }, + { url: '/next/about/mission', text: 'About' }, + { url: '#', text: 'Blog' }, +]; + +export const Header: React.StatelessComponent<HeaderProps> = ({}) => ( + <StyledHeader> + <HeaderWrap> + <ReactRouterLink to="/next"> + <Logo/> + </ReactRouterLink> + + <ButtonWrap> + {_.map(links, (link, index) => ( + <Link + key={`hb-${index}`} + href={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </Link> + ))} + </ButtonWrap> + + <Button href="#">Trade on 0x</Button> + </HeaderWrap> + </StyledHeader> +); + +const StyledHeader = Section.withComponent('header'); +const HeaderWrap = styled(Wrap)` + justify-content: space-between; + align-items: center; +`; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx new file mode 100644 index 000000000..28a8b3c60 --- /dev/null +++ b/packages/website/ts/@next/components/icon.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + icon: any; + size?: string; +} + +export const IconClass: React.FunctionComponent<Props> = (props: Props) => { + return ( + <div /> + ); +}; + +export const Icon = styled(IconClass)` + margin: auto; + flex-shrink: 0; + + ${(props: Props) => props.size && ` + width: ${props.size}; + height: auto; + `} +`; diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx new file mode 100644 index 000000000..34520b619 --- /dev/null +++ b/packages/website/ts/@next/components/image.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + alt?: string; + src?: any; + srcset?: any; + isCentered?: boolean; +} + +const ImageClass: React.FunctionComponent<Props> = (props: Props) => { + return ( + <img {...props} /> + ); +}; + +export const Image = styled(ImageClass)<Props>` + margin: ${props => props.isCentered && `0 auto`}; +`; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx new file mode 100644 index 000000000..d30b7a9d1 --- /dev/null +++ b/packages/website/ts/@next/components/layout.tsx @@ -0,0 +1,139 @@ +import styled from 'styled-components'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; + +interface WrapWidths { + default: string; + full: string; + medium: string; + narrow: string; + [key: string]: string; +} + +interface ColumnWidths { + [key: string]: string; +} + +interface SectionProps { + isNoPadding?: boolean; + isPadLarge?: boolean; + isNoMargin?: boolean; + bgColor?: string; + isFullWidth?: boolean; +} + +interface WrapProps extends PaddingInterface { + width?: 'default' | 'full' | 'medium' | 'narrow'; + bgColor?: string; + isWrapped?: boolean; + isCentered?: boolean; +} + +interface ColumnProps { + colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; + isNoPadding?: boolean; + isPadLarge?: boolean; + bgColor?: string; + borderColor?: string; +} + +interface GetColWidthArgs { + span?: number; + columns: number; +} + +const _getColumnWidth = (args: GetColWidthArgs): string => { + const { span = 1, columns } = args; + const percentWidth = (span / columns) * 100; + const gutterDiff = (GUTTER * (columns - 1)) / columns; + return `calc(${percentWidth}% - ${gutterDiff}px)`; +}; + +const GUTTER = 30 as number; +const MAX_WIDTH = 1500; +const BREAKPOINTS = { + mobile: '768px', +}; +const WRAPPER_WIDTHS: WrapWidths = { + default: `${MAX_WIDTH}px`, // tbd + full: '100%', + medium: '1136px', + narrow: '930px', +}; +const COLUMN_WIDTHS: ColumnWidths = { + '1/4': _getColumnWidth({ columns: 4 }), + '1/3': _getColumnWidth({ columns: 3 }), + '1/2': _getColumnWidth({ columns: 2 }), + '2/3': _getColumnWidth({ span: 2, columns: 3 }), +}; + +export const Main = styled.main` + border: 1px dotted rgba(0, 0, 255, 0.3); + width: calc(100% - 60px); + max-width: ${MAX_WIDTH}px; + margin: 0 auto; +`; + +// We can also turn Section into a stateless comp, +// passing a asElement (same patter nas Heading) so we dont have to +// make a const on every route to withComponent-size it. +// just <Section asElement?="div/section/footer/header/whatever" /> ? +export const Section = styled.section<SectionProps>` + width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; + margin-left: ${props => props.isFullWidth && `-${GUTTER}px`}; + background-color: ${props => props.bgColor}; + border: 1px dotted rgba(0, 255, 0, 0.15); + + @media (min-width: 1560px) { + width: ${props => props.isFullWidth && '100vw'}; + margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`}; + } + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding: 30px; + } +`; + +const WrapBase = styled.div<WrapProps>` + max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; + background-color: ${props => props.bgColor}; + margin: 0 auto; +`; + +export const Wrap = styled(WrapBase)` + @media (min-width: ${BREAKPOINTS.mobile}) { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } +`; + +export const WrapCentered = styled(WrapBase)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +export const WrapGrid = styled(WrapBase)` + display: flex; + flex-wrap: ${props => props.isWrapped && `wrap`}; + justify-content: ${props => props.isCentered ? `center` : 'space-between'}; +`; + +export const Column = styled.div<ColumnProps>` + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; + border: 1px dotted rgba(255, 0, 0, 0.15); + background-color: ${props => props.bgColor}; + border-color: ${props => props.borderColor && `${props.borderColor}`}; + + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; + } +`; + +WrapGrid.defaultProps = { + isCentered: true, +}; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx new file mode 100644 index 000000000..9f147e3fb --- /dev/null +++ b/packages/website/ts/@next/components/logo.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import LogoIcon from 'ts/@next/icons/logo-with-type.svg'; + +interface LogoInterface { + isLight?: boolean; + theme?: ThemeInterface; +} + +// Note let's refactor this +// is it absolutely necessary to have a stateless component +// to pass props down into the styled icon? +const StyledLogo = styled.div` + text-align: left; +`; + +const Icon = styled(LogoIcon)` + flex-shrink: 0; + + path { + fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor}; + } +`; + +export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => ( + <StyledLogo> + <Icon {...props} /> + </StyledLogo> +); diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx new file mode 100644 index 000000000..9e82975f4 --- /dev/null +++ b/packages/website/ts/@next/components/newsletterForm.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import {Button} from 'ts/@next/components/button'; + +interface InputProps { + name: string; + label: string; + type: string; +} + +interface Props { +} + +const Input = (props: InputProps) => { + const { name, label, type } = props; + const id = `input-${name}`; + + return ( + <> + <label className="visuallyHidden" htmlFor={id}>{label}</label> + <StyledInput id={id} placeholder={label} {...props} /> + </> + ); +}; + +export const NewsletterForm: React.StatelessComponent = (props: Props) => ( + <StyledForm> + <InputWrapper> + <Input name="email" type="email" label="Email Address" /> + <SubmitButton hasIcon={true}> + Submit + </SubmitButton> + </InputWrapper> + <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text> + </StyledForm> +); + +const StyledForm = styled.form` + appearance: none; + border: 0; + color: ${colors.white}; + padding: 13px 0 14px; + margin-top: 27px; +`; + +const StyledInput = styled.input` + appearance: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid #393939; + color: ${colors.textDarkSecondary}; + font-size: 1.294117647rem; + padding: 0 0 16px; + width: 100%; + margin-bottom: 13px; +`; + +const InputWrapper = styled.div` + position: relative; +`; + +const SubmitButton = styled(Button)` + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 0; + top: calc(50% - 29px); +`; + +const Text = styled.span` + color: #656565; + font-size: 0.833333333rem; + font-weight: 300; + line-height: 1.2em; +`; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx new file mode 100644 index 000000000..f7b2c4df2 --- /dev/null +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { ThemeProvider } from 'styled-components'; + +import { Footer } from 'ts/@next/components/footer'; +import { Header } from 'ts/@next/components/header'; +import { Main } from 'ts/@next/components/layout'; +import { GlobalStyles } from 'ts/@next/constants/globalStyle'; + +// Note(ez): We'll define the theme and provide it via a prop +// e.g. theme dark/light/etc. +interface Props { + theme?: 'dark' | 'light' | 'gray'; + children: any; +} + +// we proabbly want to put this somewhere else (themes) +export interface ThemeInterface { + [key: string]: { + bgColor: string; + textColor: string; + }; +} + +const GLOBAL_THEMES: ThemeInterface = { + dark: { + bgColor: '#000000', + textColor: '#FFFFFF', + }, + light: { + bgColor: '#FFFFFF', + textColor: '#000000', + }, + gray: { + bgColor: '#e0e0e0', + textColor: '#000000', + }, +}; + +export const SiteWrap: React.StatelessComponent<Props> = props => { + const { + children, + theme = 'dark', + } = props; + const currentTheme = GLOBAL_THEMES[theme]; + + return ( + <> + <ThemeProvider theme={currentTheme}> + <> + <GlobalStyles /> + + <Header /> + + <Main> + {children} + </Main> + + <Footer/> + </> + </ThemeProvider> + </> + ); +}; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx new file mode 100644 index 000000000..0be24d233 --- /dev/null +++ b/packages/website/ts/@next/components/text.tsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; + +interface BaseTextInterface extends PaddingInterface { + size?: 'default' | 'medium' | 'large' | 'small'; + isCentered?: boolean; +} + +interface HeadingProps extends BaseTextInterface { + asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + isCentered?: boolean; + isNoMargin?: boolean; + color?: string; +} + +interface ParagraphProps extends BaseTextInterface { + isNoMargin?: boolean; + isMuted?: boolean | number; +} + +interface HeadingSizes { + large: string; + medium: string; + default: string; + small: string; + [key: string]: string; +} + +interface ParagraphSizes { + default: string; + medium: string; + large: string; + [key: string]: string; +} + +const HEADING_SIZES: HeadingSizes = { + small: '20px', + default: '28px', + medium: '50px', + large: '80px', +}; + +const HEADING_LINE_HEIGHTS: HeadingSizes = { + small: '1.4em', + default: '1.357142857em', + medium: '1.16em', + large: '1em', +}; + +const PARAGRAPH_SIZES: ParagraphSizes = { + default: '18px', + small: '14px', + medium: '22px', + large: '28px', +}; + +const StyledHeading = styled.h1<HeadingProps>` + color: ${props => props.color || props.theme.textColor}; + font-size: ${props => HEADING_SIZES[props.size || 'default']}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; + line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; + text-align: ${props => props.isCentered && 'center'}; + font-weight: 300; +`; + +export const Heading: React.StatelessComponent<HeadingProps> = props => { + const { + asElement = 'h1', + children, + } = props; + const Component = StyledHeading.withComponent(asElement); + return <Component {...props}>{children}</Component>; +}; + +// No need to declare it twice as Styled then rewrap as a stateless comp +// Note: this would be useful to be implemented the same way was "Heading" +// and be more generic. e.g. <Text /> with a props asElement so we can use it +// for literally anything = +export const Paragraph = styled.p<ParagraphProps>` + font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; + color: ${props => props.color || props.theme.textColor}; + opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; + text-align: ${props => props.isCentered && 'center'}; + line-height: 1.4; +`; diff --git a/packages/website/ts/@next/constants/.gitkeep b/packages/website/ts/@next/constants/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/packages/website/ts/@next/constants/.gitkeep diff --git a/packages/website/ts/@next/constants/cssReset.js b/packages/website/ts/@next/constants/cssReset.js new file mode 100644 index 000000000..4c5105b50 --- /dev/null +++ b/packages/website/ts/@next/constants/cssReset.js @@ -0,0 +1,50 @@ +export const cssReset = ` + *, + *:before, + *:after { + box-sizing: border-box; + } + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } +`; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx new file mode 100644 index 000000000..b22a5c6db --- /dev/null +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -0,0 +1,71 @@ +import { createGlobalStyle, withTheme } from 'styled-components'; +import {cssReset} from 'ts/@next/constants/cssReset'; + +interface GlobalStyle { + theme: { + bgColor: string; + textColor: string; + }; +} + +const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` + ${cssReset}; + + @font-face { + font-family: "Formular"; + src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff"); + font-weight: 300; + font-display: swap; + } + + @font-face { + font-family: "Formular"; + src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff"); + font-weight: 400; + font-display: swap; + } + + html { + font-size: 18px; + background-color: ${props => props.theme.bgColor}; + } + + body { + font-family: 'Formular', sans-serif !important; + -webkit-font-smoothing: antialiased; + color: ${props => props.theme.textColor}; + } + + .visuallyHidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } + + img { + max-width: 100%; + object-fit: contain; + } + + p, li { + font-size: 1rem; + line-height: 1.444444444em; // 26px + } + + :root a { + color: inherit; + text-decoration: none; + } + + svg + p, + img + p { + padding-top: 30px; + } +`); + +export { GlobalStyles }; diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx new file mode 100644 index 000000000..35956c47b --- /dev/null +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -0,0 +1,21 @@ +export interface PaddingInterface { + padding?: number | Array<'large' | 'default' | number>; +} + +interface PaddingSizes { + [key: string]: string; +} + +const PADDING_SIZES: PaddingSizes = { + 'default': '30px', + 'large': '60px', + 'small': '15px', +}; + +export const getCSSPadding = (value: number | Array<string | number>): string => { + if (Array.isArray(value)) { + return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); + } else { + return `${value}px`; + } +}; diff --git a/packages/website/ts/@next/icons/form-arrow.svg b/packages/website/ts/@next/icons/form-arrow.svg new file mode 100644 index 000000000..2070a6d48 --- /dev/null +++ b/packages/website/ts/@next/icons/form-arrow.svg @@ -0,0 +1 @@ +<svg width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/coin.svg b/packages/website/ts/@next/icons/illustrations/coin.svg new file mode 100644 index 000000000..eaf3862c7 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/coin.svg @@ -0,0 +1 @@ +<svg width="88" height="88" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 87c23.748 0 43-19.252 43-43S67.748 1 44 1 1 20.252 1 44s19.252 43 43 43z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M43.999 78.4c18.998 0 34.4-15.401 34.4-34.4 0-18.998-15.401-34.4-34.4-34.4S9.599 25.002 9.599 44C9.599 63 25 78.4 43.999 78.4z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M35.1 57.76v1h20.529v-7.395h-6.098V26.738H42.36l-.254.173-6.568 4.456-.438.298v8.906l1.561-1.06 5.006-3.397v15.251H35.1v6.395z" stroke="#00AE99" stroke-width="2"/><path d="M9.597 43.766c7.115-1.173 12.588-7.271 12.588-14.777 0-3.362-1.095-6.41-2.971-8.913-5.864 6.177-9.538 14.542-9.617 23.69zM9.597 44.234c.079 9.226 3.753 17.513 9.617 23.69a14.719 14.719 0 0 0 2.97-8.913c0-7.506-5.472-13.682-12.587-14.777zM78.399 43.766c-7.115-1.173-12.587-7.271-12.587-14.777 0-3.362 1.094-6.41 2.97-8.913 5.864 6.177 9.539 14.542 9.617 23.69zM78.399 44.235c-.079 9.225-3.753 17.512-9.617 23.689a14.718 14.718 0 0 1-2.97-8.913c0-7.506 5.472-13.682 12.587-14.776z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg new file mode 100644 index 000000000..086961a4a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg @@ -0,0 +1 @@ +<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 102c27.614 0 50-22.386 50-50S79.614 2 52 2 2 24.386 2 52s22.386 50 50 50z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M69.993 52l-32.01-18.478v36.956L69.993 52zM102 52L69.993 33.522v36.956L102 52zM37.983 52L5.976 33.522v36.956L37.983 52z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/customize.svg b/packages/website/ts/@next/icons/illustrations/customize.svg new file mode 100644 index 000000000..f93ced0f7 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/customize.svg @@ -0,0 +1 @@ +<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M120.5 122.906H31.503c-12.943 0-23.478-10.485-23.478-23.478 0-12.993 10.485-23.478 23.478-23.478H120.5" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M120.499 122.906c12.967 0 23.478-10.511 23.478-23.478 0-12.967-10.511-23.478-23.478-23.478-12.967 0-23.478 10.511-23.478 23.478 0 12.967 10.511 23.478 23.478 23.478z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M120.5 122.906H31.503c-12.943 0-23.478-10.485-23.478-23.478 0-12.993 10.485-23.478 23.478-23.478H120.5" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M120.499 122.906c12.967 0 23.478-10.511 23.478-23.478 0-12.967-10.511-23.478-23.478-23.478-12.967 0-23.478 10.511-23.478 23.478 0 12.967 10.511 23.478 23.478 23.478z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M31.5 29.093h88.996c12.943 0 23.478 10.485 23.478 23.478 0 12.993-10.485 23.478-23.478 23.478H31.499" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M31.503 76.052c12.967 0 23.478-10.512 23.478-23.478 0-12.967-10.511-23.479-23.478-23.479-12.966 0-23.478 10.512-23.478 23.479 0 12.966 10.512 23.478 23.478 23.478z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/logo-outlined.svg b/packages/website/ts/@next/icons/illustrations/logo-outlined.svg new file mode 100644 index 000000000..a09d2355f --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/logo-outlined.svg @@ -0,0 +1,14 @@ +<svg width="400" height="406" viewBox="0 0 400 406" fill="none" xmlns="http://www.w3.org/2000/svg"> +<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="400" height="406"> +<ellipse cx="200" cy="202.967" rx="200" ry="202.744" fill="#C4C4C4"/> +</mask> +<g mask="url(#mask0)"> +<path d="M162.629 260.116L161.587 258.71L159.447 260.297L161.753 261.631L162.629 260.116ZM193.062 269.329L192.945 271.075L192.953 271.076L193.062 269.329ZM234.92 258.634L235.854 260.113L235.86 260.109L234.92 258.634ZM250.83 244.761L252.163 245.895L253.051 244.85L252.25 243.738L250.83 244.761ZM238.764 228.665L240.146 227.592L240.141 227.585L240.135 227.578L238.764 228.665ZM235.24 224.217L236.612 223.13L235.079 221.196L233.761 223.282L235.24 224.217ZM216.446 240.631L215.231 241.89L216.098 242.727L217.189 242.216L216.446 240.631ZM204.487 229.088L205.702 227.829L204.636 226.8L203.445 227.682L204.487 229.088ZM137.215 166.291L138.602 165.224L137.006 163.149L135.699 165.418L137.215 166.291ZM128.139 196.154L126.393 196.035L126.392 196.044L128.139 196.154ZM138.924 237.666L137.455 238.618H137.455L138.924 237.666ZM152.912 253.445L151.79 254.787L152.824 255.652L153.924 254.873L152.912 253.445ZM169.143 241.478L170.204 242.87L170.211 242.864L170.218 242.859L169.143 241.478ZM173.628 237.984L174.703 239.364L176.66 237.839L174.567 236.507L173.628 237.984ZM157.077 219.24L155.833 218.008L154.968 218.882L155.497 219.992L157.077 219.24ZM168.822 207.379L170.066 208.611L171.142 207.524L170.209 206.312L168.822 207.379ZM232.57 140.982L233.582 142.41L235.808 140.833L233.447 139.467L232.57 140.982ZM202.138 131.769L202.018 133.515L202.021 133.515L202.138 131.769ZM160.173 142.464L161.114 143.94L161.117 143.938L160.173 142.464ZM144.263 156.337L142.93 155.203L142.042 156.248L142.843 157.36L144.263 156.337ZM156.329 172.433L154.946 173.506L154.952 173.513L154.957 173.52L156.329 172.433ZM159.853 176.881L158.481 177.968L159.996 179.88L161.322 177.832L159.853 176.881ZM178.753 160.467L179.961 159.201L179.1 158.379L178.019 158.878L178.753 160.467ZM189.965 171.163L188.757 172.429L189.8 173.424L190.976 172.591L189.965 171.163ZM258.091 234.489L256.699 235.55L258.301 237.651L259.611 235.357L258.091 234.489ZM267.06 204.944L268.806 205.065L268.807 205.054L267.06 204.944ZM256.276 163.432L257.748 162.486L257.744 162.48L256.276 163.432ZM242.287 147.653L243.41 146.311L242.376 145.446L241.276 146.225L242.287 147.653ZM226.057 159.62L224.995 158.228L224.988 158.234L224.981 158.239L226.057 159.62ZM221.572 163.114L220.496 161.734L218.526 163.27L220.642 164.597L221.572 163.114ZM238.23 181.858L236.65 182.61L236.658 182.628L236.667 182.646L238.23 181.858ZM238.336 182.07L239.592 183.289L240.46 182.395L239.899 181.282L238.336 182.07ZM227.018 193.719L225.763 192.499L224.712 193.58L225.626 194.779L227.018 193.719ZM161.753 261.631C170.951 266.952 181.568 270.316 192.945 271.075L193.178 267.583C182.345 266.86 172.246 263.658 163.505 258.601L161.753 261.631ZM192.953 271.076C208.709 272.053 223.488 267.928 235.854 260.113L233.985 257.154C222.219 264.589 208.167 268.512 193.17 267.583L192.953 271.076ZM235.86 260.109C241.988 256.203 247.459 251.428 252.163 245.895L249.497 243.628C245.018 248.896 239.811 253.44 233.979 257.158L235.86 260.109ZM252.25 243.738C248.498 238.53 244.428 233.112 240.146 227.592L237.381 229.737C241.642 235.231 245.687 240.615 249.41 245.784L252.25 243.738ZM240.135 227.578C239.548 226.837 238.961 226.095 238.373 225.354C237.786 224.613 237.199 223.872 236.612 223.13L233.868 225.304C234.455 226.045 235.043 226.786 235.63 227.528C236.217 228.269 236.805 229.01 237.392 229.751L240.135 227.578ZM233.761 223.282C229.462 230.082 223.103 235.581 215.704 239.046L217.189 242.216C225.166 238.48 232.048 232.542 236.719 225.152L233.761 223.282ZM217.662 239.372L205.702 227.829L203.272 230.347L215.231 241.89L217.662 239.372ZM203.445 227.682L161.587 258.71L163.671 261.522L205.529 230.494L203.445 227.682ZM135.699 165.418C130.444 174.538 127.159 184.855 126.393 196.035L129.885 196.274C130.614 185.639 133.736 175.836 138.732 167.165L135.699 165.418ZM126.392 196.044C125.407 211.676 129.568 226.449 137.455 238.618L140.392 236.714C132.904 225.162 128.949 211.131 129.886 196.264L126.392 196.044ZM137.455 238.618C141.395 244.696 146.211 250.122 151.79 254.787L154.035 252.102C148.722 247.66 144.14 242.496 140.392 236.714L137.455 238.618ZM153.924 254.873C159.176 251.152 164.638 247.116 170.204 242.87L168.081 240.087C162.542 244.313 157.113 248.324 151.901 252.017L153.924 254.873ZM170.218 242.859C171.713 241.694 173.208 240.529 174.703 239.364L172.552 236.603C171.057 237.768 169.562 238.933 168.067 240.098L170.218 242.859ZM174.567 236.507C167.693 232.132 162.147 225.819 158.657 218.488L155.497 219.992C159.267 227.91 165.253 234.728 172.688 239.46L174.567 236.507ZM158.32 220.471L170.066 208.611L167.579 206.148L155.833 218.008L158.32 220.471ZM170.209 206.312L138.602 165.224L135.828 167.358L167.435 208.446L170.209 206.312ZM233.447 139.467C224.248 134.146 213.631 130.782 202.254 130.023L202.021 133.515C212.855 134.238 222.953 137.44 231.694 142.497L233.447 139.467ZM202.258 130.023C186.496 128.937 171.602 133.064 159.229 140.991L161.117 143.938C172.876 136.404 187.027 132.482 202.018 133.515L202.258 130.023ZM159.232 140.989C153.105 144.895 147.634 149.67 142.93 155.203L145.596 157.47C150.075 152.202 155.282 147.658 161.114 143.94L159.232 140.989ZM142.843 157.36C146.594 162.568 150.665 167.986 154.946 173.506L157.712 171.361C153.451 165.867 149.406 160.483 145.683 155.314L142.843 157.36ZM154.957 173.52C155.545 174.261 156.132 175.003 156.719 175.744C157.307 176.485 157.894 177.226 158.481 177.968L161.225 175.794C160.637 175.053 160.05 174.312 159.463 173.57C158.875 172.829 158.288 172.088 157.701 171.347L154.957 173.52ZM161.322 177.832C165.736 171.011 171.997 165.515 179.487 162.056L178.019 158.878C169.919 162.619 163.152 168.561 158.384 175.93L161.322 177.832ZM177.545 161.733L188.757 172.429L191.173 169.896L179.961 159.201L177.545 161.733ZM190.976 172.591L233.582 142.41L231.559 139.554L188.953 169.735L190.976 172.591ZM259.611 235.357C264.754 226.349 268.04 216.141 268.806 205.065L265.315 204.823C264.586 215.35 261.465 225.05 256.571 233.621L259.611 235.357ZM268.807 205.054C269.792 189.418 265.63 174.754 257.748 162.486L254.803 164.378C262.298 176.043 266.251 189.971 265.314 204.834L268.807 205.054ZM257.744 162.48C253.804 156.402 248.989 150.976 243.41 146.311L241.165 148.996C246.478 153.438 251.059 158.602 254.807 164.384L257.744 162.48ZM241.276 146.225C236.024 149.946 230.561 153.982 224.995 158.228L227.118 161.011C232.657 156.785 238.086 152.774 243.299 149.081L241.276 146.225ZM224.981 158.239C224.234 158.822 223.486 159.404 222.739 159.987C221.991 160.569 221.244 161.151 220.496 161.734L222.648 164.495C223.395 163.912 224.143 163.33 224.89 162.747C225.637 162.165 226.385 161.583 227.132 161L224.981 158.239ZM220.642 164.597C227.616 168.971 233.159 175.281 236.65 182.61L239.81 181.106C236.039 173.186 230.05 166.365 222.502 161.632L220.642 164.597ZM236.667 182.646L236.774 182.858L239.899 181.282L239.792 181.07L236.667 182.646ZM237.081 180.85L225.763 192.499L228.273 194.938L239.592 183.289L237.081 180.85ZM225.626 194.779L256.699 235.55L259.483 233.428L228.41 192.658L225.626 194.779Z" fill="#00AE99"/> +<ellipse cx="60.0003" cy="200.535" rx="68" ry="68.9328" stroke="#00AE99" stroke-width="3.5"/> +<ellipse cx="201.6" cy="61.8583" rx="68.8" ry="69.7438" stroke="#00AE99" stroke-width="3.5"/> +<rect x="267.2" y="133.224" width="137.6" height="137.866" stroke="#00AE99" stroke-width="3.5"/> +<rect width="99.6242" height="99.6242" transform="matrix(0.702274 -0.711907 0.702274 0.711907 271.273 342.124)" stroke="#00AE99" stroke-width="3.5"/> +<path d="M267.2 340.833C267.2 301.418 235.248 269.467 195.834 269.467H-11.2003V412.198H195.834C235.248 412.198 267.2 380.247 267.2 340.833V340.833Z" stroke="#00AE99" stroke-width="3.5"/> +</g> +<path d="M398.25 202.967C398.25 313.996 309.468 403.961 200 403.961C90.532 403.961 1.75 313.996 1.75 202.967C1.75 91.939 90.532 1.97368 200 1.97368C309.468 1.97368 398.25 91.939 398.25 202.967Z" stroke="#00AE99" stroke-width="3.5"/> +</svg> diff --git a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg new file mode 100644 index 000000000..da6385fe0 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg @@ -0,0 +1 @@ +<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 102c27.614 0 50-22.386 50-50S79.614 2 52 2 2 24.386 2 52s22.386 50 50 50z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M52 102c16.513 0 29.9-22.386 29.9-50S68.512 2 52 2C35.486 2 22.1 24.386 22.1 52s13.386 50 29.9 50zM52 2v100M102 52H2M95.445 76.983H8.555M95.445 26.983H8.555" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/protocol.svg b/packages/website/ts/@next/icons/illustrations/protocol.svg new file mode 100644 index 000000000..71453194a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/protocol.svg @@ -0,0 +1 @@ +<svg width="144" height="144" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:screen" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"><path d="M72 132.722c33.536 0 60.722-27.186 60.722-60.722S105.536 11.278 72 11.278 11.278 38.464 11.278 72 38.464 132.722 72 132.722z"/><path d="M72 20.557A9.278 9.278 0 1 0 72 2a9.278 9.278 0 0 0 0 18.557zM114.942 38.336a9.278 9.278 0 1 0-9.278-9.278 9.278 9.278 0 0 0 9.278 9.278zM132.722 81.278A9.278 9.278 0 0 0 142 72a9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 1 0 0 18.556zM114.942 124.221a9.279 9.279 0 1 0 0-18.557 9.279 9.279 0 0 0 0 18.557zM72 142a9.278 9.278 0 0 0 9.278-9.278 9.278 9.278 0 1 0-18.556 0A9.278 9.278 0 0 0 72 142zM29.058 124.221a9.278 9.278 0 0 0 9.278-9.279 9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 0 0-9.279 9.278 9.278 9.278 0 0 0 9.279 9.279zM11.278 81.278a9.278 9.278 0 1 0 0-18.556 9.278 9.278 0 0 0 0 18.556zM29.058 38.336a9.278 9.278 0 1 0 0-18.557 9.278 9.278 0 0 0 0 18.557zM68.114 75.886c-2.138-2.137-2.138-5.635 0-7.82 2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.634 0 7.82-2.185 2.138-5.683 2.138-7.82 0zM49.363 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.137-2.138 5.635-2.138 7.821 0 2.137 2.137 2.137 5.634 0 7.82a5.571 5.571 0 0 1-7.821 0zM30.66 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.636-2.138 7.822 0 2.137 2.137 2.137 5.634 0 7.82-2.186 2.138-5.684 2.138-7.821 0zM86.816 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.82 0zM105.518 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.821 0zM53.25 58.738c0-3.06 2.477-5.489 5.489-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489-3.011.048-5.489-2.43-5.489-5.49zM40.036 45.525c0-3.06 2.478-5.489 5.49-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489a5.453 5.453 0 0 1-5.489-5.49zM79.724 85.213c0-3.06 2.477-5.49 5.49-5.49 3.06 0 5.488 2.478 5.488 5.49 0 3.06-2.477 5.49-5.489 5.49-3.06.048-5.49-2.43-5.49-5.49zM92.937 98.475c0-3.06 2.477-5.49 5.49-5.49a5.483 5.483 0 0 1 5.488 5.49c0 3.06-2.477 5.489-5.489 5.489s-5.49-2.478-5.49-5.49zM85.213 53.25c3.06 0 5.49 2.477 5.49 5.488 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.49-5.49 5.483 5.483 0 0 1 5.49-5.489zM98.475 40.036c3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.477 5.489-5.49 5.489a5.484 5.484 0 0 1-5.489-5.49c-.048-3.06 2.43-5.489 5.49-5.489zM58.739 79.724c3.06 0 5.489 2.477 5.489 5.489 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.489-5.49c0-3.06 2.478-5.49 5.49-5.49zM45.525 92.937c3.06 0 5.49 2.477 5.49 5.49a5.483 5.483 0 0 1-5.49 5.488 5.483 5.483 0 0 1-5.489-5.489 5.484 5.484 0 0 1 5.49-5.49zM68.114 49.363c2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.635 0 7.82-2.137 2.138-5.634 2.138-7.82 0a5.483 5.483 0 0 1 0-7.82zM68.114 30.66c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.636 0 7.822-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.684 0-7.821zM68.114 86.816c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.683 0-7.82zM68.114 105.518c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.138-5.634 2.138-7.82 0-2.186-2.186-2.186-5.683 0-7.821z"/></g></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg new file mode 100644 index 000000000..f3e44d53a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg @@ -0,0 +1 @@ +<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76 1.502l-30.852 44.8H76L76.05 76l30.803-44.9H76.001V1.502zM76 75.997l-30.853 44.799H76l.05 29.699 30.803-44.899H76V75.997z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M1.502 75.998l44.8 30.852V75.998L76 75.948 31.1 45.144v30.853H1.503zM76 76l45.101 31.522V76L151 75.95l-45.202-31.47V76H76z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/right-thing.svg b/packages/website/ts/@next/icons/illustrations/right-thing.svg new file mode 100644 index 000000000..4e360c0b4 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/right-thing.svg @@ -0,0 +1 @@ +<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 102c27.614 0 50-22.386 50-50S79.614 2 52 2 2 24.386 2 52s22.386 50 50 50z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M92.061 24.613c-10.138-10.137-26.574-10.137-36.711 0l-3.67 3.673-3.672-3.673c-10.138-10.137-26.574-10.137-36.711 0-10.138 10.138-10.138 26.574 0 36.712l3.672 3.672 36.711 36.709 36.712-36.712 3.672-3.672c10.135-10.135 10.135-26.57-.003-36.709z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M81.293 45.17c-7.435-7.434-19.489-7.434-26.92 0l-2.693 2.694-2.694-2.694c-7.434-7.434-19.488-7.434-26.922 0-7.435 7.435-7.435 19.488 0 26.923l2.693 2.693 26.92 26.923 26.922-26.923 2.694-2.693c7.434-7.435 7.434-19.488 0-26.923z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M70.525 65.73c-4.732-4.731-12.403-4.731-17.13 0l-1.715 1.715-1.715-1.715c-4.731-4.731-12.403-4.731-17.13 0-4.732 4.731-4.732 12.402 0 17.13l1.714 1.715 17.13 17.131 17.131-17.13 1.715-1.715c4.731-4.732 4.731-12.4 0-17.131z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/support.svg b/packages/website/ts/@next/icons/illustrations/support.svg new file mode 100644 index 000000000..d3f2294cc --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/support.svg @@ -0,0 +1 @@ +<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M114.869 14.138H38.226v124.818h76.643V14.138z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M101.73 26.189H51.365v100.73h50.365V26.189z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76.547 76.554c13.908 0 25.183-11.275 25.183-25.183 0-13.907-11.275-25.182-25.183-25.182-13.907 0-25.182 11.275-25.182 25.182 0 13.908 11.275 25.183 25.182 25.183zM76.547 126.919c13.908 0 25.183-11.274 25.183-25.182S90.455 76.554 76.547 76.554c-13.907 0-25.182 11.275-25.182 25.183s11.275 25.182 25.182 25.182z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/tokens.svg b/packages/website/ts/@next/icons/illustrations/tokens.svg new file mode 100644 index 000000000..053e421a4 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/tokens.svg @@ -0,0 +1 @@ +<svg width="249" height="251" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M192 112c30.376 0 55-24.624 55-55S222.376 2 192 2s-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M206.4 15.3v13.6H220" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M220 28.9v42h-37.3V15.3h23.7L220 28.9zM177.6 98.7V85.1H164" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M164 85.1v-42h37.3v55.6h-23.7L164 85.1zM57 113.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M57 102.6c24.3 0 44-19.7 44-44s-19.7-44-44-44-44 19.7-44 44 19.7 44 44 44z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M45.4 76.2v1.5h26.7v-9.9h-7.8V36.3h-9.461l-.381.259-8.4 5.7-.658.446V54.63l2.342-1.589 6.058-4.11V67.8h-8.4V76.2z" stroke="#00AE99" stroke-width="3"/><path d="M13 58.3c9.1-1.5 16.1-9.3 16.1-18.9 0-4.3-1.4-8.2-3.8-11.4-7.5 7.9-12.2 18.6-12.3 30.3zM13 58.9c.1 11.8 4.8 22.4 12.3 30.3 2.4-3.2 3.8-7.1 3.8-11.4 0-9.6-7-17.5-16.1-18.9zM101 58.3c-9.1-1.5-16.1-9.3-16.1-18.9 0-4.3 1.4-8.2 3.8-11.4 7.5 7.9 12.2 18.6 12.3 30.3zM101 58.9c-.1 11.8-4.8 22.4-12.3 30.3-2.4-3.2-3.8-7.1-3.8-11.4 0-9.6 7-17.5 16.1-18.9zM57 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M57 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M62.6 190.8v-32.3h4.6v-9.1H46.8v9.1h4.6v32.3c-10.5 2.5-18.3 12-18.3 23.2 0 13.2 10.7 23.9 23.9 23.9s23.9-10.7 23.9-23.9c0-11.3-7.8-20.7-18.3-23.2z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M67.2 149.3H46.8v9.1h20.4v-9.1zM37.1 200.6h39.7M192 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M192 149.6l-36.4 52.9H192l.1 35.1 36.3-53H192v-35z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/icons/logo-with-type.svg b/packages/website/ts/@next/icons/logo-with-type.svg new file mode 100644 index 000000000..a7a59a2af --- /dev/null +++ b/packages/website/ts/@next/icons/logo-with-type.svg @@ -0,0 +1 @@ +<svg width="81" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.402 25.28l3.105-3.212-3.86-5.209-4.915-6.954A19.904 19.904 0 0 0 0 20c0 6.1 2.732 11.562 7.04 15.23l6.239-4.408a12.796 12.796 0 0 1-4.877-5.541zM14.72 8.402l3.212 3.105 5.209-3.86 6.954-4.915A19.904 19.904 0 0 0 20 0C13.9 0 8.438 2.732 4.77 7.04l4.408 6.239a12.795 12.795 0 0 1 5.541-4.877zM28.493 17.932l3.86 5.209 4.915 6.954A19.904 19.904 0 0 0 40 20c0-6.1-2.732-11.562-7.04-15.23L26.72 9.178a12.796 12.796 0 0 1 4.877 5.541l-3.105 3.213zM35.23 32.96l-4.408-6.239a12.795 12.795 0 0 1-5.541 4.877l-3.213-3.105-5.209 3.86-6.954 4.915A19.904 19.904 0 0 0 20 40c6.1 0 11.562-2.732 15.23-7.04z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M51.726 19.689c0-6.471 2.704-9.689 6.912-9.689 4.19 0 6.947 3.27 6.947 9.689 0 6.418-2.758 9.671-6.947 9.671-4.19 0-6.912-3.253-6.912-9.671zm6.894-7.59c-3.04 0-4.543 2.815-4.543 7.607 0 2.256.336 4.005.972 5.282l5.975-12.085c-.69-.542-1.485-.804-2.404-.804zm-2.351 14.428c.672.507 1.45.77 2.369.77 3.04 0 4.578-2.834 4.578-7.59 0-2.204-.318-3.936-.972-5.247l-5.975 12.067zm24.377-10.93l-3.853 6.47L81 29.027h-2.581l-3.377-5.63h-.954l-3.447 5.63h-2.51l4.224-6.872-3.8-6.559h2.44l3.11 5.334h.973l3.182-5.334h2.386z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx new file mode 100644 index 000000000..4f85b9945 --- /dev/null +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +export const NextAboutJobs = () => ( + <SiteWrap theme="light"> + <Section> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink to="/next/about/mission">Our Mission</ChapterLink> + <ChapterLink to="/next/about/team">Team</ChapterLink> + <ChapterLink to="/next/about/press">Press</ChapterLink> + <ChapterLink to="/next/about/jobs">Jobs</ChapterLink> + </Column> + <Column colWidth="2/3"> + <Heading size="medium"> + Join Us in Our Mission + </Heading> + <Paragraph size="medium"> + To create a tokenized world where all value can flow freely.We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place. + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section bgColor="#F3F6F4"> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium"> + Powered by a Diverse Worldwide Community + </Heading> + <Paragraph> + We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world. + </Paragraph> + </Column> + + <Column colWidth="2/3"> + <img src="/images/@next/jobs/map@2x.png" height="365" alt="Map of community"/> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium">Benefits</Heading> + </Column> + + <Column colWidth="2/3"> + <Wrap> + <Column> + <BenefitsList> + <li>Comprehensive Insurance</li> + <li>Unlimited Vacation</li> + <li>Meals and snacks provided daily</li> + <li>Flexible hours and liberal work-from-home-policy</li> + <li>Supportive of remote working</li> + <li>Transportation, phone, and wellness expense</li> + <li>Relocation assistance</li> + <li>Optional team excursions</li> + <li>Competitive salary</li> + <li>Cryptocurrency based compensation</li> + </BenefitsList> + </Column> + </Wrap> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium">Current<br/>Openings</Heading> + </Column> + + <Column colWidth="2/3"> + <Wrap> + <Column colWidth="1/3"> + <Heading size="small">Product Designer</Heading> + </Column> + <Column colWidth="1/3"> + <Paragraph isMuted={true}>San Francisco, Remote</Paragraph> + </Column> + <Column colWidth="1/3"> + <Paragraph><a href="#">Apply</a></Paragraph> + </Column> + </Wrap> + <Wrap> + <Column colWidth="1/3"> + <Heading size="small">Open Positition</Heading> + </Column> + <Column colWidth="1/3"> + <Paragraph isMuted={true}> + We're always interested in talking to talented people. Send us an application if you think you're the right fit. + </Paragraph> + </Column> + <Column colWidth="1/3"> + <Paragraph><a href="#">Apply</a></Paragraph> + </Column> + </Wrap> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const BenefitsList = styled.ul` + color: #000; + list-style: disc; + columns: auto 2; + column-gap: 80px; + + li { + margin-bottom: 1em; + } +`; + +// Lets refactor these chapter links into button perhaps as a <Link type={xxx} /> +const ChapterLink = styled(ReactRouterLink)` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx new file mode 100644 index 000000000..234f7254d --- /dev/null +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { Image } from 'ts/@next/components/image'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; +import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; +import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; + +export const NextAboutMission = () => ( + <SiteWrap theme="light"> + <Section> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink to="/next/about/mission">Our Mission</ChapterLink> + <ChapterLink to="/next/about/team">Team</ChapterLink> + <ChapterLink to="/next/about/press">Press</ChapterLink> + <ChapterLink to="/next/about/jobs">Jobs</ChapterLink> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">Creating a tokenized world where all value can flow freely.</Heading> + <Paragraph size="medium">0x Protocol is an important infrastructure layer for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past.</Paragraph> + <Paragraph>Our missions and values (arrow)</Paragraph> + </Column> + </Wrap> + </Section> + + <Section isFullWidth={true} isNoPadding={true}> + <Wrap width="full"> + <Image src="/images/@next/about/about-mission@2x.jpg" alt="" isCentered={true} /> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium">Core<br/>Values</Heading> + </Column> + + <Column colWidth="2/3"> + <Wrap> + <Column colWidth="1/3"> + <RightThingIcon width="100" /> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">Do The Right Thing</Heading> + <Paragraph isMuted={true}>We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.</Paragraph> + </Column> + </Wrap> + <Wrap> + <Column colWidth="1/3"> + <ConsistentlyShipIcon width="100" /> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">Consistently Ship</Heading> + <Paragraph isMuted={true}>Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.</Paragraph> + </Column> + </Wrap> + <Wrap> + <Column colWidth="1/3"> + <LongTermImpactIcon width="100" /> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">Focus on long-term Impact</Heading> + <Paragraph isMuted={true}>We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.</Paragraph> + </Column> + </Wrap> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const ChapterLink = styled(ReactRouterLink)` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx new file mode 100644 index 000000000..3a500ff39 --- /dev/null +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -0,0 +1,81 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +export const NextAboutPress = () => ( + <SiteWrap theme="light"> + <Section> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink to="/next/about/mission">Our Mission</ChapterLink> + <ChapterLink to="/next/about/team">Team</ChapterLink> + <ChapterLink to="/next/about/press">Press</ChapterLink> + <ChapterLink to="/next/about/jobs">Jobs</ChapterLink> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">Press Highlights</Heading> + <Paragraph size="medium">Want to write about 0x? Get in touch, or download our press kit.</Paragraph> + + <Wrap> + <Column colWidth="1/3"> + <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/> + </Column> + <Column colWidth="2/3"> + <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph> + <a href="#">Read Article</a> + </Column> + </Wrap> + + <Wrap> + <Column colWidth="1/3"> + <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/> + </Column> + <Column colWidth="2/3"> + <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph> + <a href="#">Read Article</a> + </Column> + </Wrap> + + <Wrap> + <Column colWidth="1/3"> + <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/> + </Column> + <Column colWidth="2/3"> + <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph> + <a href="#">Read Article</a> + </Column> + </Wrap> + + <Wrap> + <Column colWidth="1/3"> + <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/> + </Column> + <Column colWidth="2/3"> + <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph> + <a href="#">Read Article</a> + </Column> + </Wrap> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const ChapterLink = styled(ReactRouterLink)` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx new file mode 100644 index 000000000..1c7ff319b --- /dev/null +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -0,0 +1,224 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +interface TeamMember { + name: string; + title: string; + imageUrl?: string; +} + +const team: TeamMember[] = [ + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, +]; + +const advisors: TeamMember[] = [ + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, + { + name: 'Will Warren', + title: 'Co-Founder and CEO', + imageUrl: '#', + }, +]; + +const Member = ({ name, title, imageUrl }: TeamMember) => ( + <StyledMember> + <svg width="184" height="184" viewBox="0 0 184 184" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="184" height="184" fill="#003831"/></svg> + <Heading color={colors.textDarkPrimary} size="small" isNoMargin={true}>{name}</Heading> + <Paragraph isMuted={0.5}>{title}</Paragraph> + </StyledMember> +); + +export const NextAboutTeam = () => ( + <SiteWrap theme="light"> + <Section> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink to="/next/about/mission">Our Mission</ChapterLink> + <ChapterLink to="/next/about/team">Team</ChapterLink> + <ChapterLink to="/next/about/press">Press</ChapterLink> + <ChapterLink to="/next/about/jobs">Jobs</ChapterLink> + </Column> + <Column colWidth="2/3"> + <Heading size="medium">We are a global, growing team</Heading> + <Paragraph size="medium">We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life.</Paragraph> + <Paragraph>Join the Team (arrow)</Paragraph> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium">0x Team</Heading> + </Column> + + <Column colWidth="2/3"> + <Wrap isWrapped={true} isCentered={false}> + {team.map((info, index) => <Member key={`team-${index}`} name={info.name} title={info.title} />)} + </Wrap> + </Column> + </Wrap> + </Section> + + <Section bgColor="#F3F6F4"> + <Wrap> + <Column colWidth="1/3"> + <Heading size="medium">Advisors</Heading> + </Column> + + <Column colWidth="2/3"> + <Wrap isWrapped={true} isCentered={false}> + {advisors.map((info, index) => <Member key={`team-${index}`} name={info.name} title={info.title} />)} + </Wrap> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const ChapterLink = styled(ReactRouterLink)` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; + +const StyledMember = styled.div` + width: calc(25% - 10px); + margin-bottom: 10px; + + img, svg { + width: 100%; + height: auto; + object-fit: contain; + margin-bottom: 10px; + } +`; diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx new file mode 100644 index 000000000..094d5e126 --- /dev/null +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; + +import {Button} from 'ts/@next/components/button'; +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; + +export const NextEcosystem = () => ( + <SiteWrap theme="light"> + <Section> + <WrapCentered> + <Heading size="medium" isCentered={true}> + Jumpstart your Business on 0x + </Heading> + <Paragraph size="medium" isCentered={true} isMuted={true}> + 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> + <div> + <a href="#">Get Started</a> + <a href="#">Learn More</a> + </div> + </WrapCentered> + </Section> + + <Section bgColor={colors.backgroundLight}> + <Wrap> + <Column> + <Heading size="small" color={colors.brandDark} isCentered={true}> + Join a vibrant ecosystem of projects in the 0x Network. + </Heading> + </Column> + </Wrap> + <Wrap> + {/* This */} + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + Milestone Grants + </Heading> + <Paragraph isMuted={0.5}> + 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. + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + VC Introductions + </Heading> + <Paragraph isMuted={0.5}> + Connect with leading venture capital firms that could participate in your next funding round. + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + Technical Support + </Heading> + <Paragraph isMuted={0.5}> + Receive ongoing technical assistance from knowledgeable and responsive 0x developers. + </Paragraph> + </Column> + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + Recruiting Assistance + </Heading> + <Paragraph isMuted={0.5}> + Grow your team by accessing an exclusive pool of top engineering and business operations talent. + </Paragraph> + </Column> + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + Marketing and Design Help + </Heading> + <Paragraph isMuted={0.5}> + Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business. + </Paragraph> + </Column> + <Column colWidth="1/3"> + <RightThingIcon width="60" /> + <Heading color={colors.textDarkPrimary} size="small"> + Legal Resources + </Heading> + <Paragraph isMuted={0.5}> + Obtain important legal documents and resources that will help you navigate the regulatory landscape. + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.brandDark}> + <Wrap> + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <Heading> + Apply for the program now + </Heading> + <Paragraph> + Have questions? Please join our Discord channel + </Paragraph> + </WrapCentered> + </Column> + + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <div> + <Button href="#">Apply Now</Button> + <Button href="#" isTransparent={true}>Join Discord</Button> + </div> + </WrapCentered> + </Column> + </Wrap> + </Section> + </SiteWrap> +); diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx new file mode 100644 index 000000000..29975193d --- /dev/null +++ b/packages/website/ts/@next/pages/instant.tsx @@ -0,0 +1,124 @@ +import * as React from 'react'; + +import {colors} from 'ts/style/colors'; + +import {Button} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; +import {SiteWrap} from 'ts/@next/components/siteWrap'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; + +export const Next0xInstant = () => ( + <SiteWrap> + <Section> + <WrapCentered> + <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading> + <Paragraph size="medium" isCentered={true}>A free and flexible way to offer simple crypto purchasing in any app or website</Paragraph> + <Button href="#">Get Started</Button> + </WrapCentered> + </Section> + + <Section isFullWidth={true} isNoPadding={true}> + <Wrap width="full"> + <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <TokensIcon width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading>Support ERC-20 and ERC-721 tokens</Heading> + <Paragraph isMuted={true}>Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.</Paragraph> + <div> + <a href="#">Get Started</a><a href="#">Explore the Docs</a> + </div> + </Column> + </Wrap> + </Section> + <Section> + <Wrap> + <Column colWidth="1/3"> + <ProtocolIcon width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading>Generate revenue for your business</Heading> + <Paragraph isMuted={true}>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.</Paragraph> + <div> + <a href="#">Learn more about affiliate fees</a> + </div> + </Column> + </Wrap> + </Section> + <Section> + <Wrap> + <Column colWidth="1/3"> + <LogoOutlined width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading>Easy and flexible integration</Heading> + <Paragraph isMuted={true}>Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.</Paragraph> + <div> + <a href="#">Explore AssetBuyer</a> + <a href="#">Learn about liquidity</a> + </div> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.backgroundDark}> + <Wrap> + <Column colWidth="1/2"> + <Heading>0x Instant Configurator</Heading> + <Paragraph>Liquidity Source</Paragraph> + <Paragraph>What tokens can users buy? (select all)</Paragraph> + <Paragraph>Transaction fee ETH address</Paragraph> + <Paragraph>Fee Percentage</Paragraph> + </Column> + + <Column colWidth="1/2"> + <Paragraph>Code Snippet</Paragraph> + <a href="#">Explore the Docs</a> + <Paragraph><code snippet></Paragraph> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.brandDark}> + <Wrap> + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <Heading>Need more flexibility?</Heading> + <Paragraph>Dive into our docs, or contact us if needed</Paragraph> + </WrapCentered> + </Column> + + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <div> + <Button href="#">Explore the Docs</Button> + <Button href="#" isTransparent={true}>Get in Touch</Button> + </div> + </WrapCentered> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap width="full"> + <Column> + <Paragraph size="small" isMuted={0.5}>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.</Paragraph> + <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph> + </Column> + </Wrap> + </Section> + </SiteWrap> +); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx new file mode 100644 index 000000000..fd6b5345b --- /dev/null +++ b/packages/website/ts/@next/pages/landing.tsx @@ -0,0 +1,242 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import {colors} from 'ts/style/colors'; + +import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {SiteWrap} from 'ts/@next/components/siteWrap'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg'; +import SupportIcon from 'ts/@next/icons/illustrations/support.svg'; + +interface ProjectLogo { + name: string; + imageUrl?: string; +} + +const projects: ProjectLogo[] = [ + { + name: 'Radar Relay', + imageUrl: '/images/@next/relayer-logos/logo_1.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Amadeus', + imageUrl: '/images/@next/relayer-logos/logo_3.png', + }, + { + name: 'The Ocean X', + imageUrl: '/images/@next/relayer-logos/logo_4.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Decent EX', + imageUrl: '/images/@next/relayer-logos/logo_2.1.png', + }, + { + name: 'dEX', + imageUrl: '/images/@next/relayer-logos/logo_2.2.png', + }, + { + name: 'OpenRelay', + imageUrl: '/images/@next/relayer-logos/logo_2.3.png', + }, + { + name: 'DDEX', + imageUrl: '/images/@next/relayer-logos/logo_2.png', + }, +]; + +export const NextLanding: React.StatelessComponent<{}> = () => ( + <SiteWrap theme="dark"> + <Section> + <Wrap> + <Column colWidth="1/2"> + <Heading size="large"> + Powering Decentralized Exchange + </Heading> + + <Paragraph size="medium" isMuted={true}> + 0x is the best solution for adding<br /> + exchange functionality to your business. + </Paragraph> + + <ButtonWrap> + <Button isInline={true}> + Get Started + </Button> + + <Button isTransparent={true} isInline={true}> + Learn More + </Button> + </ButtonWrap> + </Column> + + <Column colWidth="1/2"> + <WrapCentered> + <LogoOutlined/> + </WrapCentered> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.backgroundDark} isPadLarge={true}> + <WrapCentered width="narrow"> + <ProtocolIcon/> + + <Paragraph + size="large" + isCentered={true} + padding={['large', 0, 'default', 0]} + > + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based + tokens. Anyone in the world can use 0x to service a wide variety of markets + ranging from gaming items to financial instruments to assets that could have + near existed before. + </Paragraph> + + <Button href="#" isTransparent={true}> + Discover how developers use 0x + </Button> + </WrapCentered> + + {/* Note you can also pass in a string "large/default" or a number for custom margins */} + <Wrap padding={['large', 0, 0, 0]}> + {/* NOTE: this probably should be withComponent as part of a <dl> */} + <Column colWidth="1/3" isNoPadding={true}> + <Heading size="medium" isCentered={true}> + 873,435 + </Heading> + + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > + Number of transactions + </Paragraph> + </Column> + + <Column colWidth="1/3" isNoPadding={true}> + <Heading + size="medium" + isCentered={true} + > + $203M + </Heading> + + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > + Total volume + </Paragraph> + </Column> + + <Column colWidth="1/3" isNoPadding={true}> + <Heading + size="medium" + isCentered={true} + > + 227,372 + </Heading> + + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > + Number of relayers + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section isPadLarge={true}> + <WrapCentered> + <Heading size="small">You're in good company</Heading> + </WrapCentered> + + <WrapGrid width="narrow" isWrapped={true}> + {_.map(projects, (item: ProjectLogo, index) => ( + <Project + key={index} + name={item.name} + imageUrl={item.imageUrl} + /> + ))} + </WrapGrid> + </Section> + + <Section> + <Wrap> + <Column + bgColor="#003831" + colWidth="1/2" + isPadLarge={true} + > + <WrapCentered> + <ReadyToBuildIcon width="150" /> + + <Paragraph> + Ready to build on 0x? + </Paragraph> + + <Button isTransparent={true}> + Get Started + </Button> + </WrapCentered> + </Column> + + <Column + bgColor="#003831" + colWidth="1/2" + isPadLarge={true} + > + <WrapCentered> + <SupportIcon width="150" /> + + <Paragraph> + Want help from the 0x team? + </Paragraph> + + <Button isTransparent={true}> + Get in Touch + </Button> + </WrapCentered> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const Project = ({ name, imageUrl }: ProjectLogo) => ( + <StyledProject> + <img src={imageUrl} alt={name} /> + </StyledProject> +); + +const StyledProject = styled.div` + width: 90px; + height: 90px; + flex-shrink: 0; + margin: 30px; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } +`; diff --git a/packages/website/ts/@next/pages/launchKit.tsx b/packages/website/ts/@next/pages/launchKit.tsx new file mode 100644 index 000000000..cd86f66c9 --- /dev/null +++ b/packages/website/ts/@next/pages/launchKit.tsx @@ -0,0 +1,192 @@ +import * as React from 'react'; + +import {colors} from 'ts/style/colors'; + +import {Button} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; +import {SiteWrap} from 'ts/@next/components/siteWrap'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; + +export const NextLaunchKit = () => ( + <SiteWrap> + <Section> + <WrapCentered> + <Heading size="medium" isCentered={true}> + 0x Launch Kit + </Heading> + <Paragraph size="medium" isCentered={true} isMuted={true}> + The definitive starting point for building a business on top of the 0x protocol. + </Paragraph> + <Button href="#"> + Get Started + </Button> + </WrapCentered> + </Section> + + <Section> + <Wrap> + <Column + borderColor="#003831" + colWidth="1/3" + isPadLarge={true} + > + <WrapCentered> + <ProtocolIcon width="140" /> + <Paragraph isCentered={true}> + Tap into and share liquidity with other relayers + </Paragraph> + </WrapCentered> + </Column> + <Column + borderColor="#003831" + colWidth="1/3" + isPadLarge={true} + > + <WrapCentered> + <ProtocolIcon width="140" /> + <Paragraph isCentered={true}> + Tap into and share liquidity with other relayers + </Paragraph> + </WrapCentered> + </Column> + <Column + borderColor="#003831" + colWidth="1/3" + isPadLarge={true} + > + <WrapCentered> + <ProtocolIcon width="140" /> + <Paragraph isCentered={true}> + Tap into and share liquidity with other relayer + </Paragraph> + </WrapCentered> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <TokensIcon width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading size="small"> + Working on a new token? + </Heading> + <Paragraph isMuted={true}> + Easily create a secondary market for your asset/asset clas + </Paragraph> + </Column> + </Wrap> + </Section> + <Section> + <Wrap> + <Column colWidth="1/3"> + <TokensIcon width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading size="small"> + Working on a new game? + </Heading> + <Paragraph isMuted={true}> + Easily create an in-app marketplace + </Paragraph> + </Column> + </Wrap> + </Section> + <Section> + <Wrap> + <Column colWidth="1/3"> + <TokensIcon width="248"/> + </Column> + + <Column colWidth="2/3"> + <Heading size="small"> + No exchange in your location? + </Heading> + <Paragraph isMuted={true}> + Build a 0x relayer for your contry’s market + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.backgroundDark}> + <Wrap> + <Column colWidth="1/2"> + <Heading> + 0x Instant Configurator + </Heading> + <Paragraph> + Liquidity Source + </Paragraph> + <Paragraph> + What tokens can users buy? (select all) + </Paragraph> + <Paragraph> + Transaction fee ETH address + </Paragraph> + <Paragraph> + Fee Percentage + </Paragraph> + </Column> + + <Column colWidth="1/2"> + <Paragraph> + Code Snippet + </Paragraph> + <a href="#">Explore the Docs</a> + <Paragraph> + <code snippet> + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section bgColor={colors.brandDark}> + <Wrap> + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <Heading> + Need more flexibility? + </Heading> + <Paragraph> + Dive into our docs, or contact us if needed + </Paragraph> + </WrapCentered> + </Column> + + <Column colWidth="1/2" isPadLarge={true}> + <WrapCentered> + <div> + <Button href="#"> + Explore the Docs + </Button> + <Button href="#" isTransparent={true}> + Get in Touch + </Button> + </div> + </WrapCentered> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap width="full"> + <Column> + <Paragraph size="small" isMuted={0.5}> + 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. + </Paragraph> + <Paragraph size="small" isMuted={0.5}> + See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. + </Paragraph> + </Column> + </Wrap> + </Section> + </SiteWrap> +); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx new file mode 100644 index 000000000..d922aac9e --- /dev/null +++ b/packages/website/ts/@next/pages/why.tsx @@ -0,0 +1,113 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +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'; + +export const NextWhy = () => ( + <SiteWrap> + <Section> + <WrapCentered> + <Column colWidth="2/3"> + <Heading size="medium" isCentered={true}>The exchange layer for the crypto economy</Heading> + <Paragraph size="medium" isCentered={true}>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph> + <Paragraph isCentered={true}>Build on 0x (arrow)</Paragraph> + </Column> + </WrapCentered> + </Section> + + <Section bgColor={colors.backgroundDark}> + <Wrap> + <Column colWidth="1/3"> + <ProtocolIcon width="150" /> + <Heading>Support for all Ethereum Standards</Heading> + <Paragraph>0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol...</Paragraph> + </Column> + + <Column colWidth="1/3"> + <ProtocolIcon width="150" /> + <Heading>Shared Networked Liquidity</Heading> + <Paragraph>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph> + </Column> + + <Column colWidth="1/3"> + <CustomizeIcon width="150" /> + <Heading>Customize the User Experience</Heading> + <Paragraph>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Paragraph> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink href="#">Benefits</ChapterLink> + <ChapterLink href="#">Use Cases</ChapterLink> + <ChapterLink href="#">Features</ChapterLink> + </Column> + + <Column colWidth="2/3"> + <Heading size="medium">What 0x offers</Heading> + <CoinIcon width="150" /> + <Heading>A Standard for Exchange</Heading> + <Paragraph isMuted={true}>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Robust Smart Contracts</Heading> + <Paragraph isMuted={true}>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Extensible Architecture</Heading> + <Paragraph isMuted={true}>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Efficient Design</Heading> + <Paragraph isMuted={true}>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Paragraph> + + <Heading size="medium">Use Cases</Heading> + <Paragraph isMuted={true}>slider</Paragraph> + + <Heading size="medium">Exchange Functionality</Heading> + + <CoinIcon width="150" /> + <Heading>Secure Non-custodial Trading</Heading> + <Paragraph isMuted={true}>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Flexible Order Types</Heading> + <Paragraph isMuted={true}>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Build a Business</Heading> + <Paragraph isMuted={true}>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Paragraph> + + <CoinIcon width="150" /> + <Heading>Networked Liquidity</Heading> + <Paragraph isMuted={true}>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Paragraph> + </Column> + </Wrap> + </Section> + </SiteWrap> +); + +const ChapterLink = styled.a` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 87239a021..046442ee5 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -7,6 +7,7 @@ export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' export interface TextProps { className?: string; + children?: any; Tag?: TextTag; fontSize?: string; fontFamily?: string; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index eb8892aea..cf23623a6 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -10,6 +10,14 @@ declare module '*.json' { export default json; /* tslint:enable */ } + +declare module '*.svg' { + //const svg: any; + //export default svg; + import {PureComponent, SVGProps} from "react"; + export default class extends PureComponent<SVGProps<SVGSVGElement>> {} +} + declare module 'web3-provider-engine/subproviders/filters'; // This will be defined by default in TS 2.4 diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 050c201a3..8c7fef172 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -9,7 +9,7 @@ import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Instant } from 'ts/containers/instant'; import { Jobs } from 'ts/containers/jobs'; -import { Landing } from 'ts/containers/landing'; +import { Landing } from 'ts/containers/landing'; // Note(ez): When we're done we omit all old site imports import { LaunchKit } from 'ts/containers/launch_kit'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; @@ -20,6 +20,17 @@ import { store } from 'ts/redux/store'; import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; +// Next (new website) routes. We should rename them later +import { NextAboutJobs } from 'ts/@next/pages/about/jobs'; +import { NextAboutMission } from 'ts/@next/pages/about/mission'; +import { NextAboutPress } from 'ts/@next/pages/about/press'; +import { NextAboutTeam } from 'ts/@next/pages/about/team'; +import { NextEcosystem } from 'ts/@next/pages/ecosystem'; +import { Next0xInstant } from 'ts/@next/pages/instant'; +import { NextLanding } from 'ts/@next/pages/landing'; +import { NextLaunchKit } from 'ts/@next/pages/launchKit'; +import { NextWhy } from 'ts/@next/pages/why'; + // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); trackedTokenStorage.clearIfRequired(); @@ -90,6 +101,10 @@ render( <Provider store={store}> <div> <Switch> + {/* + Note(ez): We remove/replace all old routes with next routes + once we're ready to put a ring on it. for now let's keep em there for reference + */} <Route exact={true} path="/" component={Landing as any} /> <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> <Route path={WebsitePaths.LaunchKit} component={LaunchKit as any} /> @@ -99,6 +114,19 @@ render( <Route path={WebsitePaths.FAQ} component={FAQ as any} /> <Route path={WebsitePaths.About} component={About as any} /> <Route path={WebsitePaths.Wiki} component={Wiki as any} /> + + + {/* Next (new site) routes */} + <Route exact path="/next" component={NextLanding as any} /> + <Route exact path="/next/why" component={NextWhy as any} /> + <Route exact path="/next/0x-instant" component={Next0xInstant as any} /> + <Route exact path="/next/launch-kit" component={NextLaunchKit as any} /> + <Route exact path="/next/ecosystem" component={NextEcosystem as any} /> + <Route exact path="/next/about/mission" component={NextAboutMission as any} /> + <Route exact path="/next/about/team" component={NextAboutTeam as any} /> + <Route exact path="/next/about/press" component={NextAboutPress as any} /> + <Route exact path="/next/about/jobs" component={NextAboutJobs as any} /> + <Route path={`${WebsitePaths.ZeroExJs}/:version?`} component={LazyZeroExJSDocumentation} diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index f89dfc86e..356d72f7e 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -13,6 +13,14 @@ const appColors = { jobsPageOpenPositionRow: sharedColors.grey100, metaMaskOrange: '#f68c24', metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)', + brandLight: '#00AE99', + brandDark: '#003831', + backgroundDark: '#111A19', + backgroundBlack: '#000000', + backgroundLight: '#F3F6F4', + textDarkPrimary: '#000000', + textDarkSecondary: '#5C5C5C', + white: '#fff', instantPrimaryBackground: '#222222', instantSecondaryBackground: '#333333', instantTertiaryBackground: '#444444', diff --git a/packages/website/ts/style/theme.ts b/packages/website/ts/style/theme.ts index ce7d6975d..94bd0169a 100644 --- a/packages/website/ts/style/theme.ts +++ b/packages/website/ts/style/theme.ts @@ -4,7 +4,7 @@ import * as styledComponents from 'styled-components'; const { default: styled, css, - injectGlobal, + createGlobalStyle, keyframes, ThemeProvider, } = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>; @@ -14,4 +14,4 @@ export interface IThemeInterface {} export const theme = {}; -export { styled, css, injectGlobal, keyframes, ThemeProvider }; +export { styled, css, createGlobalStyle, keyframes, ThemeProvider }; diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 7d5f31b7f..67573971f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -20,5 +20,13 @@ "module": "esnext", "moduleResolution": "node" }, + "awesomeTypescriptLoaderOptions": { + "useCache": true, + "errorsAsWarnings": true, + "reportFiles": [ + "./ts/**/*" + ] + + }, "include": ["./ts/**/*"] } diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 33d5f648b..367aba48f 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -55,6 +55,10 @@ const config = { test: /\.css$/, loaders: ['style-loader', 'css-loader'], }, + { + test: /\.svg$/, + loaders: ['react-svg-loader'], + }, ], }, optimization: { @@ -85,6 +89,13 @@ const config = { ], }, disableHostCheck: true, + // Fixes assertion error + // Source: https://github.com/webpack/webpack-dev-server/issues/1491 + https: { + spdy: { + protocols: ['http/1.1'] + } + }, }, }; |
