diff --git a/web/e.cash/components/homepage-tiles/index.js b/web/e.cash/components/homepage-tiles/index.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/homepage-tiles/index.js @@ -0,0 +1,88 @@ +// Copyright (c) 2023 The Bitcoin developers +// Distributed under the MIT software license, see the accompanying +// file COPYING or http://www.opensource.org/licenses/mit-license.php. +import Link from 'next/link'; +import Image from 'next/image'; +import GlitchText from '/components/glitch-text'; +import { GridCtn } from './styles.js'; + +const tiles = [ + { + title: 'Avalanche', + text: 'A consensus protocol to enhance blockchain security, enable near-instant confirmation times, and streamline future network upgrades.', + link: '/core-tech#avalanche', + image: '/images/tile1.png', + }, + { + title: 'Staking', + text: 'Decentralized governance by incentivized stakeholders.', + link: '/core-tech#staking', + image: '/images/tile2.png', + }, + { + title: 'eTokens', + text: 'eCash supports tokens and dividend payments. Create your own token with customized name, supply, decimal places, and icon.', + link: '/core-tech#etokens', + image: '/images/tile3.png', + }, + { + title: 'Small, convenient denomination (bits)', + text: 'Because money shouldn’t have 8 decimal places.', + link: '/core-tech#bits', + image: '/images/tile4.png', + }, + { + title: 'Learn More', + link: '/core-tech', + image: '/images/tile5.png', + featured: true, + }, +]; + +export default function HomepageTiles() { + return ( + + {tiles.map((tile, index) => { + if (tile.featured) { + return ( + +
+ {tile.title} +
+

+ +

+ + ); + } else + return ( + +

{tile.title}

+

{tile.text}

+
+ {tile.title} +
+ + ); + })} + + ); +} diff --git a/web/e.cash/components/homepage-tiles/styles.js b/web/e.cash/components/homepage-tiles/styles.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/homepage-tiles/styles.js @@ -0,0 +1,171 @@ +// Copyright (c) 2023 The Bitcoin developers +// Distributed under the MIT software license, see the accompanying +// file COPYING or http://www.opensource.org/licenses/mit-license.php. +import styled from 'styled-components'; + +export const GridCtn = styled.div` + margin-top: 30px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 16px; + grid-row-gap: 16px; + + .grid-item-feature { + background-color: ${props => props.theme.colors.primary}; + background-image: linear-gradient( + 135deg, + #273498, + ${props => props.theme.colors.primary} 54%, + #00abe7 + ); + transition: background-color 0.3s ease-in-out; + color: ${props => props.theme.colors.contrast}; + text-align: left; + text-decoration: none; + display: flex; + justify-content: flex-end; + flex-direction: column; + padding: 40px; + position: relative; + overflow: hidden; + } + + .grid-item-feature:hover { + background-image: none; + background-color: ${props => props.theme.colors.featureTileHover}; + } + + .feature-tile-image-ctn { + width: 140%; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin-left: -20%; + margin-right: auto; + } + + .feature-tile-image-ctn img { + object-fit: contain; + } + + .grid-item-feature h3 { + margin: 0; + font-size: 40px; + font-weight: 600; + position: relative; + text-transform: uppercase; + } + + .grid-item-feature h3::after { + content: ''; + width: 20px; + height: 1px; + background-color: ${props => props.theme.colors.contrast}; + position: absolute; + bottom: -10px; + left: 0; + } + + .grid-item { + border: 2px solid ${props => props.theme.colors.primary}; + background-color: rgba(0, 0, 0, 0.51); + transition: 0.3s ease-in-out; + color: #fff; + text-align: left; + text-decoration: none; + display: flex; + align-items: flex-start; + flex-direction: column; + padding: 20px 20px 200px 20px; + position: relative; + } + + .grid-item:hover { + border-color: ${props => props.theme.colors.contrast}; + background-color: rgba(0, 0, 0, 0.75); + } + + .grid-item-feature { + grid-area: 1 / 1 / 3 / 1; + } + .grid-item:nth-child(1) { + grid-area: 1 / 2 / 1 / 3; + } + .grid-item:nth-child(2) { + grid-area: 1 / 3 / 1 / 4; + } + .grid-item:nth-child(3) { + grid-area: 2 / 2 / 3 / 3; + } + .grid-item:nth-child(4) { + grid-area: 2 / 3 / 2 / 4; + } + + .grid-item h4 { + margin: 0; + margin-bottom: 6px; + color: ${props => props.theme.colors.primaryLight}; + font-size: 18px; + line-height: 1.2; + font-weight: 600; + } + + .grid-item p { + font-size: 14px; + position: relative; + } + + .grid-item p::after { + content: ''; + width: 20px; + height: 1px; + background-color: ${props => props.theme.colors.contrast}; + position: absolute; + bottom: -10px; + left: 0; + } + + .tile-image-ctn { + width: 70%; + height: 200px; + position: relative; + position: absolute; + bottom: 0; + right: 0; + } + + .tile-image-ctn img { + object-fit: contain; + } + + ${props => props.theme.breakpoint.medium} { + .grid-item-feature { + grid-area: 1 / 1 / 2 / 4; + } + .grid-item:nth-child(1) { + grid-area: 2 / 1 / 3 / 4; + } + .grid-item:nth-child(2) { + grid-area: 3 / 1 / 4 / 4; + } + .grid-item:nth-child(3) { + grid-area: 4 / 1 / 5 / 4; + } + .grid-item:nth-child(4) { + grid-area: 5 / 1 / 6 / 4; + } + + .tile-image-ctn { + width: 90%; + max-width: 300px; + } + + .grid-item-feature h3 { + line-height: 1.2em; + } + } +`; diff --git a/web/e.cash/pages/core-tech.js b/web/e.cash/pages/core-tech.js --- a/web/e.cash/pages/core-tech.js +++ b/web/e.cash/pages/core-tech.js @@ -27,29 +27,34 @@ ContentCtn, } from '/styles/pages/core-tech.js'; -export default function CoreTech() { - const TextImageBlock = ({ title, image, reverse, speed, children }) => { - return ( - - - - - - -

- {children} - - - - - - ); - }; +/** + * Return a styled block for the coretech items + * @param {string} title the title of the box to display + * @param {array} image the lottie json animation data to display + * @param {boolean} reverse defines image animation direction + * @param {number} speed defines image animation speed + * @param {object} children any children to display in the body + * @param {string} id the CSS id used for anchor links + */ +function TextImageBlock({ title, image, reverse, speed, children, id }) { + return ( + + + + + + +

+ {children} + + + + + + ); +} +export default function CoreTech() { return ( - +

Avalanche is a revolutionary consensus algorithm that enables instant transactions, enhanced @@ -107,7 +117,8 @@ - +

Protocol revenue is continually reinvested back into the eCash ecosystem to fund key infrastructure and @@ -140,7 +155,12 @@

- +

eCash supports tokens that anyone can create and trade. Instantly create your own token with your own @@ -151,7 +171,8 @@

@@ -164,7 +185,11 @@

- +

You can’t always say what you think anymore. More and more, Big Tech controls what you can see 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 @@ -19,10 +19,12 @@ YouTubeVideo, PixelBorder, RoadmapSection, + TilesSectionCtn, } from '/styles/pages/homepage'; import Button from '/components/button'; import H2 from '/components/h2'; import Hand from '/public/images/hand.png'; +import HomepageTiles from '/components/homepage-tiles'; import Roadmap from '/components/roadmap'; export default function Home() { @@ -101,6 +103,14 @@ + +

+ + diff --git a/web/e.cash/public/images/tile1.png b/web/e.cash/public/images/tile1.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@