From c2fd503e6b4f7c253cb67e4496ef851b85b813a2 Mon Sep 17 00:00:00 2001
From: lza_menace <lza_menace@protonmail.com>
Date: Wed, 28 Dec 2022 00:33:33 -0800
Subject: [PATCH] make pretty scroll

---
 package-lock.json         | 29 +++++++++++++++++++++++++----
 package.json              |  1 +
 src/styles/sections.css   |  6 +++---
 src/template/Sections.jsx | 17 ++++++++++++-----
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b381262..e6cc90b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react-dom": "^18.2.0",
         "react-parallax": "^3.5.1",
         "react-scripts": "5.0.1",
+        "react-scroll": "^1.8.9",
         "react-scroll-parallax": "^3.3.2",
         "react-ts-typewriter": "^0.1.8-b",
         "typescript": "^4.9.4",
@@ -17223,8 +17224,7 @@
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "peer": true
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
     },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
@@ -21878,6 +21878,19 @@
         }
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-scroll-parallax": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
@@ -38394,8 +38407,7 @@
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "peer": true
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
     },
     "lodash.uniq": {
       "version": "4.5.0",
@@ -41746,6 +41758,15 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-scroll-parallax": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.3.2.tgz",
diff --git a/package.json b/package.json
index 48e3024..10f9861 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-parallax": "^3.5.1",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.8.9",
     "react-scroll-parallax": "^3.3.2",
     "react-ts-typewriter": "^0.1.8-b",
     "typescript": "^4.9.4",
diff --git a/src/styles/sections.css b/src/styles/sections.css
index e78ffd3..1e44881 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -27,13 +27,13 @@
 }
 
 #heroImage {
-    max-width: 300px;
-    margin: 0 auto;
+    max-width: 240px;
+    margin: 1em auto;
     animation: fadeIn 4s ease-in;
 }
 
 .fadeIn {
-    animation: fadeIn 6s ease-in;
+    animation: fadeIn 4s ease-in;
 }
 
 @keyframes fadeIn {
diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx
index 1f0c7a2..0b40c84 100644
--- a/src/template/Sections.jsx
+++ b/src/template/Sections.jsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { BigNumber, ethers } from 'ethers';
+import { ethers } from 'ethers';
 import Typewriter from 'react-ts-typewriter';
 import Slider from 'rc-slider';
 import { Parallax } from 'react-parallax';
+import { animateScroll as scroll } from 'react-scroll'
+
 
 import { AwesomeButton } from 'react-awesome-button';
 import Boomer from '../img/unaboomer.png';
@@ -34,6 +36,11 @@ export class Section1 extends React.Component {
                     <Typewriter text={this.state.title} cursor={true} random={20} />
                 </h1>
                 <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." />
+                <div className={this.state.showImage || "hidden" }>
+                    <AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollToBottom({duration: 4500})} className="fadeIn">
+                        continue
+                    </AwesomeButton>
+                </div>
             </section>
         )
     }
@@ -67,7 +74,7 @@ export function Section3() {
                     <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Unabomber - a Web3 Unaboomer.</p>
                     <img src={Boomer} alt="" width="120px" />
                     <p>
-                        <AwesomeButton ripple={true}>
+                        <AwesomeButton type="secondary" ripple={true}>
                             mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
@@ -82,7 +89,7 @@ export function Section3() {
                     <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - send to other Unaboomers to kill them.</p>
                     <img src={Bomb} alt="" width="100px" />
                     <p>
-                        <AwesomeButton ripple={true}>
+                        <AwesomeButton type="secondary" ripple={true}>
                             mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
@@ -96,8 +103,8 @@ export function Section3() {
                     <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process!</p>
                     <img src={Explosion} alt="" width="120px" />
                     <p>
-                        <AwesomeButton ripple={true}>
-                        send {sendBombAmount} (~0 Ξ)
+                        <AwesomeButton type="secondary" ripple={true}>
+                            send {sendBombAmount} (~0 Ξ)
                         </AwesomeButton>
                     </p>
                     <Slider className="slider" min={1} max={30} trackStyle={{