diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/package.json | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 99 |
2 files changed, 55 insertions, 46 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index 2eeb1c696..1387f45f4 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -55,7 +55,6 @@ "query-string": "^6.0.0", "rc-slider": "^8.6.3", "react": "^16.4.2", - "react-anchor-link-smooth-scroll": "^1.0.11", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", "react-dom": "^16.4.2", @@ -68,6 +67,7 @@ "react-redux": "^5.0.3", "react-responsive": "^6.0.1", "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", + "react-scrollable-anchor": "^0.6.1", "react-syntax-highlighter": "^10.1.1", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index a267bd09e..9c3c4d0a2 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,6 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import AnchorLink from 'react-anchor-link-smooth-scroll'; +import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; + import styled from 'styled-components'; import {Hero} from 'ts/@next/components/hero'; @@ -79,6 +80,8 @@ const useCaseSlides = [ }, ]; +configureAnchors({ offset: -60 }); + export class NextWhy extends React.Component { public state = { isContactModalOpen: false, @@ -136,57 +139,63 @@ export class NextWhy extends React.Component { <Section maxWidth="1170px" isFlex={true} isFullWidth={true}> <Column> <NavStickyWrap offsetTop="130px"> - <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink> - <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink> - <ChapterLink offset="60" href="#functionality">Features</ChapterLink> + <ChapterLink href="#benefits">Benefits</ChapterLink> + <ChapterLink href="#cases">Use Cases</ChapterLink> + <ChapterLink href="#functionality">Features</ChapterLink> </NavStickyWrap> </Column> <Column width="55%" maxWidth="826px"> <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> - <SectionWrap id="benefits"> - <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle> - - {_.map(offersData, (item, index) => ( - <Definition - key={`offers-${index}`} - icon={item.icon} - title={item.title} - titleSize="small" - description={item.description} - isWithMargin={true} - /> - ))} - </SectionWrap> - - <SectionWrap id="cases" isNotRelative={true}> - <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle> - <Slider> - {_.map(useCaseSlides, (item, index) => ( - <Slide - key={`useCaseSlide-${index}`} - heading={item.title} - text={item.description} + <ScrollableAnchor id="benefits"> + <SectionWrap> + <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle> + + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + titleSize="small" + description={item.description} + isWithMargin={true} + /> + ))} + </SectionWrap> + </ScrollableAnchor> + + <ScrollableAnchor id="cases"> + <SectionWrap isNotRelative={true}> + <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle> + <Slider> + {_.map(useCaseSlides, (item, index) => ( + <Slide + key={`useCaseSlide-${index}`} + heading={item.title} + text={item.description} + icon={item.icon} + /> + ))} + </Slider> + </SectionWrap> + </ScrollableAnchor> + + <ScrollableAnchor id="functionality"> + <SectionWrap> + <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle> + + {_.map(functionalityData, (item, index) => ( + <Definition + key={`functionality-${index}`} icon={item.icon} + title={item.title} + titleSize="small" + description={item.description} + isWithMargin={true} /> ))} - </Slider> - </SectionWrap> - - <SectionWrap id="functionality"> - <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle> - - {_.map(functionalityData, (item, index) => ( - <Definition - key={`functionality-${index}`} - icon={item.icon} - title={item.title} - titleSize="small" - description={item.description} - isWithMargin={true} - /> - ))} - </SectionWrap> + </SectionWrap> + </ScrollableAnchor> </Column> </Column> </Section> @@ -270,7 +279,7 @@ const NavStickyWrap = styled(WrapSticky)` } `; -const ChapterLink = styled(AnchorLink)` +const ChapterLink = styled.a` color: ${props => props.theme.textColor}; font-size: 22px; margin-bottom: 25px; |