---
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
import mario from "/src/assets/mario-level-up.gif";
import background from "/src/assets/contribute-bg.png";
import Button from "../../ui/Button.astro";
---

<section
  id="contribute"
  class="py-10 px-10 md:px-20 lg:px-40 relative h-full pb-20 bg-opacity-70 bg-cover after:block after:absolute after:top-0 after:bottom-0 after:left-0 after:right-0 after:bg-black/70 after:z-0 after:pointer-events-none"
  style={{
    background: `url(${background.src})`,
    "background-size": "cover",
  }}
>
  <div class="z-10 relative max-w-3xl mt-16 space-y-10">
    <FeaturedGroup
      subtitle="Re-defining Web3, for the users"
      title="Web3 is Community"
      text={[
        `Web3 was a term first defined by Gavin Wood when the Ethereum network was
      starting out. He defined it as a "decentralized online ecosystem based on
      blockchain".`,
        `However, we view it as much more than that, and definitely more than
      access to DeFi. We see a ton of more potential to what Web3 as an ideal
      can evolve to, and are setting out to make it a reality.`,
        `To those that see Web3 as DeFi, we ask this: Do you go on your web browser
      to access TradingView or other market tools as your homepage, or do you go
      check your social media, email, and news sites, as <i>well</i> as your money?`,
        `Blockchain itself is more than just <i>money</i>, and so is Web3, and by
      extension P2P networks.`,
        `So help us in our goals to level-up Web3.`,
      ]}
    />
    <img src={mario.src} alt="Mario Level Up" />
    <Button label="Donate" href="/donate" />
  </div>
</section>
