feature: ui improvements on hero reveal

components/hero.js

@@ -1,5 +1,7 @@
 import TextLoop from 'react-text-loop';
 import styled from 'styled-components';
+import { PureComponent } from 'react';
+import Fade from 'react-reveal/Fade';
 
 import { URL_INTERNET_IDENTIFIER  } from '../constants';
 import { media } from '../utils';
@@ -199,16 +201,43 @@ const LicenseLink = styled.a`
   }
 `;
 
-export const Hero = () => (
+export class Hero extends PureComponent {
+  state = {
+    showCTAs: false,
+    showIntro: false,
+    showLightningAddr: false,
+  };
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState(() => ({ showIntro: true }));
+    }, 500);
+
+    setTimeout(() => {
+      this.setState(() => ({ showLightningAddr: true }));
+    }, 1100);
+
+    setTimeout(() => {
+      this.setState(() => ({ showCTAs: true }));
+    }, 1700);
+  }
+
+  render() {
+    const { showIntro, showLightningAddr, showCTAs } = this.state;
+
+    return (
       <Wrapper>
+        <Fade bottom cascade when={showIntro}>
           <Intro>Introducing</Intro>
           <Title>The Lightning Address</Title>
+        </Fade>
+        <Fade bottom when={showLightningAddr}>
           <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}>
+            <TextLoop interval={2000} delay={1600}>
               <LoopedTextPart>zbd.gg</LoopedTextPart>
               <LoopedTextPart>lntxbot.com</LoopedTextPart>
               <LoopedTextPart>your.domain</LoopedTextPart>
@@ -217,6 +246,8 @@ export const Hero = () => (
               <LoopedTextPart>coinos.io</LoopedTextPart>
             </TextLoop>
           </LoopWrapper>
+        </Fade>
+        <Fade bottom when={showCTAs}>
           <CTAWrapper>
             <CTAPrimary href="#providers">Get Started</CTAPrimary>
             <CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Documentation</CTASecondary>
@@ -225,5 +256,8 @@ export const Hero = () => (
             <LicenseText>License: MIT</LicenseText>
             <LicenseLink href='https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md' target='_blank'>GitHub</LicenseLink>
           </LicenseWrapper>
+        </Fade>
       </Wrapper>
     )
+  }
+}

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-qr-code": "^2.0.1",
+    "react-reveal": "^1.2.2",
     "react-text-loop": "^2.3.0",
     "styled-components": "^5.2.3"
   },

yarn.lock

@@ -1150,11 +1150,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-kjua@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/kjua/-/kjua-0.9.0.tgz#88603607318d67c231e9a5770c4bed4639e03310"
-  integrity sha512-Wmh5k6hpl+wiYkcEIx0/Ocj1DOxacw/myh/SQ3NbY0RWD4360CXaaAJkdeeV+moqf7fxvACYK95LXQ8vtLWKxA==
-
 loader-utils@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@@ -1525,7 +1520,7 @@ process@0.11.10, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1644,13 +1639,6 @@ react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-kjua@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/react-kjua/-/react-kjua-0.0.2.tgz#a564e1551ec2213b1bbe9d3068d63f9f443bfbf6"
-  integrity sha512-uYsCpVKBG+iP+Xy+B1h1cXMGVUirh87zVU4WXplC8cIkLNI+kGxeihpBhVJuShVFqra9uGKBQAKXEarleCEZLQ==
-  dependencies:
-    kjua "^0.9.0"
-
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -1673,6 +1661,13 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-reveal@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
+  integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-text-loop@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-text-loop/-/react-text-loop-2.3.0.tgz#c4035b1f3fb8216b34ed93f3160025fc7b1af3b7"