export default function Aboutnodes() {
  return (
    <div className="relative pt-12 pb-36 bg-gradient-to-b from-purple-50/10 to-purple-50/80">
      <div className="relative mx-auto max-w-7xl lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        {/* Text Section */}
        <div className="pl-6 pr-6 lg:pr-12 xl:pr-12">
          <h2 className="text-intro">Join the Expansion</h2>
          <p className="mt-2 text-3xl font-bold tracking-tight text-gradient sm:text-4xl">
          Host our Metaverse 
          </p>
          <p className="mt-6 text-base leading-7 text-gray-900">
          As our metaverse expands, it's crucial that our decentralized grid scales with it. 
          This grid forms the backbone of our virtual world, and more nodes mean a stronger, faster, and more efficient ecosystem—not just for us, 
          but for all decentralized projects relying on it.
            <br />
            <br />
            By owning a node, you become a vital part of this growth, enhancing the stability, speed, 
            and potential of the metaverse. You help shape the future of decentralized virtual worlds while contributing
             to the infrastructure that makes limitless interactions and creations possible.
          </p>
          <div className="mt-8">
            <a
              href="https://www.threefold.io/getnode/"
              className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"
              target="_blank"
              rel="noopener noreferrer"
            >
              Host a Node
            </a>
          </div>
        </div>

        {/* Image Section */}
        <div className="relative h-90 overflow-hidden">
          <img
            alt=""
            src="images/node.png"
            className="h-full w-full object-cover object-center"
          />
        </div>

      </div>
    </div>
  );
}