feat: meme grid is now responsive
This commit is contained in:
Juan Di Toro
parent
e3a1e48a83
commit
3552e8bb84
|
|
@ -19,6 +19,7 @@
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
"sass": "^1.62.1",
|
"sass": "^1.62.1",
|
||||||
"tailwindcss": "^3.3.2",
|
"tailwindcss": "^3.3.2",
|
||||||
"typewriter-effect": "^2.19.0"
|
"typewriter-effect": "^2.19.0"
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 472 KiB After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 460 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 246 KiB |
|
|
@ -1,90 +1,38 @@
|
||||||
---
|
---
|
||||||
import './Meme.scss';
|
import meme1 from "/src/assets/meme-1.png";
|
||||||
import meme1 from '/src/assets/meme-1.png';
|
import meme2 from "/src/assets/meme-2.png";
|
||||||
import meme2 from '/src/assets/meme-2.png';
|
import meme3 from "/src/assets/meme-3.png";
|
||||||
import meme3 from '/src/assets/meme-3.png';
|
import meme4 from "/src/assets/meme-4.png";
|
||||||
import meme4 from '/src/assets/meme-4.png';
|
import mulletMeme from "/src/assets/centralized-mullet-meme.png";
|
||||||
import mulletMeme from '/src/assets/mullet-meme.jpg';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="meme" class="tilted-bg">
|
<section id="meme" class="tilted-bg">
|
||||||
<div class="feature-group">
|
<div class="flex flex-row gap-10 md:mx-20 xl:mx-40">
|
||||||
<h2>
|
<div class="space-y-10">
|
||||||
Busting the Decentralized Web3 Myth
|
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||||
</h2>
|
BUSTING THE DECENTERALIZED WEB3 MYTH
|
||||||
<h3>
|
</h2>
|
||||||
The Decentralized Mullet
|
<h3 class="font-display text-6xl font-bold">The Centralized Mullet</h3>
|
||||||
</h3>
|
<p class="font-body text-2xl text-body">
|
||||||
<img src={mulletMeme.src} alt="Web 1" style="padding-bottom: 3em"/>
|
Right now, despite many claims, a majority, if not all, the services
|
||||||
<p>
|
that build the legos of Web3 are actually centralized, both with what
|
||||||
Right now, despite many claims, a majority, <b>if not all</b>, the services that build the legos of Web3 are
|
you can see and what you can't.
|
||||||
actually centralized, both with what you can <b>see</b> and what you <b>can't.</b></p>
|
</p>
|
||||||
<p>While some <b>blockchains</b> may be more <b>decentralized</b> than others, access to nearly every blockchain is also
|
|
||||||
<b>centralized</b>
|
<p class="font-body text-2xl text-body">
|
||||||
</p>
|
While some blockchains may be more decentralized than others, access to
|
||||||
<p>
|
nearly every blockchain is also entralized.
|
||||||
So consider this a call to action for our community to go back to ethos and make Web3 <i>real</i>
|
</p>
|
||||||
</p>
|
<p class="font-body text-2xl text-body">
|
||||||
</div>
|
So consider this a call to action for our community to go back to ethos
|
||||||
<div class="meme-items">
|
and make Web3 real.
|
||||||
<div class="meme-item">
|
</p>
|
||||||
<div>
|
|
||||||
<img src={meme1.src} alt="Web 1"/>
|
|
||||||
<h2>Web1</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Web1 is probably best remembered by geeks as chat rooms and IRC (which still exist to this day, but only to power users).
|
|
||||||
To normal users it was the age of AOL dial-up and similar networks where you got web, email, shopping, and chat all in one place.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="meme-item">
|
|
||||||
<div>
|
|
||||||
<img src={meme2.src}/>
|
|
||||||
<h2>Web2</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Web2 since evolved with the web browser and we got better gaming, online apps, video streaming and calling and much, much more. However, it also got quickly captured by Silicon Valley and what some refer to as the "tech bros".
|
|
||||||
<br /><br />
|
|
||||||
So <i>despite</i> the innovation that occurred, it has turned into a top-down system where only a few geeks/CEO's and their investors control your entire web.
|
|
||||||
<br /><br />
|
|
||||||
This also excludes the wider internet infrastructure of domains and ISP's (internet providers and hosting), who also play a part in controlling your web, be it for your "safety", or other reasons.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="meme-item">
|
|
||||||
<div>
|
|
||||||
<img src={meme3.src}/>
|
|
||||||
<h2>Crypto & Defi</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
We get the birth of Bitcoin and all of the innovation that followed. While BTC and a handful of other chains have remained decentralized both in operation, and access, the innovation over time has caused things to re-centralize.
|
|
||||||
<br /><br />
|
|
||||||
|
|
||||||
This is due to several factors including big money coming in, pushing greed, hype, and "FOMO". The invention of several new logos's causing this to only get worse, creating a classic "boom" and "bust". Human nature tends to be greedy, so over time, money overrode principles.
|
|
||||||
|
|
||||||
<br /><br />
|
|
||||||
|
|
||||||
Many development teams prioritized inventing new ideas and "shipping" them to users, while selling them "tokens" to exit at their expense, all while knowing none of what they created was <i>truly decentralized</i>.
|
|
||||||
<br /><br />
|
|
||||||
|
|
||||||
It became one large crypto casino.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="meme-item">
|
|
||||||
<div>
|
|
||||||
<img src={meme4.src}/>
|
|
||||||
<h2>Web3</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
What to say about Web3? Honestly... upfront it appeared to get used as a new buzz word to replace "DeFi". Terms like "Web3" and "Metaverse" have many different meanings to many people. It is intended to include more than just money and trading, and yet every blockchain-based system that can be labeled "web3" still builds onto of the same centralized crypto/defi infrastructure.
|
|
||||||
|
|
||||||
<br /><br />
|
|
||||||
|
|
||||||
The end result is an ecosystem that promotes and <b><i>wants</i></b> to be decentralized, but where money overrules ideology, ethos, and principles. This is in part due to who's bankrolling it all, and thus the incentives to build make it more about the money then about freedom.
|
|
||||||
|
|
||||||
<br /><br />
|
|
||||||
|
|
||||||
There needs to be a balance here between free markets/money and public goods/infra, and so far things are way out of wack and need to be fixed.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img
|
||||||
|
src={mulletMeme.src}
|
||||||
|
class="w-[500px] xl:w-[550px] max-h-[650px] self-center"
|
||||||
|
alt="Web 1"
|
||||||
|
style="padding-bottom: 3em"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
---
|
---
|
||||||
import './Typewriter.scss';
|
import "./Typewriter.scss";
|
||||||
import TypewriterContent from './TypewriterContent.jsx';
|
import TypewriterContent from "./TypewriterContent.jsx";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="typewriter">
|
<section id="typewriter" class="w-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
class="absolute -z-10 -right-[250px] -bottom-[250px] w-[1250px] object-contain"
|
||||||
|
src="/src/assets/video-placeholder.webp"
|
||||||
|
/>
|
||||||
<h1>
|
<h1>
|
||||||
<TypewriterContent client:load />
|
<TypewriterContent client:load />
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@
|
||||||
padding: 0 7.5%;
|
padding: 0 7.5%;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@apply text-9xl;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 2.2em;
|
min-height: 2.2em;
|
||||||
margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
|
margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
|
||||||
@include fluid-font-size-xs(6.25rem);
|
|
||||||
line-height: 110%;
|
line-height: 110%;
|
||||||
letter-spacing: -0.06em;
|
letter-spacing: -0.06em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -12,14 +12,14 @@ const HeaderContent = () => {
|
||||||
words = randomString.split(' ');
|
words = randomString.split(' ');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={ (typewriter) => {
|
<Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={(typewriter) => {
|
||||||
typewriter
|
typewriter
|
||||||
.changeDelay(50)
|
.changeDelay(50)
|
||||||
.typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
|
.typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
|
||||||
.start();
|
.start();
|
||||||
typewriter
|
typewriter
|
||||||
.typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
|
.typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
|
||||||
} }/>
|
}} />
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,20 @@
|
||||||
---
|
|
||||||
import './Vision.scss';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="vision">
|
<section id="vision">
|
||||||
<div class="feature-group">
|
<div class="space-y-10 mx-40">
|
||||||
<h2>Our Vision</h2>
|
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||||
<h3>Enable an open, censorship-resistant web</h3>
|
Our Vision
|
||||||
<p>Web3 is the next evolution of the internet that combines many legos from past decades.</p>
|
</h2>
|
||||||
<p>Benefits include internet <b>freedom</b>, <b>privacy</b>, and <b>ownership</b> over your personal web.</p>
|
<h3 class="font-display text-6xl font-bold">Make Web3 easy for everyone</h3>
|
||||||
<div>
|
<p class="font-body text-3xl text-body">
|
||||||
<a href="#" class="btn-main">Download Extension</a>
|
Web3 offers freedom of speech, data sovereignty, and privacy. We simplify
|
||||||
</div>
|
Web3 by bridging the gap between the two webs, enabling easy usage without
|
||||||
|
censorship or backdoors.over your personal web.
|
||||||
|
</p>
|
||||||
|
<div class="pt-10">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||||
|
>Download Extension</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#vision {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 56.8em;
|
|
||||||
margin: 0 7.5%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
min-width: 68em;
|
|
||||||
margin-left: min(0em, calc((100% - 68em) / 2));
|
|
||||||
background-image: url("/src/assets/video-placeholder.webp");
|
|
||||||
background-position: right top;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
max-width: 64em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 80rem) {
|
|
||||||
p {
|
|
||||||
background: rgba($color-blue-charcoal-2, 0.75);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
margin-top: 0.48em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +1,23 @@
|
||||||
---
|
<section id="web3" class="flex flex-row mx-40">
|
||||||
import './Web3.scss';
|
<div class="flex-1 -ml-40">
|
||||||
---
|
<img src="/src/assets/home-gfx-left.png" />
|
||||||
|
</div>
|
||||||
<section id="web3" class="tilted-bg">
|
<div class="flex-1 space-y-10 flex flex-col justify-center">
|
||||||
<div class="feature-group">
|
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||||
<h2>
|
What is the Web?
|
||||||
What is the Web?
|
</h2>
|
||||||
</h2>
|
<h3 class="font-display text-6xl font-bold">Why Web3 matters</h3>
|
||||||
<h3>
|
<p class="font-body text-3xl text-body">
|
||||||
Why Web3 matters
|
Web3 gives people control over their data, privacy, and ownership. Lume's
|
||||||
</h3>
|
affordable Web3 tech aims to speed up the transition from Web2 to Web3,
|
||||||
<p>
|
which matters for privacy and security.
|
||||||
Web3 often gets mixed up with other terms/buzz words such as "crypto" or "defi". However, the current web
|
</p>
|
||||||
you use now is often referred to insiders as "web2".
|
<div class="pt-10">
|
||||||
</p>
|
<a
|
||||||
<p>
|
href="/what-is-web3"
|
||||||
While Web3 can include many decentralized services, it symbolizes the multiverse, or the entirety of all
|
class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||||
decentralized & P2P networks. Some may refer to this as the "metaverse", or even "dweb", but we can agree to disagree 😉.
|
>Learn More</a
|
||||||
</p>
|
>
|
||||||
<div>
|
|
||||||
<a href="/what-is-web3" class="btn-main">Learn More</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#web3 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
height: 70em;
|
|
||||||
margin-top: 6em;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
width: 100%;
|
|
||||||
height: 81.7em;
|
|
||||||
max-width: 63.7em;
|
|
||||||
margin: -40em 0 0;
|
|
||||||
background-image: url("/src/assets/home-gfx-left.png");
|
|
||||||
background-position: left;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
@include fluid-position-left(58.4em, 58em);
|
|
||||||
max-width: 64em;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 80rem) {
|
|
||||||
p {
|
|
||||||
background: rgba($color-blue-charcoal, 0.75);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
margin-top: 0.48em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
---
|
||||||
|
import meme1 from "/src/assets/meme-1.png";
|
||||||
|
import meme2 from "/src/assets/meme-2.png";
|
||||||
|
import meme3 from "/src/assets/meme-3.png";
|
||||||
|
import meme4 from "/src/assets/meme-4.png";
|
||||||
|
import meme1Small from "/src/assets/meme-1-small.png";
|
||||||
|
import meme2Small from "/src/assets/meme-2-small.png";
|
||||||
|
import meme3Small from "/src/assets/meme-3-small.png";
|
||||||
|
import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
|
---
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
|
||||||
|
>
|
||||||
|
<!-- MEME GRID BIG -->
|
||||||
|
<div
|
||||||
|
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
||||||
|
>
|
||||||
|
<div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={meme1.src}
|
||||||
|
alt=""
|
||||||
|
class="absolute bottom-0 -left-[100px] object-contain xl:-left-5 float-left"
|
||||||
|
/>
|
||||||
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-5">
|
||||||
|
<h3 class="font-display text-6xl">Web1</h3>
|
||||||
|
<p class="font-body text-2xl text-body">
|
||||||
|
Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
|
||||||
|
signifies the era of integrated services like AOL dial-up, providing
|
||||||
|
web access, email, shopping, and chat for mainstream users.
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex-1 max-w-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={meme2.src}
|
||||||
|
alt=""
|
||||||
|
class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
|
||||||
|
/>
|
||||||
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-5">
|
||||||
|
<h3 class="font-display text-6xl">Web2</h3>
|
||||||
|
<p class="font-body text-2xl text-body">
|
||||||
|
Featuring improved gaming, online apps, and video streaming, was
|
||||||
|
swiftly monopolized by Silicon Valley, creating a top-down system
|
||||||
|
controlled by a few tech elites. Despite innovations, this system,
|
||||||
|
including the broader internet infrastructure like ISPs and domains,
|
||||||
|
regulates your web experience, often citing "safety".
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
||||||
|
>
|
||||||
|
<div class="relative flex-1">
|
||||||
|
<img
|
||||||
|
src={meme3.src}
|
||||||
|
alt=""
|
||||||
|
class="absolute bottom-0 -left-[110px] xl:-left-5 float-left"
|
||||||
|
/>
|
||||||
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
|
||||||
|
<h3 class="font-display text-6xl">Crypto/<br />DeFi</h3>
|
||||||
|
<p class="font-body text-2xl text-body">
|
||||||
|
The advent of Bitcoin sparked innovation, but over time,
|
||||||
|
centralization increased. Factors such as the influx of big money,
|
||||||
|
greed, hype, and FOMO contributed to this trend. The introduction of
|
||||||
|
many money legos worsened the situation, leading to boom and bust
|
||||||
|
cycles.
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex-1 max-w-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={meme4.src}
|
||||||
|
alt=""
|
||||||
|
class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
|
||||||
|
/>
|
||||||
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
|
||||||
|
<h3 class="font-display text-6xl">Web3</h3>
|
||||||
|
<p class="font-body text-2xl text-body">
|
||||||
|
Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
|
||||||
|
Despite aiming for decentralization, Web3 relies on centralized
|
||||||
|
crypto/DeFi infrastructure. Money dominates over ideology, driven by
|
||||||
|
funders. A balance is necessary between free markets and public goods
|
||||||
|
to address the current imbalance.
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- MEME GRID BIG -->
|
||||||
|
|
||||||
|
<!-- MEME GRID SMALL -->
|
||||||
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
|
<h3 class="font-display text-3xl">Web1</h3>
|
||||||
|
<p class="font-body text-body text-xl">
|
||||||
|
Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
|
||||||
|
signifies the era of integrated services like AOL dial-up, providing web
|
||||||
|
access, email, shopping, and chat for mainstream users.
|
||||||
|
</p>
|
||||||
|
<img src={meme1Small.src} class="-mb-10 w-60 self-center" />
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
|
<h3 class="font-display text-3xl">Web2</h3>
|
||||||
|
<p class="font-body text-body text-xl">
|
||||||
|
Featuring improved gaming, online apps, and video streaming, was swiftly
|
||||||
|
monopolized by Silicon Valley, creating a top-down system controlled by a
|
||||||
|
few tech elites. Despite innovations, this system, including the broader
|
||||||
|
internet infrastructure like ISPs and domains, regulates your web
|
||||||
|
experience, often citing "safety".
|
||||||
|
</p>
|
||||||
|
<img src={meme2Small.src} class="-mb-10 w-60 self-center" />
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
|
<h3 class="font-display text-3xl">Crypto/DeFi</h3>
|
||||||
|
<p class="font-body text-body text-xl">
|
||||||
|
The advent of Bitcoin sparked innovation, but over time, centralization
|
||||||
|
increased. Factors such as the influx of big money, greed, hype, and FOMO
|
||||||
|
contributed to this trend. The introduction of many money legos worsened
|
||||||
|
the situation, leading to boom and bust cycles.
|
||||||
|
</p>
|
||||||
|
<img src={meme3Small.src} class="-mb-10 w-60 self-center" />
|
||||||
|
</div>
|
||||||
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
|
<h3 class="font-display text-3xl">Web3</h3>
|
||||||
|
<p class="font-body text-body text-xl">
|
||||||
|
Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
|
||||||
|
Despite aiming for decentralization, Web3 relies on centralized
|
||||||
|
crypto/DeFi infrastructure. Money dominates over ideology, driven by
|
||||||
|
funders. A balance is necessary between free markets and public goods to
|
||||||
|
address the current imbalance.
|
||||||
|
</p>
|
||||||
|
<img src={meme4Small.src} class="-mb-10 w-60 self-center" />
|
||||||
|
</div>
|
||||||
|
<!-- MEME GRID SMALL -->
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
---
|
||||||
|
const { view } = Astro.props;
|
||||||
|
|
||||||
|
function getActiveClass(linkView) {
|
||||||
|
return view === linkView ? "border-b border-white" : "";
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav class="flex flex-row px-[25px] justify-between items-center py-8 md:p-14">
|
||||||
|
<div class="logo">
|
||||||
|
<!-- TODO: Hide this logo and show simplified when 320 > width -->
|
||||||
|
<a href="/">
|
||||||
|
<img class="w-44" src="/src/assets/lume-logo.png" alt="Lume Logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<menu
|
||||||
|
class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black md:flex-row md:flex"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<a href="/" class={getActiveClass("home")}>Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/vision" class={getActiveClass("vision")}>Vision</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/what-is-web3" class={getActiveClass("what")}>What is Web3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/donate" class={getActiveClass("donate")}>Donate</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-md rounded-md bg-primary py-3 px-10 mt-14 text-[black] font-body"
|
||||||
|
>Download Extension</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
<div
|
||||||
|
id="navbar-overlay"
|
||||||
|
class="hidden lg:hidden bg-black/40 w-screen h-screen fixed z-10 top-0 botton-0 right-0 left-0"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button id="hamburger" class="z-30 text-4xl lg:hidden">☰</button>
|
||||||
|
<script>
|
||||||
|
const navbarOverlayEl = document.getElementById("navbar-overlay");
|
||||||
|
const hamburgerEl = document.getElementById("hamburger");
|
||||||
|
const menuEl = document.querySelector("menu");
|
||||||
|
|
||||||
|
function handleMenuClick() {
|
||||||
|
// Toggle menu open/closed
|
||||||
|
["hidden", "flex"].forEach((className) => {
|
||||||
|
menuEl.classList.toggle(className);
|
||||||
|
});
|
||||||
|
|
||||||
|
navbarOverlayEl.classList.toggle("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOverlayClick() {
|
||||||
|
// Close menu on overlay click
|
||||||
|
["hidden", "flex"].forEach((className) => {
|
||||||
|
menuEl.classList.toggle(className);
|
||||||
|
});
|
||||||
|
|
||||||
|
navbarOverlayEl.classList.toggle("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
hamburgerEl.addEventListener("click", handleMenuClick);
|
||||||
|
navbarOverlayEl.addEventListener("click", handleOverlayClick);
|
||||||
|
</script>
|
||||||
|
</nav>
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.scss';
|
import "../styles/global.scss";
|
||||||
import Navbar from '../components/Layout/Navbar/Navbar.jsx';
|
import Navbar from "../components/Layout/Navbar/Navbar.astro";
|
||||||
import Footer from '../components/Layout/Footer/Footer.astro';
|
import Footer from "../components/Layout/Footer/Footer.astro";
|
||||||
import JoinCommunity from '../components/Layout/JoinCommunity/JoinCommunity.astro';
|
import JoinCommunity from "../components/Layout/JoinCommunity/JoinCommunity.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
view: string;
|
view: string;
|
||||||
|
|
@ -17,16 +17,22 @@ const { view, title } = Astro.props;
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
<meta
|
||||||
<meta name="description" content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox." />
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox."
|
||||||
|
/>
|
||||||
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
|
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Navbar view={view} client:load />
|
<Navbar view={view} />
|
||||||
<main class={view}>
|
<main class={view + " space-y-40"}>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
{view !== 'home' && <JoinCommunity />}
|
{view !== "home" && <JoinCommunity />}
|
||||||
<Footer />
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Typewriter from '../components/Home/Typewriter/Typewriter.astro';
|
import Typewriter from "../components/Home/Typewriter/Typewriter.astro";
|
||||||
import Vision from '../components/Home/Vision/Vision.astro';
|
import Vision from "../components/Home/Vision/Vision.astro";
|
||||||
import Web3 from '../components/Home/Web3/Web3.astro';
|
import Web3 from "../components/Home/Web3/Web3.astro";
|
||||||
import PoweredBy from '../components/Home/PoweredBy/PoweredBy.astro';
|
import PoweredBy from "../components/Home/PoweredBy/PoweredBy.astro";
|
||||||
import Meme from '../components/Home/Meme/Meme.astro';
|
import Meme from "../components/Home/Meme/Meme.astro";
|
||||||
import Grid from '../components/Home/Grid/Grid.astro';
|
import WebComparison from "../components/Home/WebComparison/WebComparison.astro";
|
||||||
import Socials from '../components/Home/Socials/Socials.astro';
|
import Socials from "../components/Home/Socials/Socials.astro";
|
||||||
import CTO from '../components/Home/CTO/CTO.astro';
|
import CTO from "../components/Home/CTO/CTO.astro";
|
||||||
import Message from '../components/Home/Message/Message.astro';
|
import Message from "../components/Home/Message/Message.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||||
|
|
@ -17,6 +17,7 @@ import Message from '../components/Home/Message/Message.astro';
|
||||||
<Web3 />
|
<Web3 />
|
||||||
<PoweredBy />
|
<PoweredBy />
|
||||||
<Meme />
|
<Meme />
|
||||||
|
<WebComparison />
|
||||||
<Socials />
|
<Socials />
|
||||||
<CTO />
|
<CTO />
|
||||||
<Message />
|
<Message />
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,12 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-aquamarine: #7afcbb;
|
||||||
|
--color-dark-aquamarine: #1F4A3D;
|
||||||
|
--color-gray: #C7C7C7;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,17 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
theme: { }
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: 'var(--color-aquamarine)',
|
||||||
|
"dark-aquamarine": 'var(--color-dark-aquamarine)',
|
||||||
|
body: 'var(--color-gray)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
'body': '"Jaldi", sans-serif',
|
||||||
|
'display': '"JetBrains Mono", monospace',
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue