mirror of
https://github.com/aljazceru/lightning-address.git
synced 2025-12-17 05:14:22 +01:00
chore: readme and docs
feature: responsiveness
This commit is contained in:
Andre Neves
27
DIY.md
27
DIY.md
@@ -7,15 +7,19 @@ Looking to add support for Lightning Addresses to your service or wallet? Want t
|
|||||||
|
|
||||||
## General
|
## General
|
||||||
|
|
||||||
This document outlines the overall path to serving your own HTTP server with support for LNURL Pay + Internet Identifier protocols.
|
This document outlines the overall path to serving your own HTTP server with support for LNURL Pay + Internet Identifier protocols. At its core, Lightning Addresses are divided into two parts: `sending` and `receiving`. A wallet can support `sending` to Lightning Addresses without needing to support `receiving`. Any provider that supports `receiving` will likely also support `sending` for its users.
|
||||||
|
|
||||||
## LNURL Protocol
|
### Sending
|
||||||
|
|
||||||
[LNURL](https://github.com/fiatjaf/lnurl-rfc) is a UX protocol built for the Lightning Network that aims to facilitate the sending, receiving, and handling of Lightning invoices from wallets to services (and vice versa).
|
Sending to a Lightning Address is essentially just doing some string transformations and making a GET request to retrieve a LNURL Pay callback payload. Below is a diagram explaining it:
|
||||||
|
|
||||||
[LNURL](https://github.com/fiatjaf/lnurl-rfc) is comprised of many sub-protocols, each with their own required, and optional, properties and features. Please refer to the [LNURL RFC documentation](https://github.com/fiatjaf/lnurl-rfc) for more details on how LNURL works. Specifically for the Lightning Address protocol, we are relying on the Internet Identifier metadata optional feature of the LNURL Pay sub-protocol.
|
|
||||||
|
|
||||||
In order to support Lightning Addresses on your own infrastructure/domain setup, you will need a handful of things:
|
After receiving the LNURL Pay payload, the rest of the flow is the exact same as the LNURL Pay flow, there's virtually no difference. Again, Lightning Addresses are essentially another way of sharing how a user can obtain another user's LNURL Pay details.
|
||||||
|
|
||||||
|
### Receiving
|
||||||
|
|
||||||
|
In order to support receiving to a Lightning Address on your own infrastructure/domain setup, you will need a handful of things outlined below.
|
||||||
|
|
||||||
* HTTP Server
|
* HTTP Server
|
||||||
* [LNURL Pay support](https://github.com/fiatjaf/lnurl-rfc/blob/master/lnurl-pay.md)
|
* [LNURL Pay support](https://github.com/fiatjaf/lnurl-rfc/blob/master/lnurl-pay.md)
|
||||||
@@ -25,11 +29,20 @@ In order to support Lightning Addresses on your own infrastructure/domain setup,
|
|||||||
* Used to create BOLT11 invoices for LNURL Pay flow
|
* Used to create BOLT11 invoices for LNURL Pay flow
|
||||||
* Domain
|
* Domain
|
||||||
|
|
||||||
## Internet Identifier
|
You will essentially need a RESTful HTTP API server that will handle GET requests and return the proper payload outlined in the LNURL Pay specification.
|
||||||
|
|
||||||
|
#### Internet Identifier
|
||||||
|
|
||||||
The Lightning Address is nothing more than another [Internet Identifier](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1), it should look identical to an email address. For more details on how to set up the Internet Identifier metadata check [here](https://github.com/fiatjaf/lnurl-rfc/blob/luds/16.md).
|
The Lightning Address is nothing more than another [Internet Identifier](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1), it should look identical to an email address. For more details on how to set up the Internet Identifier metadata check [here](https://github.com/fiatjaf/lnurl-rfc/blob/luds/16.md).
|
||||||
|
|
||||||
## Comments
|
#### Comments
|
||||||
|
|
||||||
In order to accept messages/comments alongside payments to your Lightning Address, you will have to support the optional `comment` feature outlined [here](https://github.com/fiatjaf/lnurl-rfc/blob/luds/12.md).
|
In order to accept messages/comments alongside payments to your Lightning Address, you will have to support the optional `comment` feature outlined [here](https://github.com/fiatjaf/lnurl-rfc/blob/luds/12.md).
|
||||||
|
|
||||||
|
## LNURL Protocol
|
||||||
|
|
||||||
|
[LNURL](https://github.com/fiatjaf/lnurl-rfc) is a UX protocol built for the Lightning Network that aims to facilitate the sending, receiving, and handling of Lightning invoices from wallets to services (and vice versa).
|
||||||
|
|
||||||
|
[LNURL](https://github.com/fiatjaf/lnurl-rfc) is comprised of many sub-protocols, each with their own required, and optional, properties and features. Please refer to the [LNURL RFC documentation](https://github.com/fiatjaf/lnurl-rfc) for more details on how LNURL works. Specifically for the Lightning Address protocol, we are relying on the Internet Identifier metadata optional feature of the LNURL Pay sub-protocol.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
10
README.md
10
README.md
@@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
The Lightning Address is an [Internet Identifier](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1) that allows anyone to send you Bitcoin over the Lightning Network. No scanning of QR codes or pasting invoices necessary.
|
The Lightning Address is an [Internet Identifier](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1) that allows anyone to send you Bitcoin over the Lightning Network. No scanning of QR codes or pasting invoices necessary.
|
||||||
|
|
||||||
|
|
||||||
For more information check out the website: [lightningaddress.com](https://lightningaddress.com)
|
For more information check out the website: [lightningaddress.com](https://lightningaddress.com)
|
||||||
|
|
||||||
## Developers
|
## Developers
|
||||||
@@ -17,7 +16,7 @@ If you are a developer aiming to introduce support for Lightning Addresses in yo
|
|||||||
|
|
||||||
## Bridge Server
|
## Bridge Server
|
||||||
|
|
||||||
If you don't want to roll out an entire HTTP server on your own setup/infrastructure, but already have a Lightning node you want to use for your Lightning Address? Check the [Bridge Server](./BRIDGE.md) for a plug-n-play solution.
|
If you don't want to roll out an entire HTTP / LNURL server on your own setup/infrastructure, but already have a Lightning node you want to use for your Lightning Address? Check the [Bridge Server](./BRIDGE.md) for a plug-n-play solution.
|
||||||
|
|
||||||
## TLDR
|
## TLDR
|
||||||
|
|
||||||
@@ -31,14 +30,13 @@ Contributions are welcome, for both the lightningaddress.com website as well as
|
|||||||
|
|
||||||
## Donations
|
## Donations
|
||||||
|
|
||||||
If this project is important to you, consider donating for the contributors, creators, and developers pushing this initiative forward.
|
If this project is important to you, consider donating to the contributors, creators, and developers pushing this initiative forward.
|
||||||
|
|
||||||
|
|
||||||
**Lightning Address:** lnaddress@zbd.gg
|
**Lightning Address:** lnaddress@zbd.gg
|
||||||
|
|
||||||
**LNURL Pay Code:** `lnurl1dp68gurn8ghj7ctsdyh85etzv4jx2efwd9hj7a3s9aex2ut4v4ehgttnw3shg6tr943ksctjvajhxtmyxpnrycenv3sj6efcxvmz6dpcxpsj6cnx8p3j6e34vs6kyvfkxajrve3c3svx0h`
|
**LNURL Pay Code:** `lnurl1dp68gurn8ghj7ctsdyh85etzv4jx2efwd9hj7a3s9aex2ut4v4ehgttnw3shg6tr943ksctjvajhxteevy6rgd3jx9jz6vpkxc6j6dp5v43z6wfkv9nz6efsxc6nxdpnxyckyef4xl00sk`
|
||||||
|
|
||||||
**QR Code:**
|
**QR Code:**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
204
components/benefits.js
Normal file
204
components/benefits.js
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { media } from '../utils';
|
||||||
|
|
||||||
|
const BenefitsModule = styled.div`
|
||||||
|
display: flex;
|
||||||
|
background: #fafafa;
|
||||||
|
align-items: center;
|
||||||
|
padding: 60px 0 60px 0;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
min-height: 700px;
|
||||||
|
padding: 120px 0 120px 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsTitle = styled.div`
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 0 30px;
|
||||||
|
max-width: 500px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.3;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
font-size: 44px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsDescription = styled.div`
|
||||||
|
color: #666666;
|
||||||
|
padding: 0 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
max-width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
`}
|
||||||
|
|
||||||
|
${media.largeTablet`
|
||||||
|
padding: 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsCardGrid = styled.div`
|
||||||
|
display: flex;
|
||||||
|
padding: 40px 0;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
${media.largeTablet`
|
||||||
|
display: grid;
|
||||||
|
grid-row-gap: 10px;
|
||||||
|
padding: 50px 0 0 0;
|
||||||
|
grid-column-gap: 20px;
|
||||||
|
grid-template-rows: 2fr;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsCard = styled.div`
|
||||||
|
width: 70%;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
min-height: 300px;
|
||||||
|
border-radius: 7px;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
transition: box-shadow .2s ease;
|
||||||
|
|
||||||
|
${media.largeTablet`
|
||||||
|
width: 250px;
|
||||||
|
`}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
transition: box-shadow .2s ease;
|
||||||
|
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsCardTitle = styled.div`
|
||||||
|
color: #111;
|
||||||
|
margin: 12px 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.125em;
|
||||||
|
|
||||||
|
${media.largeTablet`
|
||||||
|
width: 250px;
|
||||||
|
text-align: center;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsCardImage = styled.img`
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
max-width: 50%;
|
||||||
|
`}
|
||||||
|
|
||||||
|
${media.largeTablet`
|
||||||
|
max-width: 100%;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsCardDescription = styled.div`
|
||||||
|
color: #111;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0 10px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BenefitsIntro = styled.p`
|
||||||
|
color: #0070f3;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 900px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 0 auto 20px auto;
|
||||||
|
background: rgba(0,118,255,0.1);
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 18px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BENEFITS = [
|
||||||
|
{
|
||||||
|
title: 'No 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.</>,
|
||||||
|
image: '/images/qrcode.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dynamic properties',
|
||||||
|
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.',
|
||||||
|
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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Cross-provider support',
|
||||||
|
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.',
|
||||||
|
image: '/images/data.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Interoperable',
|
||||||
|
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.',
|
||||||
|
image: '/images/bitcoin3.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'User 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.',
|
||||||
|
image: '/images/bitcoin2.svg'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Benefits = () => (
|
||||||
|
<BenefitsModule>
|
||||||
|
<BenefitsIntro>Features</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>
|
||||||
|
{(BENEFITS || []).map((benefit) => (
|
||||||
|
<BenefitsCard key={benefit.title}>
|
||||||
|
<BenefitsCardImage src={benefit.image} alt={benefit.title} />
|
||||||
|
<BenefitsCardTitle>
|
||||||
|
{benefit.title}
|
||||||
|
</BenefitsCardTitle>
|
||||||
|
<BenefitsCardDescription>
|
||||||
|
{(typeof benefit.description === 'string') ? (
|
||||||
|
benefit.description
|
||||||
|
) : (
|
||||||
|
benefit.description()
|
||||||
|
)}
|
||||||
|
</BenefitsCardDescription>
|
||||||
|
</BenefitsCard>
|
||||||
|
))}
|
||||||
|
</BenefitsCardGrid>
|
||||||
|
</BenefitsModule>
|
||||||
|
)
|
||||||
173
components/footer.js
Normal file
173
components/footer.js
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import QRCode from 'react-qr-code';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { URL_INTERNET_IDENTIFIER } from '../constants';
|
||||||
|
import { media } from '../utils';
|
||||||
|
|
||||||
|
const DONATION_QR_CODE = 'lnurl1dp68gurn8ghj7ctsdyh85etzv4jx2efwd9hj7a3s9aex2ut4v4ehgttnw3shg6tr943ksctjvajhxtmyxpnrycenv3sj6efcxvmz6dpcxpsj6cnx8p3j6e34vs6kyvfkxajrve3c3svx0h';
|
||||||
|
|
||||||
|
const FOOTER = [
|
||||||
|
{
|
||||||
|
title: 'Resources',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
link: URL_INTERNET_IDENTIFIER,
|
||||||
|
title: 'Internet Identifier RFC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: 'https://github.com/andrerfneves/lightning-address',
|
||||||
|
title: 'Code Repository'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
|
||||||
|
title: 'Documentation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: 'https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md',
|
||||||
|
title: 'License'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'LNURL Protocol',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
link: 'https://github.com/fiatjaf/lnurl-rfc',
|
||||||
|
title: 'Specification'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: 'https://github.com/fiatjaf/awesome-lnurl#wallets',
|
||||||
|
title: 'Wallets Supported'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: 'https://github.com/fiatjaf/awesome-lnurl',
|
||||||
|
title: 'Awesome LNURL'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Others',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
link: 'https://google.com',
|
||||||
|
title: 'Name here'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InnerWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px 30px 30px 30px;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
max-width: 800px;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 80px 0 100px 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Column = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
width: 200px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ColumnTitle = styled.div`
|
||||||
|
color: #111;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
margin-top: 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ColumnItem = styled.a`
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Bottom = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BottomInner = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BottomLogo = styled.div`
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.75px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BottomMadeBy = styled.div`
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-top: 6px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: right;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BottomQR = styled.div`
|
||||||
|
padding: 8px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Footer = () => (
|
||||||
|
<Wrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
{(FOOTER || []).map(col => (
|
||||||
|
<Column key={col.title}>
|
||||||
|
<ColumnTitle>
|
||||||
|
{col.title}
|
||||||
|
</ColumnTitle>
|
||||||
|
{(col.items || []).map(item => (
|
||||||
|
<ColumnItem key={item.link} href={item.link} target="_blank">
|
||||||
|
{item.title}
|
||||||
|
</ColumnItem>
|
||||||
|
))}
|
||||||
|
</Column>
|
||||||
|
))}
|
||||||
|
<Bottom>
|
||||||
|
<BottomInner>
|
||||||
|
<BottomQR>
|
||||||
|
<QRCode
|
||||||
|
size={100}
|
||||||
|
value={DONATION_QR_CODE}
|
||||||
|
/>
|
||||||
|
</BottomQR>
|
||||||
|
<BottomLogo>The Lightning Address</BottomLogo>
|
||||||
|
<BottomMadeBy>Made with ♥ by Bitcoiners</BottomMadeBy>
|
||||||
|
</BottomInner>
|
||||||
|
</Bottom>
|
||||||
|
</InnerWrapper>
|
||||||
|
</Wrapper>
|
||||||
|
)
|
||||||
227
components/hero.js
Normal file
227
components/hero.js
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
import TextLoop from 'react-text-loop';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { URL_INTERNET_IDENTIFIER } from '../constants';
|
||||||
|
import { media } from '../utils';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
padding: 30px 0;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border: 8px solid ${({ theme }) => theme.colors.primary};
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
min-height: 800px;
|
||||||
|
height: calc(100vh - 16px);
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = styled.h1`
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 40px;
|
||||||
|
max-width: 900px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 84px;
|
||||||
|
max-width: 900px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -4px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Intro = styled.p`
|
||||||
|
color: #0070f3;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 0 auto 20px auto;
|
||||||
|
background: rgba(0,118,255,0.1);
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 18px;
|
||||||
|
max-width: 900px;
|
||||||
|
line-height: 1.6;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Description = styled.p`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 0 30px;
|
||||||
|
max-width: 800px;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LoopWrapper = styled.div`
|
||||||
|
width: 200px;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FixedTextPart = styled.span`
|
||||||
|
font-size: 25px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 40px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LoopedTextPart = styled.span`
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 40px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Link = styled.a`
|
||||||
|
color: #000;
|
||||||
|
padding: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #0070f3;
|
||||||
|
border-radius: 7px;
|
||||||
|
border-color: transparent;
|
||||||
|
background: rgba(0,118,255,0.1);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CTAWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 40px auto 20px auto;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
flex-direction: row;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CTAPrimary = styled.a`
|
||||||
|
color: #fff;
|
||||||
|
height: 2.81rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
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 CTASecondary = styled.a`
|
||||||
|
color: #696969;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 2.81rem;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
border-radius: 7px;
|
||||||
|
box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
|
||||||
|
}
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
margin: 0 0 0 15px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LicenseWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
margin: 20px 0;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LicenseText = styled.div`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 26.4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LicenseLink = styled.a`
|
||||||
|
padding: 8px;
|
||||||
|
color: #0070f3;
|
||||||
|
margin-left: 4px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 7px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #0070f3;
|
||||||
|
background: rgba(0,118,255,0.1);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Hero = () => (
|
||||||
|
<Wrapper>
|
||||||
|
<Intro>Introducing</Intro>
|
||||||
|
<Title>The Lightning Address</Title>
|
||||||
|
<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.
|
||||||
|
</Description>
|
||||||
|
<LoopWrapper>
|
||||||
|
<FixedTextPart>satoshi@</FixedTextPart>
|
||||||
|
<TextLoop interval={2000}>
|
||||||
|
<LoopedTextPart>zbd.gg</LoopedTextPart>
|
||||||
|
<LoopedTextPart>lntxbot.com</LoopedTextPart>
|
||||||
|
<LoopedTextPart>your.domain</LoopedTextPart>
|
||||||
|
<LoopedTextPart>zebedee.io</LoopedTextPart>
|
||||||
|
<LoopedTextPart>coinos.io</LoopedTextPart>
|
||||||
|
</TextLoop>
|
||||||
|
</LoopWrapper>
|
||||||
|
<CTAWrapper>
|
||||||
|
<CTAPrimary href="#providers">Get Started</CTAPrimary>
|
||||||
|
<CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Documentation</CTASecondary>
|
||||||
|
</CTAWrapper>
|
||||||
|
<LicenseWrapper>
|
||||||
|
<LicenseText>License: MIT</LicenseText>
|
||||||
|
<LicenseLink href='https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md' target='_blank'>GitHub</LicenseLink>
|
||||||
|
</LicenseWrapper>
|
||||||
|
</Wrapper>
|
||||||
|
)
|
||||||
198
components/paths.js
Normal file
198
components/paths.js
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { media } from '../utils';
|
||||||
|
|
||||||
|
const PathsModule = styled.div`
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 60px 0 60px 0;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
min-height: 700px;
|
||||||
|
padding: 120px 0 120px 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsTitle = styled.div`
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 0 30px;
|
||||||
|
max-width: 500px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.3;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
font-size: 44px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsDescription = styled.div`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: 0 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
max-width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCardGrid = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
display: grid;
|
||||||
|
grid-row-gap: 10px;
|
||||||
|
grid-column-gap: 20px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCard = styled.div`
|
||||||
|
width: 70%;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
min-height: 300px;
|
||||||
|
border-radius: 7px;
|
||||||
|
align-items: center;
|
||||||
|
background: #f3f3f3;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 30px auto 0 auto;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
transition: box-shadow .2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
transition: box-shadow .2s ease;
|
||||||
|
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
width: 250px;
|
||||||
|
margin: 50px auto 0 auto;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCardTitle = styled.div`
|
||||||
|
color: #111;
|
||||||
|
margin: 12px 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125em;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCardImage = styled.img`
|
||||||
|
max-width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCardDescription = styled.div`
|
||||||
|
color: #111;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsCardButton = styled.a`
|
||||||
|
height: 2.81rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
margin: 25px 0 0 0;
|
||||||
|
border-radius: 7px;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: ${({ isSecondary }) => isSecondary ? '#696969' : '#fff' };
|
||||||
|
background-color: ${({ isSecondary }) => isSecondary ? '#fff' : '#0070f3' };
|
||||||
|
box-shadow: ${({ isSecondary }) => isSecondary ? '0 4px 14px 0 rgb(0 0 0 / 10%)' : '0 4px 14px 0 rgb(0 118 255 / 39%)' };
|
||||||
|
;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${({ isSecondary }) => isSecondary ? 'rgba(255,255,255,0.9)' : 'rgba(0,118,255,0.9)' };
|
||||||
|
box-shadow: ${({ isSecondary }) => isSecondary ? '0 6px 20px rgb(93 93 93 / 23%)' : '0 6px 20px rgb(0 118 255 / 23%)' };
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PathsIntro = styled.p`
|
||||||
|
color: #0070f3;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 900px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 0 auto 20px auto;
|
||||||
|
background: rgba(0,118,255,0.1);
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 18px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const IMPLEMENTATIONS = [
|
||||||
|
{
|
||||||
|
title: 'Service Provider',
|
||||||
|
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.',
|
||||||
|
image: '/images/data4.svg',
|
||||||
|
linkText: 'Get Started',
|
||||||
|
link: 'https://google.com',
|
||||||
|
isSecondary: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bridge Server',
|
||||||
|
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.',
|
||||||
|
image: '/images/data3.svg',
|
||||||
|
linkText: 'Quick Setup',
|
||||||
|
link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md',
|
||||||
|
isSecondary: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Do-It-Yourself',
|
||||||
|
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: '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',
|
||||||
|
linkText: 'Read More',
|
||||||
|
link: 'https://google.com',
|
||||||
|
isSecondary: true
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Paths = () => (
|
||||||
|
<PathsModule>
|
||||||
|
<PathsIntro>Getting Started</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>
|
||||||
|
{(IMPLEMENTATIONS || []).map((benefit) => (
|
||||||
|
<PathsCard key={benefit.title}>
|
||||||
|
<PathsCardImage src={benefit.image} alt={benefit.title} />
|
||||||
|
<PathsCardTitle>
|
||||||
|
{benefit.title}
|
||||||
|
</PathsCardTitle>
|
||||||
|
<PathsCardDescription>
|
||||||
|
{benefit.description}
|
||||||
|
</PathsCardDescription>
|
||||||
|
<PathsCardButton target="_blank" href={benefit.link} isSecondary={benefit.isSecondary}>
|
||||||
|
{benefit.linkText}
|
||||||
|
</PathsCardButton>
|
||||||
|
</PathsCard>
|
||||||
|
))}
|
||||||
|
</PathsCardGrid>
|
||||||
|
</PathsModule>
|
||||||
|
)
|
||||||
224
components/providers.js
Normal file
224
components/providers.js
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { media } from '../utils';
|
||||||
|
|
||||||
|
const ProvidersModule = styled.div`
|
||||||
|
display: flex;
|
||||||
|
background: #fafafa;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 60px 0 60px 0;
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
min-height: 700px;
|
||||||
|
padding: 120px 0 120px 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersInner = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
max-width: 1000px;
|
||||||
|
flex-direction: row;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersLeft = styled.div`
|
||||||
|
padding-bottom: 60px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-right: 10px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersRight = styled.div`
|
||||||
|
${media.tablet`
|
||||||
|
flex: 1;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersRightInner = styled.div`
|
||||||
|
${media.tablet`
|
||||||
|
padding-left: 100px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersTitle = styled.div`
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 0 20px;
|
||||||
|
max-width: 500px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.3;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersDescription = styled.div`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0 30px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
max-width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
margin: 20px auto 40px auto;
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
padding: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersDescriptionSmall = styled(ProvidersDescription)`
|
||||||
|
${media.tablet`
|
||||||
|
font-size: 18px;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersEmailButton = styled.div`
|
||||||
|
width: 65%;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
margin: 15px auto 0 auto;
|
||||||
|
border-radius: 7px;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
|
||||||
|
}
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
width: 270px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersEmailButtonImage = styled.img`
|
||||||
|
max-width: 60%;
|
||||||
|
margin-left: -10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProvidersEmailButtonText = styled.div`
|
||||||
|
flex: 1;
|
||||||
|
color: #696969;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProviderCard = styled.div`
|
||||||
|
margin: 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 16px;
|
||||||
|
min-height: 100px;
|
||||||
|
border-radius: 6px;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0px 30px 60px rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
${media.tablet`
|
||||||
|
width: 425px;
|
||||||
|
height: 42px;
|
||||||
|
margin: 20px 0;
|
||||||
|
min-height: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProviderSignUpButton = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
width: 140px;
|
||||||
|
height: 2.81rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 3.5rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
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`
|
||||||
|
width: 120px;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ZEBEDEEImage = styled.img`
|
||||||
|
width: 130px;
|
||||||
|
align-self: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Providers = () => (
|
||||||
|
<ProvidersModule id="providers">
|
||||||
|
<ProvidersInner>
|
||||||
|
<ProvidersLeft>
|
||||||
|
<ProvidersTitle>Supporting Providers</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.
|
||||||
|
</ProvidersDescription>
|
||||||
|
<ProviderCard>
|
||||||
|
<ZEBEDEEImage src={'/images/zebedee.svg'} alt="ZEBEDEE" style={{ marginLeft: '10px' }} />
|
||||||
|
<ProviderSignUpButton href="https://zebedee.io/wallet">Download App</ProviderSignUpButton>
|
||||||
|
</ProviderCard>
|
||||||
|
<ProviderCard>
|
||||||
|
<ZEBEDEEImage src={'/images/lntxbot.png'} alt="LNTXBot" style={{ marginLeft: '15px' }} />
|
||||||
|
<ProviderSignUpButton href="http://lntxbot.fiatjaf.com/">Open Telegram</ProviderSignUpButton>
|
||||||
|
</ProviderCard>
|
||||||
|
<ProviderCard>
|
||||||
|
<ZEBEDEEImage src={'/images/lnbits.png'} alt="LNBits" />
|
||||||
|
<ProviderSignUpButton href="https://lnbits.com">Create Account</ProviderSignUpButton>
|
||||||
|
</ProviderCard>
|
||||||
|
<ProviderCard>
|
||||||
|
<ZEBEDEEImage src={'/images/coinos.png'} alt="coinos" />
|
||||||
|
<ProviderSignUpButton href="https://coinos.io">Sign Up</ProviderSignUpButton>
|
||||||
|
</ProviderCard>
|
||||||
|
</ProvidersLeft>
|
||||||
|
<ProvidersRight>
|
||||||
|
<ProvidersRightInner>
|
||||||
|
<ProvidersTitle>My favorite app doesn't support Lightning Address yet. What can I do?</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.
|
||||||
|
</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`)}>
|
||||||
|
<ProvidersEmailButtonImage src={'/images/email.svg'} alt='Email' />
|
||||||
|
<ProvidersEmailButtonText>Send Email</ProvidersEmailButtonText>
|
||||||
|
</ProvidersEmailButton>
|
||||||
|
</ProvidersRightInner>
|
||||||
|
</ProvidersRight>
|
||||||
|
</ProvidersInner>
|
||||||
|
</ProvidersModule>
|
||||||
|
)
|
||||||
1
constants.js
Normal file
1
constants.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export const URL_INTERNET_IDENTIFIER = 'https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1';
|
||||||
894
pages/index.js
894
pages/index.js
@@ -1,878 +1,50 @@
|
|||||||
import TextLoop from 'react-text-loop';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import QRCode from "react-qr-code";
|
import Head from 'next/head';
|
||||||
import Head from 'next/head'
|
|
||||||
|
import { Providers } from '../components/providers';
|
||||||
|
import { Benefits } from '../components/benefits';
|
||||||
|
import { Footer } from '../components/footer';
|
||||||
|
import { Paths } from '../components/paths';
|
||||||
|
import { Hero } from '../components/hero';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const HeroWrapper = styled.div`
|
|
||||||
/* flex: 1; */
|
|
||||||
display: flex;
|
|
||||||
height: calc(100vh - 16px);
|
|
||||||
min-height: 800px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
border: 8px solid ${({ theme }) => theme.colors.primary};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HeroTitle = styled.h1`
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 84px;
|
|
||||||
max-width: 900px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -4px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HeroIntro = styled.p`
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
margin: 0 auto 20px auto;
|
|
||||||
max-width: 900px;
|
|
||||||
color: #0070f3;
|
|
||||||
background: rgba(0,118,255,0.1);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsIntro = styled.p`
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
margin: 0 auto 20px auto;
|
|
||||||
max-width: 900px;
|
|
||||||
color: #0070f3;
|
|
||||||
background: rgba(0,118,255,0.1);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsIntro = styled.p`
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
margin: 0 auto 20px auto;
|
|
||||||
max-width: 900px;
|
|
||||||
color: #0070f3;
|
|
||||||
background: rgba(0,118,255,0.1);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HeroDescription = styled.p`
|
|
||||||
color: #666666;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 20px auto 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LoopWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 200px;
|
|
||||||
padding: 8px;
|
|
||||||
margin-top: 30px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FixedTextPart = styled.span`
|
|
||||||
font-size: 40px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LoopedTextPart = styled.span`
|
|
||||||
font-size: 40px;
|
|
||||||
font-weight: 700;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Link = styled.a`
|
|
||||||
color: #000;
|
|
||||||
padding: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #0070f3;
|
|
||||||
border-radius: 7px;
|
|
||||||
border-color: transparent;
|
|
||||||
background: rgba(0,118,255,0.1);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CTAWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 40px auto 20px auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CTAPrimary = styled.div`
|
|
||||||
color: #fff;
|
|
||||||
height: 2.81rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 3.5rem;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
border-radius: 7px;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CTASecondary = styled.a`
|
|
||||||
color: #696969;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 2.81rem;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 3.5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 0 0 0 15px;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
border-radius: 7px;
|
|
||||||
box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255,255,255,0.9);
|
|
||||||
box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LicenseWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
margin: 20px 0;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LicenseText = styled.div`
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 26.4px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LicenseLink = styled.a`
|
|
||||||
padding: 8px;
|
|
||||||
color: #0070f3;
|
|
||||||
margin-left: 4px;
|
|
||||||
font-weight: 400;
|
|
||||||
border-radius: 7px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #0070f3;
|
|
||||||
background: rgba(0,118,255,0.1);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsModule = styled.div`
|
|
||||||
display: flex;
|
|
||||||
min-height: 700px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 120px 0 120px 0;
|
|
||||||
background: #fafafa;
|
|
||||||
border-bottom: 1px solid #eaeaea;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsTitle = styled.div`
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 44px;
|
|
||||||
max-width: 500px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
line-height: 1.3;
|
|
||||||
text-align: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsDescription = styled.div`
|
|
||||||
color: #666666;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 400;
|
|
||||||
max-width: 800px;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
margin: 20px auto 0 auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsCardGrid = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-row-gap: 10px;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-template-rows: 2fr;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
padding: 50px 0 0 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsCard = styled.div`
|
|
||||||
width: 250px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
min-height: 300px;
|
|
||||||
border-radius: 7px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsCardTitle = styled.div`
|
|
||||||
color: #111;
|
|
||||||
margin: 12px 0;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1.125em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsCardImage = styled.img`
|
|
||||||
max-width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BenefitsCardDescription = styled.div`
|
|
||||||
color: #111;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 400;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsModule = styled.div`
|
|
||||||
display: flex;
|
|
||||||
min-height: 700px;
|
|
||||||
background: #fff;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 120px 0 120px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsTitle = styled.div`
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 44px;
|
|
||||||
max-width: 500px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1.3;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsDescription = styled.div`
|
|
||||||
color: #666666;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 400;
|
|
||||||
max-width: 800px;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
margin: 20px auto 0 auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCardGrid = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-row-gap: 10px;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCard = styled.div`
|
|
||||||
width: 250px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 30px;
|
|
||||||
min-height: 300px;
|
|
||||||
border-radius: 7px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #f3f3f3;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCardTitle = styled.div`
|
|
||||||
font-size: 1.125em;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
color: #111;
|
|
||||||
margin: 12px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCardImage = styled.img`
|
|
||||||
max-width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCardDescription = styled.div`
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 400;
|
|
||||||
text-align: center;
|
|
||||||
color: #111;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PathsCardButton = styled.a`
|
|
||||||
color: ${({ isSecondary }) => isSecondary ? '#696969' : '#fff' };
|
|
||||||
background-color: ${({ isSecondary }) => isSecondary ? '#fff' : '#0070f3' };
|
|
||||||
height: 2.81rem;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0 3.5rem;
|
|
||||||
margin: 25px 0 0 0;
|
|
||||||
border-radius: 7px;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
box-shadow: ${({ isSecondary }) => isSecondary ? '0 4px 14px 0 rgb(0 0 0 / 10%)' : '0 4px 14px 0 rgb(0 118 255 / 39%)' };
|
|
||||||
;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: ${({ isSecondary }) => isSecondary ? 'rgba(255,255,255,0.9)' : 'rgba(0,118,255,0.9)' };
|
|
||||||
box-shadow: ${({ isSecondary }) => isSecondary ? '0 6px 20px rgb(93 93 93 / 23%)' : '0 6px 20px rgb(0 118 255 / 23%)' };
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersModule = styled.div`
|
|
||||||
display: flex;
|
|
||||||
min-height: 700px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 120px 0 120px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersInner = styled.div`
|
|
||||||
display: flex;
|
|
||||||
max-width: 1000px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersLeft = styled.div`
|
|
||||||
flex: 1;
|
|
||||||
padding-right: 10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersRight = styled.div`
|
|
||||||
flex: 1;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersRightInner = styled.div`
|
|
||||||
padding-left: 100px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersTitle = styled.div`
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 30px;
|
|
||||||
max-width: 500px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1.3;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
text-align: left;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersDescription = styled.div`
|
|
||||||
color: #666666;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 400;
|
|
||||||
max-width: 800px;
|
|
||||||
text-align: left;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
margin: 20px auto 0 auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersDescriptionSmall = styled(ProvidersDescription)`
|
|
||||||
font-size: 18px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersEmailButton = styled.div`
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 270px;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
margin: 15px 0 0 0;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
border-radius: 7px;
|
|
||||||
box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255,255,255,0.9);
|
|
||||||
box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersEmailButtonImage = styled.img`
|
|
||||||
max-width: 60%;
|
|
||||||
margin-left: -10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersEmailButtonText = styled.div`
|
|
||||||
flex: 1;
|
|
||||||
color: #696969;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCardGrid = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-row-gap: 10px;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCard = styled.div`
|
|
||||||
width: 250px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 30px;
|
|
||||||
min-height: 300px;
|
|
||||||
border-radius: 7px;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #f3f3f3;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
/* border: 1px solid transparent; */
|
|
||||||
transition: box-shadow .2s ease;
|
|
||||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCardTitle = styled.div`
|
|
||||||
font-size: 1.125em;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
color: #111;
|
|
||||||
margin: 12px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCardImage = styled.img`
|
|
||||||
max-width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCardDescription = styled.div`
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 400;
|
|
||||||
text-align: center;
|
|
||||||
color: #111;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProvidersCardLink = styled.div``;
|
|
||||||
|
|
||||||
const ProviderCardZBD = styled.div`
|
|
||||||
padding: 16px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 30px 60px rgb(0 0 0 / 12%);
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 425px;
|
|
||||||
height: 42px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 20px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProviderSignUpButton = styled.div`
|
|
||||||
color: #fff;
|
|
||||||
height: 2.81rem;
|
|
||||||
width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 3.5rem;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
border-radius: 7px;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ZEBEDEEImage = styled.img`
|
|
||||||
width: 120px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Footer = styled.div`
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
border-top: 1px solid #eaeaea;
|
|
||||||
border-bottom: 1px solid #eaeaea;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterInner = styled.div`
|
|
||||||
padding: 80px 0 100px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 800px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterColumn = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 200px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterColumnTitle = styled.div`
|
|
||||||
color: #111;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 22px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterColumnItem = styled.a`
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterBottom = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterBottomInner = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterBottomLogo = styled.div`
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.75px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterBottomMadeBy = styled.div`
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 11px;
|
|
||||||
margin-top: 6px;
|
|
||||||
text-align: right;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterBottomDonationQR = styled.div`
|
|
||||||
padding: 8px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const DONATION_QR_CODE = 'lnurl1dp68gurn8ghj7ctsdyh85etzv4jx2efwd9hj7a3s9aex2ut4v4ehgttnw3shg6tr943ksctjvajhxtmyxpnrycenv3sj6efcxvmz6dpcxpsj6cnx8p3j6e34vs6kyvfkxajrve3c3svx0h';
|
|
||||||
|
|
||||||
const URL_INTERNET_IDENTIFIER = 'https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1';
|
|
||||||
|
|
||||||
const FOOTER = [
|
|
||||||
{
|
|
||||||
title: 'Resources',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
link: URL_INTERNET_IDENTIFIER,
|
|
||||||
title: 'Internet Identifier RFC'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/andrerfneves/lightning-address',
|
|
||||||
title: 'Code Repository'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
|
|
||||||
title: 'Documentation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md',
|
|
||||||
title: 'License'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'LNURL Protocol',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
link: 'https://github.com/fiatjaf/lnurl-rfc',
|
|
||||||
title: 'Specification'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/fiatjaf/awesome-lnurl#wallets',
|
|
||||||
title: 'Wallets Supported'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/fiatjaf/awesome-lnurl',
|
|
||||||
title: 'Awesome LNURL'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Others',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
link: 'https://google.com',
|
|
||||||
title: 'Name here'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const BENEFITS = [
|
|
||||||
{
|
|
||||||
title: 'Skip the QR codes',
|
|
||||||
description: () => <>Gone are the days that you needed to send your friend a Lightning Network invoice in order to receive a payment. Tell them to <b>pay me at user@domain.com</b> and be done with it.</>,
|
|
||||||
image: '/images/qrcode.svg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Dynamic properties',
|
|
||||||
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.',
|
|
||||||
image: '/images/bitcoin1.svg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Messaging support',
|
|
||||||
description: 'Lightning Addresses are primarily payment identifiers, but they also accept comments. Gone are the days that you needed to send your friend a Lightning Network invoice in order to receive a payment. Tell them to `pay me at user@domain.com` and be done with it.',
|
|
||||||
image: '/images/comments.svg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Cross-provider support',
|
|
||||||
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.',
|
|
||||||
image: '/images/data.svg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Interoperable',
|
|
||||||
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 sending of Lightning invoices between apps and services.',
|
|
||||||
image: '/images/bitcoin3.svg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Familiar',
|
|
||||||
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 sending of Lightning invoices between apps and services.',
|
|
||||||
image: '/images/bitcoin2.svg'
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const IMPLEMENTATIONS = [
|
|
||||||
{
|
|
||||||
title: 'Service Provider',
|
|
||||||
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.',
|
|
||||||
image: '/images/data4.svg',
|
|
||||||
linkText: 'Get Started',
|
|
||||||
link: 'https://google.com',
|
|
||||||
isSecondary: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Bridge Server',
|
|
||||||
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.',
|
|
||||||
image: '/images/data3.svg',
|
|
||||||
linkText: 'Quick Setup',
|
|
||||||
link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md',
|
|
||||||
isSecondary: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Do-It-Yourself',
|
|
||||||
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: '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',
|
|
||||||
linkText: 'Read More',
|
|
||||||
link: 'https://google.com',
|
|
||||||
isSecondary: true
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>The Lightning Address</title>
|
<title>The Lightning Address</title>
|
||||||
<meta property="og:title" content="The Lightning Address" />
|
<link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
|
||||||
<meta property="og:type" content="website" />
|
<meta
|
||||||
<meta property="og:url" content="https://lightningaddress.com" />
|
property="og:title"
|
||||||
<meta 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="The Lightning Address"
|
||||||
<meta property="og:image" content="https://i.imgur.com/uwHlWPC.png" />
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:type"
|
||||||
|
content="website"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:url"
|
||||||
|
content="https://lightningaddress.com"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
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."
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://i.imgur.com/uwHlWPC.png"
|
||||||
|
/>
|
||||||
</Head>
|
</Head>
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<HeroWrapper>
|
<Hero />
|
||||||
<HeroIntro>Introducing</HeroIntro>
|
<Benefits />
|
||||||
<HeroTitle>The Lightning Address</HeroTitle>
|
<Paths />
|
||||||
<HeroDescription>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.</HeroDescription>
|
<Providers />
|
||||||
<LoopWrapper>
|
<Footer />
|
||||||
<FixedTextPart>satoshi@</FixedTextPart>
|
|
||||||
<TextLoop interval={2000}>
|
|
||||||
<LoopedTextPart>zbd.gg</LoopedTextPart>
|
|
||||||
<LoopedTextPart>example.com</LoopedTextPart>
|
|
||||||
<LoopedTextPart>lntxbot.com</LoopedTextPart>
|
|
||||||
<LoopedTextPart>your.domain</LoopedTextPart>
|
|
||||||
<LoopedTextPart>zebedee.io</LoopedTextPart>
|
|
||||||
<LoopedTextPart>coinos.io</LoopedTextPart>
|
|
||||||
</TextLoop>
|
|
||||||
</LoopWrapper>
|
|
||||||
<CTAWrapper>
|
|
||||||
<CTAPrimary>Start Exploring</CTAPrimary>
|
|
||||||
<CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Documentation</CTASecondary>
|
|
||||||
</CTAWrapper>
|
|
||||||
<LicenseWrapper>
|
|
||||||
<LicenseText>License: MIT</LicenseText>
|
|
||||||
<LicenseLink href='https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md' target='_blank'>GitHub</LicenseLink>
|
|
||||||
</LicenseWrapper>
|
|
||||||
</HeroWrapper>
|
|
||||||
<BenefitsModule>
|
|
||||||
<BenefitsIntro>Features</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>
|
|
||||||
{(BENEFITS || []).map((benefit) => (
|
|
||||||
<BenefitsCard key={benefit.title}>
|
|
||||||
<BenefitsCardImage src={benefit.image} alt={benefit.title} />
|
|
||||||
<BenefitsCardTitle>
|
|
||||||
{benefit.title}
|
|
||||||
</BenefitsCardTitle>
|
|
||||||
<BenefitsCardDescription>
|
|
||||||
{(typeof benefit.description === 'string') ? (
|
|
||||||
benefit.description
|
|
||||||
) : (
|
|
||||||
benefit.description()
|
|
||||||
)}
|
|
||||||
</BenefitsCardDescription>
|
|
||||||
</BenefitsCard>
|
|
||||||
))}
|
|
||||||
</BenefitsCardGrid>
|
|
||||||
</BenefitsModule>
|
|
||||||
<PathsModule>
|
|
||||||
<PathsIntro>Getting Started</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>
|
|
||||||
{(IMPLEMENTATIONS || []).map((benefit) => (
|
|
||||||
<PathsCard key={benefit.title}>
|
|
||||||
<PathsCardImage src={benefit.image} alt={benefit.title} />
|
|
||||||
<PathsCardTitle>
|
|
||||||
{benefit.title}
|
|
||||||
</PathsCardTitle>
|
|
||||||
<PathsCardDescription>
|
|
||||||
{benefit.description}
|
|
||||||
</PathsCardDescription>
|
|
||||||
<PathsCardButton target="_blank" href={benefit.link} isSecondary={benefit.isSecondary}>
|
|
||||||
{benefit.linkText}
|
|
||||||
</PathsCardButton>
|
|
||||||
</PathsCard>
|
|
||||||
))}
|
|
||||||
</PathsCardGrid>
|
|
||||||
</PathsModule>
|
|
||||||
<ProvidersModule>
|
|
||||||
<ProvidersInner>
|
|
||||||
<ProvidersLeft>
|
|
||||||
<ProvidersTitle>Supporting Providers</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.
|
|
||||||
</ProvidersDescription>
|
|
||||||
<ProviderCardZBD>
|
|
||||||
<ZEBEDEEImage src={'/images/zebedee.svg'} alt="ZEBEDEE" style={{ marginLeft: '10px' }} />
|
|
||||||
<ProviderSignUpButton href="https://zebedee.io/wallet">Download App</ProviderSignUpButton>
|
|
||||||
</ProviderCardZBD>
|
|
||||||
<ProviderCardZBD>
|
|
||||||
<ZEBEDEEImage src={'/images/coinos.png'} alt="LNTXBot" />
|
|
||||||
<ProviderSignUpButton href="http://lntxbot.fiatjaf.com/">Open Telegram</ProviderSignUpButton>
|
|
||||||
</ProviderCardZBD>
|
|
||||||
<ProviderCardZBD>
|
|
||||||
<ZEBEDEEImage src={'/images/lnbits.png'} alt="LNBits" />
|
|
||||||
<ProviderSignUpButton href="https://lnbits.com">Create Account</ProviderSignUpButton>
|
|
||||||
</ProviderCardZBD>
|
|
||||||
<ProviderCardZBD>
|
|
||||||
<ZEBEDEEImage src={'/images/coinos.png'} alt="coinos" />
|
|
||||||
<ProviderSignUpButton href="https://coinos.io">Sign Up</ProviderSignUpButton>
|
|
||||||
</ProviderCardZBD>
|
|
||||||
</ProvidersLeft>
|
|
||||||
<ProvidersRight>
|
|
||||||
<ProvidersRightInner>
|
|
||||||
<ProvidersTitle>My favorite app doesn't support Lightning Address yet. What can I do?</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.
|
|
||||||
</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`)}>
|
|
||||||
<ProvidersEmailButtonImage src={'/images/email.svg'} alt='Email' />
|
|
||||||
<ProvidersEmailButtonText>Send Email</ProvidersEmailButtonText>
|
|
||||||
</ProvidersEmailButton>
|
|
||||||
</ProvidersRightInner>
|
|
||||||
</ProvidersRight>
|
|
||||||
</ProvidersInner>
|
|
||||||
</ProvidersModule>
|
|
||||||
<Footer>
|
|
||||||
<FooterInner>
|
|
||||||
{(FOOTER || []).map(col => (
|
|
||||||
<FooterColumn key={col.title}>
|
|
||||||
<FooterColumnTitle>
|
|
||||||
{col.title}
|
|
||||||
</FooterColumnTitle>
|
|
||||||
{(col.items || []).map(item => (
|
|
||||||
<FooterColumnItem key={item.link} href={item.link} target="_blank">
|
|
||||||
{item.title}
|
|
||||||
</FooterColumnItem>
|
|
||||||
))}
|
|
||||||
</FooterColumn>
|
|
||||||
))}
|
|
||||||
<FooterBottom>
|
|
||||||
<FooterBottomInner>
|
|
||||||
<FooterBottomDonationQR>
|
|
||||||
<QRCode
|
|
||||||
size={100}
|
|
||||||
value={DONATION_QR_CODE}
|
|
||||||
/>
|
|
||||||
</FooterBottomDonationQR>
|
|
||||||
<FooterBottomLogo>The Lightning Address</FooterBottomLogo>
|
|
||||||
<FooterBottomMadeBy>Made with ♥ by Bitcoiners</FooterBottomMadeBy>
|
|
||||||
</FooterBottomInner>
|
|
||||||
</FooterBottom>
|
|
||||||
</FooterInner>
|
|
||||||
</Footer>
|
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
BIN
public/images/lntxbot.png
Normal file
BIN
public/images/lntxbot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
23
utils.js
Normal file
23
utils.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { css } from 'styled-components';
|
||||||
|
|
||||||
|
// Media Queries
|
||||||
|
// Leverage the `media` function inside the theme
|
||||||
|
// to target specific screen sizes.
|
||||||
|
|
||||||
|
export const sizes = {
|
||||||
|
mobile: 320,
|
||||||
|
tablet: 768,
|
||||||
|
largeTablet: 920,
|
||||||
|
desktop: 1024,
|
||||||
|
largeDesktop: 1280,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const media = Object.keys(sizes).reduce((acc, label) => {
|
||||||
|
acc[label] = (...args) => css`
|
||||||
|
@media (min-width: ${sizes[label]}px) {
|
||||||
|
${css(...args)}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
Reference in New Issue
Block a user