Added Community page
This commit is contained in:
Fred Carlsen
parent
8234bd5409
commit
67caa377a4
222
packages/website/ts/@next/pages/community.tsx
Normal file
222
packages/website/ts/@next/pages/community.tsx
Normal file
@ -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;
|
||||
}
|
||||
`;
|
||||
@ -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} />
|
||||
|
||||
@ -358,6 +358,7 @@ export enum WebsitePaths {
|
||||
AboutJobs = '/about/jobs',
|
||||
LaunchKit = '/launch-kit',
|
||||
Instant = '/instant',
|
||||
Community = '/community',
|
||||
Ecosystem = '/ecosystem',
|
||||
MarketMaker = '/market-maker',
|
||||
Why = '/why',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user