chore: final copy lookover

This commit is contained in:
Andre Neves
2021-08-09 18:49:45 -04:00
parent 5c56b38b74
commit 99935ebf0b
5 changed files with 115 additions and 41 deletions

View File

@@ -145,44 +145,80 @@ const BenefitsIntro = styled.p`
`} `}
`; `;
const CTAWrapper = styled.div`
display: flex;
flex-direction: column;
margin: 0 auto 10px auto;
${media.tablet`
margin: 40px auto 0 auto;
flex-direction: row;
`}
`;
const CTAPrimary = styled.a`
color: #fff;
height: 2.81rem;
cursor: pointer;
padding: 0;
width: 260px;
text-align: center;
margin: 0 0 10px 0;
border-radius: 7px;
line-height: 2.8rem;
text-decoration: none;
background-color: #0070f3;
box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%);
&:hover {
background: rgba(0,118,255,0.9);
box-shadow: 0 6px 20px rgb(0 118 255 / 23%);
}
${media.tablet`
margin: 0 15px 0 0;
`}
`;
const BENEFITS = [ const BENEFITS = [
{ {
title: 'No QR codes', title: 'Skip QR codes',
description: () => <>Gone are the days that you needed to send your friend a Bitcoin Lightning invoice QR in order to receive a payment. Now you can just tell them to <b>pay me at user@domain.com</b> and be done with it.</>, description: () => <>Gone are the days that you needed to send your friend a Lightning invoice QR code in order to receive a payment. Now you can just text them to <b>"pay me at user@domain.com"</b> and go about your day.</>,
image: '/images/qrcode.svg' image: '/images/qrcode.svg'
}, },
{ {
title: 'Dynamic properties', title: 'Attach Comments',
description: 'With Lightning Addresses you are able enjoy payments of any kind, any amount, with or without messages. These underlying properties can change, but your Address always stays the same. A true internet payment identifier.', description: 'Payments to your Lightning Address can also contain attached messages. Whether it is a donation message, a comment from a fan, or a friend\'s joke, messages always improve the experience.',
image: '/images/bitcoin1.svg'
},
{
title: 'Messaging support',
description: 'Lightning Addresses are primarily payment identifiers, but depending on your provider they also accept comments attached to those payments. Programmable money is now as simple to transfer as programmable data.',
image: '/images/comments.svg' image: '/images/comments.svg'
}, },
{ {
title: 'Cross-provider support', title: 'Open All Networks',
description: 'Remove the boundaries that exist between service providers. Send money from provider A to provider B to your self-hosted C without hassle. Your Lightning Address is your global boundless payment identifier.', description: 'You can finally send money to that friend who uses that other app. From Service A to App B to User C to Platform D, Lightning Addresses set your money free -- a global boundless payment identifier for anyone and everyone.',
image: '/images/data.svg' image: '/images/data.svg'
}, },
{ {
title: 'Interoperable', title: 'Set Custom Properties',
description: 'Lightning Address builds upon the LNURL Protocol which is widely adopted in Lightning-enabled services. The aim of LNURL is to improve user-experience around Lightning payments between apps and services.', description: 'Enjoy payments from anyone anywhere, for any amount, with or without attached comments. Set minimums-&-maximums, images, and descriptions. Properties can change, but your Lightning Address stays the same.',
image: '/images/bitcoin3.svg' image: '/images/bitcoin1.svg'
}, },
{ {
title: 'User Experience', title: 'Familiar Experience',
description: 'Everyone is used to sending emails these days. Now those same addresses can technically be used for payments. Lightning Addresses provide a familiar user experience allowing virtually anyone to join and participate.', description: 'Like an email address but for your email! You can now have the exact same flow to send money as you have when sending an email message to a friend. A familiar user experience allowing everyone to participate.',
image: '/images/bitcoin2.svg' image: '/images/bitcoin2.svg'
}, },
{
title: 'Be Interoperable',
description: 'Lightning Address builds upon the LNURL Protocol which is widely adopted in Bitcoin Lightning-enabled services. The aim of LNURL is to improve user-experience around payments between apps and services.',
image: '/images/bitcoin3.svg'
},
]; ];
export const Benefits = () => ( export const Benefits = () => (
<BenefitsModule> <BenefitsModule>
<BenefitsIntro>Users</BenefitsIntro> <BenefitsIntro>Users & Enthusiasts</BenefitsIntro>
<BenefitsTitle>Why do I need a Lightning Address?</BenefitsTitle> <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> <BenefitsDescription>The Lightning Address makes it simple to send and receive money over the Bitcoin Lightning Network. No more scanning of QR codes, no more sharing of payment requests. <br />Send money like you send emails -- instantly and abundantly.</BenefitsDescription>
<BenefitsCardGrid> <BenefitsCardGrid>
{(BENEFITS || []).map((benefit) => ( {(BENEFITS || []).map((benefit) => (
<BenefitsCard key={benefit.title}> <BenefitsCard key={benefit.title}>
@@ -200,5 +236,8 @@ export const Benefits = () => (
</BenefitsCard> </BenefitsCard>
))} ))}
</BenefitsCardGrid> </BenefitsCardGrid>
<CTAWrapper>
<CTAPrimary href="#providers">Get My Lightning Address</CTAPrimary>
</CTAWrapper>
</BenefitsModule> </BenefitsModule>
) )

View File

@@ -103,17 +103,14 @@ const LoopedTextPart = styled.span`
`; `;
const Link = styled.a` const Link = styled.a`
color: #000; color: #666666;
padding: 4px; font-weight: 400;
font-weight: 600;
text-decoration: none; text-decoration: none;
letter-spacing: -0.5px; letter-spacing: -0.5px;
&:hover { &:hover {
color: #0070f3; color: #0070f3;
border-radius: 7px;
border-color: transparent; border-color: transparent;
background: rgba(0,118,255,0.1);
} }
`; `;
@@ -241,10 +238,10 @@ export class Hero extends PureComponent {
</Fade> </Fade>
<Fade bottom when={showLightningAddr}> <Fade bottom when={showLightningAddr}>
<Description> <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. <Bold>It's like an email address, but for your money</Bold>. <Bold>Like an email address, but for your money!</Bold> An <Link href={URL_INTERNET_IDENTIFIER}>Internet Identifier</Link> that lets anyone send you Bitcoin instantly over the Lightning Network. No scanning QR codes or pasting invoices.
</Description> </Description>
<LoopWrapper> <LoopWrapper>
<FixedTextPart>satoshi@</FixedTextPart> <FixedTextPart>you@</FixedTextPart>
<TextLoop interval={2000} delay={1600}> <TextLoop interval={2000} delay={1600}>
<LoopedTextPart>zbd.gg</LoopedTextPart> <LoopedTextPart>zbd.gg</LoopedTextPart>
<LoopedTextPart>lntxbot.com</LoopedTextPart> <LoopedTextPart>lntxbot.com</LoopedTextPart>

View File

@@ -147,25 +147,24 @@ const PathsIntro = styled.p`
const IMPLEMENTATIONS = [ const IMPLEMENTATIONS = [
{ {
title: 'Service Provider', title: 'Apps & Services',
description: 'Create an account with one of the supported providers to get started immediately. Like your preferred email service, the provider handles all of the nuts-and-bolts behinds the scenes and is the easiest way to get started with your Lightning Address.', description: 'Create an account with one of the apps that support Lightning Address and get started immediately. Just like how Gmail is your email server, the app handles all of the payment infrastructure and is the easiest way to get a Lightning Address.',
image: '/images/data4.svg', image: '/images/data4.svg',
linkText: 'Get Started', linkText: 'Get Started',
link: '#providers', link: '#providers',
isSecondary: false isSecondary: false
}, },
{ {
title: 'Bridge Server', title: 'Bridge Servers',
description: 'If you already run a Lightning Network node and want a quick plug-n-play solution to getting your Lightning Address, this option is for you. Simply point some DNS settings to the Bridge Server, and you will be setup in minutes.', description: 'If you already run a Bitcoin Lightning Network node and want a quick plug-n-play solution to getting your Lightning Address, this option is for you. Simply point some domain DNS settings to the Bridge Server, and you will be setup in minutes.',
image: '/images/data3.svg', image: '/images/data3.svg',
linkText: 'Quick Setup', linkText: 'Quick Setup',
link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md', link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md',
isSecondary: true isSecondary: true
}, },
{ {
title: 'Do-It-Yourself', title: 'Self-Hosted',
description: 'You can do everything on your own. This is just a set of simple protocol instructions. Whether you are a service provider looking to support Lightning Addresses or a user that wants to host your own setup, Lightning Addresses for you.', description: 'Lightning Address is just a set of simple protocol instructions, you can roll everything on your own. Whether you are a service provider looking to support Lightning Addresses or a user that wants to host your own setup, this option is for you.',
description: 'You can do everything on your own. This is just a set of simple protocol instructions. Whether you are a service provider looking to support Lightning Addresses or a user that wants to host your own setup, Lightning Addresses for you.',
image: '/images/data2.svg', image: '/images/data2.svg',
linkText: 'Read More', linkText: 'Read More',
link: 'https://google.com', link: 'https://google.com',
@@ -175,9 +174,9 @@ const IMPLEMENTATIONS = [
export const Paths = () => ( export const Paths = () => (
<PathsModule> <PathsModule>
<PathsIntro>Developers</PathsIntro> <PathsIntro>Developers & Shadowy Coders</PathsIntro>
<PathsTitle>How do I get my Lightning Address?</PathsTitle> <PathsTitle>How do Lightning Addresses work?</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> <PathsDescription>You can choose to sign up for a service just like an email server (Gmail or Outlook), which will take care of all the payments behind-the-scenes for you. You can roll your own server that handles the connection between your Lightning Address and your Lightning node. Or you can rely on a `Bridge` server that provides an easy plug-n-play solution.</PathsDescription>
<PathsCardGrid> <PathsCardGrid>
{(IMPLEMENTATIONS || []).map((benefit) => ( {(IMPLEMENTATIONS || []).map((benefit) => (
<PathsCard key={benefit.title}> <PathsCard key={benefit.title}>

View File

@@ -135,6 +135,14 @@ const ProvidersEmailButtonText = styled.div`
color: #696969; color: #696969;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 1.2;
padding-top: 5px;
padding-left: 10px;
${media.tablet`
padding-top: 0;
padding-left: 0;
`}
`; `;
const ProviderCard = styled.div` const ProviderCard = styled.div`
@@ -194,28 +202,59 @@ const Bold = styled.span`
letter-spacing: -0.5px; letter-spacing: -0.5px;
`; `;
const ImageWrapper = styled.div`
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex: 1;
${media.tablet`
padding-right: 15px;
`}
`;
const DomainURL = styled.div`
padding-top: 2px;
font-size: 10px;
letter-spacing: 0.5px;
color: #a5a5a5;
`;
export const Providers = () => ( export const Providers = () => (
<ProvidersModule id="providers"> <ProvidersModule id="providers">
<ProvidersInner> <ProvidersInner>
<ProvidersLeft> <ProvidersLeft>
<ProvidersTitle>Get a Lightning Address now!</ProvidersTitle> <ProvidersTitle>Get a Lightning Address now!</ProvidersTitle>
<ProvidersDescription> <ProvidersDescription>
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. Start receiving payments to <Bold>you@address.com</Bold> now. Choose from one of the apps and services that already support Lightning Address below and you'll be set up in seconds.
</ProvidersDescription> </ProvidersDescription>
<ProviderCard> <ProviderCard>
<ZEBEDEEImage src={'/images/zebedee.svg'} alt="ZEBEDEE" style={{ marginLeft: '10px' }} /> <ImageWrapper>
<ZEBEDEEImage src={'/images/zebedee.svg'} alt="ZEBEDEE" style={{ marginTop: '10px', marginBottom: '3px' }} />
<DomainURL>you@zbd.gg</DomainURL>
</ImageWrapper>
<ProviderSignUpButton target="_blank" href="https://zebedee.io/wallet">Download App</ProviderSignUpButton> <ProviderSignUpButton target="_blank" href="https://zebedee.io/wallet">Download App</ProviderSignUpButton>
</ProviderCard> </ProviderCard>
<ProviderCard> <ProviderCard>
<ZEBEDEEImage src={'/images/lntxbot.png'} alt="LNTXBot" style={{ marginLeft: '15px' }} /> <ImageWrapper>
<ZEBEDEEImage src={'/images/lntxbot.png'} alt="LNTXBot" style={{ marginBottom: '-5px' }} />
<DomainURL>you@lntxbot.com</DomainURL>
</ImageWrapper>
<ProviderSignUpButton target="_blank" href="http://lntxbot.fiatjaf.com/">Open Telegram</ProviderSignUpButton> <ProviderSignUpButton target="_blank" href="http://lntxbot.fiatjaf.com/">Open Telegram</ProviderSignUpButton>
</ProviderCard> </ProviderCard>
<ProviderCard> <ProviderCard>
<ZEBEDEEImage src={'/images/lnbits.png'} alt="LNBits" /> <ImageWrapper>
<ZEBEDEEImage src={'/images/lnbits.png'} alt="LNBits" style={{ marginTop: '-5px', marginBottom: '-15px' }} />
<DomainURL>you@lnbits.com</DomainURL>
</ImageWrapper>
<ProviderSignUpButton target="_blank" href="https://lnbits.com">Create Account</ProviderSignUpButton> <ProviderSignUpButton target="_blank" href="https://lnbits.com">Create Account</ProviderSignUpButton>
</ProviderCard> </ProviderCard>
<ProviderCard> <ProviderCard>
<ZEBEDEEImage src={'/images/coinos.png'} alt="coinos" /> <ImageWrapper>
<ZEBEDEEImage src={'/images/coinos.png'} alt="coinos" style={{ marginBottom: '-8px' }} />
<DomainURL>you@coinos.io</DomainURL>
</ImageWrapper>
<ProviderSignUpButton target="_blank" href="https://coinos.io">Sign Up</ProviderSignUpButton> <ProviderSignUpButton target="_blank" href="https://coinos.io">Sign Up</ProviderSignUpButton>
</ProviderCard> </ProviderCard>
</ProvidersLeft> </ProvidersLeft>

View File

@@ -32,7 +32,7 @@ export default function Home() {
/> />
<meta <meta
property="og:description" property="og:description"
content="An Internet Identifier 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." content="Like an email address, but for your money. An Internet Identifier that allows anyone to send you Bitcoin instantly over the Lightning Network. No scanning QR codes or pasting invoices."
/> />
<meta <meta
property="og:image" property="og:image"