style: format
This commit is contained in:
parent
cfc7495d51
commit
baa26ab5b6
GPG Key ID:
C997C339BE476FF2
|
|
@ -8,7 +8,7 @@ import web3myth from "/src/assets/web3-myth.png";
|
|||
<h2
|
||||
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
|
||||
>Busting the Web3 Myth: Embracing True Openness</h2>
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
Time to Walk the Talk
|
||||
</h3>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<section id="vision" class="bg-black/40 p-5 space-y-10 mx-10 sm:mx-20 xl:mx-40">
|
||||
<h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
|
||||
Our Vision
|
||||
</h2>
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
Enable an open, censorship-resistant web
|
||||
</h3>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Web3 is the next evolution of the internet that combines many legos from
|
||||
past decades.
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Benefits include internet <b>freedom</b>, <b>privacy</b>, and <b
|
||||
>ownership</b
|
||||
<h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
|
||||
Our Vision
|
||||
</h2>
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
Enable an open, censorship-resistant web
|
||||
</h3>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Web3 is the next evolution of the internet that combines many legos from
|
||||
past decades.
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Benefits include internet <b>freedom</b>, <b>privacy</b>, and <b
|
||||
>ownership</b
|
||||
> over your personal web.
|
||||
</p>
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Join us in shaping tomorrow's digital world. Unite with Web3 and lets connect.
|
||||
</p>
|
||||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="https://web3extension.io"
|
||||
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
||||
>Connect to Web3</a
|
||||
>
|
||||
</div>
|
||||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="https://web3extension.io"
|
||||
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
||||
>Connect to Web3</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@ import gfxLeft from "/src/assets/home-gfx-left.png";
|
|||
---
|
||||
|
||||
<section
|
||||
id="web3"
|
||||
class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
|
||||
id="web3"
|
||||
class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
|
||||
>
|
||||
<div class="flex-1 max-w-[calc(100% + 20px)] overflow-hidden -mx-10">
|
||||
<div class="flex-1 -ml-10 -mr-10 lg:-ml-40 lg:mr-0">
|
||||
<img src={gfxLeft.src} class="w-full" />
|
||||
<div class="flex-1 max-w-[calc(100% + 20px)] overflow-hidden -mx-10">
|
||||
<div class="flex-1 -ml-10 -mr-10 lg:-ml-40 lg:mr-0">
|
||||
<img src={gfxLeft.src} class="w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
|
||||
<h2
|
||||
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
|
||||
>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Web3 often gets mixed up with other terms/buzz words such as "crypto" or
|
||||
"defi". However, the current web you use now is often referred to insiders
|
||||
as "web2".
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
While Web3 can include many decentralized services, it symbolizes the
|
||||
multiverse, or the entirety of all decentralized & P2P networks. Some may
|
||||
refer to this as the "metaverse", or even "dweb", but we can agree to
|
||||
disagree 😉.
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Having access to web3 is important so you are in control of what you are able to do.
|
||||
</p>
|
||||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="/what-is-web3"
|
||||
class="text-2xl w-full block text-center md:max-w-[250px] rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||
>Learn More</a
|
||||
>
|
||||
<div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
|
||||
<h2
|
||||
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
|
||||
>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Web3 often gets mixed up with other terms/buzz words such as "crypto" or
|
||||
"defi". However, the current web you use now is often referred to insiders
|
||||
as "web2".
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
While Web3 can include many decentralized services, it symbolizes the
|
||||
multiverse, or the entirety of all decentralized & P2P networks. Some may
|
||||
refer to this as the "metaverse", or even "dweb", but we can agree to
|
||||
disagree 😉.
|
||||
</p>
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
Having access to web3 is important so you are in control of what you are able to do.
|
||||
</p>
|
||||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="/what-is-web3"
|
||||
class="text-2xl w-full block text-center md:max-w-[250px] rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,20 @@ 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">
|
||||
<!-- 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 +31,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 +48,19 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
regulates your web experience, often citing "safety".
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</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
|
||||
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 +69,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 +86,86 @@ import meme4Small from "/src/assets/meme-4-small.png";
|
|||
to address the current imbalance.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MEME GRID BIG -->
|
||||
<!-- 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