export function CardWithSupportingText() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 className="font-manrope mb-8 text-center text-3xl leading-10 font-semibold text-black">
          Product For You
        </h2>
        <div className="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-2 xl:grid-cols-3">
          <a
            href="javascript:;"
            className="card group mx-auto w-full max-w-sm md:mr-0"
          >
            <div className="img-box w-full overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158021.png"
                alt="White dress image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                Trendy Whites
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $74.99
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
          <a
            href="javascript:;"
            className="card group mx-auto w-full max-w-sm md:ml-0"
          >
            <div className="img-box w-full overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158041.png"
                alt="cream & serum image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                Trendy Whites
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $25
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
          <a
            href="javascript:;"
            className="card group mx-auto w-full max-w-sm md:mr-0"
          >
            <div className="img-box w-full overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158055.png"
                alt="perfume image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                Trendy Whites
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $150
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
          <a href="javascript:;" className="card group max-w-sm max-md:mx-auto">
            <div className="img-box w-full max-w-sm overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158066.png"
                alt="mouse image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                Bluetooth Mouse
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $19
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
          <a
            href="javascript:;"
            className="card group mx-auto w-full max-w-sm md:mr-0"
          >
            <div className="img-box w-full overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158078.png"
                alt="sunglasses image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                Golden Glares
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $200
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
          <a href="javascript:;" className="card group max-w-sm max-md:mx-auto">
            <div className="img-box w-full max-w-sm overflow-hidden rounded-t-3xl">
              <img
                src="https://pagedone.io/asset/uploads/1701158107.png"
                alt="watch image"
                className="h-auto w-full rounded-t-2xl object-cover transition-all duration-700 group-hover:scale-[1.05]"
              />
            </div>
            <div className="body w-full cursor-pointer rounded-b-3xl border border-t-0 border-gray-200 p-5 shadow-sm shadow-transparent transition-all duration-500 group-hover:border-gray-300 group-hover:bg-gray-50 group-hover:shadow-gray-300">
              <h5 className="mb-2 text-xl leading-8 font-medium text-black">
                XYZ Watch
              </h5>
              <div className="flex flex-col justify-between gap-2 min-[400px]:flex-row min-[400px]:items-center">
                <div className="flex items-center gap-2">
                  <h6 className="text-xl leading-8 font-semibold text-black">
                    $59
                  </h6>
                  <p className="rounded-full bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700">
                    Delivery $10
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-black">2.4K</p>
                  <span className="flex items-center gap-1 rounded-3xl bg-amber-400 px-2 py-1 text-sm font-medium text-white">
                    4.8
                  </span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  )
}