---
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"
>
    <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 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>
</section>
