From 5bd185e8319f654d1691b021d38c934983a1f107 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 10:54:18 +0100 Subject: Adds images in instant page --- .../public/images/@next/0x-instant/widget-1.png | Bin 0 -> 37046 bytes .../public/images/@next/0x-instant/widget-2.png | Bin 0 -> 68311 bytes .../public/images/@next/0x-instant/widget-3.png | Bin 0 -> 37805 bytes .../public/images/@next/0x-instant/widget-4.png | Bin 0 -> 37148 bytes .../public/images/@next/0x-instant/widget-5.png | Bin 0 -> 181796 bytes .../public/images/@next/0x-instant/widget-6.png | Bin 0 -> 37812 bytes .../ts/@next/components/aboutPageLayout.tsx | 2 +- .../components/dropdowns/dropdown_developers.tsx | 22 ++++---- packages/website/ts/@next/components/header.tsx | 4 +- .../website/ts/@next/components/heroAnimation.tsx | 2 +- packages/website/ts/@next/components/newLayout.tsx | 2 +- .../ts/@next/components/sections/landing/hero.tsx | 4 +- packages/website/ts/@next/pages/about/team.tsx | 24 ++++++-- packages/website/ts/@next/pages/instant.tsx | 62 ++++++++++++++------- 14 files changed, 78 insertions(+), 44 deletions(-) create mode 100644 packages/website/public/images/@next/0x-instant/widget-1.png create mode 100644 packages/website/public/images/@next/0x-instant/widget-2.png create mode 100644 packages/website/public/images/@next/0x-instant/widget-3.png create mode 100644 packages/website/public/images/@next/0x-instant/widget-4.png create mode 100644 packages/website/public/images/@next/0x-instant/widget-5.png create mode 100644 packages/website/public/images/@next/0x-instant/widget-6.png (limited to 'packages/website') 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-1.png 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-2.png 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-3.png 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-4.png 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-5.png 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 Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/widget-6.png 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) => ( -
+
Our Mission Team 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) => ( - + View All Documentation 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 { Trade on 0x 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` `; const Wrap = styled(FlexWrap)` - 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 = () => ( <> - - 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" > - + {_.map(team, (info: TeamMember, index) => ( ))} - +
@@ -213,17 +213,27 @@ export const NextAboutTeam = () => ( Advisors - - + + {_.map(advisors, (info: TeamMember, index) => ( ))} - +
); +const StyledGrid = styled.div` + &:after { + content: ''; + clear: both; + } +`; + const Member = ({ name, title, imageUrl }: TeamMember) => ( {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 = () => (
- {[...Array(20)].map((item, index) => ( - + {[...Array(12)].map((item, index) => ( + + + ))}
@@ -110,10 +112,15 @@ export const Next0xInstant = () => ( ); -// 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; + } } `; -- cgit