import { H3, H5, Eyebrow } from "../../components/Texts"
import { Button } from "../../components/Button"


export function CloudHeroNew() {
  return (
    <div
      className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
      style={{ backgroundImage: "url('/images/cloudhero3.webp')" }}
    >
      <div className="mx-auto max-w-7xl lg:px-8">
        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
          <div className="mx-auto max-w-2xl lg:mx-0">
            <Eyebrow>
             Mycelium Cloud
            </Eyebrow>
            <H3 className="mt-4">
              Deploy sovereign Kubernetes clusters on decentralized infrastructure.
            </H3>
            <H5 className="mt-8 text-lg text-gray-600">
              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
            </H5>
            <H5 className="mt-4 text-lg text-gray-600">
              Launch verifiable clusters with nature-inspired networking, quantum-safe storage, and zero-image delivery that keeps every workload deterministic.
            </H5>
            <div className="mt-10 flex items-center gap-x-6">
              <Button
                to="#"
                variant="solid"
                className=""
                color="cyan"
              >
                Get started
              </Button>
              <Button to="#" variant="outline">
                Explore Docs <span aria-hidden="true"> →</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}