
    <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="Hero"
>

  <!-- LEFT CONTENT -->
  <section
    class="bg-cover bg-center bg-no-repeat h-[650px] md:h-[80vh] lg:h-[100vh] w-full"
    style="background-image:url('{{hero_bg_image}}')"
    data-node="hero_bg_image"
    data-node-type="file"
    data-node-label="Hero Background Image"
    data-node-default="../assets/landing_hero/1.png"
  >
    <div
      class="w-full max-w-[80%] mx-auto px-5
      pt-[200px] md:pt-[100px] lg:pt-[160px]
      pb-[200px] md:pb-[100px] lg:pb-[260px]
      flex flex-col text-start"
    >

      <p
        data-node="hero_tag"
        data-node-type="text"
        data-node-label="Hero Tag Line"
        data-node-default="COFFEE"
        class="text-[#5C5C5C] text-[16px] lg:text-[20px] font-semibold"
      >
        {{hero_tag}}
      </p>

      <h1
        data-node="hero_heading"
        data-node-type="text"
        data-node-label="Hero Heading"
        data-node-default="Welcome to Cafe"
        class="text-[#534931] text-[40px] lg:text-[70px] font-bold leading-tight mt-4"
      >
        {{hero_heading}}
      </h1>

      <p
        data-node="hero_description"
        data-node-type="text"
        data-node-label="Hero Description"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        class="text-[#5C5C5C] mt-5 text-[16px] lg:text-[20px] font-semibold max-w-[600px]"
      >
        {{hero_description}}
      </p>

      <!-- BUTTONS -->
      <div class="flex gap-10">

        <a
          data-node="hero_btn_1_link"
          data-node-type="page_links"
          data-node-default="/reservations"
          href="{{hero_btn_1_link}}"
        >
          <button
            data-node="hero_btn_1_text"
            data-node-type="text"
            data-node-default="Reservations"
            class="mt-8 bg-[#B38E6A] text-white px-6 py-3 rounded-[30px] lg:text-[22px]"
          >
            {{hero_btn_1_text}}
          </button>
        </a>

        <button class="mt-8 bg-[#B38E6A] rounded-full px-5 lg:py-2 py-4">
          <img
            data-node="hero_btn_icon"
            data-node-type="file"
            data-node-default="../assets/landing_hero/Icon.png"
            src="{{hero_btn_icon}}"
            class="w-[18px]"
          />
        </button>

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

  <!-- RIGHT SLIDER -->
  <section
    class="relative bg-cover bg-center h-[650px] md:h-[100vh] w-full overflow-hidden"
  >
    <div class="swiper multiple-slide-carousel mt-[100px]">
      <div class="swiper-wrapper">

        <!-- SLIDE 1 -->
        <div class="swiper-slide">
          <img
            data-node="hero_slide_1"
            data-node-type="file"
            data-node-default="../assets/landing_hero/bg2.png"
            src="{{hero_slide_1}}"
            class="w-full h-[860px] object-cover"
          />
        </div>

        <!-- SLIDE 2 -->
        <div class="swiper-slide">
          <img
            data-node="hero_slide_2"
            data-node-type="file"
            data-node-default="../assets/landing_hero/bg3.png"
            src="{{hero_slide_2}}"
            class="w-full h-[860px] object-cover"
          />
        </div>

        <!-- SLIDE 3 -->
        <div class="swiper-slide">
          <img
            data-node="hero_slide_3"
            data-node-type="file"
            data-node-default="../assets/landing_hero/bg4.png"
            src="{{hero_slide_3}}"
            class="w-full h-[860px] object-cover"
          />
        </div>

      </div>
    </div>

    <!-- SLIDER CONTROLS -->
 
      <div class="absolute bottom-0 left-0  z-[49] 
            w-[18%] h-[8%] bg-white p-5 flex justify-evenly
         items-center ">

        <!-- Left Button -->
        <button style="--swiper-navigation-size: 20px;" id="slider-button-left" class="swiper-button-prev pointer-events-auto lg:ml-[25px]
         group flex justify-center items-center text-white 
          ">

          <img src="../assets/landing_hero/Icon2.png" class="w-[10px] h-auto" alt="Icon" />
        </button>

        <!-- Right Button -->
        <button style="--swiper-navigation-size: 20px;" id="slider-button-right"
          class="swiper-button-next pointer-events-auto group lg:mr-[25px] flex justify-center items-center text-white ">

          <img src="../assets/landing_hero/Vector.png" class="w-[10px] h-auto" alt="Icon" />
        </button>

      </div>

  </section>

</section>






  <style>
    .swiper-button-prev::after,
.swiper-button-next::after {
  content: "" !important;
}

  </style>

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

    <script>
    const swiper = new Swiper(".multiple-slide-carousel", {
      slidesPerView: 1,
      spaceBetween: 1,
      loop: true,
      autoplay: {
        delay: 3800,
        disableOnInteraction: false,
      },

      breakpoints: {
        640: { slidesPerView: 1 },
        768: { slidesPerView: 1 },
        1024: { slidesPerView: 1 },
      },
      navigation: {
        nextEl: "#slider-button-right",
        prevEl: "#slider-button-left",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

  </script>
