aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/community.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/community.tsx')
-rw-r--r--packages/website/ts/pages/community.tsx289
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;
+ }
+`;