Added project logos

1 files changed, 60 insertions, 5 deletions

diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 9ea050af7..6371bba82 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -25,6 +25,50 @@ import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
     </SiteWrap>
 */
 
+interface ProjectLogo {
+    name: string;
+    imageUrl?: string;
+}
+
+const projects: ProjectLogo[] = [
+    {
+        name: 'Radar Relay',
+        imageUrl: '/images/@next/relayer-logos/logo_1.png',
+    },
+    {
+        name: 'Paradex',
+        imageUrl: '/images/@next/relayer-logos/logo_5.png',
+    },
+    {
+        name: 'Amadeus',
+        imageUrl: '/images/@next/relayer-logos/logo_3.png',
+    },
+    {
+        name: 'The Ocean X',
+        imageUrl: '/images/@next/relayer-logos/logo_4.png',
+    },
+    {
+        name: 'Paradex',
+        imageUrl: '/images/@next/relayer-logos/logo_5.png',
+    },
+    {
+        name: 'Decent EX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
+    },
+    {
+        name: 'dEX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
+    },
+    {
+        name: 'OpenRelay',
+        imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
+    },
+    {
+        name: 'DDEX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.png',
+    },
+];
+
 export const NextLanding: React.StatelessComponent<{}> = () => (
     <SiteWrap theme="dark">
         <Section>
@@ -138,8 +182,8 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
             </WrapCentered>
 
             <WrapGrid width="narrow">
-                {_.map([...Array(9)], (item, index) => (
-                    <SampleLogo key={index} />
+                {_.map(projects, (item: ProjectLogo, index) => (
+                    <Project key={index} name={item.name} imageUrl={item.imageUrl} />
                 ))}
             </WrapGrid>
         </Section>
@@ -170,10 +214,21 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
     </SiteWrap>
 );
 
+const Project = ({ name, imageUrl }: ProjectLogo) => (
+    <StyledProject>
+        <img src={imageUrl} alt={name} />
+    </StyledProject>
+);
 
-const SampleLogo = styled.div`
-    width: 60px;
-    height: 60px;
+const StyledProject = styled.div`
+    width: 80px;
+    height: 116px;
     border: 1px solid blue;
     margin: 30px 60px;
+
+    img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
 `;