---
import gfxLeft from "../../../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>
    <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>
