diff --git a/web/e.cash/components/animate-image/index.js b/web/e.cash/components/animate-image/index.js --- a/web/e.cash/components/animate-image/index.js +++ b/web/e.cash/components/animate-image/index.js @@ -1,10 +1,11 @@ -import { useEffect, useRef, useContext } from 'react'; +import { useEffect, useRef, useContext, useState } from 'react'; import Lottie from 'lottie-react'; import { ThemeContext } from 'styled-components'; // image | lottie json file to be rendered // speed | optional number value to set the speed of the animation. Lower number is slower. Adjust to get the desired frame rate. -export default function AnimateImage({ image, speed }) { +export default function AnimateImage({ image, speed, reverse }) { + const [direction, setDirection] = useState(1); const themeContext = useContext(ThemeContext); const lottieRef = useRef(); useEffect(() => { @@ -12,12 +13,19 @@ speed ? speed : themeContext.filters.animationspeed, ); }, [speed, themeContext.filters.animationspeed]); + + const Reverse = () => { + lottieRef.current.setDirection(direction === 1 ? -1 : 1); + lottieRef.current.play(); + setDirection(direction === 1 ? -1 : 1); + }; return ( ); } diff --git a/web/e.cash/data/navitems.js b/web/e.cash/data/navitems.js --- a/web/e.cash/data/navitems.js +++ b/web/e.cash/data/navitems.js @@ -7,6 +7,11 @@ link: '/wealth-redefined', icon: '/images/hand-diamond-icon.svg', }, + { + title: 'Core Tech', + link: '/core-tech', + icon: '/images/cube-icon.svg', + }, ], }, { diff --git a/web/e.cash/pages/core-tech.js b/web/e.cash/pages/core-tech.js new file mode 100644 --- /dev/null +++ b/web/e.cash/pages/core-tech.js @@ -0,0 +1,191 @@ +import Layout from '/components/layout'; +import SubPageHero from '/components/sub-page-hero'; +import H3 from '/components/h3'; +import Button from '/components/button'; +import { Container, GradientSpacer } from '/components/atoms'; +import fist from '/public/animations/fist.json'; +import avalanche from '/public/animations/avalanche.json'; +import staking from '/public/animations/staking.json'; +import govern from '/public/animations/govern.json'; +import etoken from '/public/animations/etoken.json'; +import calculate from '/public/animations/calculate.json'; +import cashfusion from '/public/animations/cashfusion.json'; +import AnimateImage from '/components/animate-image'; +import { + TextImageBlockCtn, + LeftTopArrow, + LeftDownArrow, + RightTopArrow, + RightDownArrow, + TextCtn, + ImageCtn, + ButtonRow, + Blob, + ContentCtn, +} from '/styles/pages/core-tech.js'; + +export default function CoreTech() { + const TextImageBlock = ({ title, image, reverse, speed, children }) => { + return ( + + + + + + +

+ {children} + + + + + + ); + }; + + return ( + + +

+ Welcome to the next generation of crypto investments. eCash + opens the door to possibilities previously unattainable by + combining the core tech behind Bitcoin’s success - the same + fixed supply, halving schedule, and genesis block - with the + latest Proof of Stake consensus & protocol governance. +

+

+ eCash is the continuation of the Bitcoin Cash project and + continues to be developed by Bitcoin ABC, the team who + started it back in 2017. +

+ + + + + + + + + +

+ Avalanche is a revolutionary consensus algorithm + that enables instant transactions, enhanced + security, and fork-free upgrades. Other bitcoin + competitors (like Bitcoin Cash) lost significant + value from contentious (and seemingly endless) + forks. +

+ +