diff --git a/src/img/seizeditems.png b/src/img/seizeditems.png new file mode 100644 index 0000000..f71805c Binary files /dev/null and b/src/img/seizeditems.png differ diff --git a/src/index.js b/src/index.js index 090ea08..39e3ea1 100644 --- a/src/index.js +++ b/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(
- - - +
diff --git a/src/styles/sections.css b/src/styles/sections.css index bd63158..e78ffd3 100644 --- a/src/styles/sections.css +++ b/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; diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx index 63a1ca4..1f0c7a2 100644 --- a/src/template/Sections.jsx +++ b/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 { Pixelated police sketch of the Unabomber suspect. - ) } @@ -40,15 +41,26 @@ export class Section1 extends React.Component { export function Section2() { return ( - -
-
+
+ +
+
+ +
+
+
) } 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 ( -
+

Radicalize a Boomer

@@ -56,22 +68,28 @@ export function Section3() {

- mint (1 eth) + mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)

- + setBoomerAmount(v)} />

Assemble Bombs

-

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.

+

Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - send to other Unaboomers to kill them.

- mint (1 eth) + mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)

- + setBombAmount(v)} />

Send Bombs

@@ -79,16 +97,29 @@ export function Section3() {

- mint (1 eth) + send {sendBombAmount} (~0 Ξ)

- + setSendBombAmount(v)} />
) } +export function AllSections() { + return ( + <> + + + + + ) +} + // export function Panel({ opacity, panelText, mintButtonText }) { // const { isConnected } = useAccount(); // const { config } = usePrepareSendTransaction({