aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/sections
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/sections')
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx3
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx32
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx14
3 files changed, 34 insertions, 15 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 42062a2e1..75c7623e8 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -38,9 +38,8 @@ export const SectionLandingAbout = () => (
<hr
style={{
width: '340px',
- margin: '0 auto',
borderColor: '#3C4746',
- marginTop: '60px auto 0 auto',
+ margin: '60px auto 0 auto',
}}
/>
</WrapCentered>
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index c08a4ea48..68d5e384d 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,7 +1,7 @@
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 {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
interface ProjectLogo {
@@ -13,14 +13,17 @@ const projects: ProjectLogo[] = [
{
name: 'Radar Relay',
imageUrl: '/images/@next/relayer-logos/logo_1.png',
+ persistOnMobile: true,
},
{
name: 'Paradex',
imageUrl: '/images/@next/relayer-logos/logo_5.png',
+ persistOnMobile: true,
},
{
name: 'Amadeus',
imageUrl: '/images/@next/relayer-logos/logo_3.png',
+ persistOnMobile: true,
},
{
name: 'The Ocean X',
@@ -41,22 +44,29 @@ const projects: ProjectLogo[] = [
{
name: 'OpenRelay',
imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
+ persistOnMobile: true,
},
{
name: 'DDEX',
imageUrl: '/images/@next/relayer-logos/logo_2.png',
+ persistOnMobile: true,
},
];
export const SectionLandingClients = () => (
<Section isPadLarge={true}>
<WrapCentered>
- <Heading size="small">You're in good company</Heading>
+ <Heading size="small">
+ Join the growing number of projects developing on 0x
+ </Heading>
</WrapCentered>
<WrapGrid width="narrow" isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
- <StyledProject key={`client-${index}`}>
+ <StyledProject
+ key={`client-${index}`}
+ isOnMobile={item.persistOnMobile}
+ >
<img src={item.imageUrl} alt={item.name} />
</StyledProject>
))}
@@ -65,14 +75,24 @@ export const SectionLandingClients = () => (
);
const StyledProject = styled.div`
- width: 90px;
- height: 90px;
flex-shrink: 0;
- margin: 30px;
img {
object-fit: contain;
width: 100%;
height: 100%;
}
+
+ @media (min-width: ${BREAKPOINTS.mobile}) {
+ width: 120px;
+ height: 120px;
+ margin: 30px;
+ }
+
+ @media (max-width: ${BREAKPOINTS.mobile}) {
+ width: 100px;
+ height: 100px;
+ margin: 15px;
+ display: ${props => !props.isOnMobile && 'none'};
+ }
`;
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index e43ac41f2..98e111805 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -7,7 +7,13 @@ import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
export const SectionLandingHero = () => (
<Section>
- <Wrap>
+ <Wrap isReversed={true}>
+ <Column colWidth="1/2">
+ <WrapCentered>
+ <LogoOutlined/>
+ </WrapCentered>
+ </Column>
+
<Column colWidth="1/2">
<Heading size="large">
Powering Decentralized Exchange
@@ -28,12 +34,6 @@ export const SectionLandingHero = () => (
</Button>
</ButtonWrap>
</Column>
-
- <Column colWidth="1/2">
- <WrapCentered>
- <LogoOutlined/>
- </WrapCentered>
- </Column>
</Wrap>
</Section>
);