diff --git a/web/e.cash/components/atoms/index.js b/web/e.cash/components/atoms/index.js --- 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 --- a/web/e.cash/components/atoms/styles.js +++ b/web/e.cash/components/atoms/styles.js @@ -2,8 +2,8 @@ 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} { @@ -20,3 +20,29 @@ 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 --- /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 --- /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 --- /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 --- /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 --- a/web/e.cash/pages/wealth-redefined.js +++ b/web/e.cash/pages/wealth-redefined.js @@ -1,6 +1,15 @@ +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 ( @@ -27,6 +36,75 @@ 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 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ 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; @@ -76,10 +76,12 @@ a { text-decoration: none; cursor: pointer; + color: ${props => props.theme.colors.primary}; } a:hover { text-decoration: none; + color: ${props => props.theme.colors.primaryLight} } p { diff --git a/web/e.cash/styles/pages/wealth-redefined.js b/web/e.cash/styles/pages/wealth-redefined.js new file mode 100644 --- /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 --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -35,7 +35,7 @@ export const stealth = { colors: { - primary: '#000', + primary: '#7f7f7f', primaryLight: '#a0a0a0', accent: '#8a8a8a', darkBackground: '#232324',