aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/footer.tsx1
-rw-r--r--packages/website/ts/@next/pages/ecosystem.tsx154
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