aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 17:54:18 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 17:54:18 +0800
commit5bd185e8319f654d1691b021d38c934983a1f107 (patch)
treee85d8fa229209fbb70e621338979b74ba7249c2d /packages
parentbe045dad9bd026cb6d4323d3b70e3ff003cb0daa (diff)
downloaddexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar.gz
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar.bz2
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar.lz
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar.xz
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.tar.zst
dexon-sol-tools-5bd185e8319f654d1691b021d38c934983a1f107.zip
Adds images in instant page
Diffstat (limited to 'packages')
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-1.pngbin0 -> 37046 bytes
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-2.pngbin0 -> 68311 bytes
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-3.pngbin0 -> 37805 bytes
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-4.pngbin0 -> 37148 bytes
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-5.pngbin0 -> 181796 bytes
-rw-r--r--packages/website/public/images/@next/0x-instant/widget-6.pngbin0 -> 37812 bytes
-rw-r--r--packages/website/ts/@next/components/aboutPageLayout.tsx2
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx22
-rw-r--r--packages/website/ts/@next/components/header.tsx4
-rw-r--r--packages/website/ts/@next/components/heroAnimation.tsx2
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx2
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx4
-rw-r--r--packages/website/ts/@next/pages/about/team.tsx24
-rw-r--r--packages/website/ts/@next/pages/instant.tsx62
14 files changed, 78 insertions, 44 deletions
diff --git a/packages/website/public/images/@next/0x-instant/widget-1.png b/packages/website/public/images/@next/0x-instant/widget-1.png
new file mode 100644
index 000000000..9c3abe97b
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-1.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-2.png b/packages/website/public/images/@next/0x-instant/widget-2.png
new file mode 100644
index 000000000..dbe662e89
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-2.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-3.png b/packages/website/public/images/@next/0x-instant/widget-3.png
new file mode 100644
index 000000000..d74755361
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-3.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-4.png b/packages/website/public/images/@next/0x-instant/widget-4.png
new file mode 100644
index 000000000..45ef37fa6
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-4.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-5.png b/packages/website/public/images/@next/0x-instant/widget-5.png
new file mode 100644
index 000000000..992353efe
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-5.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-6.png b/packages/website/public/images/@next/0x-instant/widget-6.png
new file mode 100644
index 000000000..a4bd33de2
--- /dev/null
+++ b/packages/website/public/images/@next/0x-instant/widget-6.png
Binary files differ
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 002d35c0c..2d871ac71 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -18,7 +18,7 @@ interface Props {
export const AboutPageLayout = (props: Props) => (
<SiteWrap theme="light">
- <Section isFlex={true} maxWidth="1170px">
+ <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
<Column>
<ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
<ChapterLink to="/next/about/team">Team</ChapterLink>
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 8f5f988d5..933ee7034 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -15,49 +15,49 @@ interface Props {
const introData = [
{
label: 'Build a relayer',
- url: '#',
+ url: 'https://0xproject.com/wiki#Build-A-Relayer',
},
{
label: 'Develop on Ethereum',
- url: '#',
+ url: 'https://0xproject.com/wiki#Ethereum-Development',
},
{
label: 'Make & take orders',
- url: '#',
+ url: 'https://0xproject.com/wiki#Create,-Validate,-Fill-Order',
},
{
label: 'Use networked liquidity',
- url: '#',
+ url: 'https://0xproject.com/wiki#Find,-Submit,-Fill-Order-From-Relayer',
},
];
const docsData = [
{
label: '0x.js',
- url: '#',
+ url: 'https://0xproject.com/docs/0x.js',
},
{
label: '0x Connect',
- url: '#',
+ url: 'https://0xproject.com/docs/connect',
},
{
label: 'Smart Contract',
- url: '#',
+ url: 'https://0xproject.com/docs/contracts',
},
];
const linksData = [
{
label: 'Wiki',
- url: '#',
+ url: 'https://0xproject.com/wiki',
},
{
label: 'Github',
- url: '#',
+ url: 'https://github.com/0xProject',
},
{
label: 'Whitepaper',
- url: '#',
+ url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
},
];
@@ -129,7 +129,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
</Column>
</StyledWrap>
- <StyledLink to="#" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
+ <StyledLink to="https://0xproject.com/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
View All Documentation
</StyledLink>
</DropdownWrap>
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 7660c0d40..44686686f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -67,7 +67,7 @@ const navItems: NavItem[] = [
},
{
id: 'blog',
- url: '#',
+ url: 'https://blog.0xproject.com/latest',
text: 'Blog',
},
];
@@ -143,7 +143,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<TradeButton
bgColor={theme.headerButtonBg}
color="#ffffff"
- href="#"
+ href="https://0xproject.com/portal"
>
Trade on 0x
</TradeButton>
diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/@next/components/heroAnimation.tsx
index fea757bc3..62250fd34 100644
--- a/packages/website/ts/@next/components/heroAnimation.tsx
+++ b/packages/website/ts/@next/components/heroAnimation.tsx
@@ -36,7 +36,7 @@ const spin = keyframes`
`;
const moveIn = keyframes`
- 0% { opacity: 0; transform: scale(1.5) rotate(-30deg) }
+ 0% { opacity: 0; transform: scale(1.7) rotate(-30deg) }
100% { opacity: 1; transform: scale(1) rotate(0deg) }
`;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 685672733..617cc81c8 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -95,7 +95,7 @@ const SectionBase = styled.section<SectionProps>`
`;
const Wrap = styled(FlexWrap)<WrapProps>`
- width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
+ width: ${props => props.bgColor ? 'calc(100% - 60px)' : props.wrapWidth};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
text-align: ${props => props.isTextCentered && 'center'};
margin: 0 auto;
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 7970d50a9..513fa9867 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -17,11 +17,11 @@ export const SectionLandingHero = () => (
const HeroActions = () => (
<>
- <Button isInline={true}>
+ <Button href="https://0xproject.com/docs" isInline={true}>
Get Started
</Button>
- <Button isTransparent={true} isInline={true}>
+ <Button href="/why" isTransparent={true} isInline={true}>
Learn More
</Button>
</>
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index fe4723205..5a73d1f89 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/@next/pages/about/team.tsx
@@ -195,11 +195,11 @@ export const NextAboutTeam = () => (
width="70%"
maxWidth="800px"
>
- <WrapGrid isWrapped={true} isCentered={false}>
+ <StyledGrid isWrapped={true} isCentered={false}>
{_.map(team, (info: TeamMember, index) => (
<Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))}
- </Wrap>
+ </StyledGrid>
</Column>
</Section>
@@ -213,17 +213,27 @@ export const NextAboutTeam = () => (
<Heading size="medium">Advisors</Heading>
</Column>
- <Column>
- <WrapGrid isWrapped={true} isCentered={false}>
+ <Column
+ width="70%"
+ maxWidth="800px"
+ >
+ <StyledGrid isWrapped={true} isCentered={false}>
{_.map(advisors, (info: TeamMember, index) => (
<Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))}
- </WrapGrid>
+ </StyledGrid>
</Column>
</Section>
</AboutPageLayout>
);
+const StyledGrid = styled.div`
+ &:after {
+ content: '';
+ clear: both;
+ }
+`;
+
const Member = ({ name, title, imageUrl }: TeamMember) => (
<StyledMember>
<img src={imageUrl} alt={name}/>
@@ -233,8 +243,10 @@ const Member = ({ name, title, imageUrl }: TeamMember) => (
);
const StyledMember = styled.div`
- width: calc(25% - 10px);
+ width: calc(25% - 15px);
margin-bottom: 10px;
+ float: left;
+ margin-right: 10px;
img, svg {
width: 100%;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index a16640b54..3608afebf 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -71,8 +71,10 @@ export const Next0xInstant = () => (
<Section isFullWidth={true} isPadded={false} padding="30px 0">
<MarqueeWrap>
<div>
- {[...Array(20)].map((item, index) => (
- <Card index={index} />
+ {[...Array(12)].map((item, index) => (
+ <Card index={index}>
+ <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
+ </Card>
))}
</div>
</MarqueeWrap>
@@ -110,10 +112,15 @@ export const Next0xInstant = () => (
</SiteWrap>
);
-// scroll calc for infinite is (width * total / 2) + padding
+// scroll animation calc is simply (imageWidth * totalRepetitions) / 2
const scroll = keyframes`
0% { transform: translate3d(0, 0, 0) }
- 100% { transform: translate3d(-2615px, 0, 0) }
+ 100% { transform: translate3d(-2220px, 0, 0) }
+`;
+
+const scrollMobile = keyframes`
+ 0% { transform: translate3d(0, 0, 0) }
+ 100% { transform: translate3d(-1800px, 0, 0) }
`;
const fadeUp = keyframes`
@@ -127,38 +134,53 @@ const fadeUp = keyframes`
}
`;
-// width = (260 * 20) - (15 * 19)
+// width = 370 * 12
const MarqueeWrap = styled.div`
width: 100vw;
- height: 380px;
+ height: 514px;
padding-bottom: 60px;
> div {
- width: 5485px;
- height: 380px;
+ height: auto;
display: flex;
- animation: ${scroll} 30s linear infinite;
will-change: transform;
+ }
+
+ @media (min-width: 768px) {
+ > div {
+ width: 4440px;
+ animation: ${scroll} 30s linear infinite;
+ }
+ }
- img {
- width: auto;
- height: 380px;
- }
+ @media (max-width: 768px) {
+ > div {
+ width: 3600px;
+ animation: ${scrollMobile} 30s linear infinite;
+ }
}
`;
const Card = styled.div`
- width: 260px;
- height: 370px;
- background: #555;
- border-radius: 5px;
- display: inline-block;
opacity: 0;
+ flex-shrink: 0;
transform: translateY(10px);
will-change: opacity, transform;
animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards;
- & + & {
- margin-left: 15px;
+ img {
+ height: auto;
+ }
+
+ @media (min-width: 768px) {
+ img {
+ width: 370px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ img {
+ width: 300px;
+ }
}
`;