diff options
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 Binary files differnew file mode 100644 index 000000000..9c3abe97b --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-1.png diff --git a/packages/website/public/images/@next/0x-instant/widget-2.png b/packages/website/public/images/@next/0x-instant/widget-2.png Binary files differnew file mode 100644 index 000000000..dbe662e89 --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-2.png diff --git a/packages/website/public/images/@next/0x-instant/widget-3.png b/packages/website/public/images/@next/0x-instant/widget-3.png Binary files differnew file mode 100644 index 000000000..d74755361 --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-3.png diff --git a/packages/website/public/images/@next/0x-instant/widget-4.png b/packages/website/public/images/@next/0x-instant/widget-4.png Binary files differnew file mode 100644 index 000000000..45ef37fa6 --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-4.png diff --git a/packages/website/public/images/@next/0x-instant/widget-5.png b/packages/website/public/images/@next/0x-instant/widget-5.png Binary files differnew file mode 100644 index 000000000..992353efe --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-5.png diff --git a/packages/website/public/images/@next/0x-instant/widget-6.png b/packages/website/public/images/@next/0x-instant/widget-6.png Binary files differnew file mode 100644 index 000000000..a4bd33de2 --- /dev/null +++ b/packages/website/public/images/@next/0x-instant/widget-6.png 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; + } } `; |
