adding free credits page (incomplete)

packages/website/ts/components/centeredDefinition.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from 'ts/components/icon';
+import { Heading, Paragraph } from 'ts/components/text';
+
+interface Props {
+    isInline: boolean;
+    icon: string;
+    iconSize?: 'medium' | 'large' | number;
+    fontSize?: 'default' | 'medium' | number;
+    title: string;
+    titleSize?: 'small' | 'default' | number;
+    description: React.ReactNode | string;
+}
+
+export const CenteredDefinition = (props: Props) => (
+    <Wrap {...props}>
+        <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />
+        <TextWrap {...props}>
+            <Heading
+                asElement="h2"
+                fontWeight="400"
+                marginBottom={props.titleSize === 'small' ? '7px' : '15px'}
+                size={props.titleSize || 'default'}
+            >
+                {props.title}
+            </Heading>
+
+            {typeof props.description === 'string' ? (
+                <Paragraph isMuted={true} size={props.fontSize || 'default'}>
+                    {props.description}
+                </Paragraph>
+            ) : (
+                <>{props.description}</>
+            )}
+        </TextWrap>
+    </Wrap>
+);
+
+const Wrap = styled.div<Props>`
+    max-width: ${props => props.isInline && 'calc(50% - 30px)'};
+    text-align: center;
+
+    @media (max-width: 768px) {
+        margin: 0 auto;
+
+        & + & {
+            margin-top: ${props => props.isInline && '60px'};
+        }
+    }
+`;
+
+const TextWrap = styled.div<Props>`
+    width: 100%;
+    max-width: 560px;
+    text-align: center;
+`;

packages/website/ts/components/modals/input.tsx

@@ -16,10 +16,53 @@ interface InputProps {
     required?: boolean;
 }
 
+interface OptionSelectorProps {
+    name: string;
+    width?: InputWidth;
+    label: string;
+    errors?: ErrorProps;
+    isErrors?: boolean;
+    required?: boolean;
+    children: React.ReactNode;
+    isFlex?: boolean;
+}
+
+interface OptionsWrapperProps {
+    isFlex?: boolean;
+}
+
+interface CheckBoxProps {
+    name: string;
+    label: string;
+}
+
 interface ErrorProps {
     [key: string]: string;
 }
 
+export const OptionSelector = (props: OptionSelectorProps) => {
+    const id = `input-${name}`;
+    return (
+        <InputWrapper {...props}>
+            <Label htmlFor={id}>{props.label}</Label>
+            <OptionsWrapper isFlex={props.isFlex} id={id}>
+                {props.children}
+            </OptionsWrapper>
+        </InputWrapper>
+    );
+};
+
+export const CheckBox = React.forwardRef((props: CheckBoxProps, ref?: React.Ref<HTMLInputElement>) => {
+    const { name, label } = props;
+    const id = `input-${name}`;
+    return (
+        <CheckBoxWrapper>
+            <StyledCheckBox id={id} type={'checkbox'} ref={ref} />
+            <CheckBoxLabel htmlFor={id}>{label}</CheckBoxLabel>
+        </CheckBoxWrapper>
+    );
+});
+
 export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
     const { name, label, type, errors } = props;
     const id = `input-${name}`;
@@ -41,6 +84,41 @@ Input.defaultProps = {
     errors: {},
 };
 
+const StyledCheckBox = styled.input`
+    visibility: hidden;
+    &:checked + label:after {
+        background-color: #000;
+        border: 2px solid #000;
+    }
+`;
+
+const CheckBoxLabel = styled.label`
+    position: relative;
+    color: #000;
+    opacity: 0.75;
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.2em;
+    margin-bottom: 10px;
+    display: inline-block;
+    padding-left: 1.5rem;
+    &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        margin: auto;
+        height: 1rem;
+        width: 1rem;
+        border-radius: 50%;
+        border: 2px solid #d5d5d5;
+    }
+`;
+
+const CheckBoxWrapper = styled.div`
+`;
+
 const StyledInput = styled.input`
     appearance: none;
     background-color: #fff;
@@ -71,6 +149,26 @@ const InputWrapper = styled.div<InputProps>`
     }
 `;
 
+const OptionsWrapper = styled.div<OptionsWrapperProps>`
+    display: ${props => props.isFlex && 'flex'};
+    ${props => {
+        if (props.isFlex) {
+            return `
+                & > * {
+                    padding: 0 0.5rem;
+                }
+                & >:first-child {
+                    padding-left: 0;
+                }
+                & >:last-child {
+                    padding-right: 0;
+                }
+            `;
+        }
+        return '';
+    }}
+`;
+
 const Label = styled.label`
     color: #000;
     font-size: 1.111111111rem;

packages/website/ts/components/modals/modal_contact.tsx

@@ -9,7 +9,7 @@ import '@reach/dialog/styles.css';
 
 import { Button } from 'ts/components/button';
 import { Icon } from 'ts/components/icon';
-import { Input, InputWidth } from 'ts/components/modals/input';
+import { CheckBox, Input, InputWidth, OptionSelector } from 'ts/components/modals/input';
 import { Heading, Paragraph } from 'ts/components/text';
 import { GlobalStyle } from 'ts/constants/globalStyle';
 import { utils } from 'ts/utils/utils';
@@ -17,6 +17,7 @@ import { utils } from 'ts/utils/utils';
 export enum ModalContactType {
     General = 'GENERAL',
     MarketMaker = 'MARKET_MAKER',
+    Credits = 'CREDITS',
 }
 
 interface Props {
@@ -64,6 +65,11 @@ export class ModalContact extends React.Component<Props> {
     // market maker lead fields
     public countryRef: React.RefObject<HTMLInputElement> = React.createRef();
     public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef();
+    // credit lead fields
+    public awsOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public alchemyOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public facebookAdsOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public digitalOceanOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
     public constructor(props: Props) {
         super(props);
     }
@@ -116,6 +122,8 @@ export class ModalContact extends React.Component<Props> {
         switch (this.props.modalContactType) {
             case ModalContactType.MarketMaker:
                 return this._renderMarketMakerFormContent(errors);
+            case ModalContactType.Credits:
+                return this._remderCreditsFormContent(errors);
             case ModalContactType.General:
             default:
                 return this._renderGeneralFormContent(errors);
@@ -191,6 +199,65 @@ export class ModalContact extends React.Component<Props> {
             </>
         );
     }
+
+    private _remderCreditsFormContent(errors: ErrorProps): React.ReactNode {
+        return (
+            <>
+                <Paragraph isMuted={true} color={colors.textDarkPrimary}>
+                    If you are building on top of 0x full time, please fill out this form and our Relayer Success Manager will be in touch. 
+                </Paragraph>
+                <InputRow>
+                    <Input
+                        name="name"
+                        label="Your name"
+                        type="text"
+                        width={InputWidth.Half}
+                        ref={this.nameRef}
+                        required={true}
+                        errors={errors}
+                    />
+                    <Input
+                        name="email"
+                        label="Your email"
+                        type="email"
+                        ref={this.emailRef}
+                        required={true}
+                        errors={errors}
+                        width={InputWidth.Half}
+                    />
+                </InputRow>
+                <InputRow>
+                    <Input
+                        name="companyOrProject"
+                        label="Name of your project / company"
+                        type="text"
+                        ref={this.companyProjectRef}
+                        required={false}
+                        errors={errors}
+                    />
+                </InputRow>
+                <InputRow>
+                    <Input
+                        name="comments"
+                        label="Brief Project Description."
+                        type="textarea"
+                        ref={this.commentsRef}
+                        required={false}
+                        errors={errors}
+                    />
+                </InputRow>
+                <InputRow>
+                    <OptionSelector isFlex={true} name="services" label="Which credits are you interested in?" errors={errors}>
+                        <CheckBox ref={this.awsOptionRef} name="aws" label="AWS"/>
+                        <CheckBox ref={this.alchemyOptionRef} name="alchemy" label="Alchemy"/>
+                        <CheckBox ref={this.facebookAdsOptionRef} name="facebook_ads" label="Facebook Ads"/>
+                        <CheckBox ref={this.digitalOceanOptionRef} name="digital_ocean" label="Digital Ocean"/>
+                    </OptionSelector>
+                </InputRow>
+            </>
+        );
+    }
+
     private _renderGeneralFormContent(errors: ErrorProps): React.ReactNode {
         return (
             <>
@@ -262,6 +329,19 @@ export class ModalContact extends React.Component<Props> {
                 projectOrCompany: this.companyProjectRef.current.value,
                 comments: this.commentsRef.current.value,
             };
+        } else if (this.props.modalContactType === ModalContactType.Credits) {
+            jsonBody = {
+                name: this.nameRef.current.value,
+                email: this.emailRef.current.value,
+                projectOrCompany: this.companyProjectRef.current.value,
+                comments: this.commentsRef.current.value,
+                services: _.filter([
+                    this.awsOptionRef.current.checked ? 'aws' : null,
+                    this.alchemyOptionRef.current.checked ? 'alchemy' : null,
+                    this.facebookAdsOptionRef.current.checked ? 'facebook_ads' : null,
+                    this.digitalOceanOptionRef.current.checked ? 'digital_ocean' : null,
+                ], (value: any) => !!value),
+            };
         } else {
             jsonBody = {
                 name: this.nameRef.current.value,
@@ -274,8 +354,12 @@ export class ModalContact extends React.Component<Props> {
 
         this.setState({ ...this.state, errors: [], isSubmitting: true });
 
-        const endpoint =
+        let endpoint;
-            this.props.modalContactType === ModalContactType.MarketMaker ? '/market_maker_leads' : '/leads';
+        switch (this.props.modalContactType) {
+            case ModalContactType.Credits: endpoint = '/credit_leads'; break;
+            case ModalContactType.MarketMaker: endpoint = '/market_maker_leads'; break;
+            default: endpoint = '/leads';
+        }
 
         try {
             // Disabling no-unbound method b/c no reason for _.isEmpty to be bound

packages/website/ts/icons/illustrations/alchemy.svg

@@ -0,0 +1,5 @@
+<svg width="93" height="80" viewBox="0 0 93 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.8616 26.8478L0.245778 77.3945C-0.449022 78.5236 0.419478 80 1.72223 80H19.787C20.7424 80 21.6109 79.4789 22.0451 78.6973L41.8469 44.8258C42.2812 44.0441 42.2812 43.0019 41.8469 42.2203L32.8145 26.8478C32.1197 25.7188 30.4696 25.7188 29.8616 26.8478Z" fill="black"/>
+<path d="M77.5423 51.4264L47.4922 0.879658C46.8842 -0.336242 45.1472 -0.249392 44.5393 0.879658L35.8543 16.6864C35.42 17.468 35.42 18.5102 35.9411 19.2919L55.3087 52.7291C55.8298 53.5108 56.6983 54.0319 57.6536 54.0319H76.2395C77.4554 53.945 78.2371 52.5554 77.5423 51.4264Z" fill="black"/>
+<path d="M31.6855 80H90.7435C92.0462 80 92.9147 78.5236 92.2199 77.3077L83.0138 61.7615C82.4927 60.9799 81.6242 60.1982 80.7557 60.1982H41.7601C40.8047 60.1982 39.9362 60.7193 39.502 61.5878L30.209 77.3945C29.5142 78.5236 30.3827 80 31.6855 80Z" fill="black"/>
+</svg>

packages/website/ts/icons/illustrations/aws.svg

@@ -0,0 +1,5 @@
+<svg width="109" height="65" viewBox="0 0 109 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.6317 23.6068C30.6317 24.9444 30.7763 26.0289 31.0294 26.8242C31.3186 27.6196 31.6801 28.4872 32.1862 29.4271C32.367 29.7164 32.4393 30.0056 32.4393 30.2586C32.4393 30.6201 32.2224 30.9816 31.7524 31.3432L29.4749 32.8615C29.1495 33.0784 28.8241 33.1869 28.5349 33.1869C28.1734 33.1869 27.8119 33.0061 27.4504 32.6808C26.9443 32.1385 26.5105 31.5601 26.149 30.9816C25.7874 30.3671 25.4259 29.6802 25.0283 28.8487C22.2085 32.1746 18.6656 33.8376 14.3998 33.8376C11.3631 33.8376 8.94094 32.97 7.16953 31.2347C5.39812 29.4994 4.49433 27.1858 4.49433 24.2937C4.49433 21.2208 5.57887 18.7264 7.7841 16.8465C9.98933 14.9666 12.9176 14.0267 16.6412 14.0267C17.8703 14.0267 19.1356 14.1352 20.4732 14.3159C21.8108 14.4967 23.1845 14.7859 24.6306 15.1112V12.4722C24.6306 9.72469 24.0522 7.80868 22.9315 6.68799C21.7746 5.5673 19.8225 5.02503 17.0388 5.02503C15.7735 5.02503 14.4721 5.16963 13.1345 5.49499C11.7969 5.82036 10.4954 6.21802 9.23015 6.72414C8.65173 6.9772 8.21792 7.1218 7.96486 7.1941C7.7118 7.26641 7.53104 7.30256 7.38644 7.30256C6.88032 7.30256 6.62726 6.94105 6.62726 6.18187V4.41046C6.62726 3.83204 6.69956 3.39822 6.88032 3.14516C7.06107 2.8921 7.38644 2.63904 7.89255 2.38598C9.15785 1.73526 10.6762 1.19299 12.4476 0.759177C14.219 0.28921 16.0989 0.0723025 18.0872 0.0723025C22.3892 0.0723025 25.5344 1.04839 27.5589 3.00056C29.5472 4.95272 30.5594 7.91713 30.5594 11.8938V23.6068H30.6317ZM15.9543 29.1018C17.1473 29.1018 18.3764 28.8849 19.6779 28.4511C20.9793 28.0172 22.1362 27.2219 23.1122 26.1374C23.6907 25.4505 24.1245 24.6913 24.3414 23.8237C24.5583 22.9561 24.7029 21.9077 24.7029 20.6785V19.1602C23.6545 18.9071 22.5338 18.6902 21.377 18.5456C20.2201 18.401 19.0995 18.3287 17.9788 18.3287C15.5566 18.3287 13.7852 18.7987 12.5922 19.7747C11.3992 20.7508 10.8208 22.1246 10.8208 23.9321C10.8208 25.6313 11.2546 26.8966 12.1584 27.7642C13.026 28.668 14.2913 29.1018 15.9543 29.1018ZM44.9838 33.0061C44.333 33.0061 43.8992 32.8977 43.61 32.6446C43.3208 32.4277 43.0677 31.9216 42.8508 31.2347L34.3553 3.28977C34.1384 2.56674 34.0299 2.09677 34.0299 1.84372C34.0299 1.26529 34.3191 0.939933 34.8976 0.939933H38.4404C39.1273 0.939933 39.5972 1.04839 39.8503 1.30145C40.1395 1.51835 40.3564 2.02447 40.5733 2.71135L46.6467 26.6435L52.2863 2.71135C52.4671 1.98832 52.684 1.51835 52.9732 1.30145C53.2624 1.08454 53.7685 0.939933 54.4193 0.939933H57.3114C57.9982 0.939933 58.4682 1.04839 58.7574 1.30145C59.0466 1.51835 59.2997 2.02447 59.4443 2.71135L65.1562 26.9327L71.4104 2.71135C71.6273 1.98832 71.8803 1.51835 72.1334 1.30145C72.4226 1.08454 72.8926 0.939933 73.5433 0.939933H76.9053C77.4838 0.939933 77.8091 1.22914 77.8091 1.84372C77.8091 2.02447 77.773 2.20523 77.7368 2.42214C77.7007 2.63904 77.6284 2.92825 77.4838 3.32592L68.7713 31.2709C68.5544 31.9939 68.3013 32.4638 68.0121 32.6808C67.7229 32.8977 67.253 33.0423 66.6384 33.0423H63.5294C62.8425 33.0423 62.3725 32.9338 62.0833 32.6808C61.7941 32.4277 61.5411 31.9577 61.3965 31.2347L55.793 7.91713L50.2257 31.1986C50.0449 31.9216 49.828 32.3915 49.5388 32.6446C49.2496 32.8977 48.7435 33.0061 48.0928 33.0061H44.9838ZM91.4382 33.9822C89.5583 33.9822 87.6784 33.7653 85.8709 33.3315C84.0633 32.8977 82.6534 32.4277 81.7135 31.8854C81.135 31.5601 80.7374 31.1986 80.5928 30.8732C80.4482 30.5478 80.3759 30.1863 80.3759 29.861V28.0172C80.3759 27.2581 80.6651 26.8966 81.2074 26.8966C81.4243 26.8966 81.6412 26.9327 81.8581 27.005C82.075 27.0773 82.4003 27.2219 82.7619 27.3665C83.991 27.9088 85.3286 28.3426 86.7385 28.6318C88.1845 28.921 89.5945 29.0656 91.0405 29.0656C93.318 29.0656 95.0894 28.668 96.3186 27.8726C97.5477 27.0773 98.1984 25.9205 98.1984 24.4383C98.1984 23.426 97.8731 22.5945 97.2224 21.9077C96.5716 21.2208 95.3425 20.6062 93.5711 20.0278L88.3292 18.401C85.6901 17.5695 83.7379 16.3404 82.545 14.7136C81.352 13.1229 80.7374 11.3515 80.7374 9.47163C80.7374 7.95328 81.0627 6.61568 81.7135 5.45884C82.3642 4.302 83.2318 3.28977 84.3164 2.49444C85.4009 1.66296 86.63 1.04839 88.0761 0.614572C89.5221 0.180756 91.0405 0 92.6311 0C93.4265 0 94.258 0.0361513 95.0533 0.144605C95.8848 0.253059 96.6439 0.397664 97.4031 0.542269C98.1261 0.723026 98.813 0.903782 99.4637 1.12069C100.114 1.3376 100.621 1.5545 100.982 1.77141C101.488 2.06062 101.85 2.34983 102.067 2.67519C102.284 2.9644 102.392 3.36207 102.392 3.86819V5.5673C102.392 6.32647 102.103 6.72414 101.561 6.72414C101.271 6.72414 100.801 6.57953 100.187 6.29032C98.1261 5.35039 95.8125 4.88042 93.2457 4.88042C91.1851 4.88042 89.5583 5.20578 88.4376 5.89266C87.3169 6.57953 86.7385 7.62792 86.7385 9.11012C86.7385 10.1224 87.1 10.99 87.823 11.6769C88.5461 12.3637 89.8837 13.0506 91.7997 13.6652L96.9332 15.292C99.536 16.1235 101.416 17.2803 102.537 18.7625C103.657 20.2447 104.2 21.9438 104.2 23.8237C104.2 25.3782 103.874 26.7881 103.26 28.0172C102.609 29.2464 101.741 30.3309 100.621 31.1986C99.4999 32.1023 98.1623 32.7531 96.6078 33.223C94.981 33.7291 93.2819 33.9822 91.4382 33.9822Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.2708 51.5517C86.377 60.3365 69.0967 65 54.2385 65C33.4154 65 14.6528 57.2998 0.481541 44.5022C-0.639148 43.49 0.373087 42.1162 1.71068 42.9116C17.0388 51.8048 35.9459 57.1913 55.5038 57.1913C68.699 57.1913 83.1957 54.4438 96.5355 48.8042C98.5238 47.9004 100.223 50.1057 98.2708 51.5517Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.223 45.9121C101.705 43.96 93.1734 44.9722 89.3052 45.4422C88.1484 45.5868 87.9676 44.5745 89.016 43.8154C95.8125 39.0434 106.983 40.4171 108.285 42.0078C109.586 43.6346 107.923 54.8054 101.561 60.1557C100.584 60.9872 99.6445 60.5534 100.078 59.4689C101.524 55.8899 104.742 47.8282 103.223 45.9121Z" fill="black"/>
+</svg>

packages/website/ts/icons/illustrations/digital_ocean.svg

@@ -0,0 +1,6 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.051 64.5783H24.584V49.1113H40.051V64.5783Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.584 76.4167H12.7456V64.5783H24.584V76.4167Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7456 64.5783H2.81219V54.6449H12.7456V64.5783Z" fill="black"/>
+<path d="M40.0057 80V64.4876C56.4253 64.4876 69.1708 48.2041 62.8661 30.9227C60.5528 24.5726 55.4274 19.4472 49.0319 17.1339C31.7505 10.8745 15.467 23.5748 15.467 39.9943H0C0 13.8228 25.3097 -6.58826 52.7513 1.98439C64.7257 5.74909 74.2963 15.2743 78.0156 27.2487C86.5883 54.6903 66.1772 80 40.0057 80Z" fill="black"/>
+</svg>

packages/website/ts/icons/illustrations/facebook_ads.svg

@@ -0,0 +1,3 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75.584 1.52423e-09H4.384C3.21836 0.00844691 2.10333 0.477429 1.28208 1.30468C0.46083 2.13192 -3.06036e-05 3.25033 1.52424e-09 4.416V75.616C0.00844691 76.7816 0.477429 77.8967 1.30468 78.7179C2.13192 79.5392 3.25033 80 4.416 80H42.736V49.064H32.336V36.952H42.736V28.04C42.736 17.712 49.048 12.08 58.264 12.08C61.3745 12.0668 64.4833 12.227 67.576 12.56V23.36H61.224C56.208 23.36 55.232 25.76 55.232 29.24V36.952H67.2L65.6 49.064H55.2V80H75.584C76.7552 80 77.8784 79.5348 78.7066 78.7066C79.5348 77.8784 80 76.7552 80 75.584V4.384C79.9916 3.21836 79.5226 2.10333 78.6953 1.28208C77.8681 0.46083 76.7497 -3.06036e-05 75.584 1.52424e-09V1.52423e-09Z" fill="black"/>
+</svg>

packages/website/ts/pages/credits.tsx

@@ -1,23 +1,25 @@
 import * as _ from 'lodash';
 import { opacify } from 'polished';
 import * as React from 'react';
+import styled from 'styled-components';
 
 import { Banner } from 'ts/components/banner';
 import { Button } from 'ts/components/button';
-import { Action, Definition } from 'ts/components/definition';
+import { CenteredDefinition } from 'ts/components/centeredDefinition';
 import { Hero } from 'ts/components/hero';
 import { ModalContact, ModalContactType } from 'ts/components/modals/modal_contact';
-import { Section } from 'ts/components/newLayout';
+import { FlexWrap, Section } from 'ts/components/newLayout';
 import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 
-interface OfferData {
+interface OffersWrapProps {
-    icon: string;
-    title: string;
-    description: string;
-    links?: Action[];
 }
+const OffersWrap = styled.div<OffersWrapProps>`
+    display: flex;
+`;
+
 export interface NextCreditsProps {}
 
 export class NextCredits extends React.Component<NextCreditsProps> {
@@ -25,42 +27,8 @@ export class NextCredits extends React.Component<NextCreditsProps> {
         isContactModalOpen: false,
     };
 
-    private readonly _offersData: OfferData[];
-
     constructor(props: NextCreditsProps) {
         super(props);
-        this._offersData = [
-            {
-                icon: 'supportForAllEthereumStandards',
-                title: 'Comprehensive Tutorials',
-                description:
-                    'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, find arbitrage opportunities, and trade on new types of exchanges like prediction markets and non-fungible token marketplaces.',
-                links: [
-                    {
-                        label: 'Explore the Docs',
-                        url: `${WebsitePaths.Wiki}#Market-Making-on-0x`,
-                    },
-                ],
-            },
-            {
-                icon: 'generateRevenueForYourBusiness-large',
-                title: 'Market Making Compensation',
-                description: 'Accepted applicants can receive up to $15,000 for completing onboarding',
-            },
-            {
-                icon: 'getInTouch',
-                title: 'Dedicated Support',
-                description:
-                    'The 0x team will provide 1:1 onboarding assistance and promptly answer all your questions. They will walk you through the tutorials so that you know how to read 0x order types, spin up an Ethereum node, and execute trades on the blockchain.',
-                links: [
-                    {
-                        label: 'Contact Us',
-                        onClick: this._onOpenContactModal,
-                        shouldUseAnchorTag: true,
-                    },
-                ],
-            },
-        ];
     }
 
     public render(): React.ReactNode {
@@ -77,7 +45,49 @@ export class NextCredits extends React.Component<NextCreditsProps> {
                     actions={this._renderHeroActions()}
                 />
 
-                <Section bgColor="light" isFlex={true} maxWidth="1170px">
+                <Section bgColor="light" maxWidth="715px">
+                    <Heading asElement="h2" fontWeight={'400'} size={34} isCentered={true} isMuted={1} padding={['default', 0 , 'default', 'default']}>
+                        Get your project off the ground with these great services
+                    </Heading>
+
+                    <FlexWrap padding={'0 0 60px 0'}>
+                        <CenteredDefinition
+                            title="Amazon Web Services"
+                            titleSize="small"
+                            description="$10,000 in cloud credits and $5,000 in support"
+                            icon="aws"
+                            iconSize="medium"
+                            isInline={true}
+                        />
+
+                        <CenteredDefinition
+                            title="Alchemy"
+                            titleSize="small"
+                            description="6 months of Ethereum node service, subsidized by 0x"
+                            icon="alchemy"
+                            iconSize="medium"
+                            isInline={true}
+                        />
+                    </FlexWrap>
+
+                    <FlexWrap padding={'60px 0 0 0'}>
+                        <CenteredDefinition
+                            title="Digital Ocean"
+                            titleSize="small"
+                            description="$25,000 in cloud credits to get your relayer off the ground"
+                            icon="digital_ocean"
+                            iconSize="medium"
+                            isInline={true}
+                        />
+                        <CenteredDefinition
+                            title="Facebook ads"
+                            titleSize="small"
+                            description="Up to $2,000 in ad credits to bootstrap marketing"
+                            icon="facebook_ads"
+                            iconSize="medium"
+                            isInline={true}
+                        />
+                    </FlexWrap>
                 </Section>
 
                 <Banner
@@ -89,7 +99,7 @@ export class NextCredits extends React.Component<NextCreditsProps> {
                 <ModalContact
                     isOpen={this.state.isContactModalOpen}
                     onDismiss={this._onDismissContactModal}
-                    modalContactType={ModalContactType.MarketMaker}
+                    modalContactType={ModalContactType.Credits}
                 />
             </SiteWrap>
         );

packages/website/ts/types.ts

@@ -191,6 +191,10 @@ export enum ExchangeContractErrs {
     InsufficientRemainingFillAmount = 'INSUFFICIENT_REMAINING_FILL_AMOUNT',
 }
 
+export interface GoogleSheetLeadUrls {
+    [key: string]: string;
+}
+
 export interface ContractResponse {
     logs: ContractEvent[];
 }

packages/website/ts/utils/configs.ts

@@ -1,4 +1,4 @@
-import { OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
+import { GoogleSheetLeadUrls, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId, } from 'ts/types';
 
 const BASE_URL = window.location.origin;
 const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
@@ -7,6 +7,9 @@ export const configs = {
     AMOUNT_DISPLAY_PRECSION: 5,
     BACKEND_BASE_PROD_URL: 'https://website-api.0x.org',
     BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0x.org',
+    GOOGLE_SHEETS_LEAD_FORMS: {
+        CREDITS: 'https://script.google.com/macros/s/AKfycbyN1lJaSGWg2OIzqT8bou4GiqwCmOVjV2v_fiPO/exec',
+    } as GoogleSheetLeadUrls,
     BASE_URL,
     BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
     DEFAULT_DERIVATION_PATH: `44'/60'/0'`,

packages/website/ts/utils/utils.ts

@@ -285,6 +285,9 @@ export const utils = {
         );
         return isTestNetwork;
     },
+    getGoogleSheetLeadUrl(form: string): string {
+        return configs.GOOGLE_SHEETS_LEAD_FORMS[form];
+    },
     getCurrentBaseUrl(): string {
         const port = window.location.port;
         const hasPort = !_.isUndefined(port);

yarn.lock

@@ -13461,6 +13461,15 @@ react-dom@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-dom@^16.4.2:
+  version "16.8.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.1"
+
 react-dom@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
@@ -13518,8 +13527,8 @@ react-highlight@0xproject/react-highlight#react-peer-deps:
   dependencies:
     highlight.js "^9.11.0"
     highlightjs-solidity "^1.0.5"
-    react "^16.4.2"
+    react "^16.5.2"
-    react-dom "^16.4.2"
+    react-dom "^16.5.2"
 
 react-hot-loader@^4.3.3:
   version "4.3.4"
@@ -13764,6 +13773,15 @@ react@^16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react@^16.4.2:
+  version "16.8.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.1"
+
 react@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
@@ -14635,6 +14653,13 @@ schedule@^0.5.0:
   dependencies:
     object-assign "^4.1.1"
 
+scheduler@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.4:
   version "0.4.7"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"