style and copy updates

src/components/Hero.jsx

@@ -275,9 +275,11 @@ export function Hero(props) {
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
                     <p>
-                        Unaboomers are terrorizing the metaverse. 
+                        Technology is leaving the boomer generation behind. 
-                        This gang of deplorables is on a warpath to stress 
+                        Now they're on a war path to disrupt the metaverse.
-                        the system and spark a revolution against technology.<br /><br />
+                        <br /><br />
+                        (Warning: your BOOMER may explode!)
+                        <br /><br />
                     </p>
                     {options.unaboomersMinted > 0 && (
                         <p>
@@ -297,7 +299,7 @@ export function Hero(props) {
                                 }}></input>
                                 <button className='doThing' disabled={radicalizeBoomersPrepare.status == 'error'} onClick={() => radicalizeBoomersWrite.write?.()}>
                                     {radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</>} 
-                                    {radicalizeBoomersWrite.isIdle && <>Radicalize {options.unaboomerAmount == 1 ? 'a Unaboomer': <>{options.unaboomerAmount} Unaboomers</>}</>}
+                                    {radicalizeBoomersWrite.isIdle && <>Radicalize {options.unaboomerAmount == 1 ? 'a Boomer': <>{options.unaboomerAmount} Boomers</>}</>}
                                     {radicalizeBoomersWrite.isSuccess && <img src={Loading} width="25px"></img>}
                                     {radicalizeBoomersWrite.isError && <>error</>}
                                 </button>
@@ -313,14 +315,14 @@ export function Hero(props) {
                     <img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
                 </div>
                 <div className='heroFlexItem'>
-                    <img src={Mailbomb} width='280px' alt='Pixelated Mailbomb image - handle with caution.' />
+                    <img src={Mailbomb} width='280px' alt='Pixelated mail bomb image - handle with caution.' />
                     <p>
-                        Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens. <br /><br />
+                        Don't let the Boomers win! Assemble mail bombs and blow 'em to smithereens. <br /><br />
                         (Warning: Some bombs are duds!)<br /><br />
                     </p>
                     {options.bombBalance > 0 && (
                         <p>
-                            You have {options.bombBalance} Mailbombs.
+                            You have {options.bombBalance} Mail bombs.
                         </p>
                     )}
                     <br />
@@ -334,7 +336,7 @@ export function Hero(props) {
                                 }}></input>
                                 <button className='doThing' disabled={assembleBombsPrepare.status == 'error'} onClick={() => assembleBombsWrite.write?.()}>
                                     {assembleBombsWrite.isLoading && <>assembling {options.bombAmount}</>} 
-                                    {assembleBombsWrite.isIdle && <>Assemble {options.bombAmount == 1 ? 'a Mailbomb': <>{options.bombAmount} Mailbombs</>}</>}
+                                    {assembleBombsWrite.isIdle && <>Assemble {options.bombAmount == 1 ? 'a mail bomb': <>{options.bombAmount} Mail bombs</>}</>}
                                     {assembleBombsWrite.isSuccess && <img src={Loading} width="25px"></img>}
                                     {assembleBombsWrite.isError && <>error</>}
                                 </button>
@@ -348,8 +350,7 @@ export function Hero(props) {
                 <div className='heroFlexItem'>
                     <img src={Explosion} width='280px' alt='Pixelated explosion image.' />
                     <p>
-                        Ready for mayhem? Burn your mailrooms to blow up a random boomer. <br /><br />
+                        Ready for mayhem? Mail a bomb to blow up a random BOOMER. <br /><br />
-                        If your bomb is live it will destroy a Boomer PFP forever. <br /><br />
                         (Warning: Your Boomer might explode!)
                     </p>
                     {isConnected 
@@ -363,7 +364,7 @@ export function Hero(props) {
                                 }}></input>
                                 <button className='doThing' disabled={sendBombsPrepare.status == 'error'} onClick={() => sendBombsWrite.write?.()}>
                                     {sendBombsWrite.isLoading && <>mailing {options.sendBombAmount}</>} 
-                                    {sendBombsWrite.isIdle && <>Mail {options.sendBombAmount == 1 ? 'a bomb': <>{options.sendBombAmount} Mailbombs</>}</>}
+                                    {sendBombsWrite.isIdle && <>Mail {options.sendBombAmount == 1 ? 'a bomb': <>{options.sendBombAmount} Mail bombs</>}</>}
                                     {sendBombsWrite.isSuccess && <img src={Loading} width="25px"></img>}
                                     {sendBombsWrite.isError && <>error</>}
                                 </button>
@@ -388,21 +389,24 @@ export function Hero(props) {
                             )}
                         </div>
                     </>
+                ) || (
+                    <div id="boomerPreviewBanner">
+                    </div>
                 )}
             </div>
             <div id="mintInfo" className="section">
                 <h1>WTF!?</h1>
                 <p>
-                    UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 7,896 pixel Boomers with 190 unique traits.
+                    UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 10,000 pixel Boomers with 190 unique traits.
                 </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.
+                    Assemble a mail bomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and get burned. 
                 </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.
+                    Mail bomb assembly is open to all. But be careful! Your Boomer can blow itself up in the process. 
                 </p>
                 <p>
-                    The round will end when 1,995 players remain standing...
+                    The more Boomers destroyed, the more likely your bomb is a dud. Shipments begin 24HRS post-mint. Round one ends when 5,000 boomers are left standing.
                 </p>
             </div>
             <div id="teamInfo" className="section">
@@ -420,6 +424,15 @@ export function Hero(props) {
                     </div>
                 </div>
             </div>
+
+            <div id="externalLinks">
+                <a href="https://twitter.com/unaboomernft" target={"_blank"}>TWITTER</a>
+                \\
+                <a href="https://opensea.io/unaboomernft" target={"_blank"}>OPENSEA</a>
+                \\
+                <a href="https://blur.io/unaboomernft" target={"_blank"}>BLUR</a>
+            </div>
+
             {isConnected && address && (
                 <>
                     <StatsPanel 

src/styles/hero.css

@@ -252,4 +252,12 @@ button.doThing:disabled {
     float: right;
     line-height: 1em;
     padding-right: 8px;
+}
+
+#externalLinks {
+    text-align: center;
+}
+
+#externalLinks a {
+    color: #f9f9f9;
 }