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,31 +201,63 @@ const LicenseLink = styled.a`
   }
 `;
 
-export const Hero = () => (
+export class Hero extends PureComponent {
-  <Wrapper>
+  state = {
-    <Intro>Introducing</Intro>
+    showCTAs: false,
-    <Title>The Lightning Address</Title>
+    showIntro: false,
-    <Description>
+    showLightningAddr: false,
-      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>
+  componentDidMount() {
-      <FixedTextPart>satoshi@</FixedTextPart>
+    setTimeout(() => {
-      <TextLoop interval={2000}>
+      this.setState(() => ({ showIntro: true }));
-        <LoopedTextPart>zbd.gg</LoopedTextPart>
+    }, 500);
-        <LoopedTextPart>lntxbot.com</LoopedTextPart>
+
-        <LoopedTextPart>your.domain</LoopedTextPart>
+    setTimeout(() => {
-        <LoopedTextPart>zebedee.io</LoopedTextPart>
+      this.setState(() => ({ showLightningAddr: true }));
-        <LoopedTextPart>lnbits.com</LoopedTextPart>
+    }, 1100);
-        <LoopedTextPart>coinos.io</LoopedTextPart>
+
-      </TextLoop>
+    setTimeout(() => {
-    </LoopWrapper>
+      this.setState(() => ({ showCTAs: true }));
-    <CTAWrapper>
+    }, 1700);
-      <CTAPrimary href="#providers">Get Started</CTAPrimary>
+  }
-      <CTASecondary href="https://github.com/andrerfneves/lightning-address/blob/master/README.md" target="_blank">Documentation</CTASecondary>
+
-    </CTAWrapper>
+  render() {
-    <LicenseWrapper>
+    const { showIntro, showLightningAddr, showCTAs } = this.state;
-      <LicenseText>License: MIT</LicenseText>
+
-      <LicenseLink href='https://github.com/andrerfneves/lightning-address/blob/master/LICENSE.md' target='_blank'>GitHub</LicenseLink>
+    return (
-    </LicenseWrapper>
+      <Wrapper>
-  </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} delay={1600}>
+              <LoopedTextPart>zbd.gg</LoopedTextPart>
+              <LoopedTextPart>lntxbot.com</LoopedTextPart>
+              <LoopedTextPart>your.domain</LoopedTextPart>
+              <LoopedTextPart>zebedee.io</LoopedTextPart>
+              <LoopedTextPart>lnbits.com</LoopedTextPart>
+              <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>
+          </CTAWrapper>
+          <LicenseWrapper>
+            <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"