  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 
 
<section
  class="max-w-full grid grid-cols-1 md:grid-cols-2"
  data-component-type="Content"
>

  <!-- ================= SLIDER ================= -->
  <section class="relative h-[60vh] overflow-hidden">

    <div class="swiper hero-slider h-full">
      <div class="swiper-wrapper">

        <!-- Slide 1 -->
        <div class="swiper-slide">
          <img
            data-node="testimonial_slide_1"
            data-node-type="file"
            data-node-label="Testimonial Slide Image 1"
            data-node-default="../assets/landing_hero/bg2.png"
            src="{{testimonial_slide_1}}"
            class="w-full h-full object-cover"
            alt="Slide 1"
          />
        </div>

        <!-- Slide 2 -->
        <div class="swiper-slide">
          <img
            data-node="testimonial_slide_2"
            data-node-type="file"
            data-node-label="Testimonial Slide Image 2"
            data-node-default="../assets/landing_hero/bg3.png"
            src="{{testimonial_slide_2}}"
            class="w-full h-full object-cover"
            alt="Slide 2"
          />
        </div>

        <!-- Slide 3 -->
        <div class="swiper-slide">
          <img
            data-node="testimonial_slide_3"
            data-node-type="file"
            data-node-label="Testimonial Slide Image 3"
            data-node-default="../assets/landing_hero/bg4.png"
            src="{{testimonial_slide_3}}"
            class="w-full h-full object-cover"
            alt="Slide 3"
          />
        </div>

        <!-- Slide 4 -->
        <div class="swiper-slide">
          <img
            data-node="testimonial_slide_4"
            data-node-type="file"
            data-node-label="Testimonial Slide Image 4"
            data-node-default="../assets/landing_hero/bg3.png"
            src="{{testimonial_slide_4}}"
            class="w-full h-full object-cover"
            alt="Slide 4"
          />
        </div>

      </div>
    </div>

  </section>

  <!-- ================= CONTENT ================= -->
  <section class="bg-[#E5DCD2] h-[60vh] flex items-center">
    <div class="max-w-[80%] mx-auto">

      <!-- Heading -->
      <h1
        data-node="testimonial_heading"
        data-node-type="text"
        data-node-label="Testimonial Heading"
        data-node-default="What They Say About Us"
        class="text-[#534931] text-4xl lg:text-5xl font-bold"
      >
        {{testimonial_heading}}
      </h1>

      <!-- Description -->
      <p
        data-node="testimonial_description"
        data-node-type="text"
        data-node-label="Testimonial Description"
        data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed consectetur feugiat ut sed."
        class="text-[#5C5C5C] mt-6 text-lg max-w-[600px]"
      >
        {{testimonial_description}}
      </p>

      <!-- Author -->
      <p
        data-node="testimonial_author"
        data-node-type="text"
        data-node-label="Author Name"
        data-node-default="Lorem Ipsum"
        class="text-[#5C5C5C] mt-4 font-semibold"
      >
        <b>{{testimonial_author}}</b>
      </p>

      <!-- Navigation -->
      <div class="flex gap-6 mt-10">

        <!-- Prev Button -->
        <button id="slider-prev" class="cursor-pointer">
          <img
            data-node="testimonial_prev_icon"
            data-node-type="file"
            data-node-label="Testimonial Prev Icon"
            data-node-default="../assets/say_about_us/img1.png"
            src="{{testimonial_prev_icon}}"
            class="w-12"
            alt="Previous"
          />
        </button>

        <!-- Next Button -->
        <button id="slider-next" class="cursor-pointer">
          <img
            data-node="testimonial_next_icon"
            data-node-type="file"
            data-node-label="Testimonial Next Icon"
            data-node-default="../assets/say_about_us/img2.png"
            src="{{testimonial_next_icon}}"
            class="w-12"
            alt="Next"
          />
        </button>

      </div>

    </div>
  </section>

</section>




<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>




 <script>
  new Swiper(".hero-slider", {
    slidesPerView: 1,
    loop: true,
    speed: 800,
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: "#slider-next",
      prevEl: "#slider-prev",
    },
  });
</script>