get shit wurkin

src/styles/sections.css

@@ -42,6 +42,29 @@
     0% { opacity: 0 }
     25% { opacity: .05 }
     50% { opacity: .10 }
-    75% { opacity: .5 }
+    75% { opacity: .2 }
     100% { opacity: 1 }
 }
+
+.mintContainer {
+    padding-top: 6em;
+    margin: 2em auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+  
+.mintItem {
+    height: 100%;
+    margin: 0 auto;
+}
+
+.mintItem h1 {
+    margin: .5em;
+}
+
+.mintItem p {
+    max-width: 40vh;
+    text-align: center;
+    margin: 0 auto 1em auto;
+}

src/template/Sections.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import Typewriter from 'react-ts-typewriter';
+import { Parallax } from 'react-parallax';
 
-import { Panel } from "./Panel";
+import { AwesomeButton } from 'react-awesome-button';
 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 '../styles/sections.css';
 
 
@@ -20,11 +24,11 @@ export class Section1 extends React.Component {
 
     render() {
         return (
-            <section className="section">
+            <section id="section1" className="section">
                 <h1 id="heroText">
-                    <Typewriter text={this.state.title} cursor={true} />
+                    <Typewriter text={this.state.title} cursor={true} random={20} />
                 </h1>
-                <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} />
+                <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." />
                 
             </section>
         )
@@ -33,22 +37,71 @@ export class Section1 extends React.Component {
 
 export function Section2() {
     return (
-        <section className="section">
+        <Parallax blur={{ min: 0, max: 4 }} bgImage={Newspapers} bgImageAlt="Newspapers containing the Unabomber's manifesto." strength={300}>
-            <div className="sec2Text">
+            <section id="section2" className="section"></section>
-                <h2>The Web3 Revolution and it's consequences have been a disaster for the human race.</h2>
+        </Parallax>
-                <p className="subtext">ok</p>
-            </div>
-        </section>
     )
 }
 
 export function Section3() {
     return (
-        <section className="section">
+        <section id="section3" className="section">
-            <Panel 
+            <div className="mintContainer">
-                panelText={"Purchase our genesis NFT drop for exclusive membership to the hottest new project in the metaverse. Flex your new illiquid jpeg on Twitter and tell normies \"they just don't get it\". We have private Discord channels where you can chat with other like-minded crypto geniuses."}
+                <div className="mintItem">
-                mintButtonText={"Purchase Membership (.1Ξ)"}
+                    <h1>Radicalize a Boomer</h1>
-            />
+                    <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}>
+                            mint (1 eth)
+                        </AwesomeButton>
+                    </p>
+                </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>
+                    <img src={Bomb} alt="" width="100px" />
+                    <p>
+                        <AwesomeButton ripple={true}>
+                            mint (1 eth)
+                        </AwesomeButton>
+                    </p>
+                </div>
+                <div className="mintItem">
+                    <h1>Send Bombs</h1>
+                    <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}>
+                            mint (1 eth)
+                        </AwesomeButton>
+                    </p>
+                </div>
+            </div>
         </section>
     )
 }
+
+// export function Panel({ opacity, panelText, mintButtonText }) {
+//     const { isConnected } = useAccount();
+//     const { config } = usePrepareSendTransaction({
+//         request: {
+//           to: '0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395',
+//           value: ethers.utils.parseEther('.1'),
+//         }
+//     });
+//     const { isLoading, isSuccess, sendTransaction } = useSendTransaction(config);
+//     return (
+//         <Card elevation={Elevation.FOUR} className="mainPanel" style={{opacity: opacity}}>
+//             <p className="wrap">
+//                 {panelText}
+//             </p>
+//             <p>
+//                 <AwesomeButton ripple={true} disabled={!sendTransaction} onReleased={() => sendTransaction?.()}>
+//                     {isConnected && !isLoading && (<>{mintButtonText}</>)}
+//                 </AwesomeButton>
+//             </p>
+//             {isConnected && !isLoading && isSuccess && (<p>Thanks, nerd!</p>)}
+//         </Card>
+//     )
+// }