diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 2f87062..f7ac649 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -243,6 +243,25 @@ export function Hero(props) { They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '7,896'} Boomers have joined forces to lash out at the system.

+ {isConnected && options.unaboomersMinted > 0 && ( + <> +
+

{options.unaboomersRadicalized} / {options.unaboomerMaxSupply} minted

+
+
+
+
+

{options.unaboomersKilled} / {options.unaboomerMaxSurvivorCount} killed

+
+
+
+ + )}
Pixelated Unaboomer profile picture - a hooded man with dark sunglasses. @@ -348,7 +367,7 @@ export function Hero(props) {
{isConnected && JSON.parse(tokensMinted).length > 0 && ( <> -

Your Unaboomers

+

You Minted

{JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
diff --git a/src/styles/hero.css b/src/styles/hero.css index 1eb9b69..54184ac 100644 --- a/src/styles/hero.css +++ b/src/styles/hero.css @@ -8,6 +8,34 @@ margin: 1em auto; } +.progress { + background: rgba(255,255,255,0.1); + justify-content: flex-start; + border-radius: 100px; + align-items: center; + position: relative; + padding: 0 5px; + display: flex; + height: 40px; + width: 80%; + max-width: 800px; + margin: 2em auto; +} + +.progress-value { + animation: load 3s normal forwards; + box-shadow: 0 10px 40px -10px #fff; + border-radius: 100px; + background: #fff; + height: 30px; +} + +.progress p { + width: 100%; + text-align: center; + position: absolute; +} + .section { text-align: center; padding-bottom: 1em;