diff options
Diffstat (limited to 'packages/website/ts/pages/community.tsx')
| -rw-r--r-- | packages/website/ts/pages/community.tsx | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/packages/website/ts/pages/community.tsx b/packages/website/ts/pages/community.tsx new file mode 100644 index 000000000..a259e3438 --- /dev/null +++ b/packages/website/ts/pages/community.tsx @@ -0,0 +1,289 @@ +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 EventProps { + title: string; + date: string; + signupUrl: string; + imageUrl: string; +} + +interface CommunityLinkProps { + bgColor: string; + title?: string; + icon?: string; + url: string; +} + +const events: EventProps[] = [ + { + title: '0x London Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/london.jpg', + signupUrl: '#', + }, + { + title: '0x Berlin Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/berlin.jpg', + signupUrl: '#', + }, + { + title: '0x San Francisco Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/sf.jpg', + signupUrl: '#', + }, +]; +const communityLinks: CommunityLinkProps[] = [ + { + bgColor: '#1DA1F2', + title: 'Twitter', + icon: 'social-twitter', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#FF4500', + title: 'Reddit', + icon: 'social-reddit', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#7289DA', + title: 'Twitter', + icon: 'social-discord', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#3B5998', + title: 'Facebook', + icon: 'social-fb', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#181717', + title: 'GitHub', + icon: 'social-github', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#003831', + title: 'Newsletter', + icon: 'social-newsletter', + url: 'https://twitter.com/0xProject', + }, +]; + +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> + + <Section isFullWidth={true}> + <WrapGrid + isTextCentered={true} + isWrapped={true} + isFullWidth={false} + isCentered={false} + maxWidth="1151px" + > + {_.map(communityLinks, (link: CommunityLinkProps, index: number) => ( + <CommunityLink + key={`cl-${index}`} + icon={link.icon} + title={link.title} + bgColor={link.bgColor} + url={link.url} + /> + ))} + </WrapGrid> + </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> + <EventIcon name="logo-mark" size={30} margin={0} /> + <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> +); + +const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props: CommunityLinkProps) => ( + <StyledCommunityLink bgColor={props.bgColor} href={props.url}> + <CommunityIcon name={props.icon} size={44} margin={0} /> + <CommunityTitle color={colors.white} isMuted={false} marginBottom="0"> + {props.title} + </CommunityTitle> + </StyledCommunityLink> +); + +// 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; + position: relative; +`; + +const EventIcon = styled(Icon)` + position: absolute; + top: 30px; + left: 30px; +`; + +const EventImage = styled.img` + width: 100%; + height: 260px; + object-fit: cover; +`; + +const EventContent = styled.div` + padding: 30px 30px; +`; + +interface StyledCommunityLinkProps { + bgColor: string; +} +const StyledCommunityLink = styled.a` + background-color: ${(props: StyledCommunityLinkProps) => props.bgColor}; + color: ${colors.white}; + width: 175px; + height: 175px; + text-align: center; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const CommunityTitle = styled(Paragraph)` + font-size: 20px; + font-weight: 400; +`; + +const CommunityIcon = styled(Icon)` + margin-bottom: 20px; +`; + +// Misc +const LinkWrap = styled.div` + display: inline-flex; + margin-top: 60px; + + a + a { + margin-left: 60px; + } +`; |