feature: work on content and imagery and ui and ux

pages/index.js

@@ -155,13 +155,13 @@ const LicenseLink = styled.a`
 
 const BenefitsModule = styled.div`
   display: flex;
-  background: #fafafa;
   min-height: 700px;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   padding: 120px 0 120px 0;
-  border: 8px solid #EA5455;
+  background: #fafafa;
+  border-bottom: 1px solid #eaeaea;
 `;
 
 const BenefitsTitle = styled.div`
@@ -197,18 +197,19 @@ const BenefitsCard = styled.div`
   width: 250px;
   padding: 20px;
   display: flex;
-  margin-top: 30px;
+  margin-top: 50px;
   min-height: 300px;
   border-radius: 7px;
   align-items: center;
   flex-direction: column;
+  background: #fff;
   border: 1px solid #eaeaea;
-  transition: all 0.15s ease-in-out;
+  transition: box-shadow .2s ease;
 
   &:hover {
     border: 1px solid #ccc;
-    transform: scale(1.02);
-    transition: all 0.15s ease-in-out;
+    transition: box-shadow .2s ease;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
   }
 `;
 
@@ -220,17 +221,19 @@ const BenefitsCardTitle = styled.div`
   font-size: 1.125em;
 `;
 
-const BenefitsCardImage = styled.img``;
+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 BenefitsCardLink = styled.div``;
-
 const PathsModule = styled.div`
   display: flex;
   min-height: 700px;
@@ -239,7 +242,6 @@ const PathsModule = styled.div`
   flex-direction: column;
   justify-content: center;
   padding: 120px 0 120px 0;
-  border: 8px solid #43AA8B;
 `;
 
 const PathsTitle = styled.div`
@@ -282,12 +284,13 @@ const PathsCard = styled.div`
   flex-direction: column;
   background: #f3f3f3;
   border: 1px solid #eaeaea;
-  transition: all 0.15s ease-in-out;
+  transition: box-shadow .2s ease;
+  margin-top: 50px;
 
   &:hover {
     border: 1px solid #ccc;
-    transform: scale(1.02);
-    transition: all 0.15s ease-in-out;
+    transition: box-shadow .2s ease;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
   }
 `;
 
@@ -300,7 +303,9 @@ const PathsCardTitle = styled.div`
   margin: 12px 0;
 `;
 
-const PathsCardImage = styled.img``;
+const PathsCardImage = styled.img`
+  max-width: 100%;
+`;
 
 const PathsCardDescription = styled.div`
   font-size: 14px;
@@ -310,7 +315,204 @@ const PathsCardDescription = styled.div`
   color: #111;
 `;
 
-const PathsCardLink = styled.div``;
+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;
@@ -438,40 +640,49 @@ const FOOTER = [
   },
 ]
 
-
 const BENEFITS = [
   {
-    title: 'So cool',
-    description: 'Oh boy',
-    image: 'https://via.placeholder.com/150'
+    title: 'No more 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 `pay me at user@domain.com` and be done with it.',
+    image: '/images/qrcode.svg'
   },
   {
-    title: 'So cool',
-    description: 'Oh boy',
-    image: 'https://via.placeholder.com/150'
+    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: 'So cool',
-    description: 'Oh boy',
-    image: 'https://via.placeholder.com/150'
+    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'
   },
 ];
 
 const IMPLEMENTATIONS = [
   {
     title: 'Service Provider',
-    description: 'Like your preferred email service, let a service provider handle all of the behind-the-scenes for your Lightning Address.',
-    image: 'https://via.placeholder.com/150'
+    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',
-    description: 'Oh boy',
-    image: 'https://via.placeholder.com/150'
+    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: 'Start Setup',
+    link: 'https://google.com',
+    isSecondary: true
   },
   {
-    title: 'Self-Hosted',
-    description: 'Oh boy',
-    image: 'https://via.placeholder.com/150'
+    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
   },
 ];
 
@@ -490,9 +701,11 @@ export default function Home() {
             <FixedTextPart>satoshi@</FixedTextPart>
             <TextLoop interval={2000}>
               <LoopedTextPart>zbd.gg</LoopedTextPart>
+              <LoopedTextPart>example.com</LoopedTextPart>
               <LoopedTextPart>lntxbot.com</LoopedTextPart>
-              <LoopedTextPart>coinos.io</LoopedTextPart>
               <LoopedTextPart>your.domain</LoopedTextPart>
+              <LoopedTextPart>zebedee.io</LoopedTextPart>
+              <LoopedTextPart>coinos.io</LoopedTextPart>
             </TextLoop>
           </LoopWrapper>
           <CTAWrapper>
@@ -506,7 +719,7 @@ export default function Home() {
         </HeroWrapper>
         <BenefitsModule>
           <BenefitsTitle>Why do I need a Lightning Address?</BenefitsTitle>
-          <BenefitsDescription>Lightning Addresses are nothing more than a set of properties to allow for Lightning Network invoices to be shared behind the scenes, invisible to the end user. There are many ways to get started, with varying degree of complexity depending on your persona type.</BenefitsDescription>
+          <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>
@@ -522,8 +735,8 @@ export default function Home() {
           </BenefitsCardGrid>
         </BenefitsModule>
         <PathsModule>
-          <PathsTitle>Choose your preferred path</PathsTitle>
-          <PathsDescription>Lightning Addresses are nothing more than a set of properties to allow for Lightning Network invoices to be shared behind the scenes, invisible to the end user. There are many ways to get started, with varying degree of complexity depending on your persona type.</PathsDescription>
+          <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>
@@ -534,10 +747,47 @@ export default function Home() {
                 <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/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 app/service/wallet company and ask them to learn about Lightning Addresses and implement support for it. To make it easier, we created a template email 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 => (

public/images/bitcoin1.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="406" height="306" class="illustration styles_illustrationTablet__1DWOa"><rect x="87.3" y="62.7" width="235.4" height="165.87" fill="#0070f3"></rect><rect x="87.3" y="62.7" width="235.4" height="165.87" fill="#fff" opacity="0.46"></rect><rect x="105.25" y="80.47" width="199.49" height="128.95" fill="#24285b"></rect><ellipse cx="205.91" cy="250.93" rx="178.84" ry="12.93" fill="#e6e6e6" opacity="0.45"></ellipse><circle cx="203.37" cy="147.05" r="37.46" fill="#ffd200"></circle><circle cx="203.37" cy="147.05" r="37.46" fill="#fff" opacity="0.46"></circle><circle cx="203.72" cy="135.63" r="37.46" fill="#ffd200"></circle><path d="M214.39,131.79a6.8,6.8,0,0,0,3.33-7.06c-.6-4.34-5.8-6-9.89-6.27l0-6.55-4,0,0,6.48-2.71,0,0-6.48-4,0,0,6.49-8.13,0,0,4.18,3,0c1.36,0,2,.39,2,1.48l.11,18c0,1.5-.73,2-1.54,2l-3.08,0,0,4.27,7.84-.05,0,6.63,4.07,0-.05-6.63h2.71l0,6.62,4,0,0-6.63h.87c8.29-.06,11-4.14,11-9.67A7.18,7.18,0,0,0,214.39,131.79Zm-13.28-8.91,2.88,0c2,0,6,.31,6,3.59a4.07,4.07,0,0,1-3.52,4.32l-5.33,0Zm4.6,20.72v0l-4.47,0-.05-8.65,5.18,0c1.21,0,5.77.37,5.79,3.59S210,143.57,205.71,143.6Z" fill="#fff"></path><path d="M71.47,220.61H338a0,0,0,0,1,0,0v8.78a21.83,21.83,0,0,1-21.83,21.83H93.3a21.83,21.83,0,0,1-21.83-21.83v-8.78A0,0,0,0,1,71.47,220.61Z" fill="#0070f3"></path><path d="M158,220.61h87.32a0,0,0,0,1,0,0v0a12.3,12.3,0,0,1-12.3,12.3H170.27a12.3,12.3,0,0,1-12.3-12.3v0A0,0,0,0,1,158,220.61Z" opacity="0.08"></path><rect x="61.94" y="95.29" width="87.15" height="74.94" fill="#e6e6e6"></rect><rect x="262.79" y="42.33" width="103.32" height="79.35" fill="#e6e6e6"></rect><path d="M87.09,131h0a9.35,9.35,0,0,1,9.35,9.35v3.48a0,0,0,0,1,0,0H77.74a0,0,0,0,1,0,0v-3.48A9.35,9.35,0,0,1,87.09,131Z" fill="#a5a5a5"></path><circle cx="87.09" cy="125.07" r="6.73" fill="#a5a5a5"></circle><path d="M122.61,131h0a9.35,9.35,0,0,1,9.35,9.35v3.48a0,0,0,0,1,0,0H113.26a0,0,0,0,1,0,0v-3.48A9.35,9.35,0,0,1,122.61,131Z" fill="#a5a5a5"></path><circle cx="122.61" cy="125.07" r="6.73" fill="#a5a5a5"></circle><rect x="77.74" y="151" width="54.75" height="5.62" fill="#a5a5a5" opacity="0.39"></rect><circle cx="71.21" cy="103.72" r="2.94" fill="#24285b"></circle><circle cx="79.38" cy="103.72" r="2.94" fill="#ffd200"></circle><circle cx="87.73" cy="103.72" r="2.94" fill="#0070f3"></circle><circle cx="272.31" cy="51" r="2.94" fill="#24285b"></circle><circle cx="280.48" cy="51" r="2.94" fill="#ffd200"></circle><circle cx="288.83" cy="51" r="2.94" fill="#0070f3"></circle><rect x="280.48" y="89.68" width="16.98" height="16.98" fill="#a5a5a5" opacity="0.49"></rect><rect x="306.01" y="82" width="16.98" height="24.65" fill="#a5a5a5" opacity="0.67"></rect><rect x="330.52" y="69.25" width="16.98" height="37.4" fill="#a5a5a5"></rect><polyline points="287.21 83.55 302.28 66.7 314.5 76.66 328.83 53.93 339.01 62.7" fill="none" stroke="#a5a5a5" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="247.64" y="183.97" width="44.13" height="12.94" fill="#fff" opacity="0.13"></rect><path d="M48.21,236.75s-8.51-2.32-10.37-10.25c0,0,13.2-2.66,13.57,10.95Z" fill="#0070f3" opacity="0.58"></path><path d="M49.25,235.91s-5.94-9.41-.71-18.2c0,0,10,6.37,5.58,18.22Z" fill="#0070f3" opacity="0.73"></path><path d="M50.79,235.92S53.93,226,63.43,224.1c0,0,1.78,6.45-6.15,11.84Z" fill="#0070f3"></path><polygon points="44.61 235.69 46.34 247.5 57.21 247.55 58.81 235.75 44.61 235.69" fill="#24285b"></polygon><polygon points="100.7 134.28 109.38 134.28 105.04 125.72 100.7 134.28" fill="#fff"></polygon></svg>

public/images/data3.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="406" height="306" class="illustration styles_illustrationTablet__1DWOa"><polygon points="198.79 251.33 159.59 251.33 159.59 248.33 195.79 248.33 195.79 195.01 198.79 195.01 198.79 251.33" fill="#e6e6e6"></polygon><path d="M276.48,129.37c-.93,0-1.84.06-2.74.15,0-.43,0-.86,0-1.29a39,39,0,0,0-39-39c-.55,0-1.1,0-1.65,0A46.65,46.65,0,1,0,141,101a39,39,0,0,0,1.47,77.93h134a24.77,24.77,0,0,0,0-49.54Z" fill="#68e1fd"></path><rect x="155.27" y="153.28" width="92.99" height="58.61" fill="#ffd200"></rect><rect x="155.27" y="153.28" width="92.99" height="58.61" opacity="0.09"></rect><rect x="147.25" y="128.68" width="109.38" height="28.75" fill="#ffd200"></rect><rect x="159.59" y="139.24" width="65.26" height="6.69" fill="#24285b"></rect><circle cx="238.79" cy="143.58" r="5.46" fill="#fff"></circle><rect x="147.25" y="163.34" width="109.38" height="28.75" fill="#ffd200"></rect><rect x="159.59" y="173.89" width="65.26" height="6.69" fill="#24285b"></rect><circle cx="238.79" cy="178.24" r="5.46" fill="#fff"></circle><rect x="147.25" y="198" width="109.38" height="28.75" fill="#ffd200"></rect><rect x="159.59" y="208.55" width="65.26" height="6.69" fill="#24285b"></rect><circle cx="238.79" cy="212.9" r="5.46" fill="#fff"></circle><rect x="197.29" y="248.33" width="36.04" height="3" fill="#e6e6e6"></rect><circle cx="161.18" cy="249.95" r="5.9" fill="#c1c1c1"></circle><circle cx="233.33" cy="249.95" r="5.9" fill="#c1c1c1"></circle></svg>

public/images/zebedee.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 449 79" xmlns="http://www.w3.org/2000/svg"><path d="M59.61 0.12H2.96V18.38H34.2L0.54 70.74L4.17 78H61.92V59.85L30.24 60.07L63.79 6.72L59.61 0.12ZM90.0216 30.7V18.6H124.342V0.12H70.1116V78H124.342V59.41H90.0216V47.75H121.592V30.7H90.0216ZM189.67 23.88C190.11 9.03 179.22 0.12 164.37 0.12H133.13V78H164.92C182.19 78 190.66 70.41 192.64 57.87C193.63 51.93 192.31 41.92 181.64 36.53C187.25 33.67 189.56 27.4 189.67 23.88ZM164.37 30.59H152.93V16.73H164.37C174.27 16.73 173.94 30.59 164.37 30.59ZM164.37 60.73H152.93V44.78H164.37C176.03 44.78 176.25 60.73 164.37 60.73ZM220.032 30.7V18.6H254.352V0.12H200.122V78H254.352V59.41H220.032V47.75H251.602V30.7H220.032ZM292.29 0.12H263.14V78H292.29C307.91 78.11 322.54 70.3 322.54 52.37V26.19C322.54 8.04 307.91 0.12 292.29 0.12ZM292.95 59.52H282.94V18.49H292.95C299.55 18.49 302.74 21.68 302.74 26.74V51.05C302.74 56.11 299.66 59.52 292.95 59.52ZM351.332 30.7V18.6H385.652V0.12H331.422V78H385.652V59.41H351.332V47.75H382.902V30.7H351.332ZM414.35 30.7V18.6H448.67V0.12H394.44V78H448.67V59.41H414.35V47.75H445.92V30.7H414.35Z" fill="#222"></path></svg>