Link ecosystem

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