updated ui

src/components/Footer.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import '../styles/footer.css';
 
+import FooterBG from '../img/footer.png';
+
 export class Footer extends React.Component {
     render() {
         return (
-            <footer></footer>
+            <footer>
+                <img src={FooterBG} width="100%" />
+            </footer>
         )
     }
 }

src/components/Hero.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { ethers, BigNumber } from 'ethers';
 import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction, erc721ABI } from 'wagmi';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import debounce from 'lodash';
 import { StatsPanel, TrollboxPanel } from './Panels';
 
 import MainABI from '../abi/main.json';
@@ -15,6 +14,7 @@ import Arrow from '../img/arrow_right.png';
 import LZA from '../img/lza_menace.png';
 import Carty from '../img/cartyisme.png';
 import Loading from '../img/loading.svg';
+import Splash from '../img/splash_desktop_slim.png';
 
 
 export function Hero(props) {
@@ -246,12 +246,6 @@ export function Hero(props) {
         <div id='hero'>
             <NotificationContainer />
             <h1 id='heroTitle'>the web3 revolution & its consequences have been a disaster for the human race.</h1>
-            <p id='heroText'>
-                Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, 
-                and expensive JPEGs have made them angry. <br /><br />
-                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '7,896'} Boomers have joined forces 
-                to lash out at the system.<br /><br />
-            </p>
             {isConnected && options.unaboomersMinted > 0 && (
                 <>
                 <div className="progress">
@@ -374,9 +368,9 @@ export function Hero(props) {
                     }
                 </div>
             </div>
-            <div id="userInventory">
+            
             {isConnected && JSON.parse(tokensMinted).length > 0 && (
-                    <>
+                <div id="userInventory">
                     <h1>You Minted</h1>
                     <div className="ownedTokens">
                         {JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
@@ -388,12 +382,13 @@ export function Hero(props) {
                             )
                         )}
                     </div>
-                    </>
+                </div>
             ) || (
                 <div id="boomerPreviewBanner">
+                    <img src={Splash} width="100%" />
                 </div>
             )}
-            </div>
+            
             <div id="mintInfo" className="section">
                 <h1>WTF!?</h1>
                 <p>
@@ -431,6 +426,9 @@ export function Hero(props) {
                 <a href="https://opensea.io/unaboomernft" target={"_blank"}>OPENSEA</a>
                 \\
                 <a href="https://blur.io/unaboomernft" target={"_blank"}>BLUR</a>
+                <br />
+                <br />
+                <br />
             </div>
 
             {isConnected && address && (

src/index.js

@@ -16,7 +16,7 @@ import { Hero } from "./components/Hero";
 import { Footer } from "./components/Footer";
 
 const { chains, provider, webSocketProvider } = configureChains(
-  [mainnet, goerli, localhost],
+  [localhost, goerli, mainnet],
   [
     infuraProvider({ apiKey: 'e7674eea9d72437d9129b41ed018183d' }),
     publicProvider()    

src/styles/footer.css

@@ -1,8 +1,6 @@
 footer {
-    background: url('../img/footer.png') no-repeat center;
     width: 100%;
     background-size: 100%;
-    height: 500px;
     display: block;
     padding: 0;
     margin: 0;

src/styles/hero.css

@@ -261,3 +261,8 @@ button.doThing:disabled {
 #externalLinks a {
     color: #f9f9f9;
 }
+
+#boomerPreviewBanner {
+    width: 100%;
+    padding-top: 1em;
+}