getting shit mostly working

src/components/Footer.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import '../styles/footer.css';
+
+export class Footer extends React.Component {
+    render() {
+        return (
+            <footer></footer>
+        )
+    }
+}

src/components/Hero.jsx

@@ -12,18 +12,21 @@ import Unaboomer from '../img/unaboomer.png';
 import Mailbomb from '../img/mailbomb.png';
 import Explosion from '../img/explosion.png';
 import Arrow from '../img/arrow_right.png';
+import LZA from '../img/lza_menace.png';
+import Carty from '../img/cartyisme.png';
+
 
 export function Hero(props) {
     const contractAddress = props.contractAddress;
     const { isConnected, address } = useAccount();
 
     const [tokensMinted, setTokensMinted] = useState(() => {
-        const saved = localStorage.getItem('tokensMinted-v2-' + address);
+        const saved = localStorage.getItem('tokensMinted-v3-' + address);
         return saved || JSON.stringify([])
     });
 
     useEffect(() => {
-        localStorage.setItem('tokensMinted-v2-' + address, tokensMinted);
+        localStorage.setItem('tokensMinted-v3-' + address, tokensMinted);
     }, [tokensMinted]);
 
     const [options, setOptions] = useState({ 
@@ -337,6 +340,36 @@ export function Hero(props) {
                     }
                 </div>
             </div>
+            <div id="mintInfo" className="section">
+                <h1>WTF!?</h1>
+                <p>
+                    UNABOOMER is a deflationary Player vs. Player PFP NFT. 35,000 pixel Boomers, with 190 unique traits will go free-to-radicalize.
+                </p>
+                <p>
+                    Assemble a mailbomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and be burned. Mailbomb assembly is open to all.
+                </p>
+                <p>
+                    But be careful! Your Boomer can blow itself up in the process. The more Boomers destroyed, the more likely your bomb is a dud.
+                </p>
+                <p>
+                    This is only the beginning...
+                </p>
+            </div>
+            <div id="teamInfo" className="section">
+                <h1>Team!</h1>
+                <div id="teamMembers">
+                    <div className='teamMember'>
+                        <img src={Carty} width='180px' alt='cartyisme Renga PFP' />
+                        <a href='https://twitter.com/cartyisme' target='_blank' className=''>@cartyisme</a>
+                        <p>Artist, idiot, and shillosopher. Opensea employee and Art101 progenitor.</p>
+                    </div>
+                    <div className='teamMember'>
+                        <img src={LZA} width='180px' alt='lza_menace Milady PFP' />
+                        <a href='https://twitter.com/lza_menace' target='_blank' className=''>@lza_menace</a>
+                        <p>Solidity dude, Monero fan, and meme consooomer.</p>
+                    </div>
+                </div>
+            </div>
             <div id="userInventory">
                 {isConnected && JSON.parse(tokensMinted).length > 0 && (
                     <>

src/index.js

@@ -13,6 +13,7 @@ import { publicProvider } from 'wagmi/providers/public';
 
 import { Navbar } from "./components/Navbar";
 import { Hero } from "./components/Hero";
+import { Footer } from "./components/Footer";
 
 const { chains, provider, webSocketProvider } = configureChains(
   [mainnet, goerli, localhost],
@@ -42,6 +43,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
               contractAddress={'0x5FbDB2315678afecb367f032d93F642f64180aa3'} 
               ws={'wss://lzahq.tech/ws'}
             />
+            <Footer />
         </RainbowKitProvider>
     </WagmiConfig>
 );

src/styles/footer.css

@@ -0,0 +1,9 @@
+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

@@ -8,6 +8,40 @@
     margin: 1em auto;
 }
 
+.section {
+    text-align: center;
+    padding-bottom: 1em;
+    width: 65%;
+    margin: 0 auto;
+}
+
+.section h1 {
+    font-size: 3em;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+#teamMembers {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0 auto;
+    text-align: center;
+    width: 100%;
+}
+
+.teamMember {
+    flex: 0;
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    padding-bottom: 1em;
+}
+
+.teamMember a {
+    color: #ff00ea;
+}
+
 #heroText {
     width: 80%;
     margin: 2em auto;
@@ -56,16 +90,21 @@ button.doThing:disabled {
     width: 80%;
     margin: 0 auto;
     padding-bottom: 4em;
+    text-align: center;
 }
 
 #userInventory h1 { 
-    margin: 0 0 1em 0;
+    margin: 0 auto;
+    padding: 1em;
 }
   
 .ownedTokens {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    text-align: center;
+    margin: 0 auto;
+    width: 90%;
 }
 
 .ownedToken {