diff options
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/ecosystem.tsx | 154 |
2 files changed, 63 insertions, 92 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index a25b32595..beaf01479 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -49,6 +49,7 @@ const linkRows: LinkRows[] = [ { url: '#', text: 'Team' }, { url: '#', text: 'Jobs' }, { url: '#', text: 'Press Kit' }, + { url: '/next/ecosystem-program', text: 'Grant Program' }, ], }, { diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx index 094d5e126..e6330ba67 100644 --- a/packages/website/ts/@next/pages/ecosystem.tsx +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -1,18 +1,59 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { colors } from 'ts/style/colors'; import {Button} from 'ts/@next/components/button'; -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; +import { Icon } from 'ts/@next/components/icon'; import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; +interface BenefitProps { + title: string; + icon: string; + description: 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.', + }, +]; + export const NextEcosystem = () => ( <SiteWrap theme="light"> <Section> - <WrapCentered> + <Column> <Heading size="medium" isCentered={true}> Jumpstart your Business on 0x </Heading> @@ -20,103 +61,32 @@ export const NextEcosystem = () => ( The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x. </Paragraph> <div> - <a href="#">Get Started</a> + <a href="#">Apply Now</a> <a href="#">Learn More</a> </div> - </WrapCentered> - </Section> - - <Section bgColor={colors.backgroundLight}> - <Wrap> - <Column> - <Heading size="small" color={colors.brandDark} isCentered={true}> - Join a vibrant ecosystem of projects in the 0x Network. - </Heading> - </Column> - </Wrap> - <Wrap> - {/* This */} - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - Milestone Grants - </Heading> - <Paragraph isMuted={0.5}> - 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. - </Paragraph> - </Column> - - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - VC Introductions - </Heading> - <Paragraph isMuted={0.5}> - Connect with leading venture capital firms that could participate in your next funding round. - </Paragraph> </Column> + </Section> - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - Technical Support + <Section bgColor={colors.backgroundLight} isFullWidth={true}> + <Column> + <Heading size={34} fontWeight="400" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="70px"> + Join a vibrant ecosystem of projects in the 0x Network. </Heading> - <Paragraph isMuted={0.5}> - Receive ongoing technical assistance from knowledgeable and responsive 0x developers. - </Paragraph> </Column> - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - Recruiting Assistance - </Heading> - <Paragraph isMuted={0.5}> - Grow your team by accessing an exclusive pool of top engineering and business operations talent. - </Paragraph> - </Column> - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - Marketing and Design Help - </Heading> - <Paragraph isMuted={0.5}> - Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business. - </Paragraph> - </Column> - <Column colWidth="1/3"> - <RightThingIcon width="60" /> - <Heading color={colors.textDarkPrimary} size="small"> - Legal Resources - </Heading> - <Paragraph isMuted={0.5}> - Obtain important legal documents and resources that will help you navigate the regulatory landscape. - </Paragraph> - </Column> - </Wrap> - </Section> - - <Section bgColor={colors.brandDark}> - <Wrap> - <Column colWidth="1/2" isPadLarge={true}> - <WrapCentered> - <Heading> - Apply for the program now + <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}> + {_.map(benefits, (benefit: BenefitProps, index) => ( + <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px"> + <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} /> + <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}> + {benefit.title} </Heading> - <Paragraph> - Have questions? Please join our Discord channel + <Paragraph isMuted={true} isCentered={true}> + {benefit.description} </Paragraph> - </WrapCentered> - </Column> - - <Column colWidth="1/2" isPadLarge={true}> - <WrapCentered> - <div> - <Button href="#">Apply Now</Button> - <Button href="#" isTransparent={true}>Join Discord</Button> - </div> - </WrapCentered> - </Column> - </Wrap> + </Column> + ))} + </WrapGrid> </Section> + </SiteWrap> -); +);
\ No newline at end of file |