138 lines
6.8 KiB
JavaScript
138 lines
6.8 KiB
JavaScript
export default function Why() {
|
||
return (
|
||
<div className="relative bg-white dark:bg-transparent pt-16 pb-32 overflow-hidden">
|
||
<div className="text-center">
|
||
<h2 className="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">
|
||
Why this Project
|
||
</h2>
|
||
<p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
|
||
What is the motivation and purpose of this project?
|
||
</p>
|
||
</div>
|
||
<div className="mt-20">
|
||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
||
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
|
||
<div>
|
||
<div className="mt-6">
|
||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
|
||
Situation: controversial and complex
|
||
</h2>
|
||
<p className="mt-4 text-lg text-gray-500">
|
||
Web3 & crypto has become a massive phenomenon. Big claims are
|
||
made for its impact extending to the transformation of our
|
||
economy and society. It is also exceptionally controversial
|
||
and polarizing with significant disagreement. Finally, it’s
|
||
not an easy topic to make sense of.
|
||
</p>
|
||
<div className="mt-6">
|
||
<a
|
||
href="/about/"
|
||
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
|
||
>
|
||
Read More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-12 sm:mt-16 lg:mt-0">
|
||
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
|
||
<img
|
||
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
|
||
src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646746321/Web3/undraw_nakamoto_-2-iv6_arq2lb.svg"
|
||
alt="Read More"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-24">
|
||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
||
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
|
||
<div>
|
||
<div className="mt-6">
|
||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
|
||
The Problem: the stakes are high, but we’re struggling
|
||
</h2>
|
||
<p className="mt-4 text-lg text-gray-500">
|
||
The phenomenon has global implications and touches on multiple
|
||
complex areas. We require good, collective sensemaking, or
|
||
else risk polarization. As a “runaway problem”, the investment
|
||
of attention and money has grown exponentially. Should Web3
|
||
fail to deliver on its promises, the waste would be massive.
|
||
In addition, with such fast-growing phenomena, things happen
|
||
before we can notice, far less prevent them (eg climate
|
||
change).
|
||
</p>
|
||
<div className="mt-6">
|
||
<a
|
||
href="/about/"
|
||
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
|
||
>
|
||
Read More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
|
||
<div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
|
||
<img
|
||
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
|
||
src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744477/Web3/undraw_connected_world_wuay_amttde.svg"
|
||
alt="Read More"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-24">
|
||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
||
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
|
||
<div>
|
||
<div className="mt-6">
|
||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
|
||
We need better sensemaking
|
||
</h2>
|
||
<p className="mt-4 text-lg text-gray-500">
|
||
We need to make good choices, in a constructive,
|
||
intersectional and de-polarizing way. Do we advance Web3 or
|
||
curb it? How should we allocate our resources? Good
|
||
sensemaking begins by clarifying and agreeing on what
|
||
questions to ask and the process of answering them.
|
||
</p>
|
||
<div className="mt-6">
|
||
<a
|
||
href="/about"
|
||
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
|
||
>
|
||
Read More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-12 sm:mt-16 lg:mt-0">
|
||
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
|
||
<img
|
||
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
|
||
src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744695/Web3/undraw_team_collaboration_re_ow29_s8gvrf.svg"
|
||
alt="Read More"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-12 sm:mt-16 lg:mt-0">
|
||
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
|
||
<img
|
||
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-md"
|
||
src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744695/Web3/undraw_team_collaboration_re_ow29_s8gvrf.svg"
|
||
alt="Read More"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|