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}
|
||||
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
|
||||
subtitle="Why should I donate to Lume?"
|
||||
title="Help us break the pattern"
|
||||
|
|
|
|||
|
|
@ -10,20 +10,24 @@ 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]"
|
||||
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>
|
||||
<!-- 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-4xl md:text-6xl font-bold p-5 uppercase bg-dark-aquamarine text-primary"
|
||||
>
|
||||
Web3's Current Path
|
||||
</h3>
|
||||
<!-- 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,
|
||||
|
|
@ -31,14 +35,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
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">
|
||||
</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
|
||||
|
|
@ -48,19 +52,19 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
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 overflow-hidden">
|
||||
<img
|
||||
src={meme3.src}
|
||||
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>
|
||||
</div>
|
||||
<div
|
||||
class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
|
||||
>
|
||||
<div class="relative flex-1 overflow-hidden">
|
||||
<img
|
||||
src={meme3.src}
|
||||
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>
|
||||
<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,
|
||||
|
|
@ -69,14 +73,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
cycles.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative flex-1 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">
|
||||
</div>
|
||||
<div class="relative flex-1 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.
|
||||
|
|
@ -86,86 +90,86 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
to address the current imbalance.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MEME GRID BIG -->
|
||||
</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">
|
||||
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>
|
||||
<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">
|
||||
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".
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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>
|
||||
<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">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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>.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
It became one large crypto casino.
|
||||
</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-xl text-body">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-xl text-body">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-xl text-body">
|
||||
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>
|
||||
<img src={meme4Small.src} class="-mb-10 w-60 self-center"/>
|
||||
</div>
|
||||
<!-- MEME GRID SMALL -->
|
||||
<!-- 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">
|
||||
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>
|
||||
<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">
|
||||
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".
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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>
|
||||
<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">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
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>.
|
||||
</p>
|
||||
<p class="font-body text-body text-xl">
|
||||
It became one large crypto casino.
|
||||
</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-xl text-body">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-xl text-body">
|
||||
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.
|
||||
</p>
|
||||
<p class="font-body text-xl text-body">
|
||||
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>
|
||||
<img src={meme4Small.src} class="-mb-10 w-60 self-center" />
|
||||
</div>
|
||||
<!-- MEME GRID SMALL -->
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue