export function HowItWorksCardsWithIllustrations() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-5">
        <div className="inline-flex w-full flex-col items-center justify-start gap-12">
          <div className="flex w-full flex-col items-center justify-start gap-3">
            <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900">
              How It Works
            </h2>
            <p className="w-full text-center text-base leading-relaxed font-normal text-gray-500">
              Three Steps to Get You Up and Running
            </p>
          </div>
          <div className="flex w-full flex-col items-center justify-start gap-8">
            <div className="grid w-full grid-cols-1 items-center justify-start gap-8 lg:grid-cols-2">
              <div className="flex w-full flex-col-reverse items-center justify-between gap-3.5 rounded-xl border border-gray-200 p-4 transition-all duration-700 ease-in-out hover:border-indigo-600 sm:flex-row lg:justify-start">
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <span className="text-base leading-relaxed font-medium text-indigo-600">
                    Step 1
                  </span>
                  <div className="flex flex-col items-center justify-start gap-1 sm:items-start">
                    <h4 className="text-center text-xl leading-8 font-semibold text-gray-900 sm:text-start">
                      Create a Project
                    </h4>
                    <p className="text-center text-base leading-relaxed font-normal text-gray-400 sm:text-start">
                      Explore the future with our visionary innovation project.
                    </p>
                  </div>
                </div>
                <img
                  src="https://pagedone.io/asset/uploads/1718087208.png"
                  alt="How It Works image"
                  className="object-cover"
                />
              </div>
              <div className="flex w-full flex-col-reverse items-center justify-between gap-3.5 rounded-xl border border-gray-200 p-4 transition-all duration-700 ease-in-out hover:border-indigo-600 sm:flex-row lg:justify-start">
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <span className="text-base leading-relaxed font-medium text-indigo-600">
                    Step 2
                  </span>
                  <div className="flex flex-col items-center justify-start gap-1 sm:items-start">
                    <h4 className="text-center text-xl leading-8 font-semibold text-gray-900 sm:text-start">
                      Invite Transaction Members
                    </h4>
                    <p className="text-center text-base leading-relaxed font-normal text-gray-400 sm:text-start">
                      An exclusive opportunity awaits, encouraging
                      collaboration.
                    </p>
                  </div>
                </div>
                <img
                  src="https://pagedone.io/asset/uploads/1718087218.png"
                  alt="How It Works image"
                  className="object-cover"
                />
              </div>
            </div>
            <div className="grid w-full grid-cols-1 items-center justify-start gap-8 lg:grid-cols-2">
              <div className="flex w-full flex-col-reverse items-center justify-between gap-3.5 rounded-xl border border-gray-200 p-4 transition-all duration-700 ease-in-out hover:border-indigo-600 sm:flex-row lg:justify-start">
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <span className="text-base leading-relaxed font-medium text-indigo-600">
                    Step 3
                  </span>
                  <div className="flex flex-col items-center justify-start gap-1 sm:items-start">
                    <h4 className="text-center text-xl leading-8 font-semibold text-gray-900 sm:text-start">
                      Being Collaborating
                    </h4>
                    <p className="text-center text-base leading-relaxed font-normal text-gray-400 sm:text-start">
                      Team up with us for an adventure in cooperation and new
                      ideas.
                    </p>
                  </div>
                </div>
                <img
                  src="https://pagedone.io/asset/uploads/1718087229.png"
                  alt="How It Works image"
                  className="object-cover"
                />
              </div>
              <div className="flex w-full flex-col-reverse items-center justify-between gap-3.5 rounded-xl border border-gray-200 p-4 transition-all duration-700 ease-in-out hover:border-indigo-600 sm:flex-row lg:justify-start">
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <span className="text-base leading-relaxed font-medium text-indigo-600">
                    Step 4
                  </span>
                  <div className="flex flex-col items-center justify-start gap-1 sm:items-start">
                    <h4 className="text-center text-xl leading-8 font-semibold text-gray-900 sm:text-start">
                      Close Deal
                    </h4>
                    <p className="text-center text-base leading-relaxed font-normal text-gray-400 sm:text-start">
                      Secure success as deals flow smoothly and effortlessly.
                    </p>
                  </div>
                </div>
                <img
                  src="https://pagedone.io/asset/uploads/1718087253.png"
                  alt="How It Works image"
                  className="object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}