export function AlternateTailwindTesimonialCards() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-center gap-10 lg:gap-12">
          <h2 className="font-manrope w-full text-center text-4xl leading-tight font-bold text-gray-900 md:text-5xl md:leading-snug">
            Hear from Our Satisfied Clients
          </h2>
          <div className="flex flex-col items-start justify-end gap-5">
            <div className="flex flex-col items-start justify-center pr-10 sm:pr-16 lg:pr-32 xl:pr-64">
              <div className="flex flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 px-3 pt-3 pb-14">
                <p className="text-base leading-relaxed font-medium text-gray-900">
                  “ Using this product has been a game-changer for me. Its
                  intuitive design and powerful features have enhanced my
                  productivity and made complex tasks simpler. The support team
                  has been responsive and helpful whenever I've needed
                  assistance. Overall, I'm impressed with the product's
                  performance and the positive impact it's had on my daily
                  workflow. ”
                </p>
              </div>
              <div className="-mt-9 flex flex-col items-start justify-start gap-2.5 px-5">
                <div className="inline-flex items-center justify-start gap-2.5 rounded-xl border border-gray-200 bg-white py-2 pr-14 pl-2">
                  <div className="flex h-11 w-11 items-start justify-start gap-2.5 rounded-md bg-zinc-500">
                    <img
                      className="rounded-md object-cover"
                      src="https://pagedone.io/asset/uploads/1721110119.png"
                    />
                  </div>
                  <div className="inline-flex flex-col items-start justify-start gap-0.5">
                    <h6 className="text-sm leading-normal font-medium text-black">
                      Payal Joshi
                    </h6>
                    <h6 className="text-xs leading-normal font-normal text-gray-500">
                      @priya._21
                    </h6>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col items-end justify-center pl-10 sm:pl-16 lg:pl-32 xl:pl-64">
              <div className="flex flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 px-3 pt-3 pb-14">
                <p className="text-base leading-relaxed font-medium text-gray-900">
                  “ I've been pleasantly surprised by this product's
                  capabilities. It's user-friendly yet powerful, enhancing my
                  productivity significantly. The seamless integration and
                  timely updates reflect the company's commitment to excellence.
                  I would recommend it to anyone seeking a reliable solution. “
                </p>
              </div>
              <div className="-mt-9 flex flex-col items-start justify-start gap-2.5 px-5">
                <div className="inline-flex items-center justify-end gap-2.5 rounded-xl border border-gray-200 bg-white py-2 pr-14 pl-2">
                  <div className="flex h-11 w-11 items-start justify-start gap-2.5 rounded-md bg-stone-300">
                    <img
                      className="rounded-md object-cover"
                      src="https://pagedone.io/asset/uploads/1721110130.png"
                    />
                  </div>
                  <div className="inline-flex flex-col items-start justify-start gap-0.5">
                    <h6 className="text-sm leading-normal font-medium text-black">
                      Karina Mehta
                    </h6>
                    <h6 className="text-xs leading-normal font-normal text-gray-500">
                      @_krina_074
                    </h6>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col items-start justify-center pr-10 sm:pr-16 lg:pr-32 xl:pr-64">
              <div className="flex flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 px-3 pt-3 pb-14">
                <p className="text-base leading-relaxed font-medium text-gray-900">
                  “ This product has been instrumental in improving my daily
                  operations. Its comprehensive features have simplified complex
                  tasks, saving me valuable time. The support team has been
                  attentive and knowledgeable, ensuring a smooth experience. I'm
                  impressed by its performance and versatility. ”
                </p>
              </div>
              <div className="-mt-9 flex flex-col items-start justify-start gap-2.5 px-5">
                <div className="inline-flex items-center justify-end gap-2.5 rounded-xl border border-gray-200 bg-white py-2 pr-14 pl-2">
                  <div className="flex h-11 w-11 items-start justify-start gap-2.5 rounded-md bg-slate-300">
                    <img
                      className="rounded-md object-cover"
                      src="https://pagedone.io/asset/uploads/1721110140.png"
                    />
                  </div>
                  <div className="inline-flex flex-col items-start justify-start gap-0.5">
                    <h6 className="text-sm leading-normal font-medium text-black">
                      Harsh Parekh
                    </h6>
                    <h6 className="text-xs leading-normal font-normal text-gray-500">
                      @harsh_05
                    </h6>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col items-end justify-center pl-10 sm:pl-16 lg:pl-32 xl:pl-64">
              <div className="flex flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 px-3 pt-3 pb-14">
                <p className="text-base leading-relaxed font-medium text-gray-900">
                  “ Impressed by the efficiency and effectiveness of this
                  product. It has exceeded my expectations with its intuitive
                  design and robust functionality. The ease of use and quick
                  setup have made a noticeable impact on my productivity.
                  Overall, a highly recommended solution for anyone looking to
                  streamline their tasks. ”
                </p>
              </div>
              <div className="-mt-9 flex flex-col items-start justify-start gap-2.5 px-5">
                <div className="inline-flex items-center justify-end gap-2.5 rounded-xl border border-gray-200 bg-white py-2 pr-14 pl-2">
                  <div className="flex h-11 w-11 items-start justify-start gap-2.5 rounded-md bg-stone-300">
                    <img
                      className="rounded-md object-cover"
                      src="https://pagedone.io/asset/uploads/1721110154.png"
                    />
                  </div>
                  <div className="inline-flex flex-col items-start justify-start gap-0.5">
                    <h6 className="text-sm leading-normal font-medium text-black">
                      Deepak Modi
                    </h6>
                    <h6 className="text-xs leading-normal font-normal text-gray-500">
                      @deepak._.08
                    </h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}