
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>


<section class="grid grid-cols-1 lg:grid-cols-[4fr_3fr_2fr] w-full"
  data-component-type="Content"
>

  <!-- LEFT CONTENT -->
  <section class="relative h-[60vh] bg-white">

    <div class="max-w-[80%] mx-auto pt-16">

      <!-- TAGLINE -->
      <p
        data-node="dessert_tagline"
        data-node-type="text"
        data-node-label="Dessert Tagline"
        data-node-default="MADE WITH LOVE"
        class="text-[#5C5C5C] font-semibold text-lg"
      >
        {{dessert_tagline}}
      </p>

      <!-- HEADING -->
      <h1
        data-node="dessert_heading"
        data-node-type="text"
        data-node-label="Dessert Heading"
        data-node-default="New Desserts & Drinks"
        class="text-[#534931] text-5xl lg:text-7xl font-bold mt-4"
      >
        {{dessert_heading}} 
        
      </h1>

    </div>

    <!-- SLIDER NAVIGATION -->
    <div class="absolute bottom-5 right-5 bg-white flex gap-20 p-3 z-50">

      <!-- PREV BUTTON -->
      <button class="slider-prev">
        <img
          data-node="dessert_prev_icon"
          data-node-type="file"
          data-node-label="Dessert Slider Prev Icon"
          data-node-default="../assets/landing_hero/Icon2.png"
          src="{{dessert_prev_icon}}"
          class="w-[10px] h-auto"
          alt="Previous"
        />
      </button>

      <!-- NEXT BUTTON -->
      <button class="slider-next">
        <img
          data-node="dessert_next_icon"
          data-node-type="file"
          data-node-label="Dessert Slider Next Icon"
          data-node-default="../assets/landing_hero/Vector.png"
          src="{{dessert_next_icon}}"
          class="w-[10px] h-auto"
          alt="Next"
        />
      </button>

    </div>

  </section>

  <!-- MIDDLE SLIDER -->
  <section class="relative h-[60vh] overflow-hidden">
    <div class="swiper dessert-slider h-full">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <img
            data-node="dessert_middle_slide_1"
            data-node-type="file"
            data-node-label="Middle Slide Image 1"
            data-node-default="../assets/new_dessert/item6.png"
            src="{{dessert_middle_slide_1}}"
            class="w-full h-full object-cover"
          />
        </div>

        <div class="swiper-slide">
          <img
            data-node="dessert_middle_slide_2"
            data-node-type="file"
            data-node-label="Middle Slide Image 2"
            data-node-default="../assets/new_dessert/item7.png"
            src="{{dessert_middle_slide_2}}"
            class="w-full h-full object-cover"
          />
        </div>

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

      </div>
    </div>
  </section>

  <!-- RIGHT SLIDER (DESKTOP ONLY) -->
  <section class="hidden lg:block relative h-[60vh] overflow-hidden">
    <div class="swiper dessert-slider h-full">
      <div class="swiper-wrapper">

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

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

        <div class="swiper-slide">
          <img
            data-node="dessert_right_slide_3"
            data-node-type="file"
            data-node-label="Right Slide Image 3"
            data-node-default="../assets/new_dessert/item6.png"
            src="{{dessert_right_slide_3}}"
            class="w-full h-full object-cover"
          />
        </div>

      </div>
    </div>
  </section>

</section>


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

<script>
  const sliders = document.querySelectorAll(".dessert-slider");

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