Added Community page

packages/website/ts/@next/pages/community.tsx

@@ -0,0 +1,222 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Banner } from 'ts/@next/components/banner';
+import { Button } from 'ts/@next/components/button';
+import { Icon } from 'ts/@next/components/icon';
+import { ModalContact } from 'ts/@next/components/modals/modal_contact';
+import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
+import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Heading, Paragraph } from 'ts/@next/components/text';
+
+interface BenefitProps {
+    title: string;
+    icon: string;
+    description: string;
+}
+
+interface EventProps {
+    title: string;
+    date: string;
+    signupUrl: string;
+    imageUrl: string;
+}
+
+const benefits: BenefitProps[] = [
+    {
+        icon: 'milestoneGrants',
+        title: 'Milestone Grants',
+        description: 'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.',
+    },
+    {
+        icon: 'vcIntroductions',
+        title: 'VC Introductions',
+        description: 'Connect with leading venture capital firms that could participate in your next funding round.',
+    },
+    {
+        icon: 'techSupport',
+        title: 'Technical Support',
+        description: 'Receive ongoing technical assistance from knowledgeable and responsive 0x developers.',
+    },
+    {
+        icon: 'recruitingSupport',
+        title: 'Recruiting Assistance',
+        description: 'Grow your team by accessing an exclusive pool of top engineering and business operations talent.',
+    },
+    {
+        icon: 'eficientDesign',
+        title: 'Marketing and Design Help',
+        description: 'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.',
+    },
+    {
+        icon: 'legalResources',
+        title: 'Legal Resources',
+        description: 'Access important legal resources that will help you navigate the regulatory landscape.',
+    },
+];
+
+const events: EventProps[] = [
+    {
+        title: '0x London Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/event-sample.jpg',
+        signupUrl: '#',
+    },
+    {
+        title: '0x Berlin Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/event-sample.jpg',
+        signupUrl: '#',
+    },
+    {
+        title: '0x San Francisco Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/event-sample.jpg',
+        signupUrl: '#',
+    },
+];
+
+export class NextCommunity extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="light">
+                <Section isTextCentered={true}>
+                    <Column>
+                        <Heading size="medium" isCentered={true}>
+                            Community
+                        </Heading>
+                        <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
+                            The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community.
+                        </Paragraph>
+                        <LinkWrap>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Join the 0x community
+                            </Button>
+                        </LinkWrap>
+                    </Column>
+                </Section>
+
+                <EventsWrapper bgColor={colors.backgroundLight} isFullWidth={true} isCentered={true} isTextCentered={true}>
+                    <Column maxWidth="720px">
+                        <Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px">
+                            Upcoming Events
+                        </Heading>
+                        <Paragraph size="medium" isCentered={true} isMuted={true}>
+                            0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events.
+                        </Paragraph>
+                        <LinkWrap>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Get in Touch
+                            </Button>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Join Newsletter
+                            </Button>
+                        </LinkWrap>
+                    </Column>
+                    <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1149px">
+                        {_.map(events, (ev: EventProps, index: number) => (
+                            <Event
+                                key={`event-${index}`}
+                                title={ev.title}
+                                date={ev.date}
+                                signupUrl={ev.signupUrl}
+                                imageUrl={ev.imageUrl}
+                            />
+                        ))}
+                    </WrapGrid>
+                </EventsWrapper>
+
+                <Banner
+                    heading="Ready to get started?"
+                    subline="Dive into our docs, or contact us if needed"
+                    mainCta={{ text: 'Get Started', href: '/docs' }}
+                    secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
+                />
+                <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
+            </SiteWrap>
+        );
+    }
+
+    public _onOpenContactModal = (): void => {
+        this.setState({ isContactModalOpen: true });
+    }
+
+    public _onDismissContactModal = (): void => {
+        this.setState({ isContactModalOpen: false });
+    }
+}
+
+const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
+    <StyledEvent>
+        <EventImage src={event.imageUrl} alt=""/>
+        <EventContent>
+            <Heading color={colors.white} size="small" marginBottom="0">
+                {event.title}
+            </Heading>
+            <Paragraph color={colors.white} isMuted={0.65}>
+                {event.date}
+            </Paragraph>
+            <Button
+                color={colors.white}
+                href={event.signupUrl}
+                isWithArrow={true}
+            >
+                Sign Up
+            </Button>
+        </EventContent>
+    </StyledEvent>
+);
+
+// Events
+const EventsWrapper = styled(Section)`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+`;
+
+// Event
+const StyledEvent = styled.div`
+    background-color: ${colors.brandDark};
+    width: calc((100% / 3) - 30px);
+    text-align: left;
+    height: 424px;
+    margin-top: 130px;
+`;
+
+const EventImage = styled.img`
+    width: 100%;
+    height: 260px;
+    object-fit: cover;
+`;
+
+const EventContent = styled.div`
+    padding: 30px 30px;
+`;
+
+// Misc
+const LinkWrap = styled.div`
+    display: inline-flex;
+    margin-top: 60px;
+
+    a + a {
+        margin-left: 60px;
+    }
+`;

packages/website/ts/index.tsx

@@ -25,12 +25,13 @@ 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 { NextCommunity } from 'ts/@next/pages/community';
 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/launch_kit';
-import { NextWhy } from 'ts/@next/pages/why';
 import { NextMarketMaker } from 'ts/@next/pages/market_maker';
+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();
@@ -108,6 +109,7 @@ render(
                                 <Route exact path={WebsitePaths.Instant} component={Next0xInstant as any} />
                                 <Route exact path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} />
                                 <Route exact path={WebsitePaths.Ecosystem} component={NextEcosystem as any} />
+                                <Route exact path={WebsitePaths.Community} component={NextCommunity as any} />
                                 <Route exact path={WebsitePaths.MarketMaker} component={NextMarketMaker as any} />
                                 <Route exact path={WebsitePaths.AboutMission} component={NextAboutMission as any} />
                                 <Route exact path={WebsitePaths.AboutTeam} component={NextAboutTeam as any} />

packages/website/ts/types.ts

@@ -358,6 +358,7 @@ export enum WebsitePaths {
     AboutJobs = '/about/jobs',
     LaunchKit = '/launch-kit',
     Instant = '/instant',
+    Community = '/community',
     Ecosystem = '/ecosystem',
     MarketMaker = '/market-maker',
     Why = '/why',