From 67caa377a461a38dd94dfdc32641c6db0d8e6eb5 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Mon, 17 Dec 2018 16:01:29 +0100 Subject: Added Community page --- packages/website/ts/@next/pages/community.tsx | 222 ++++++++++++++++++++++++++ packages/website/ts/index.tsx | 4 +- packages/website/ts/types.ts | 1 + 3 files changed, 226 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/@next/pages/community.tsx (limited to 'packages/website/ts') 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 ( + +
+ + + Community + + + 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. + + + + + +
+ + + + + Upcoming Events + + + 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. + + + + + + + + {_.map(events, (ev: EventProps, index: number) => ( + + ))} + + + + + +
+ ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + } + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + } +} + +const Event: React.FunctionComponent = (event: EventProps) => ( + + + + + {event.title} + + + {event.date} + + + + +); + +// 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( + 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', -- cgit v1.2.3