From a7deb83d36c6790662636f4082a2d7088342dae6 Mon Sep 17 00:00:00 2001
From: Andre Neves <andre@zebedee.io>
Date: Sat, 7 Aug 2021 11:30:53 -0400
Subject: [PATCH] feature: ui improvements on hero reveal

---
 components/hero.js | 90 +++++++++++++++++++++++++++++++---------------
 package.json       |  1 +
 yarn.lock          | 21 +++++------
 3 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/components/hero.js b/components/hero.js
index 6b07266..b1d80b1 100644
--- a/components/hero.js
+++ b/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 = () => (
-  <Wrapper>
-    <Intro>Introducing</Intro>
-    <Title>The Lightning Address</Title>
-    <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}>
-        <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>
-    <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>
-  </Wrapper>
-)
+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} 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>
+    )
+  }
+}
diff --git a/package.json b/package.json
index d653357..c014c95 100644
--- a/package.json
+++ b/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"
   },
diff --git a/yarn.lock b/yarn.lock
index c312bd7..d8abd14 100644
--- a/yarn.lock
+++ b/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"