aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/package.json2
-rw-r--r--packages/website/ts/@next/pages/why.tsx99
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;