diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 01:25:06 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 02:26:04 +0800 |
commit | 6ab8415198cee93bf1aea06f5190ab4d19167f14 (patch) | |
tree | a4ad098f9224155eb8a325be88fa0bd374994088 /packages/website/ts/@next | |
parent | 5a6b538a132ed236c2452f9f916c9ff2ceafb8b6 (diff) | |
download | dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar.gz dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar.bz2 dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar.lz dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar.xz dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.tar.zst dexon-sol-tools-6ab8415198cee93bf1aea06f5190ab4d19167f14.zip |
Update community page
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r-- | packages/website/ts/@next/pages/community.tsx | 140 |
1 files changed, 100 insertions, 40 deletions
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; |