diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 20:11:31 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 20:11:31 +0800 |
commit | 7d9ab27b9d26bf008a1113c50a00b18a1ad6e641 (patch) | |
tree | 96633af443a641f4fac0908c4272c854a61e839f /packages/website/ts/@next/components/sections/landing/clients.tsx | |
parent | c686c241c0ea7b9b0a581aa6bd7aac35e2ac11b4 (diff) | |
download | dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.gz dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.bz2 dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.lz dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.xz dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.zst dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.zip |
Divides landing into section components, cleanup
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing/clients.tsx')
-rw-r--r-- | packages/website/ts/@next/components/sections/landing/clients.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx new file mode 100644 index 000000000..c08a4ea48 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -0,0 +1,78 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; +import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +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 SectionLandingClients = () => ( + <Section isPadLarge={true}> + <WrapCentered> + <Heading size="small">You're in good company</Heading> + </WrapCentered> + + <WrapGrid width="narrow" isWrapped={true}> + {_.map(projects, (item: ProjectLogo, index) => ( + <StyledProject key={`client-${index}`}> + <img src={item.imageUrl} alt={item.name} /> + </StyledProject> + ))} + </WrapGrid> + </Section> +); + +const StyledProject = styled.div` + width: 90px; + height: 90px; + flex-shrink: 0; + margin: 30px; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } +`; |