diff --git a/web/e.cash/data/navitems.js b/web/e.cash/data/navitems.js
index a968b6505..38854c2f7 100644
--- a/web/e.cash/data/navitems.js
+++ b/web/e.cash/data/navitems.js
@@ -1,133 +1,132 @@
// 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.
export const navitems = [
{
nav_item: 'About',
dropdown_items: [
{
title: 'Wealth Redefined',
link: '/wealth-redefined',
icon: '/images/hand-diamond-icon.svg',
},
{
title: 'Core Tech',
link: '/core-tech',
icon: '/images/cube-icon.svg',
},
{
title: 'FAQ',
link: '/faq',
icon: '/images/hands-logo-icon.svg',
},
{
title: 'Roadmap',
link: '/roadmap',
icon: '/images/roadmap-icon.svg',
},
{
title: 'eCash Brand',
link: '/brand',
icon: '/images/dna-icon.svg',
},
],
},
{
nav_item: 'Build on eCash',
link: '/build',
},
{
nav_item: 'Technology',
dropdown_items: [
{
title: 'Releases',
link: 'https://www.bitcoinabc.org/releases/',
icon: '/images/hand-logo-icon.svg',
},
{
title: 'Source Code',
link: 'https://github.com/bitcoin-abc/bitcoin-abc/',
icon: '/images/hand-code-icon.svg',
},
{
title: 'Documentation',
link: 'https://www.bitcoinabc.org/doc/',
icon: '/images/document-icon.svg',
},
],
},
{
nav_item: 'Get eCash',
dropdown_items: [
{
title: 'Exchanges',
link: '/get-ecash#exchanges',
icon: '/images/refresh-logo-icon.svg',
},
{
title: 'Wallets',
link: '/wallets',
icon: '/images/wallet-icon.svg',
},
- {
- title: 'Services',
- link: '/get-ecash#services',
- icon: '/images/services-icon.svg',
- },
{
title: 'Mining',
link: '/mining',
icon: '/images/mining-icon.svg',
},
{
title: 'Staking',
link: '/staking',
icon: '/images/hand-logo-icon.svg',
},
],
},
+ {
+ nav_item: 'Use eCash',
+ link: '/use-ecash',
+ },
{
nav_item: 'Blog',
link: '/blog',
},
{
nav_item: 'More',
dropdown_items: [
{
title: 'GNC',
link: 'https://gnc.e.cash',
icon: '/images/hands-logo-icon.svg',
},
{
title: 'Avalanche on eCash',
link: 'https://avalanche.cash/',
icon: '/images/mountain-icon.svg',
},
{
title: 'eCash Scorecard',
link: 'https://scorecard.cash/',
icon: '/images/hand-stars-icon.svg',
},
{
title: 'eCash Supply',
link: 'https://ecash.supply/',
icon: '/images/hand-cube-icon.svg',
},
{
title: 'eCash Explorer',
link: 'https://explorer.e.cash/',
icon: '/images/cube-icon.svg',
},
{
title: 'eCash Community',
link: 'https://ecash.community',
icon: '/images/hands-icon.svg',
},
{
title: 'Career Opportunities',
link: 'careers',
icon: '/images/people-icon.svg',
},
],
},
];
diff --git a/web/e.cash/pages/get-ecash.js b/web/e.cash/pages/get-ecash.js
index b3989e43a..d3328d7c0 100644
--- a/web/e.cash/pages/get-ecash.js
+++ b/web/e.cash/pages/get-ecash.js
@@ -1,190 +1,180 @@
// 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 Layout from '/components/layout';
import Script from 'next/script';
import Image from 'next/image';
import SubPageHero from '/components/sub-page-hero';
import H3 from '/components/h3';
import { Container, GradientSpacer } from '/components/atoms';
import coinupdown from '/public/animations/coin-up-down.json';
import coinflip from '/public/animations/exchanges-coin-flip.json';
import services from '/public/animations/services.json';
import mining from '/public/animations/mining.json';
import staking from '/public/animations/staking.json';
import {
DescriptionBox,
ImgCtn,
TilesOuterCtn,
TitleBox,
Tile,
TileImgCtn,
BlankTile,
ImageTextCtn,
SectionImg,
SwapZoneCtn,
} from '/styles/pages/get-ecash.js';
import AnimateImage from '/components/animate-image';
import { getScoreCardData } from '/data/scores.js';
import Button from '/components/button';
function TileSection({ title, items, children }) {
return (
<>
<TitleBox>{title}</TitleBox>
{children}
<TilesOuterCtn>
{items.map((item, index) => {
if (item === '') {
return <BlankTile key={index}></BlankTile>;
} else {
const logoSrc = Array.isArray(item.attributes.logo.data)
? item.attributes.logo.data[0].attributes
: item.attributes.logo.data.attributes;
return (
<Tile
href={item.attributes.url}
target="_blank"
rel="noreferrer"
key={index}
>
<TileImgCtn>
<Image
src={
process.env
.NEXT_PUBLIC_STRAPI_SCORECARD_URL +
logoSrc.url
}
fill
sizes="12vw"
alt={item.attributes.name}
/>
</TileImgCtn>
</Tile>
);
}
})}
</TilesOuterCtn>
</>
);
}
function GetEcash(props) {
return (
<Layout>
<SubPageHero
image={coinupdown}
h2subtext="Get eCash"
h2text="Start Today"
>
<p>
Get started today by getting your first eCash. It’s
simple and there are several ways to do it. You can find out
how below.
</p>
</SubPageHero>
<GradientSpacer />
<Container narrow>
<DescriptionBox>
<div>
<H3 text="Exchanges" id="exchanges" />
<p>
eCash is currently listed on most major exchanges
under the XEC ticker.
</p>
</div>
<ImgCtn height="500px">
<AnimateImage image={coinflip} speed={0.5} reverse />
</ImgCtn>
</DescriptionBox>
<TileSection title="Exchanges" items={props.exchanges} />
<TileSection
title="Instant Exchanges"
items={props.instantExchanges}
>
<SwapZoneCtn id="swapzone">
<p>
Swap your crypto into XEC quickly with the Swapzone
aggregator or chose your preferred instant exchange
from the list below.
</p>
<div
id="swapzoneExchangeWidget"
data-logo="true"
data-size="full"
data-refid="68y-3PwW6z"
data-from="eth"
data-to="xec"
/>
</SwapZoneCtn>
</TileSection>
- <DescriptionBox>
- <div>
- <H3 text="Services" id="services" />
- <p>Check out eCash service partners.</p>
- </div>
- <ImgCtn height="600px">
- <AnimateImage image={services} speed={0.5} reverse />
- </ImgCtn>
- </DescriptionBox>
- <TileSection title="Services" items={props.services} />
<ImageTextCtn>
<div>
<H3 text="Mining" id="mining" />
<p>
eCash is also available through mining, to learn
more join our ever expanding community of miners.
</p>
<Button
text="Get Started"
link="/mining"
corner="bottomRight"
color="accent"
/>
</div>
<SectionImg height="500px">
<AnimateImage image={mining} reverse />
</SectionImg>
</ImageTextCtn>
<ImageTextCtn rightimage="true">
<div>
<H3 text="Staking" id="staking" />
<p>
Stakers power eCash's Avalanche consensus
system, and earn staking rewards in return.
</p>
<Button
text="Stake eCash"
link="/staking"
corner="bottomRight"
color="accent"
/>
</div>
<SectionImg height="500px">
<AnimateImage image={staking} reverse />
</SectionImg>
</ImageTextCtn>
</Container>
<Script
src="https://swapzone.io/script/exchange-widget.js"
id="swapzone"
strategy="lazyOnload"
/>
</Layout>
);
}
/**
* Call function to fetch scorecard api data and return scored and sorted arrays.
* This only runs at build time, and the build should fail if the api call fails
* @returns {object} props - page props to pass to the page
* @throws {error} on bad API call or failure to parse API result
*/
export async function getStaticProps() {
const response = await getScoreCardData();
return {
props: response.props,
};
}
export default GetEcash;
diff --git a/web/e.cash/pages/use-ecash.js b/web/e.cash/pages/use-ecash.js
new file mode 100644
index 000000000..bc269ad93
--- /dev/null
+++ b/web/e.cash/pages/use-ecash.js
@@ -0,0 +1,206 @@
+// Copyright (c) 2024 The Bitcoin developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+import Layout from '/components/layout';
+import Script from 'next/script';
+import Image from 'next/image';
+import SubPageHero from '/components/sub-page-hero';
+import H3 from '/components/h3';
+import { Container, GradientSpacer } from '/components/atoms';
+import coinupdown from '/public/animations/coin-up-down.json';
+import coinflip from '/public/animations/exchanges-coin-flip.json';
+import services from '/public/animations/services.json';
+import mining from '/public/animations/mining.json';
+import {
+ LeftTopArrow,
+ LeftDownArrow,
+ RightTopArrow,
+ RightDownArrow,
+ Blob,
+ ContentCtn,
+} from '/styles/common.js';
+
+import {
+ DescriptionBox,
+ ImgCtn,
+ TilesOuterCtn,
+ TitleBox,
+ Tile,
+ TileImgCtn,
+ BlankTile,
+} from '/styles/pages/get-ecash.js';
+
+import {
+ TextImageBlockCtn,
+ TextCtn,
+ ImageCtn,
+} from '/styles/pages/use-ecash.js';
+
+import AnimateImage from '/components/animate-image';
+import { getScoreCardData } from '/data/scores.js';
+import Button from '/components/button';
+
+import elps from '/public/images/eLPS.png';
+import paybutton from '/public/images/paybutton.png';
+
+function TileSection({ title, items, children }) {
+ return (
+ <>
+ <TitleBox>{title}</TitleBox>
+ {children}
+ <TilesOuterCtn>
+ {items.map((item, index) => {
+ if (item === '') {
+ return <BlankTile key={index}></BlankTile>;
+ } else {
+ const logoSrc = Array.isArray(item.attributes.logo.data)
+ ? item.attributes.logo.data[0].attributes
+ : item.attributes.logo.data.attributes;
+ return (
+ <Tile
+ href={item.attributes.url}
+ target="_blank"
+ rel="noreferrer"
+ key={index}
+ >
+ <TileImgCtn>
+ <Image
+ src={
+ process.env
+ .NEXT_PUBLIC_STRAPI_SCORECARD_URL +
+ logoSrc.url
+ }
+ fill
+ sizes="12vw"
+ alt={item.attributes.name}
+ />
+ </TileImgCtn>
+ </Tile>
+ );
+ }
+ })}
+ </TilesOuterCtn>
+ </>
+ );
+}
+
+function TextImageBlock({ title, image, alt, children, id }) {
+ return (
+ <TextImageBlockCtn id={id}>
+ <LeftTopArrow />
+ <LeftDownArrow />
+ <RightTopArrow />
+ <RightDownArrow />
+ <TextCtn>
+ <H3 text={title} />
+ {children}
+ </TextCtn>
+ <ImageCtn>
+ <Image src={image} alt={alt} fill />
+ </ImageCtn>
+ </TextImageBlockCtn>
+ );
+}
+
+function UseEcash(props) {
+ return (
+ <Layout>
+ <SubPageHero
+ image={coinupdown}
+ h2subtext="Use eCash"
+ h2text="Start Today"
+ >
+ <p>
+ As a convenient and reliable form of electronic cash, eCash
+ is meant to be used! Whether it's sending money to a
+ friend, buying an online service, or finding more
+ information, check out the services listed below to start
+ using your eCash today.
+ </p>
+ </SubPageHero>
+ <GradientSpacer />
+
+ <ContentCtn>
+ <Blob left="0" top="5%" />
+ <Blob left="30%" top="30%" />
+ <Blob left="60%" top="60%" />
+ <Blob left="0" top="90%" />
+ <Container>
+ <TextImageBlock
+ id="elps"
+ title="eLPS"
+ image={elps}
+ alt="eLPS logo"
+ >
+ <p>
+ Powering the digital economy in the world's #1
+ Charter City, the eLempira (eLPS) is a stabletoken
+ built on eCash. It is used for real-world everyday
+ paymnets such as for rent, utilities, food, gym
+ memberships, haircuts, and more!
+ </p>
+ <Button
+ text="eLPS"
+ link="https://elpstoken.com/"
+ corner="bottomRight"
+ color="accent"
+ />
+ </TextImageBlock>
+ <TextImageBlock
+ id="paybutton"
+ title="Paybutton"
+ image={paybutton}
+ alt="Paybutton logo"
+ >
+ <p>
+ The easiest way to accept eCash online. Simply add a
+ few lines of code to start accepting eCash on your
+ website. Enables you to track transactions and
+ revenue through the PayButton dashboard, create
+ wallets and manage your buttons to organize payments
+ across all of your websites.
+ </p>
+ <Button
+ text="Paybutton"
+ link="https://paybutton.org/"
+ corner="bottomRight"
+ color="accent"
+ />
+ </TextImageBlock>
+ </Container>
+
+ <Container narrow>
+ <DescriptionBox>
+ <div>
+ <H3 text="Services" id="services" />
+ <p>Check out eCash service partners.</p>
+ </div>
+ <ImgCtn height="600px">
+ <AnimateImage
+ image={services}
+ speed={0.5}
+ reverse
+ />
+ </ImgCtn>
+ </DescriptionBox>
+ <TileSection title="Services" items={props.services} />
+ </Container>
+ </ContentCtn>
+ </Layout>
+ );
+}
+
+/**
+ * Call function to fetch scorecard api data and return scored and sorted arrays.
+ * This only runs at build time, and the build should fail if the api call fails
+ * @returns {object} props - page props to pass to the page
+ * @throws {error} on bad API call or failure to parse API result
+ */
+export async function getStaticProps() {
+ const response = await getScoreCardData();
+ return {
+ props: response.props,
+ };
+}
+
+export default UseEcash;
diff --git a/web/e.cash/public/images/eLPS.png b/web/e.cash/public/images/eLPS.png
new file mode 100644
index 000000000..5d91669aa
Binary files /dev/null and b/web/e.cash/public/images/eLPS.png differ
diff --git a/web/e.cash/public/images/paybutton.png b/web/e.cash/public/images/paybutton.png
new file mode 100644
index 000000000..25f8119a0
Binary files /dev/null and b/web/e.cash/public/images/paybutton.png differ
diff --git a/web/e.cash/styles/pages/use-ecash.js b/web/e.cash/styles/pages/use-ecash.js
new file mode 100644
index 000000000..0f6cf01c4
--- /dev/null
+++ b/web/e.cash/styles/pages/use-ecash.js
@@ -0,0 +1,74 @@
+// Copyright (c) 2024 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';
+import { motion } from 'framer-motion';
+import { getAnimationSettings } from '/styles/framer-motion';
+
+export const TextImageBlockCtn = styled(motion.div).attrs(() =>
+ getAnimationSettings(),
+)`
+ position: relative;
+ display: flex;
+ width: 100%;
+ padding: 45px;
+ align-items: center;
+ border: 3px solid ${props => props.theme.colors.primaryLight};
+ background-color: ${props => props.theme.colors.coretechBackground};
+ box-shadow:
+ -2px 6px 20px 2px ${props => props.theme.colors.coretechShadow1},
+ inset 0 0 17px 6px ${props => props.theme.colors.coretechShadow2};
+ margin-bottom: 50px;
+
+ :last-child {
+ margin-bottom: 0;
+ }
+
+ ${props => props.theme.breakpoint.medium} {
+ flex-direction: column;
+ margin-bottom: 150px;
+ padding: 25px;
+ }
+`;
+
+export const TextCtn = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ z-index: 5;
+
+ ${props => props.theme.breakpoint.medium} {
+ width: 100%;
+ }
+
+ h3 {
+ margin-bottom: 16px;
+ }
+
+ p {
+ font-size: 16px;
+ :last-child {
+ margin-bottom: 0;
+ }
+ }
+`;
+
+export const ImageCtn = styled.div`
+ width: 300px;
+ position: relative;
+ height: 300px;
+ margin-left: 50px;
+
+ ${props => props.theme.breakpoint.medium} {
+ width: 100%;
+ position: relative;
+ height: auto;
+ transform: none;
+ margin-top: 30px;
+ margin-left: 0;
+ }
+
+ img {
+ object-fit: contain;
+ }
+`;