fix: meme headline and donate button
This commit is contained in:
Juan Di Toro
parent
7ff7f2d60b
commit
917a818c83
|
|
@ -12,7 +12,7 @@ import backgroud from "/src/assets/why-bg-2.png";
|
||||||
src={backgroud.src}
|
src={backgroud.src}
|
||||||
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
|
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div class="py-5 px-2 lg:px-0">
|
||||||
<FeaturedGroup
|
<FeaturedGroup
|
||||||
subtitle="Why should I donate to Lume?"
|
subtitle="Why should I donate to Lume?"
|
||||||
title="Help us break the pattern"
|
title="Help us break the pattern"
|
||||||
|
|
|
||||||
|
|
@ -10,20 +10,24 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
|
class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
|
||||||
>
|
>
|
||||||
<h3 class="font-display text-4xl md:text-6xl font-bold mb-5 font-display text-primary ">Web3's Current Path</h3>
|
<h3
|
||||||
<!-- MEME GRID BIG -->
|
class="font-display text-4xl md:text-6xl font-bold p-5 uppercase bg-dark-aquamarine text-primary"
|
||||||
<div
|
>
|
||||||
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
Web3's Current Path
|
||||||
>
|
</h3>
|
||||||
<div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
|
<!-- MEME GRID BIG -->
|
||||||
<img
|
<div
|
||||||
src={meme1.src}
|
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
||||||
alt=""
|
>
|
||||||
class="absolute bottom-0 -left-[100px] object-contain xl:-left-5 float-left"
|
<div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
|
||||||
/>
|
<img
|
||||||
<span class="float-right mt-16 w-[300px] space-y-10 mr-5">
|
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>
|
<h3 class="font-display text-6xl">Web1</h3>
|
||||||
<p class="font-body text-2xl text-body">
|
<p class="font-body text-2xl text-body">
|
||||||
Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
|
Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
|
||||||
|
|
@ -31,14 +35,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
web access, email, shopping, and chat for mainstream users.
|
web access, email, shopping, and chat for mainstream users.
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex-1 max-w-full overflow-hidden">
|
<div class="relative flex-1 max-w-full overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={meme2.src}
|
src={meme2.src}
|
||||||
alt=""
|
alt=""
|
||||||
class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
|
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">
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-5">
|
||||||
<h3 class="font-display text-6xl">Web2</h3>
|
<h3 class="font-display text-6xl">Web2</h3>
|
||||||
<p class="font-body text-2xl text-body">
|
<p class="font-body text-2xl text-body">
|
||||||
Featuring improved gaming, online apps, and video streaming, was
|
Featuring improved gaming, online apps, and video streaming, was
|
||||||
|
|
@ -48,19 +52,19 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
regulates your web experience, often citing "safety".
|
regulates your web experience, often citing "safety".
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
<div
|
||||||
>
|
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
||||||
<div class="relative flex-1 overflow-hidden">
|
>
|
||||||
<img
|
<div class="relative flex-1 overflow-hidden">
|
||||||
src={meme3.src}
|
<img
|
||||||
alt=""
|
src={meme3.src}
|
||||||
class="absolute bottom-0 -left-[110px] xl:-left-5 float-left object-contain"
|
alt=""
|
||||||
/>
|
class="absolute bottom-0 -left-[110px] xl:-left-5 float-left object-contain"
|
||||||
<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>
|
<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">
|
<p class="font-body text-2xl text-body">
|
||||||
The advent of Bitcoin sparked innovation, but over time,
|
The advent of Bitcoin sparked innovation, but over time,
|
||||||
centralization increased. Factors such as the influx of big money,
|
centralization increased. Factors such as the influx of big money,
|
||||||
|
|
@ -69,14 +73,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
cycles.
|
cycles.
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex-1 overflow-hidden">
|
<div class="relative flex-1 overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={meme4.src}
|
src={meme4.src}
|
||||||
alt=""
|
alt=""
|
||||||
class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
|
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">
|
<span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
|
||||||
<h3 class="font-display text-6xl">Web3</h3>
|
<h3 class="font-display text-6xl">Web3</h3>
|
||||||
<p class="font-body text-2xl text-body">
|
<p class="font-body text-2xl text-body">
|
||||||
Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
|
Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
|
||||||
|
|
@ -86,86 +90,86 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
||||||
to address the current imbalance.
|
to address the current imbalance.
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- MEME GRID BIG -->
|
</div>
|
||||||
|
<!-- MEME GRID BIG -->
|
||||||
|
|
||||||
<!-- MEME GRID SMALL -->
|
<!-- MEME GRID SMALL -->
|
||||||
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
<h3 class="font-display text-3xl">Web1</h3>
|
<h3 class="font-display text-3xl">Web1</h3>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
Web1 is probably best remembered by geeks as chat rooms and IRC (which
|
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
|
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,
|
the age of AOL dial-up and similar networks where you got web, email,
|
||||||
shopping, and chat all in one place..
|
shopping, and chat all in one place..
|
||||||
</p>
|
</p>
|
||||||
<img src={meme1Small.src} class="-mb-10 w-60 self-center"/>
|
<img src={meme1Small.src} class="-mb-10 w-60 self-center" />
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
<h3 class="font-display text-3xl">Web2</h3>
|
<h3 class="font-display text-3xl">Web2</h3>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
Web2 since evolved with the web browser and we got better gaming, online
|
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
|
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
|
got quickly captured by Silicon Valley and what some refer to as the "tech
|
||||||
bros".
|
bros".
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
So <i>despite</i> the innovation that occurred, it has turned into a top-down
|
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
|
system where only a few geeks/CEO's and their investors control your entire
|
||||||
web.
|
web.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
This also excludes the wider internet infrastructure of domains and ISP's
|
This also excludes the wider internet infrastructure of domains and ISP's
|
||||||
(internet providers and hosting), who also play a part in controlling your
|
(internet providers and hosting), who also play a part in controlling your
|
||||||
web, be it for your "safety", or other reasons.
|
web, be it for your "safety", or other reasons.
|
||||||
</p>
|
</p>
|
||||||
<img src={meme2Small.src} class="-mb-10 w-60 self-center"/>
|
<img src={meme2Small.src} class="-mb-10 w-60 self-center" />
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
<h3 class="font-display text-3xl">Crypto/DeFi</h3>
|
<h3 class="font-display text-3xl">Crypto/DeFi</h3>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
We get the birth of Bitcoin and all of the innovation that followed. While
|
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
|
BTC and a handful of other chains have remained decentralized both in
|
||||||
operation, and access, the innovation over time has caused things to
|
operation, and access, the innovation over time has caused things to
|
||||||
re-centralize.
|
re-centralize.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
This is due to several factors including big money coming in, pushing
|
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
|
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
|
to only get worse, creating a classic "boom" and "bust". Human nature
|
||||||
tends to be greedy, so over time, money overrode principles.
|
tends to be greedy, so over time, money overrode principles.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
Many development teams prioritized inventing new ideas and "shipping" them
|
Many development teams prioritized inventing new ideas and "shipping" them
|
||||||
to users, while selling them "tokens" to exit at their expense, all while
|
to users, while selling them "tokens" to exit at their expense, all while
|
||||||
knowing none of what they created was <i>truly decentralized</i>.
|
knowing none of what they created was <i>truly decentralized</i>.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-body text-xl">
|
<p class="font-body text-body text-xl">
|
||||||
It became one large crypto casino.
|
It became one large crypto casino.
|
||||||
</p>
|
</p>
|
||||||
<img src={meme3Small.src} class="-mb-10 w-60 self-center"/>
|
<img src={meme3Small.src} class="-mb-10 w-60 self-center" />
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
<div class="lg:hidden flex flex-col gap-8 py-10 px-8">
|
||||||
<h3 class="font-display text-3xl">Web3</h3>
|
<h3 class="font-display text-3xl">Web3</h3>
|
||||||
<p class="font-body text-xl text-body">
|
<p class="font-body text-xl text-body">
|
||||||
What to say about Web3? Honestly... upfront it appeared to get used as a
|
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
|
new buzz word to replace "DeFi". Terms like "Web3" and "Metaverse" have
|
||||||
many different meanings to many people. It is intended to include more
|
many different meanings to many people. It is intended to include more
|
||||||
than just money and trading, and yet every blockchain-based system that
|
than just money and trading, and yet every blockchain-based system that
|
||||||
can be labeled "web3" still builds onto of the same centralized
|
can be labeled "web3" still builds onto of the same centralized
|
||||||
crypto/defi infrastructure.
|
crypto/defi infrastructure.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-xl text-body">
|
<p class="font-body text-xl text-body">
|
||||||
The end result is an ecosystem that promotes and <b><i>wants</i></b> to be
|
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
|
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
|
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.
|
make it more about the money then about freedom.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-body text-xl text-body">
|
<p class="font-body text-xl text-body">
|
||||||
There needs to be a balance here between free markets/money and public
|
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.
|
goods/infra, and so far things are way out of wack and need to be fixed.
|
||||||
</p>
|
</p>
|
||||||
<img src={meme4Small.src} class="-mb-10 w-60 self-center"/>
|
<img src={meme4Small.src} class="-mb-10 w-60 self-center" />
|
||||||
</div>
|
</div>
|
||||||
<!-- MEME GRID SMALL -->
|
<!-- MEME GRID SMALL -->
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue