diff options
| -rw-r--r-- | packages/website/ts/@next/pages/community.tsx | 222 | ||||
| -rw-r--r-- | packages/website/ts/index.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 1 |
3 files changed, 226 insertions, 1 deletions
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx new file mode 100644 index 000000000..362a70fc0 --- /dev/null +++ b/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; + } +`; diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index ff44946dc..3e3dced1a 100644 --- a/packages/website/ts/index.tsx +++ b/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} /> diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 064085324..b54ec94b6 100644 --- a/packages/website/ts/types.ts +++ b/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', |