chore: finalize new community module

components/benefits.js

@@ -189,7 +189,7 @@ const BENEFITS = [
   },
   {
     title: 'Extended functionality',
-    description: 'Set minimum and maximum payment sizes to accept, add images and comments to your transactions and more features that weren\'t possible before.',
+    description: 'Set minimum and maximum payment sizes to accept, add images and comments to your transactions, and more features that weren\'t possible before.',
     image: '/images/comments.svg'
   },
   {

components/community.js

@@ -170,24 +170,18 @@ const ImageWrapper = styled.div`
   `}
 `;
 
-const CommunityListWrapper = styled.ul`
+const CommunityListWrapper = styled.div`
-  list-style: none;
+  display: flex;
-  margin-bottom: 2rem;
+  flex-wrap: wrap;
-`;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
 
-const CommunityListItem = styled.li`
+  ${media.tablet`
-  color: #666666;
+    flex-wrap: wrap;
-  font-size: 16px;
+    flex-direction: row;
-  font-weight: 400;
+    justify-content: flex-start;
-  margin-bottom: 0.35rem;
+  `}
-
-  &:before {
-    content: "-";
-    color: #666666;
-    margin-left: -25px;
-    position: absolute;
-    display: inline-block;
-  }
 `;
 
 const CommunitySectionTitle = styled.div`
@@ -197,35 +191,66 @@ const CommunitySectionTitle = styled.div`
   max-width: 500px;
   font-weight: 800;
   line-height: 1.3;
-  text-align: left;
+  text-align: center;
 
   ${media.tablet`
     padding: 0;
+    text-align: left;
     font-size: 24px;
     letter-spacing: -0.5px;
   `}
 `;
 
 const Link = styled.a`
-  color: #222222;
+  color: #0070f3;
-  cursor: pointer;
+  font-size: 14px;
-  font-weight: 600;
+  line-height: 1.6;
+  font-weight: 500;
+  padding: 8px 12px;
+  border-radius: 7px;
   text-decoration: none;
+  margin: 10px 10px 0 0;
+  background: rgba(0,118,255,0.1);
+
+  ${media.tablet`
+    font-size: 14px;
+    max-width: 900px;
+    line-height: 1.6;
+  `}
 
   &:hover {
-    color: #0070f3;
+    background: rgba(0,118,255,0.2);
   }
 `;
 
-const LinkDescription = styled.span`
+const VerticalLink = styled.a`
-  padding-left: 5px;
+  color: #0070f3;
-  word-break: break-word;
+  display: block;
+  font-size: 14px;
+  line-height: 1.6;
+  max-height: 22px;
+  font-weight: 500;
+  padding: 8px 12px;
+  border-radius: 7px;
+  text-decoration: none;
+  margin: 10px 10px 0 0;
+  background: rgba(0,118,255,0.1);
+
+  ${media.tablet`
+    font-size: 14px;
+    line-height: 1.6;
+  `}
+
+  &:hover {
+    background: rgba(0,118,255,0.2);
+  }
 `;
 
 const CommunityDescriptionSmall = styled(CommunityDescription)`
-  text-align: left;
+  text-align: center;
 
   ${media.tablet`
+    text-align: left;
     font-size: 18px;
   `}
 `;
@@ -247,7 +272,7 @@ const CTASecondary = styled.a`
   cursor: pointer;
   height: 2.81rem;
   background: #fff;
-  width: 300px;
+  width: 280px;
   text-align: center;
   padding: 0;
   margin: 10px 0 0 0;
@@ -266,36 +291,70 @@ const CTASecondary = styled.a`
   `}
 `;
 
-const BRIDGE_SERVERS = [
+const CommunityVerticalListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const VerticalLinkWrapper = styled.div`
+  display: flex;
+  padding: 0 20px;
+  padding-top: 10px;
+  align-items: center;
+  flex-direction: column;
+
+  ${media.tablet`
+    flex-direction: row;
+    align-items: flex-start;
+  `}
+`;
+
+const VerticalLinkDescription = styled(CommunityDescriptionSmall)`
+  margin-top: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  padding-top: 10px;
+  letter-spacing: 0;
+  padding-left: 10px;
+
+  ${media.tablet`
+    font-size: 14px;
+  `}
+`;
+
+const SATDRESS_SERVERS = [
   {
     urlLink: 'https://payaddress.co',
-    urlText: 'PayAddress.co',
+    urlText: '@payaddress.co',
-    description: 'a something something',
   },
   {
     urlLink: 'https://bitmia.com',
-    urlText: 'Bitmia.com',
+    urlText: '@bitmia.com',
-    description: 'a something something',
   },
   {
     urlLink: 'https://tinytip.me',
-    urlText: 'TinyTip.me',
+    urlText: '@tinytip.me',
-    description: 'a something something',
   },
   {
     urlLink: 'https://paymentlink.xyz',
-    urlText: 'PaymentLink.xyz',
+    urlText: '@paymentlink.xyz',
-    description: 'a something something',
   },
   {
     urlLink: 'https://ln.fitti.io/',
-    urlText: 'LN.Fitti.io',
+    urlText: '@ln.fitti.io',
-    description: 'a something something',
+  },
+];
+
+const BRIDGE_SERVERS = [
+  {
+    urlLink: 'https://github.com/fiatjaf/satdress/',
+    urlText: 'Satdress',
+    description: 'Federated Lightning Address server anyone can self-host to receive Lightning payments at you@yourdomain.com noncustodially.',
   },
   {
     urlLink: 'https://bridgeaddr.fiatjaf.com/',
     urlText: 'BridgeAddr',
-    description: 'a server that allows you to receive payments at yourname@yourdomain.com noncustodially.',
+    description: 'Bridge Server that allows setting domain DNS configuration and receive payments at you@yourdomain.com noncustodially.',
   },
 ];
 
@@ -324,20 +383,20 @@ const WALLETS = [
     downloadText: 'Open LNBits',
     url: 'https://lnbits.com/',
   },
-]
+];
 
 export const Community = () => (
-  <CommunityModule>
+  <CommunityModule id="community">
-    <CommunityIntro>Community Bridge Servers and Wallets</CommunityIntro>
+    <CommunityIntro>Community Efforts & Tools</CommunityIntro>
-    <CommunityTitle>Community</CommunityTitle>
+    <CommunityTitle>Noncustodial Bridge Servers</CommunityTitle>
     <CommunityDescription>
-      We’ve made it exceedingly straightforward to start supporting Lightning Addresses on your own domain or integrate them with the apps you’re building. Set up support for this new standard today and join the era of total Lightning interoperability!
+      The Lightning Address standard continues to be adopted by community participants and companies in the industry. From mobile and desktop wallet support, to federated Lightning Address bridge servers anyone can self-host, it's never been easier to transact Bitcoin.
     </CommunityDescription>
     <CommunityInner>
       <CommunityLeft>
         <CommunitySectionTitle>Transact with a Lightning Address today!</CommunitySectionTitle>
         <CommunityDescriptionSmall>
-          The Lightning Network wallets listed below have full support for transacting with Lightning Addresses. Download them to get started sending Bitcoin as easily as you send emails.
+          The wallets listed below already have support for transacting with Lightning Addresses. Download them to get started sending Bitcoin as easily as you send emails.
         </CommunityDescriptionSmall>
         {WALLETS.map(wallet => (
           <CommunityCard key={wallet.name}>
@@ -349,28 +408,39 @@ export const Community = () => (
         ))}
         <CTAWrapper>
           <CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md#wallets" target="_blank">
-            View list of all supported Wallets
+            View list of supported Wallets
           </CTASecondary>
         </CTAWrapper>
       </CommunityLeft>
       <CommunityRight>
         <CommunityRightInner>
-          <CommunitySectionTitle>Connect your Lightning Network node backend to a Lightning Address noncustodially!</CommunitySectionTitle>
+          <CommunitySectionTitle>Want a different domain for your Lightning Address?</CommunitySectionTitle>
           <CommunityDescriptionSmall>
-            Get your own Lightning Address now by using one of the apps and services that already support it. You’ll be set up in seconds!
+            Use one of the community-supported Lightning Address servers below to connect your Lightning backend to a Lightning Address noncustodially!
           </CommunityDescriptionSmall>
           <CommunityListWrapper>
-            {BRIDGE_SERVERS.map(item => (
+            {SATDRESS_SERVERS.map(item => (
-              <CommunityListItem key={item.urlText}>
+              <Link key={item.urlText} href={item.urlLink} target="_blank">
-                <Link href={item.urlLink} target="_blank">
                 {item.urlText}
               </Link>
-                <LinkDescription>
-                  - {item.description}
-                </LinkDescription>
-              </CommunityListItem>
             ))}
           </CommunityListWrapper>
+          <br />
+          <CommunityDescriptionSmall>
+            Additional resources for using and supporting Lightning Addresses:
+          </CommunityDescriptionSmall>
+          <CommunityVerticalListWrapper>
+            {BRIDGE_SERVERS.map(item => (
+              <VerticalLinkWrapper>
+                <VerticalLink key={item.urlText} href={item.urlLink} target="_blank">
+                  {item.urlText}
+                </VerticalLink>
+                <VerticalLinkDescription>
+                  {item.description}
+                </VerticalLinkDescription>
+              </VerticalLinkWrapper>
+            ))}
+          </CommunityVerticalListWrapper>
         </CommunityRightInner>
       </CommunityRight>
     </CommunityInner>

components/footer.js

@@ -11,46 +11,54 @@ const FOOTER = [
     title: 'Resources',
     items: [
       {
-        link: URL_INTERNET_IDENTIFIER,
+        link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
-        title: 'Internet Identifier RFC'
+        title: 'Dev Documentation'
       },
       {
         link: 'https://github.com/andrerfneves/lightning-address',
         title: 'Code Repository'
       },
       {
-        link: 'https://github.com/andrerfneves/lightning-address/blob/master/README.md',
+        link: 'https://lightningdecoder.com',
-        title: 'Documentation'
+        title: 'Lightning Address Decoder'
       },
       {
-        link: 'https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md',
+        link: URL_INTERNET_IDENTIFIER,
-        title: 'License'
+        title: 'Internet Identifier RFC'
       },
-    ]
-  },
-  {
-    title: 'LNURL Protocol',
-    items: [
       {
         link: 'https://github.com/fiatjaf/lnurl-rfc',
-        title: 'Specification'
+        title: 'LNURL RFC'
-      },
-      {
-        link: 'https://github.com/fiatjaf/lnurl-rfc/blob/master/lnurl-pay.md',
-        title: 'LNURL Pay Specification'
-      },
-      {
-        link: 'https://github.com/fiatjaf/awesome-lnurl#wallets',
-        title: 'Wallets Supported'
-      },
-      {
-        link: 'https://github.com/fiatjaf/awesome-lnurl',
-        title: 'Awesome LNURL'
       },
     ]
   },
   {
-    title: 'Providers',
+    title: 'Sending',
+    items: [
+      {
+        link: 'https://blixtwallet.com/',
+        title: 'Blixt Wallet'
+      },
+      {
+        link: 'https://lightning-wallet.com/',
+        title: 'Simple Bitcoin Wallet'
+      },
+      {
+        link: 'https://lntxbot.fiatjaf.com/',
+        title: 'LNTXBOT Telegram Bot'
+      },
+      {
+        link: 'https://zebedee.io/wallet',
+        title: 'ZEBEDEE Wallet'
+      },
+      {
+        link: 'https://lnbits.com',
+        title: 'LNBits'
+      },
+    ]
+  },
+  {
+    title: 'Receiving',
     items: [
       {
         link: 'https://zebedee.io/wallet',
@@ -58,16 +66,16 @@ const FOOTER = [
       },
       {
         link: 'https://lntxbot.fiatjaf.com/',
-        title: 'LNTXBOT Telegram'
+        title: 'LNTXBOT Telegram Bot'
-      },
-      {
-        link: 'https://lnbits.com',
-        title: 'LNBits'
       },
       {
         link: 'https://coinos.io',
         title: 'CoinOS'
       },
+      {
+        link: 'https://github.com/fiatjaf/satdress',
+        title: 'Satdress'
+      },
     ]
   },
 ];
@@ -81,13 +89,14 @@ const Wrapper = styled.div`
 const InnerWrapper = styled.div`
   display: flex;
   margin: 0 auto;
-  padding: 20px 30px 30px 30px;
   flex-direction: column;
+  padding: 20px 30px 30px 30px;
 
   ${media.tablet`
     max-width: 900px;
     flex-direction: row;
     padding: 80px 0 100px 0;
+    justify-content: space-between;
   `}
 `;
 
@@ -96,7 +105,7 @@ const Column = styled.div`
   flex-direction: column;
 
   ${media.tablet`
-    width: 200px;
+    width: 230px;
   `}
 `;
 
@@ -157,9 +166,19 @@ const BottomQR = styled.div`
   border: 1px solid #ddd;
 `;
 
+const Menus = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${media.tablet`
+    flex-direction: row;
+  `}
+`;
+
 export const Footer = () => (
   <Wrapper>
     <InnerWrapper>
+      <Menus>
         {(FOOTER || []).map(col => (
           <Column key={col.title}>
             <ColumnTitle>
@@ -172,6 +191,7 @@ export const Footer = () => (
             ))}
           </Column>
         ))}
+      </Menus>
       <Bottom>
         <BottomInner>
           <BottomQR>

components/paths.js

@@ -152,15 +152,17 @@ const IMPLEMENTATIONS = [
     image: '/images/data4.svg',
     linkText: 'Get Started',
     link: '#providers',
-    isSecondary: false
+    isSecondary: false,
+    isInternal: true,
   },
   {
     title: 'Bridge Servers',
     description: 'If you already run a Bitcoin Lightning Network node and want a plug-n-play solution, this option is for you. Simply point some configuration settings to one of the growing list of community-supported Bridge Servers and get set up in minutes.',
     image: '/images/data3.svg',
     linkText: 'Quick Setup',
-    link: 'https://github.com/andrerfneves/lightning-address/blob/master/BRIDGE.md',
+    link: '#community',
-    isSecondary: true
+    isSecondary: true,
+    isInternal: true,
   },
   {
     title: 'Self-Hosted',
@@ -168,7 +170,8 @@ const IMPLEMENTATIONS = [
     image: '/images/data2.svg',
     linkText: 'Learn More',
     link: 'https://github.com/andrerfneves/lightning-address/blob/master/DIY.md',
-    isSecondary: true
+    isSecondary: true,
+    isInternal: false,
   },
 ];
 
@@ -189,7 +192,7 @@ export const Paths = () => (
           <PathsCardDescription>
             {benefit.description}
           </PathsCardDescription>
-          <PathsCardButton target="_blank" href={benefit.link} isSecondary={benefit.isSecondary}>
+          <PathsCardButton target={benefit.isInternal ? '' : '_blank'} href={benefit.link} isSecondary={benefit.isSecondary}>
             {benefit.linkText}
           </PathsCardButton>
         </PathsCard>