import Link from "next/link";
import Image from "next/image";

const logos = [
  "https://rapid-ui.com/images/blocks/logos/tailwind.svg",
  "https://rapid-ui.com/images/blocks/logos/react.svg",
  "https://rapid-ui.com/images/blocks/logos/nextjs.svg",
];

export default function Hero1() {
  return (
    <div className="relative isolate px-6 pt-14 lg:px-8">
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <svg
          aria-hidden="true"
          className="absolute top-0 left-[max(50%,25rem)] h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-200 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)]"
        >
          <defs>
            <pattern
              x="50%"
              y={-1}
              id="e813992c-7d03-4cc4-a2bd-151760b470a0"
              width={150}
              height={150}
              patternUnits="userSpaceOnUse"
            >
              <path d="M100 200V.5M.5 .5H200" fill="none" />
            </pattern>
          </defs>
          <svg x="50%" y={-1} className="overflow-visible fill-gray-50">
            <path
              d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
              strokeWidth={0}
            />
          </svg>
          <rect
            fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
            width="100%"
            height="100%"
            strokeWidth={0}
          />
        </svg>
      </div>
      <div className="mx-auto max-w-2xl py-32 lg:py-44 text-center">
        <div className="py-1 px-3 border border-gray-200 text-sm font-medium bg-white inline-block rounded-full mb-4">
          Deploy faster 🚀
        </div>
        <h1 className="text-4xl md:text-6xl lg:text-7xl !leading-[1.2] font-medium tracking-tight text-gray-900">
          Everything you need to deploy your app
        </h1>
        <p className="mt-8 text-lg font-medium text-text sm:text-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <div className="mt-10 flex items-center justify-center gap-x-6">
          <Link
            href="/blocks"
            className="bg-gray-900 text-white font-semibold text-sm py-2 rounded-md px-4"
          >
            Browser blocks
          </Link>
          <Link
            href="/pricing"
            className=" font-semibold text-sm py-2 rounded-md px-4 bg-white border border-gray-200 text-gray-900"
          >
            Unlock full access
          </Link>
        </div>
        <div className="flex gap-8 justify-center mt-12">
          {logos.map((logo) => (
            <div key={logo}>
              <Image src={logo} alt="Logo" width={42} height={42} />
            </div>
          ))}
        </div>
      </div>

      <div
        className="absolute inset-x-0 -top-60 -z-10 transform-gpu overflow-hidden blur-3xl opacity-50"
        aria-hidden="true"
      >
        <div
          className="relative left-[calc(50%-40rem)] aspect-[1155/678] w-[50.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]"
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
        ></div>
      </div>

      <div
        className="absolute inset-x-0 bottom-0 -z-10 transform-gpu overflow-hidden blur-3xl opacity-50"
        aria-hidden="true"
      >
        <div
          className="relative left-[calc(90%)] aspect-[1155/678] w-[50.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]"
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
        ></div>
      </div>
    </div>
  );
}
Hero-1
