master
lza_menace 2 years ago
parent b9c270a762
commit 64d53d4289

1445
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -12,6 +12,7 @@
"ethers": "^5.7.2",
"particles-bg": "^2.5.5",
"react": "^18.2.0",
"react-animated-text-content": "^1.0.1",
"react-awesome-button": "^7.0.4",
"react-dom": "^18.2.0",
"react-parallax": "^3.5.1",

@ -4,6 +4,7 @@ import { AwesomeButton } from 'react-awesome-button';
export function Wallet() {
return (
<nav className="navbar">
<ConnectButton.Custom>
{({
account,
@ -125,5 +126,6 @@ export function Wallet() {
);
}}
</ConnectButton.Custom>
</nav>
);
};

@ -40,14 +40,16 @@ ReactDOM.createRoot(document.getElementById("root")).render(
<ParallaxProvider>
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<ParticlesBg type="cobweb" num={200} bg={{
<ParticlesBg type="cobweb" num={40} bg={{
position: "fixed",
zIndex: -1,
}}/>
<Wallet />
<div className="scrollContainer">
<Section1 />
<Section2 />
<Section3 />
</div>
<Footer />
</RainbowKitProvider>
</WagmiConfig>

@ -1,13 +1,15 @@
#root {
height: 90vh;
height: 100vh;
}
.section {
height: 90vh;
height: 100vh;
text-align: center;
/* scroll-snap-align: start; */
}
.sec2Text {
width: 50%;
width: 75%;
margin: 0 auto;
padding-bottom: 1em;
}
@ -16,21 +18,34 @@
font-size: .8em;
}
.scrollContainer {
height: 100vh;
/* overflow-y: scroll; */
/* scroll-snap-type: y mandatory; */
}
.mainPanel {
backdrop-filter: blur(3px);
background-color: rgba(255,255,255,0.6);
height: 60%;
width: 80%;
text-align: center;
width: 60%;
border-radius: 10px;
margin: 0 auto;
margin-top: 10%;
padding-top: 5%;
padding-bottom: 5%;
left: 0;
right: 0;
position: absolute;
}
#heroText {
padding-top: 20vh;
font-size: 4em;
width: 80%;
text-align: center;
margin: 2em auto .5em auto;
}
.wrap {
@ -170,6 +185,40 @@ body {
color: var(--accent);
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 40px;
background-image: radial-gradient(
rgba(0, 0, 0, 0) 1px,
var(--background) 1px
);
background-size: 4px 4px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-moz-backdrop-filter: blur(3px);
font-size: 14px;
line-height: 14px;
z-index: 999;
}
nav::before {
display: block;
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.2;
}
code {
font-family: input-mono, monospace;
font-weight: 400;

@ -8,15 +8,15 @@ export function Footer() {
<code>
<Typewriter
text={[
"We are world builders, story tellers, and artists",
"We are shaping the future of Web3 and metaverse",
"We are con artists",
"Send us your money you gullible loser",
"We hate you"
"world builders, story tellers, and artists",
"shaping the future of web3 and metaverse",
"we are con artists",
"send us your money you gullible loser",
"we hate you"
]}
loop={true}
delay={2500}
random={80}
random={0}
/>
</code>
</footer>

@ -9,7 +9,7 @@ export function Panel({ opacity, panelText, mintButtonText }) {
const { config } = usePrepareSendTransaction({
request: {
to: '0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395',
value: ethers.utils.parseEther('.666'),
value: ethers.utils.parseEther('.1'),
}
});
const { isLoading, isSuccess, sendTransaction } = useSendTransaction(config);

@ -1,83 +1,50 @@
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 {
export class Section1 extends React.Component {
constructor(props) {
super(props);
this.state = {hidden: true};
let titles = {
0: 'Innovative Web3 and Metaverse experiences',
1: 'Immersive and engaging worlds and communities',
2: 'We sell useless pictures to fools'
}
componentDidMount() {
setTimeout(() => {
this.setState({hidden: false});
}, this.props.wait);
let subtitles = {
0: 'Connecting the ethereal to the real',
1: 'Connecting our audience to a larger purpose',
2: 'Connecting your money to our bank account'
}
render() {
return this.state.hidden ? '' : this.props.children;
this.state = {title: titles[0], iter: 0, subtitle: subtitles[0]};
setInterval(() => {
let iter = this.state.iter + 1;
this.setState({
title: titles[iter % 3],
subtitle: subtitles[iter % 3],
iter: iter
});
}, 4500);
}
}
class Section extends React.Component {
render() {
return (
<section className="section">
<VisibilitySensor>
{({ isVisible }) => (
<div style={{ opacity: isVisible ? 1 : 0, transition: ".5s ease all"}}>
<Parallax speed={-20} style={{ textAlign: "center", overflow: "visible" }} blur={1}>
{this.props.children}
</Parallax>
</div>
)}
</VisibilitySensor>
</section>
)
}
}
export function Section1() {
return (
<Section>
<h1 id="heroText">
<Delayed wait={600}>
<Typewriter text={[
"innovative web3 and metaverse experiences",
"immersive and engaging worlds and communities",
"we sell useless pictures to fools"
]}
delay={2500}
random={0}
loop={true}
/>
</Delayed>
{this.state.title}
</h1>
<p>
<Delayed wait={800}>
<Typewriter
text={[
"connecting the ethereal to the real",
"connecting our audience to a larger purpose",
"connecting your money to our bank account"
]}
delay={2500}
random={0}
loop={true}
/>
</Delayed>
{this.state.subtitle}
</p>
</Section>
</section>
)
}
}
export function Section2() {
return (
<Section>
<section className="section">
<div className="sec2Text">
<p className="subtext">
A <strong>Web3</strong> company whose goal is to extract as much money as possible from the NFT space.
</p>
@ -99,24 +66,21 @@ export function Section2() {
<p className="subtext">
we have formed a United States Limited Liability Corporation and accepted money from Venture Capital funds, we wish to have a global audience of dummies to fleece.
</p>
<h1>
WE ARE $WEB3_CORP
</h1>
<p>
WAGMI!
</p>
</div>
</Section>
</section>
)
}
export function Section3() {
return (
<Section>
<section className="section">
<Panel
panelText={"Purchase our genesis NFT drop for exclusive membership to the hottest new project in the metaverse. Flex your new illiquid jpeg on Twitter and tell normies \"they just don't get it\". We have private Discord channels where you can chat with other like-minded crypto geniuses."}
mintButtonText={"Purchase Membership (.666Ξ)"}
mintButtonText={"Purchase Membership (.1Ξ)"}
/>
</Section>
</section>
)
}
Loading…
Cancel
Save