aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/website/public/images/@next/events/berlin.jpgbin0 -> 108690 bytes
-rw-r--r--packages/website/public/images/@next/events/event-sample.jpgbin0 -> 24594 bytes
-rw-r--r--packages/website/public/images/@next/events/london.jpgbin0 -> 138979 bytes
-rw-r--r--packages/website/public/images/@next/events/sf.jpgbin0 -> 108324 bytes
-rw-r--r--packages/website/ts/@next/pages/community.tsx140
5 files changed, 100 insertions, 40 deletions
diff --git a/packages/website/public/images/@next/events/berlin.jpg b/packages/website/public/images/@next/events/berlin.jpg
new file mode 100644
index 000000000..0bcc0fa63
--- /dev/null
+++ b/packages/website/public/images/@next/events/berlin.jpg
Binary files differ
diff --git a/packages/website/public/images/@next/events/event-sample.jpg b/packages/website/public/images/@next/events/event-sample.jpg
new file mode 100644
index 000000000..f7a832a5c
--- /dev/null
+++ b/packages/website/public/images/@next/events/event-sample.jpg
Binary files differ
diff --git a/packages/website/public/images/@next/events/london.jpg b/packages/website/public/images/@next/events/london.jpg
new file mode 100644
index 000000000..4b6b7ef06
--- /dev/null
+++ b/packages/website/public/images/@next/events/london.jpg
Binary files differ
diff --git a/packages/website/public/images/@next/events/sf.jpg b/packages/website/public/images/@next/events/sf.jpg
new file mode 100644
index 000000000..efd7f7c29
--- /dev/null
+++ b/packages/website/public/images/@next/events/sf.jpg
Binary files differ
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx
index 362a70fc0..a02e7e6fd 100644
--- a/packages/website/ts/@next/pages/community.tsx
+++ b/packages/website/ts/@next/pages/community.tsx
@@ -12,12 +12,6 @@ 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;
@@ -25,57 +19,69 @@ interface EventProps {
imageUrl: string;
}
-const benefits: BenefitProps[] = [
+interface CommunityLinkProps {
+ bgColor: string;
+ title?: string;
+ icon?: string;
+ url: string;
+}
+
+const events: EventProps[] = [
{
- 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.',
+ title: '0x London Meetup',
+ date: 'October 20th 2018',
+ imageUrl: '/images/@next/events/london.jpg',
+ signupUrl: '#',
},
{
- icon: 'vcIntroductions',
- title: 'VC Introductions',
- description: 'Connect with leading venture capital firms that could participate in your next funding round.',
+ title: '0x Berlin Meetup',
+ date: 'October 20th 2018',
+ imageUrl: '/images/@next/events/berlin.jpg',
+ signupUrl: '#',
},
{
- icon: 'techSupport',
- title: 'Technical Support',
- description: 'Receive ongoing technical assistance from knowledgeable and responsive 0x developers.',
+ title: '0x San Francisco Meetup',
+ date: 'October 20th 2018',
+ imageUrl: '/images/@next/events/sf.jpg',
+ signupUrl: '#',
},
+];
+const communityLinks: CommunityLinkProps[] = [
{
- icon: 'recruitingSupport',
- title: 'Recruiting Assistance',
- description: 'Grow your team by accessing an exclusive pool of top engineering and business operations talent.',
+ bgColor: '#1DA1F2',
+ title: 'Twitter',
+ icon: 'social-twitter',
+ url: 'https://twitter.com/0xProject',
},
{
- 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.',
+ bgColor: '#FF4500',
+ title: 'Reddit',
+ icon: 'social-reddit',
+ url: 'https://twitter.com/0xProject',
},
{
- icon: 'legalResources',
- title: 'Legal Resources',
- description: 'Access important legal resources that will help you navigate the regulatory landscape.',
+ bgColor: '#7289DA',
+ title: 'Twitter',
+ icon: 'social-discord',
+ url: 'https://twitter.com/0xProject',
},
-];
-
-const events: EventProps[] = [
{
- title: '0x London Meetup',
- date: 'October 20th 2018',
- imageUrl: '/images/@next/events/event-sample.jpg',
- signupUrl: '#',
+ bgColor: '#3B5998',
+ title: 'Facebook',
+ icon: 'social-fb',
+ url: 'https://twitter.com/0xProject',
},
{
- title: '0x Berlin Meetup',
- date: 'October 20th 2018',
- imageUrl: '/images/@next/events/event-sample.jpg',
- signupUrl: '#',
+ bgColor: '#181717',
+ title: 'GitHub',
+ icon: 'social-github',
+ url: 'https://twitter.com/0xProject',
},
{
- title: '0x San Francisco Meetup',
- date: 'October 20th 2018',
- imageUrl: '/images/@next/events/event-sample.jpg',
- signupUrl: '#',
+ bgColor: '#003831',
+ title: 'Newsletter',
+ icon: 'social-newsletter',
+ url: 'https://twitter.com/0xProject',
},
];
@@ -106,6 +112,20 @@ export class NextCommunity extends React.Component {
</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">
@@ -166,6 +186,7 @@ export class NextCommunity extends React.Component {
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">
@@ -185,6 +206,15 @@ const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
</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;
@@ -199,6 +229,13 @@ const StyledEvent = styled.div`
text-align: left;
height: 424px;
margin-top: 130px;
+ position: relative;
+`;
+
+const EventIcon = styled(Icon)`
+ position: absolute;
+ top: 30px;
+ left: 30px;
`;
const EventImage = styled.img`
@@ -211,6 +248,29 @@ const EventContent = styled.div`
padding: 30px 30px;
`;
+// Community Links
+const StyledCommunityLink = styled.a`
+ background-color: ${(props: CommunityLinkProps) => 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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 06:11:42 +0800