diff --git a/web/e.cash/components/roadmap/index.js b/web/e.cash/components/roadmap/index.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/roadmap/index.js @@ -0,0 +1,121 @@ +import Image from 'next/image'; +import check from '/public/images/circle-check.svg'; +import fork from '/public/images/code-branch.svg'; +import brain from '/public/images/brain.svg'; +import GlitchText from '/components/glitch-text'; +import { roadmap } from '/data/roadmap'; +import { + Legend, + WhiteIcon, + PinkIcon, + BlueIcon, + RoadmapCtn, + RoadmapBlock, + TitleCtn, + Dot, + Title, + ItemsCtn, + ItemOuter, + ItemInner, + TaglineCtn, +} from './styles'; + +export default function Roadmap() { + return ( + <> + +
+ + = Complete| +
+
+ + = Underway| +
+
+ + = Planning +
+ + + + {roadmap.map(roadmap => ( + + + + <h3>{roadmap.title}</h3> + <p>{roadmap.description}</p> + <Dot /> + + + + + {roadmap.items.map(roadmapitem => { + return ( + + +
+ eCash Roadmap +
+
+

{roadmapitem.title}

+

{roadmapitem.description}

+
+ + + ); + })} + +
+ +
+
+

+ +

+

{roadmap.tagline_description}

+
+ + + + ))} + + + ); +} diff --git a/web/e.cash/components/roadmap/styles.js b/web/e.cash/components/roadmap/styles.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/roadmap/styles.js @@ -0,0 +1,325 @@ +import styled from 'styled-components'; +import Image from 'next/image'; + +export const Legend = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + margin-bottom: 80px; + + img { + margin-right: 5px; + } + + span { + margin: 0 15px; + } + + ${props => props.theme.breakpoint.medium} { + flex-direction: column; + text-align: left; + margin-bottom: 40px; + + > div { + align-self: center; + margin-bottom: 10px; + } + + span { + display: none; + } + } +`; + +export const WhiteIcon = styled(Image)` + filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) + brightness(106%) contrast(100%); +`; + +export const PinkIcon = styled(Image)` + filter: ${props => + props.theme.name === 'stealth' + ? 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)' + : 'invert(52%) sepia(100%) saturate(6184%) hue-rotate(295deg) brightness(100%) contrast(109%)'}; +`; + +export const BlueIcon = styled(Image)` + filter: ${props => + props.theme.name === 'stealth' + ? 'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)' + : 'invert(59%) sepia(96%) saturate(2939%) hue-rotate(159deg) brightness(94%) contrast(101%)'}; +`; + +export const RoadmapCtn = styled.div` + display: flex; + flex-direction: column; + position: relative; +`; + +export const RoadmapBlock = styled.div` + display: flex; + width: 100%; + margin-bottom: 100px; + position: relative; + + :first-child > div::before { + content: ''; + width: 12px; + height: 100px; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 0) 100% + ); + position: absolute; + top: -10px; + left: -6px; + } + + :nth-child(3) > div::before { + content: ''; + width: 12px; + height: 100px; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 0) 100% + ); + position: absolute; + bottom: -110px; + left: -7px; + z-index: 99; + } + + ${props => props.theme.breakpoint.medium} { + flex-direction: column; + + :first-child > div::before { + display: none; + } + + :nth-child(3) > div::before { + display: none; + } + } +`; + +export const TitleCtn = styled.div` + width: 50%; + position: relative; + padding-right: 40px; + overflow: visible; + padding-top: 84px; + + ${props => props.theme.breakpoint.medium} { + width: 100%; + border-left: 2px solid ${props => props.theme.colors.primaryLight}; + padding-right: 0px; + padding-top: 60px; + } +`; + +export const Title = styled.div` + position: sticky; + z-index: 100; + top: 25%; + right: 0; + text-align: right; + display: flex; + flex-direction: column; + align-items: flex-end; + + h3 { + margin: 0; + color: ${props => + props.theme.name === 'stealth' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight}; + font-size: 40px; + font-weight: 600; + } + + p { + font-size: 14px; + margin: 0; + max-width: 600px; + } + + ${props => props.theme.breakpoint.medium} { + align-items: flex-start; + text-align: left; + padding-left: 30px; + } +`; + +export const Dot = styled.div` + width: 20px; + height: 20px; + border-radius: 100%; + background-color: ${props => props.theme.colors.primaryLight}; + background-image: radial-gradient( + circle farthest-corner at 50% 50%, + ${props => props.theme.colors.primaryLight}, + ${props => props.theme.colors.primary} + ); + box-shadow: 0 0 8px 2px ${props => props.theme.colors.primaryLight}; + position: absolute; + right: -51px; + top: 0; + bottom: 0; + margin: auto; + + ${props => props.theme.breakpoint.medium} { + left: -10px; + right: unset; + } +`; + +export const ItemsCtn = styled.div` + width: 50%; + border-left: 2px solid ${props => props.theme.colors.primaryLight}; + padding-left: 40px; + display: flex; + flex-direction: column; + padding-top: 100px; + position: relative; + + :after { + content: ''; + width: 50px; + height: 100px; + border-left: 2px solid ${props => props.theme.colors.primaryLight}; + position: absolute; + bottom: -100px; + left: -2px; + } + + ${props => props.theme.breakpoint.medium} { + width: 100%; + padding-left: 20px; + padding-top: 50px; + } +`; + +export const ItemOuter = styled.div` + margin-bottom: 20px; + padding: 2px; + align-self: auto; + background-color: ${props => + props.status === 'planning' && props.theme.name !== 'stealth' + ? props.theme.colors.primaryLight + : props.status === 'underway' && props.theme.name !== 'stealth' + ? props.theme.colors.accent + : props.theme.colors.contrast}; + clip-path: polygon( + 100% 0, + 100% calc(100% - 16px), + calc(100% - 20px) 100%, + 0 100%, + 0 0 + ); + width: fit-content; + + ${props => props.theme.breakpoint.medium} { + height: 68px; + } +`; + +export const ItemInner = styled.div` + display: flex; + width: auto; + background-color: ${props => props.theme.colors.black}; + clip-path: polygon( + 100% 0, + 100% calc(100% - 16px), + calc(100% - 20px) 100%, + 0 100%, + 0 0 + ); + + ${props => props.theme.breakpoint.medium} { + height: 64px; + } + + > div:first-child { + display: flex; + width: 66px; + justify-content: center; + align-items: center; + background-color: ${props => + props.status === 'planning' && props.theme.name !== 'stealth' + ? props.theme.colors.primaryLight + : props.status === 'underway' && props.theme.name !== 'stealth' + ? props.theme.colors.accent + : props.theme.colors.contrast}; + + ${props => props.theme.breakpoint.medium} { + width: 40px; + } + } + + > div:nth-child(2) { + display: flex; + padding: 5px 25px 5px 15px; + flex-direction: column; + align-items: flex-start; + text-align: left; + color: ${props => + props.status === 'planning' && props.theme.name !== 'stealth' + ? props.theme.colors.primaryLight + : props.status === 'underway' && props.theme.name !== 'stealth' + ? props.theme.colors.accent + : props.theme.colors.contrast}; + + h4 { + font-size: 18px; + line-height: 28px; + font-weight: 600; + margin: 0; + ${props => props.theme.breakpoint.medium} { + font-size: 16px; + line-height: 24px; + } + } + + p { + opacity: 0.8; + font-size: 14px; + margin: 0; + ${props => props.theme.breakpoint.medium} { + line-height: 1.2em; + } + } + + ${props => props.theme.breakpoint.medium} { + padding: 2px 15px 2px 10px; + } + } +`; + +export const TaglineCtn = styled.div` + display: flex; + align-items: center; + text-align: left; + + > div:first-child { + width: 60px; + display: flex; + align-items: center; + justify-content: center; + } + + h4 { + font-size: 18px; + line-height: 28px; + font-weight: 600; + margin: 0; + } + + p { + opacity: 0.8; + font-size: 14px; + margin: 0; + } +`; diff --git a/web/e.cash/data/roadmap.js b/web/e.cash/data/roadmap.js new file mode 100644 --- /dev/null +++ b/web/e.cash/data/roadmap.js @@ -0,0 +1,151 @@ +import rocket from '/public/images/rocket.svg'; +import award from '/public/images/award.svg'; + +export const roadmap = [ + { + title: 'SCALING', + description: + 'Enable eCash to scale from ~100 tx/s to over 5,000,000 tx/s. Mass-parallelization is necessary to achieve mankind scale.', + items: [ + { + title: 'Canonical Transaction Ordering', + description: 'scalable block processing', + status: 'complete', + }, + { + title: 'Schnorr Signatures', + description: 'batched signature validation', + status: 'complete', + }, + { + title: 'QUIC', + description: 'lightning fast network', + status: 'underway', + }, + { + title: 'Faster Block Propagation', + description: 'graphene or other', + status: 'planning', + }, + { + title: 'UTXO Commitment', + description: 'blockchain pruning, faster initial sync', + status: 'planning', + }, + { + title: 'Merklix-Metadata Tree', + description: 'scalable block processing', + status: 'planning', + }, + { + title: 'Adaptive Block Size', + description: 'market driven growth to 1TB blocks', + status: 'planning', + }, + ], + tagline: 'Mankind Scale', + tagline_description: '50 transactions / day for 10 billion humans', + tagline_icon: rocket, + }, + { + title: 'USABILITY', + description: + 'Improve the eCash payment experience to ensure that it is instant and reliable. Transactions must be received instantly and be completely secure within seconds.', + items: [ + { + title: 'CashAddr', + description: 'easier & safer to use', + status: 'complete', + }, + { + title: 'Sighash', + description: 'hardware wallet security', + status: 'complete', + }, + { + title: 'Convenient Units', + description: '2 decimal places', + status: 'complete', + }, + { + title: 'Avalanche Post-consensus', + description: 'enhanced security & 1-block finality', + status: 'complete', + }, + { + title: 'CashFusion', + description: 'opt-in privacy', + status: 'underway', + }, + { + title: 'Regular Heartbeat', + description: 'more consistent block times', + status: 'underway', + }, + { + title: 'Reference Indexer', + description: 'programmatic block explorer', + status: 'underway', + }, + { + title: 'Avalanche Pre-consensus', + description: 'instant transactions & real-time processing', + status: 'underway', + }, + { + title: 'Zero-Knowledge Subchain', + description: 'bulletproof privacy', + status: 'planning', + }, + { + title: 'Fractional Satoshis', + description: 'fees low forever', + status: 'planning', + }, + ], + tagline: 'Best Money', + tagline_description: + 'secure within 3 seconds - transaction fees forever low', + tagline_icon: award, + }, + { + title: 'EXTENSIBILITY', + description: + 'Make eCash extensible. An extensible protocol makes future improvements less disruptive, providing a solid base for businesses and developers to build on.', + items: [ + { + title: 'Foundational Opcodes', + description: 'functional script capability', + status: 'complete', + }, + { + title: 'Larger OP_RETURN', + description: 'tokens on chain', + status: 'complete', + }, + { + title: 'OP_CHECKDATASIG', + description: 'oracles and covenants', + status: 'complete', + }, + { + title: 'EVM Subchain', + description: 'scalable smart contracts & improved privacy', + status: 'planning', + }, + { + title: 'Advanced Opcodes', + description: 'enhanced script capability', + status: 'planning', + }, + { + title: 'New Transaction Format', + description: 'more capable & compact', + status: 'planning', + }, + ], + tagline: 'Agile Blockchain', + tagline_description: "supporting tomorrow's economy", + tagline_icon: award, + }, +]; diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -14,10 +14,13 @@ Overlay, StorySection, YouTubeVideo, + PixelBorder, + RoadmpaSection, } from '/styles/pages/homepage'; import Button from '/components/button'; import H2 from '/components/h2'; import Hand from '/public/images/hand.png'; +import Roadmap from '/components/roadmap'; export default function Home() { return ( @@ -97,6 +100,13 @@ + + + +

+ + + ); } diff --git a/web/e.cash/public/images/award.svg b/web/e.cash/public/images/award.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/award.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/brain.svg b/web/e.cash/public/images/brain.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/brain.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/circle-check.svg b/web/e.cash/public/images/circle-check.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/circle-check.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/code-branch.svg b/web/e.cash/public/images/code-branch.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/code-branch.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/pixel-border.svg b/web/e.cash/public/images/pixel-border.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/pixel-border.svg @@ -0,0 +1,2 @@ + + diff --git a/web/e.cash/public/images/rocket.svg b/web/e.cash/public/images/rocket.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/rocket.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/styles/global.js b/web/e.cash/styles/global.js --- a/web/e.cash/styles/global.js +++ b/web/e.cash/styles/global.js @@ -46,6 +46,7 @@ background-color: ${props => props.theme.colors.darkBlue}; color: ${props => props.theme.colors.contrast}; overflow-x: hidden; + overflow: visible; } ::-webkit-scrollbar { diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js --- a/web/e.cash/styles/pages/homepage.js +++ b/web/e.cash/styles/pages/homepage.js @@ -248,3 +248,24 @@ border: 0px; } `; + +export const PixelBorder = styled.div` + width: 100%; + position: relative; + margin-top: -120px; + height: 120px; + z-index: 99; + background-position: 50% 100%, 0 0; + background-size: auto, auto; + background-repeat: repeat-x; + background-image: url('/images/pixel-border.svg'), + linear-gradient(180deg, transparent 79%, rgba(0, 0, 0, 0.67) 97%, #000); +`; + +export const RoadmpaSection = styled.div` + width: 100%; + text-align: center; + background-color: ${props => props.theme.colors.black}; + padding: 120px 0; + position: relative; +`; 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 @@ -1,4 +1,5 @@ export const ecash = { + name: 'ecash', colors: { primary: '#0074c2', primaryLight: '#00abe7', @@ -20,6 +21,7 @@ }; export const stealth = { + name: 'stealth', colors: { primary: '#000', primaryLight: '#a0a0a0',