get things working better

src/index.js

@@ -13,7 +13,7 @@ import { publicProvider } from 'wagmi/providers/public';
 import { ParallaxProvider } from 'react-scroll-parallax';
 
 import { Wallet } from "./Wallet";
-import { Section1, Section2, Section3 } from './template/Sections';
+import { AllSections } from './template/Sections';
 
 
 const { chains, provider, webSocketProvider } = configureChains(
@@ -39,9 +39,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <RainbowKitProvider chains={chains} initialChain={1337}>
             <Wallet />
             <div className="scrollContainer">
-              <Section1 />
+              <AllSections />
-              <Section2 />
-              <Section3 />
             </div>
         </RainbowKitProvider>
     </WagmiConfig>

src/styles/sections.css

@@ -1,6 +1,6 @@
-/* #root {
+#root {
     height: 100vh;
-} */
+}
 
 .section {
     height: 100vh;
@@ -8,12 +8,6 @@
     /* scroll-snap-align: start; */
 }
   
-.sec2Text {
-    width: 75%;
-    margin: 0 auto;
-    padding-bottom: 1em;
-}
-  
 .subtext {
     font-size: .8em;
 }
@@ -25,9 +19,9 @@
 }
   
 #heroText {
-    padding-top: 20vh;
+    padding-top: 12vh;
     font-size: 4em;
-    width: 75%;
+    width: 80%;
     text-align: center;
     margin: 0 auto;
 }
@@ -38,6 +32,10 @@
     animation: fadeIn 4s ease-in;
 }
 
+.fadeIn {
+    animation: fadeIn 6s ease-in;
+}
+
 @keyframes fadeIn {
     0% { opacity: 0 }
     25% { opacity: .05 }
@@ -46,6 +44,11 @@
     100% { opacity: 1 }
 }
 
+.slider {
+    width: 80%;
+    margin: 0 auto;
+}
+
 .mintContainer {
     padding-top: 6em;
     margin: 2em auto;

src/template/Sections.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { BigNumber, ethers } from 'ethers';
 import Typewriter from 'react-ts-typewriter';
 import Slider from 'rc-slider';
 import { Parallax } from 'react-parallax';
@@ -8,6 +9,7 @@ import Boomer from '../img/unaboomer.png';
 import Newspapers from '../img/newspapers.png';
 import Bomb from '../img/bomb.png';
 import Explosion from '../img/explosion.png';
+import SeizedItems from '../img/seizeditems.png';
 
 import 'rc-slider/assets/index.css';
 import '../styles/sections.css';
@@ -32,7 +34,6 @@ 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." />
-                
             </section>
         )
     }
@@ -40,15 +41,26 @@ export class Section1 extends React.Component {
 
 export function Section2() {
     return (
-        <Parallax blur={{ min: 0, max: 4 }} bgImage={Newspapers} bgImageAlt="Newspapers containing the Unabomber's manifesto." strength={300}>
+        <div className="fadeIn">
-            <section id="section2" className="section"></section>
+            <Parallax blur={{ min: 0, max: 3 }} bgImage={Newspapers} bgImageAlt="Newspapers containing the Unabomber's manifesto." strength={300}>
-        </Parallax>
+                <section id="section2" className="section"></section>
+            </Parallax>
+            <Parallax blur={{ min: 0, max: 3 }} bgImage={SeizedItems} bgImageAlt="The Unabomber's tools and typewriter seized from his Montana cabin." strength={-80}>
+                <section className="section"></section>
+            </Parallax>
+        </div>
     )
 }
 
 export function Section3() {
+    const [boomerAmount, setBoomerAmount] = useState(1);
+    const [bombAmount, setBombAmount] = useState(1);
+    const [sendBombAmount, setSendBombAmount] = useState(1);
+    const price = ethers.utils.parseEther('.01');
+    
+    console.log(bombAmount)
     return (
-        <section id="section3" className="section">
+        <section className="section">
             <div className="mintContainer">
                 <div className="mintItem">
                     <h1>Radicalize a Boomer</h1>
@@ -56,22 +68,28 @@ export function Section3() {
                     <img src={Boomer} alt="" width="120px" />
                     <p>
                         <AwesomeButton ripple={true}>
-                            mint (1 eth)
+                            mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
-                    <Slider min={1} max={40} />
+                    <Slider className="slider" min={1} max={30} trackStyle={{
+                        backgroundColor:'rgba(125, 46, 104, .8)', 
+                        borderColor:'rgba(37, 19, 81, .8)'
+                    }} onChange={v => setBoomerAmount(v)} />
                     
                 </div>
                 <div className="mintItem">
                     <h1>Assemble Bombs</h1>
-                    <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - you can send to other Unaboomers to kill them.</p>
+                    <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}>
-                            mint (1 eth)
+                            mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
                         </AwesomeButton>
                     </p>
-                    <Slider min={1} max={40} />
+                    <Slider className="slider" min={1} max={30} trackStyle={{
+                        backgroundColor:'rgba(125, 46, 104, .8)', 
+                        borderColor:'rgba(37, 19, 81, .8)'
+                    }} onChange={v => setBombAmount(v)} />
                 </div>
                 <div className="mintItem">
                     <h1>Send Bombs</h1>
@@ -79,16 +97,29 @@ export function Section3() {
                     <img src={Explosion} alt="" width="120px" />
                     <p>
                         <AwesomeButton ripple={true}>
-                            mint (1 eth)
+                        send {sendBombAmount} (~0 Ξ)
                         </AwesomeButton>
                     </p>
-                    <Slider min={1} max={40} />
+                    <Slider className="slider" min={1} max={30} trackStyle={{
+                        backgroundColor:'rgba(125, 46, 104, .8)', 
+                        borderColor:'rgba(37, 19, 81, .8)'
+                    }} onChange={v => setSendBombAmount(v)} />
                 </div>
             </div>
         </section>
     )
 }
 
+export function AllSections() {
+    return (
+        <>
+            <Section1 />
+            <Section2 />
+            <Section3 />
+        </>
+    )
+}
+
 // export function Panel({ opacity, panelText, mintButtonText }) {
 //     const { isConnected } = useAccount();
 //     const { config } = usePrepareSendTransaction({