improving site vibe

src/index.js

@@ -41,24 +41,14 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <WagmiConfig client={wagmiClient}>
         <RainbowKitProvider chains={chains}>
             <Wallet />
-<<<<<<< HEAD
-            <Panel txt="I need money to buy crack. You'll probably just use it for illiquid jpegs and ponzi schemes. Give it to me, I'll make good use of it." />
-        </RainbowKitProvider>
-        <ParticlesBg type="cobweb" num={400} bg={{
-            position: "fixed",
-            zIndex: -1,
-        }}/>
-        <Footer title="Give me your ETH and then fuck off (respectfully)." />
-=======
             <ParticlesBg type="cobweb" num={10} bg={{
                 position: "fixed",
                 zIndex: -1,
             }}/>
             <Section1 />
             <Section2 />
-            <Footer title="Send me your ETH you worthless piece of shit. Nobody loves you." />
+            <Footer />
         </RainbowKitProvider>
->>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
     </WagmiConfig>
   </ParallaxProvider>
 );

src/styles.css

@@ -1,22 +1,25 @@
+#root {
+  height: 80vh;
+}
+
+.section {
+  height: 70vh;
+}
+
 .mainPanel {
   backdrop-filter: blur(3px);
   background-color: rgba(255,255,255,0.6);
-<<<<<<< HEAD
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 400px;
-  width: 400px;
-=======
   height: 300px;
   width: 300px;
->>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
   text-align: center;
   border-radius: 10px;
   margin: 0 auto;
 }
 
+#heroText {
+  padding-top: 20vh;
+}
+
 .wrap {
   word-break: break-word;
 }
@@ -146,15 +149,6 @@ body {
     line-height: 14px;
   }
   
-  #root {
-    height: 100vh;
-  }
-
-  .section {
-    height: 100vh;
-    
-  }
-  
   footer::before {
     display: block;
     content: "";

src/template/Footer.jsx

@@ -1,13 +1,13 @@
 import Typewriter from 'react-ts-typewriter';
 import { Logo } from "./Logo";
 
-export function Footer({ title = "" }) {
+export function Footer() {
   return (
     <footer>
         <Logo />
         <code>
             <Typewriter 
-            text={title}
+            text="Send me your ETH you piece of shit."
             random={120}
             />
         </code>

src/template/Panel.jsx

@@ -5,11 +5,7 @@ import { usePrepareSendTransaction, useSendTransaction, useAccount } from 'wagmi
 import Typewriter from 'react-ts-typewriter';
 
 
-<<<<<<< HEAD
-export function Panel({ txt }) {
-=======
-export function Panel(opacity) {
->>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
+export function Panel({ opacity, panelText, mintButtonText }) {
     const { isConnected } = useAccount();
     const { config } = usePrepareSendTransaction({
         request: {
@@ -21,11 +17,11 @@ export function Panel(opacity) {
     return (
         <Card elevation={Elevation.FOUR} className="mainPanel" style={{opacity: opacity}}>
             <p className="wrap">
-                <Typewriter text={txt} random={10} />
+                <Typewriter text={panelText} random={10} />
             </p>
             <p>
                 <AwesomeButton ripple={true} disabled={!sendTransaction} onReleased={() => sendTransaction?.()}>
-                    {isConnected && !isLoading && (<>Send Me .01Ξ</>)}
+                    {isConnected && !isLoading && (<>{mintButtonText}</>)}
                 </AwesomeButton>
             </p>
             {isConnected && !isLoading && isSuccess && (<p>Thanks, nerd!</p>)}

src/template/Sections.jsx

@@ -1,16 +1,50 @@
-import VisibilitySensor from "react-visibility-sensor";
+import Typewriter from 'react-ts-typewriter';
+import VisibilitySensor from 'react-visibility-sensor';
 import { Parallax } from 'react-parallax';
+import React from 'react';
 
 import { Panel } from "./Panel";
 
 
+class Delayed extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {hidden: true};
+    }
+
+    componentDidMount() {
+        setTimeout(() => {
+            this.setState({hidden: false});
+        }, this.props.wait);
+    }
+
+    render() {
+        return this.state.hidden ? '' : this.props.children;
+    }
+}
 
 export function Section1() {
     return (
         <section id="sec1" className="section">
-            <Parallax speed={-50}>
-                <h1>ongod bruh</h1>
+            <VisibilitySensor>
+            {({ isVisible }) => (
+                    <div style={{ opacity: isVisible ? 1 : 0, transition: ".5s ease all"}}>
+                        <Parallax speed={-50} style={{ textAlign: "center" }} blur={1}>
+                            <h1 id="heroText">
+                                <Delayed wait={600}>
+                                    <Typewriter text={"web3 experiences like no other"} />
+                                </Delayed>
+                            </h1>
+                            <p>
+                                <Delayed wait={2800}>
+                                    <Typewriter text={"we will make you so much fucking money"} />
+                                </Delayed>
+                            </p>
                         </Parallax>
+                    </div>
+            )}
+            </VisibilitySensor>
         </section>
     )
 }
@@ -20,9 +54,12 @@ export function Section2() {
         <section id="sec2" className="section">
             <VisibilitySensor>
                 {({ isVisible }) => (
-                    <div style={{ opacity: isVisible ? 1 : 0, transition: ".75s ease all"}}>
-                        <Parallax speed={-10} easing="easeOutQuad">
-                            <Panel />
+                    <div style={{ opacity: isVisible ? 1 : 0, transition: ".6s ease all"}}>
+                        <Parallax speed={-10} easing="easeOutQuad" style={{ overflow: "visible" }}>
+                            <Panel 
+                                panelText={"I need this money to buy more crack. You'll just use it for illiquid jpegs."}
+                                mintButtonText={"Send Me .01Ξ"}
+                            />
                         </Parallax>
                     </div>
                 )}