<section
      class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8"
    >
      <div
        class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,var(--color-indigo-100),white)] opacity-20"
      ></div>
      <div
        class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"
      ></div>
      <div class="mx-auto max-w-2xl lg:max-w-4xl">
        <img
          class="mx-auto h-12"
          src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-600.svg"
          alt=""
        />
        <figure class="mt-10">
          <blockquote
            class="text-center text-xl/8 font-semibold text-gray-900 sm:text-2xl/9"
          >
            <p>
              “Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
              expedita voluptas culpa sapiente alias molestiae. Numquam corrupti
              in laborum sed rerum et corporis.”
            </p>
          </blockquote>
          <figcaption class="mt-10">
            <img
              class="mx-auto size-10 rounded-full"
              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              alt=""
            />
            <div
              class="mt-4 flex items-center justify-center space-x-3 text-base"
            >
              <div class="font-semibold text-gray-900">Judith Black</div>
              <svg
                viewBox="0 0 2 2"
                width="3"
                height="3"
                aria-hidden="true"
                class="fill-gray-900"
              >
                <circle cx="1" cy="1" r="1" />
              </svg>
              <div class="text-gray-600">CEO of Workcation</div>
            </div>
          </figcaption>
        </figure>
      </div>
    </section>
                    
                

                    
                        
                      <div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 pt-10">
          <!-- Testimonial 1 -->
          <div class="bg-gray-50 p-8 rounded-lg shadow-md">
            <div class="flex items-center space-x-3 mb-6">
              <img
                src="https://tailwindcss.com/plus-assets/img/logos/tuple-logo-gray-900.svg"
                alt="Tuple"
                class="h-8 w-auto"
              />
            </div>
            <blockquote class="text-gray-700 text-lg leading-relaxed">
              “Amet amet eget scelerisque tellus sit neque faucibus non
              eleifend. Integer eu praesent at a. Ornare arcu gravida natoque
              erat et cursus tortor consequat at. Vulputate gravida sociis enim
              nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui
              pellentesque sagittis.”
            </blockquote>
            <div class="mt-6 flex items-center space-x-4">
              <img
                class="h-12 w-12 rounded-full"
                src="https://randomuser.me/api/portraits/women/44.jpg"
                alt="Judith Black"
              />
              <div>
                <p class="text-base font-semibold text-gray-900">
                  Judith Black
                </p>
                <p class="text-sm text-gray-500">CEO of Tuple</p>
              </div>
            </div>
          </div>

          <!-- Testimonial 2 -->
          <div class="bg-gray-50 p-8 rounded-lg shadow-md">
            <div class="flex items-center space-x-3 mb-6">
              <img
                src="https://tailwindcss.com/plus-assets/img/logos/reform-logo-gray-900.svg"
                alt="Reform"
                class="h-8 w-auto"
              />
            </div>
            <blockquote class="text-gray-700 text-lg leading-relaxed">
              “Excepteur veniam labore ullamco eiusmod. Pariatur consequat
              proident duis dolore nulla veniam reprehenderit nisi officia
              voluptate incididunt exercitation exercitation elit. Nostrud
              veniam sint dolor nisi ullamco.”
            </blockquote>
            <div class="mt-6 flex items-center space-x-4">
              <img
                class="h-12 w-12 rounded-full"
                src="https://randomuser.me/api/portraits/men/32.jpg"
                alt="Joseph Rodriguez"
              />
              <div>
                <p class="text-base font-semibold text-gray-900">
                  Joseph Rodriguez
                </p>
                <p class="text-sm text-gray-500">CEO of Reform</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
                    
                

                    
                        
                      <div
      class="bg-white px-6 py-24 sm:py-32 lg:px-8 relative isolate overflow-hidden"
    >
      <div
        class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,var(--color-indigo-100),white)] opacity-20"
      ></div>
      <div
        class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"
      ></div>
      <div
        class="max-w-4xl mx-auto flex flex-col md:flex-row items-center gap-10"
      >
        <!-- Profile Image -->
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          alt="Judith Black"
          class="w-78 h-78 rounded-xl object-cover"
        />

        <!-- Testimonial Text -->
        <div class="relative">
          <svg
            class="absolute -top-4 -left-6 w-20 h-20 text-gray-200"
            fill="currentColor"
            viewBox="0 0 32 32"
            aria-hidden="true"
          >
            <path
              d="M10.2 17.5c1.4-1.2 2.3-3.2 2.3-5.3 0-3.9-2.7-7.2-6-7.2S.5 8.3.5 12.2c0 3.4 2.2 6.2 5.1 6.9v.1c0 3.5 1.7 6.7 4.6 8.5l2.1-3.1C11 21.3 8.7 18.9 8.7 17.5h1.5zm19 0c1.4-1.2 2.3-3.2 2.3-5.3 0-3.9-2.7-7.2-6-7.2s-6 3.3-6 7.2c0 3.4 2.2 6.2 5.1 6.9v.1c0 3.5 1.7 6.7 4.6 8.5l2.1-3.1c-1.3-2.9-3.6-5.3-3.6-6.7h1.5z"
            />
          </svg>
          <blockquote class="text-3xl font-medium text-gray-900 relative z-10">
            Commodo amet fugiat excepteur sunt qui ea elit cupidatat ullamco
            consectetur ipsum elit consequat. Elit sunt proident ea nulla ad
            nulla dolore ad pariatur tempor non. Sint veniam minim et ea.
          </blockquote>
          <figcaption class="mt-6">
            <div class="text-base font-semibold text-gray-900">
              Judith Black
            </div>
            <div class="text-sm text-gray-500">CEO of Workcation</div>
          </figcaption>
        </div>
      </div>
    </div>
                    
                

                    
                        
                      <div
      class="relative bg-cover bg-center text-white min-h-[500px] bg-[url('https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80')]"
    >
      <div
        class="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/70 to-purple-900/40"
      ></div>

      <div class="relative max-w-7xl px-6 py-24 mx-auto">
        <!-- Logo and company name -->
        <div class="flex items-center space-x-2 mb-6">
          <img
            class="h-12"
            src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-white.svg"
            alt=""
          />
        </div>

        <!-- Quote -->
        <blockquote class="text-xl max-w-2xl font-semibold leading-relaxed">
          “Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
          expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in
          laborum sed rerum et corporis.”
        </blockquote>

        <!-- Author -->
        <figcaption class="mt-6">
          <div class="font-semibold">Judith Black</div>
          <div class="text-sm text-gray-300">CEO of Workcation</div>
        </figcaption>
      </div>
    </div>
                    
                

                    
                        
                      <div class="bg-white py-16 px-6">
      <div
        class="max-w-6xl mx-auto flex flex-col md:flex-row overflow-hidden rounded-2xl shadow-lg bg-gray-950"
      >
        <!-- Image -->
        <div class="flex-shrink-0">
          <img
            src="https://images.unsplash.com/photo-1544005313-94ddf0286df2"
            alt="Judith Black"
            class="w-full md:w-[400px] object-cover rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl"
          />
        </div>

        <!-- Testimonial -->
        <div class="text-white flex items-center p-10 md:rounded-r-2xl">
          <div>
            <svg
              class="w-20 h-20 text-gray-800 opacity-50 mb-4"
              fill="currentColor"
              viewBox="0 0 32 32"
            >
              <path
                d="M10.2 17.5c1.4-1.2 2.3-3.2 2.3-5.3 0-3.9-2.7-7.2-6-7.2S.5 8.3.5 12.2c0 3.4 2.2 6.2 5.1 6.9v.1c0 3.5 1.7 6.7 4.6 8.5l2.1-3.1C11 21.3 8.7 18.9 8.7 17.5h1.5zm19 0c1.4-1.2 2.3-3.2 2.3-5.3 0-3.9-2.7-7.2-6-7.2s-6 3.3-6 7.2c0 3.4 2.2 6.2 5.1 6.9v.1c0 3.5 1.7 6.7 4.6 8.5l2.1-3.1c-1.3-2.9-3.6-5.3-3.6-6.7h1.5z"
              />
            </svg>
            <blockquote class="text-2xl font-medium">
              Gravid quam mi erat tortor neque molestie. Auctor aliquet at
              porttitor a enim nunc suscipit tincidunt nunc. Et non lorem tortor
              posuere. Nunc eu scelerisque interdum eget tellus non nibh
              scelerisque bibendum.
            </blockquote>
            <figcaption class="mt-6">
              <div class="text-base font-semibold">Judith Black</div>
              <div class="text-sm text-gray-400">CEO of Workcation</div>
            </figcaption>
          </div>
        </div>
      </div>
    </div>