add a bunch of explainers

src/App.js

@@ -14,6 +14,7 @@ import { Resources } from './components/resources'
 import { Textarea } from './components/textarea'
 import { Section } from './components/section'
 import { Footer } from './components/footer'
+import { Intro } from './components/intro'
 import { Title } from './components/title'
 import { Info } from './components/info'
 import { Row } from './components/row'
@@ -37,8 +38,10 @@ function App() {
   return (
     <MainContainer>
       <Title />
+      <Intro />
+
       <InputDescription>
-        Enter a BOLT11 Lightning Network invoice below:
+        Anatomy of a Lightning invoice:
       </InputDescription>
       <Textarea value={pr} onChange={ev => setPR(ev.target.value)} />
       {parsed && (

src/components/intro.js

@@ -0,0 +1,72 @@
+import styled from 'styled-components'
+
+import { EXPLAINERS } from '../constants/explainers'
+
+export const IntroWrapper = styled.div`
+  margin: 50px 0 30px 0;
+`
+
+export const IntroTitle = styled.div`
+  color: #fff;
+  font-size: 26px;
+  font-weight: 600;
+`
+
+export const IntroDescription = styled.div`
+  color: #858692;
+  font-size: 14px;
+  font-weight: 400;
+  padding-bottom: 8px;
+  line-height: 1.5;
+`
+
+export const IntroInnerWrapper = styled.div`
+  display: grid;
+  margin-top: 40px;
+  grid-row-gap: 50px;
+  grid-column-gap: 20px;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(3, 1fr);
+`
+
+export const ExplainerIssue = styled.div`
+  color: #D2DAEA;
+  padding-top: 6px;
+  font-size: 14px;
+`
+
+export const ExplainerSolution = styled.div`
+  background-color: #20475C;
+  color: #fff;
+  padding: 12px 10px;
+  border-radius: 8px;
+  margin-top: 8px;
+  font-size: 14px;
+`
+
+export const ExplainerTitle = styled.div`
+  color: #D2DAEA;
+  font-size: 18px;
+  font-weight: 600;
+  padding-bottom: 4px;
+`
+
+export const Explainer = styled.div``
+
+export const Intro = () => (
+  <IntroWrapper>
+    <IntroTitle>
+      The BOLT11 invoice format is a revolution.
+    </IntroTitle>
+    <IntroDescription>It solves all the problems of the old and clumsy Bitcoin "address" that have always plagued Bitcoin adoption by users, companies and services.</IntroDescription>
+    <IntroInnerWrapper>
+      {EXPLAINERS.map((exp, i) => (
+        <Explainer key={i}>
+          <ExplainerTitle>{exp.title}</ExplainerTitle>
+          <ExplainerIssue>{exp.issue}</ExplainerIssue>
+          <ExplainerSolution>{exp.solution}</ExplainerSolution>
+        </Explainer>
+      ))}
+    </IntroInnerWrapper>
+  </IntroWrapper>
+)

src/components/title.js

@@ -29,7 +29,7 @@ export const Title = () => (
         <TitleText>The Lightning Invoice</TitleText>
         <DescriptionWrapper>
             <DescriptionText>
-                Learn the inner workings of BOLT11 Lightning Network invoices.
+                Learn the inner workings of BOLT11, the Lightning Network invoice standard.
             </DescriptionText>
         </DescriptionWrapper>
     </TitleWrapper>

src/constants/explainers.js

@@ -0,0 +1,17 @@
+export const EXPLAINERS = [
+  {
+    title: 'BOLT11 invoices fix typing Bitcoin addresses',
+    issue: 'Everybody (even highly technical users) is afraid of typing or pasting them wrong and losing money -- and rightfully so! It\'s a very stressful experience that is significantly hindering Bitcoin adoption.',
+    solution: 'The Lightning invoice contain a signature and a checksum and thus it\'s immediately obvious when they were typed wrong, money is never sent to the wrong place. Thus, using Lightning invoices is a breez and very easy on the mind, paying on the internet becomes as seamless as it never was.'
+  },
+  {
+    title: 'Metadata helps accountability and is approachable to humans',
+    issue: 'Bitcoin addresses are blank endpoints with no metadata whatsoever, it\'s hard to reason about them: are you sending the correct amount to the correct address? Is it too late to send? How many blocks are they going to wait for this to confirm? They also do not identify what you are paying for, or to whom.',
+    solution: 'The Lightning invoice fixes this by including a description, a signature from the receiver, an amount that can\'t be ignored, an expiration date. Payments are now humanly identifiable, can\'t be paid twice and are immediately and obviously actionable from the moment you scan or paste them in your wallet.'
+  },
+  {
+    title: 'The problem of receiving the correct amount is fixed by BOLT11',
+    issue: 'This point cannot be stressed enough. A company that sells goods or services for Bitcoin or accepts Bitcoin deposits does not want to hold user balances for overpayments or send the balances back and cannot possibly be expected to handle underpayments, as these are very hard problems.',
+    solution: 'By specifying an amount that can\'t be tampered with or changed, the BOLT11 invoice makes it so that is never a problem again: invoices are either paid or not. The peace of mind and freed engineering time that comes from this simple fact is in incalculable.'
+  }
+]