aljaz/lightning-address
1
0
Fork 0
mirror of https://github.com/aljazceru/lightning-address.git synced 2025-12-17 05:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: reworking copy and design

Browse Source
This commit is contained in:
Andre Neves
2021-08-07 12:59:52 -04:00
parent a7deb83d36
commit 5c56b38b74
4 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/benefits.js
View File

@@ -130,7 +130,7 @@ const BenefitsCardDescription = styled.div`
`;
const BenefitsIntro = styled.p`
color: #0070f3;
color: #26a717;
font-size: 14px;
line-height: 1.6;
max-width: 900px;
@@ -138,7 +138,7 @@ const BenefitsIntro = styled.p`
padding: 8px 12px;
border-radius: 7px;
margin: 0 auto 20px auto;
background: rgba(0,118,255,0.1);
background: rgba(10,117,14,0.12);
${media.tablet`
font-size: 18px;
@@ -180,7 +180,7 @@ const BENEFITS = [
export const Benefits = () => (
<BenefitsModule>
<BenefitsIntro>Features</BenefitsIntro>
<BenefitsIntro>Users</BenefitsIntro>
<BenefitsTitle>Why do I need a Lightning Address?</BenefitsTitle>
<BenefitsDescription>Lightning Addresses dramatically simplify the experience of sending and receiving money over the Lightning Network. No more QR codes scanning. No more sharing of invoices. It even allows for payments to be easily performed across different service providers.</BenefitsDescription>
<BenefitsCardGrid>

18
components/hero.js
View File

@@ -131,7 +131,8 @@ const CTAPrimary = styled.a`
color: #fff;
height: 2.81rem;
cursor: pointer;
padding: 0 3.5rem;
padding: 0;
width: 260px;
text-align: center;
margin: 0 0 10px 0;
border-radius: 7px;
@@ -155,7 +156,9 @@ const CTASecondary = styled.a`
cursor: pointer;
height: 2.81rem;
background: #fff;
padding: 0 3.5rem;
width: 260px;
text-align: center;
padding: 0;
margin: 10px 0 0 0;
text-decoration: none;
line-height: 2.8rem;
@@ -201,6 +204,11 @@ const LicenseLink = styled.a`
}
`;
const Bold = styled.span`
font-weight: 600;
letter-spacing: -0.5px;
`;
export class Hero extends PureComponent {
state = {
showCTAs: false,
@@ -233,7 +241,7 @@ export class Hero extends PureComponent {
</Fade>
<Fade bottom when={showLightningAddr}>
<Description>
An <Link href={URL_INTERNET_IDENTIFIER}>Internet Identifier</Link> that allows anyone to send you Bitcoin over the Lightning Network. No scanning QR codes or pasting invoices. Like an email address, but for money.
An <Link href={URL_INTERNET_IDENTIFIER}>Internet Identifier</Link> that allows anyone to send you Bitcoin over the Lightning Network. No scanning QR codes or pasting invoices. <Bold>It's like an email address, but for your money</Bold>.
</Description>
<LoopWrapper>
<FixedTextPart>satoshi@</FixedTextPart>
@@ -249,8 +257,8 @@ export class Hero extends PureComponent {
</Fade>
<Fade bottom when={showCTAs}>
<CTAWrapper>
<CTAPrimary href="#providers">Get Started</CTAPrimary>
<CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Documentation</CTASecondary>
<CTAPrimary href="#providers">Get My Lightning Address</CTAPrimary>
<CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Read Documentation</CTASecondary>
</CTAWrapper>
<LicenseWrapper>
<LicenseText>License: MIT</LicenseText>

6
components/paths.js
View File

@@ -130,7 +130,7 @@ const PathsCardButton = styled.a`
`;
const PathsIntro = styled.p`
color: #0070f3;
color: #f38800;
font-size: 14px;
line-height: 1.6;
max-width: 900px;
@@ -138,7 +138,7 @@ const PathsIntro = styled.p`
padding: 8px 12px;
border-radius: 7px;
margin: 0 auto 20px auto;
background: rgba(0,118,255,0.1);
background: rgba(255,97,0,0.1);
${media.tablet`
font-size: 18px;
@@ -175,7 +175,7 @@ const IMPLEMENTATIONS = [
export const Paths = () => (
<PathsModule>
<PathsIntro>Getting Started</PathsIntro>
<PathsIntro>Developers</PathsIntro>
<PathsTitle>How do I get my Lightning Address?</PathsTitle>
<PathsDescription>You have a few options in order to obtain your Lightning Address. You can choose to sign up for a service provider (just like an email server e.g. Gmail or Outlook) that will take care of all the complexities for you. You can roll your own setup/server that handles requests to/from your Lightning Network node (DIY). Or you can rely on a `Bridge` server that provides an easy plug-n-play solution if you already have a Lightning node.</PathsDescription>
<PathsCardGrid>

18
components/providers.js
View File

@@ -189,13 +189,18 @@ const ZEBEDEEImage = styled.img`
align-self: center;
`;
const Bold = styled.span`
font-weight: 600;
letter-spacing: -0.5px;
`;
export const Providers = () => (
<ProvidersModule id="providers">
<ProvidersInner>
<ProvidersLeft>
<ProvidersTitle>Supporting Providers</ProvidersTitle>
<ProvidersTitle>Get a Lightning Address now!</ProvidersTitle>
<ProvidersDescription>
Below is a list of the Bitcoin Lightning Network providers supporting Lightning Addresses. To get started and claim your Lightning Address now, create an account in on of the options below.
To get your own Lightning Address and start sending and receiving payments to <Bold>user@address.com</Bold>, choose from one of the options below.
</ProvidersDescription>
<ProviderCard>
<ZEBEDEEImage src={'/images/zebedee.svg'} alt="ZEBEDEE" style={{ marginLeft: '10px' }} />
@@ -216,11 +221,14 @@ export const Providers = () => (
</ProvidersLeft>
<ProvidersRight>
<ProvidersRightInner>
<ProvidersTitle>My favorite app doesn't support Lightning Address yet. What can I do?</ProvidersTitle>
<ProvidersTitle>Your app doesn't support Lightning Addresses yet?</ProvidersTitle>
<ProvidersDescriptionSmall>
The best thing to do is to get in touch with the developer company and ask them to learn about Lightning Addresses and implement support for it. To make it easier, we created an email template you can send to your favorite provider.
If your favorite Bitcoin app doesn't yet support Lightning Address, get in touch with the developer company and ask them to learn about how the protocol can help their users.
<br />
<br />
To make things easier, we created an email template you can send with just a click.
</ProvidersDescriptionSmall>
<ProvidersEmailButton onClick={() => window.open(`mailto:provider@example.com?subject=Support Lightning Address&body=Hey, why don't you support Lightning Address yet? Check it at lightningaddress.com`)}>
<ProvidersEmailButton onClick={() => window.open(`mailto:ENTER_DEVELOPER_EMAIL_HERE?subject=Introducing Lightning Address&body=Hi there,\n\n I just learnt about the Lightning Address protocol and how awesome it is for sending and receiving payments over the Bitcoin Lightning Network. I was hoping you would take a look at the lightningaddress.com website and possibly implement support for it? \n\n Lightning Addresses provide a familiar user experience with sending Lightning payments to other people online, similar to sending an email address. No more QR codes or invoices / addresses. "Just pay me at satoshi@website.com"\n\n Cheers!`)}>
<ProvidersEmailButtonImage src={'/images/email.svg'} alt='Email' />
<ProvidersEmailButtonText>Send Email</ProvidersEmailButtonText>
</ProvidersEmailButton>