diff --git a/web/e.cash/components/atoms/index.js b/web/e.cash/components/atoms/index.js index 2005397ff..a3d9fbfc1 100644 --- a/web/e.cash/components/atoms/index.js +++ b/web/e.cash/components/atoms/index.js @@ -1,3 +1,3 @@ -import { Container, ThemeSwitch } from './styles'; +import { Container, ThemeSwitch, CenterImage, GradientSpacer } from './styles'; -export { Container, ThemeSwitch }; +export { Container, ThemeSwitch, CenterImage, GradientSpacer }; diff --git a/web/e.cash/components/atoms/styles.js b/web/e.cash/components/atoms/styles.js index 5eb9e0709..3281ce4df 100644 --- a/web/e.cash/components/atoms/styles.js +++ b/web/e.cash/components/atoms/styles.js @@ -1,22 +1,48 @@ import styled from 'styled-components'; export const Container = styled.div` width: 100%; + max-width: ${props => (props.narrow ? '900px' : '1500px')}; margin: auto; - max-width: 1500px; padding: 0 50px; ${props => props.theme.breakpoint.medium} { padding: 0 20px; } `; export const ThemeSwitch = styled.div` position: fixed; bottom: 30px; width: 40px; height: 40px; z-index: 9999; background: rgba(255, 255, 255, 0.1); right: 30px; `; + +export const CenterImage = styled.div` + position: relative; + width: 100%; + height: ${props => props.height}; + ${props => props.theme.filters.grayscale} + + img { + object-fit: contain; + } + + ${props => props.theme.breakpoint.medium} { + height: calc(${props => props.height} / 2); + } +`; + +export const GradientSpacer = styled.div` + height: 100px; + width: 100%; + background-image: linear-gradient( + 180deg, + ${props => props.theme.colors.darkBlue}, + ${props => props.theme.colors.darkBackground} + ); + margin-bottom: 80px; +`; diff --git a/web/e.cash/components/h3/index.js b/web/e.cash/components/h3/index.js new file mode 100644 index 000000000..4b3a042e8 --- /dev/null +++ b/web/e.cash/components/h3/index.js @@ -0,0 +1,10 @@ +import GlitchText from '/components/glitch-text'; +import { StyledH3 } from './styles'; + +export default function H3({ text }) { + return ( + + + + ); +} diff --git a/web/e.cash/components/h3/styles.js b/web/e.cash/components/h3/styles.js new file mode 100644 index 000000000..49384931d --- /dev/null +++ b/web/e.cash/components/h3/styles.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const StyledH3 = styled.h3` + margin: 0; + margin-bottom: 20px; + font-size: 38px; + font-weight: 600; + line-height: 1.2; + color: ${props => props.theme.colors.contrast}; + position: relative; + + ${props => props.theme.breakpoint.medium} { + font-size: 28px; + } +`; diff --git a/web/e.cash/components/quote-carousel/index.js b/web/e.cash/components/quote-carousel/index.js new file mode 100644 index 000000000..26d249554 --- /dev/null +++ b/web/e.cash/components/quote-carousel/index.js @@ -0,0 +1,60 @@ +import { useState, useEffect } from 'react'; +import { QuoteCarouselCtn, QuoteCtn, Quote, DotsCtn, Dot } from './styles'; + +const quotes = [ + { + quote: "I think that the internet is going to be one of the major forces for reducing the role of government. The one thing that's missing, but that will soon be developed, is a reliable eCash.", + author: 'Milton Friedman', + }, + { + quote: 'I don’t believe we shall ever have a good money again before we take the thing out of the hands of government, that is, we can’t take them violently out of the hands of government, all we can do is by some sly roundabout way introduce something they can’t stop.', + author: 'Friedrich Hayek', + }, + { + quote: 'With e-currency based on cryptographic proof, without the need to trust a third party middleman, money can be secure and transactions effortless.', + author: 'Satoshi Nakamoto', + }, + { + quote: 'The computer can be used as a tool to liberate and protect people, rather than to control them.', + author: 'Hal Finney', + }, +]; + +const delay = 6000; + +const QuoteCarousel = () => { + const [activeIndex, setActiveIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setActiveIndex(prevIndex => + prevIndex === quotes.length - 1 ? 0 : prevIndex + 1, + ); + }, delay); + return () => clearInterval(interval); + }, [activeIndex]); + + return ( + + + {quotes.map((quote, index) => ( + +

"{quote.quote}"

+ -{quote.author} + + ))} + + + {quotes.map((_, index) => ( + setActiveIndex(index)} + active={index === activeIndex} + > + ))} + + + ); +}; + +export default QuoteCarousel; diff --git a/web/e.cash/components/quote-carousel/styles.js b/web/e.cash/components/quote-carousel/styles.js new file mode 100644 index 000000000..491aca4f2 --- /dev/null +++ b/web/e.cash/components/quote-carousel/styles.js @@ -0,0 +1,97 @@ +import styled from 'styled-components'; + +export const QuoteCarouselCtn = styled.div` + position: relative; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 230px; + margin-bottom: 60px; + margin-top: 60px; + + ${props => props.theme.breakpoint.medium} { + height: 200px; + } + + @media (max-width: 500px) { + height: 300px; + } + + @media (max-width: 350px) { + height: 400px; + } +`; + +export const QuoteCtn = styled.div` + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + +export const Quote = styled.div` + position: absolute; + top: ${props => (props.active ? '0' : '60px')}; + left: 0px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + opacity: ${props => (props.active ? '1' : '0')}; + transition: all 0.5s ease-in-out; + + p { + font-style: italic; + color: #fff; + font-size: 16px; + font-weight: 500; + padding: 30px 50px; + border: 2px solid ${props => props.theme.colors.primaryLight}; + width: 100%; + margin-bottom: 10px; + + ${props => props.theme.breakpoint.medium} { + padding: 20px 20px; + border: 1px solid ${props => props.theme.colors.primaryLight}; + font-size: 14px; + } + } + + span { + color: #fff; + font-size: 14px; + opacity: 0.6; + text-align: right; + width: 100%; + + ${props => props.theme.breakpoint.medium} { + width: 100%; + display: inline-block; + } + } +`; + +export const DotsCtn = styled.div` + display: flex; + justify-content: center; + margin-top: 10px; +`; + +export const Dot = styled.div` + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #fff; + margin: 0 10px; + cursor: pointer; + opacity: ${props => (props.active ? '1' : '0.2')}; + background-color: ${props => + props.active + ? props.theme.colors.primaryLight + : props.theme.colors.contrast}; +`; diff --git a/web/e.cash/pages/wealth-redefined.js b/web/e.cash/pages/wealth-redefined.js index 66f7221b9..6a4237f4c 100644 --- a/web/e.cash/pages/wealth-redefined.js +++ b/web/e.cash/pages/wealth-redefined.js @@ -1,32 +1,110 @@ +import Image from 'next/image'; +import Link from 'next/link'; import Layout from '/components/layout'; import SubPageHero from '/components/sub-page-hero'; +import H3 from '/components/h3'; +import { Container, CenterImage, GradientSpacer } from '/components/atoms'; import spiningcoin from '/public/animations/spiningcoin.json'; +import handslogo from '/public/images/hands-logo.png'; +import rocket from '/public/images/rocket.png'; +import bitcoinabc from '/public/images/bitcoinabc-logo.png'; +import { TextBlock } from '/styles/pages/wealth-redefined.js'; +import QuoteCarousel from '/components/quote-carousel'; export default function WealthRedefined() { return (

Derived from one of the most trusted names in the cryptocurrency space, what was once known as BCHA is now eCash. Realizing the vision of the legendary Milton Friedman, eCash is taking financial freedom to a level never before seen.

With eCash, sending money is now as simple as sending an email.

Look for the ticker symbol XEC on exchanges, wallets, or price charts, and take your first step towards true financial freedom.

+ + + +

+

+ In today's age of change and innovation, it's time to + expand our understanding of wealth. It's not just about + dollars. It's about time. It's about control. It's about + adventure. +

+

+ Wealth enables freedom, privacy, and the power to sound + a different voice than the unthinking majority. +

+

+ Enter eCash. Sound money enables wealth. Join us and + take your first step on the path to financial and + personal freedom. Let's redefine wealth together. +

+ + eCash + + + + +

+

+ The truth is not always popular. Especially today, where + facts and opinions are easily mixed and manipulated. +
+
+ We have paid the price for this in the past. We have + celebrated success, briefly eclipsing Ethereum's market + cap with Bitcoin Cash, but have also wandered in the + desert of prolonged popular defeat. +
+
+ But we're not ready to throw in the towel. We've chosen + a long and difficult path. But we learn from our + mistakes. We will never stop making money better. +

+ + +

+ + + eCash + + + + +

+

+ eCash is developed and maintained by{' '} + + Bitcoin ABC + + , a team of professional industry-leading bitcoin + developers. +

+ + Bitcoin ABC + + + ); } diff --git a/web/e.cash/public/images/bitcoinabc-logo.png b/web/e.cash/public/images/bitcoinabc-logo.png new file mode 100755 index 000000000..e84e1a329 Binary files /dev/null and b/web/e.cash/public/images/bitcoinabc-logo.png differ diff --git a/web/e.cash/public/images/hands-logo.png b/web/e.cash/public/images/hands-logo.png new file mode 100755 index 000000000..d4bc99f49 Binary files /dev/null and b/web/e.cash/public/images/hands-logo.png differ diff --git a/web/e.cash/public/images/rocket.png b/web/e.cash/public/images/rocket.png new file mode 100755 index 000000000..2d709d03d Binary files /dev/null and b/web/e.cash/public/images/rocket.png differ diff --git a/web/e.cash/styles/global.js b/web/e.cash/styles/global.js index 9ea43f341..8e2e8246c 100644 --- a/web/e.cash/styles/global.js +++ b/web/e.cash/styles/global.js @@ -1,91 +1,93 @@ import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` @font-face { font-family: 'Poppins'; src: local('Poppins'), url(/fonts/Poppins-Regular.ttf) format('truetype'); font-weight: normal; } @font-face { font-family: 'Poppins'; src: local('Poppins'), url(/fonts/Poppins-Medium.ttf) format('truetype'); font-weight: 500; } @font-face { font-family: 'Poppins'; src: local('Poppins'), url(/fonts/Poppins-Bold.ttf) format('truetype'); font-weight: 700; } @font-face { font-family: 'Montserrat'; src: local('Montserrat'), url(/fonts/Montserrat-Regular.ttf) format('truetype'); font-weight: normal; } @font-face { font-family: 'Montserrat'; src: local('Montserrat'), url(/fonts/Montserrat-Bold.ttf) format('truetype'); font-weight: 700; } html, body { padding: 0; margin: 0; font-family: 'Poppins', sans-serif; line-height: 1.6; font-size: 18px; - background-color: ${props => props.theme.colors.darkBlue}; + background-color: ${props => props.theme.colors.darkBackground}; color: ${props => props.theme.colors.contrast}; ${props => props.theme.breakpoint.medium} { overflow-x: hidden; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { border-radius: 0px; background-color: ${props => props.theme.colors.darkBlue}; } ::-webkit-scrollbar-thumb { border-radius: 0px; background: ${props => props.theme.colors.primary}; height: 50px; } ::-webkit-scrollbar-corner { display: none; height: 0px; width: 0px; } * { box-sizing: border-box; } a { text-decoration: none; cursor: pointer; + color: ${props => props.theme.colors.primary}; } a:hover { text-decoration: none; + color: ${props => props.theme.colors.primaryLight} } p { margin: 0; font-size: 18px; line-height: 1.8em; margin-bottom: 30px; } `; diff --git a/web/e.cash/styles/pages/wealth-redefined.js b/web/e.cash/styles/pages/wealth-redefined.js new file mode 100644 index 000000000..5f725793f --- /dev/null +++ b/web/e.cash/styles/pages/wealth-redefined.js @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const TextBlock = styled.div` + width: 100%; + margin-bottom: 150px; + position: relative; + + ${props => props.theme.breakpoint.medium} { + margin-bottom: 90px; + } +`; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js index 0fde0341a..5c2ce29f9 100644 --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -1,69 +1,69 @@ export const ecash = { colors: { primary: '#0074c2', primaryLight: '#00abe7', accent: '#ff21d0', darkBackground: '#050d27', contrast: '#ffffff', black: '#000', darkBlue: '#001137', videocover: 'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', navbarBackground: 'rgba(0, 0, 0, 0.65)', }, roadmap: { sectionHeader: '#00abe7', complete: '#ffffff', underway: '#ff21d0', planning: '#00abe7', whiteIcon: 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)', primaryIcon: 'invert(59%) sepia(96%) saturate(2939%) hue-rotate(159deg) brightness(94%) contrast(101%)', accentIcon: 'invert(52%) sepia(100%) saturate(6184%) hue-rotate(295deg) brightness(100%) contrast(109%)', }, filters: { grayscale: null, videospeed: 1, animationspeed: 0.4, }, breakpoint: { medium: '@media (max-width: 920px)', }, }; export const stealth = { colors: { - primary: '#000', + primary: '#7f7f7f', primaryLight: '#a0a0a0', accent: '#8a8a8a', darkBackground: '#232324', contrast: '#ffffff', black: '#000', darkBlue: '#181818', videocover: 'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', navbarBackground: 'rgba(0, 0, 0, 0.65)', }, roadmap: { sectionHeader: '#ffffff', complete: '#01ff85', underway: '#e9fe01', planning: '#ffffff', whiteIcon: 'invert(82%) sepia(11%) saturate(7038%) hue-rotate(89deg) brightness(104%) contrast(100%)', primaryIcon: 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)', accentIcon: 'invert(82%) sepia(98%) saturate(2292%) hue-rotate(8deg) brightness(102%) contrast(104%)', }, filters: { grayscale: 'filter: grayscale(100%);', videospeed: 0.4, animationspeed: 0.2, }, breakpoint: { medium: '@media (max-width: 920px)', }, };