{{ define "main" }}
<!-- Hero New -->
<div id="slider" class="w-full overflow-hidden h-96 lg:h-[780px] relative bg-slate-800">
  <div
    id="slide-1"
    class="slide-1 absolute translate-x-full flex min-w-full transition-transform duration-500 ease-in-out h-full items-center justify-center overflow-hidden bg-slate-800"
  > 
    <img
      src="./images/slider-new1.jpg"
      class="w-full h-full brightness-50"
      alt=""
    />
    <div class="absolute text-left text-white px-8 lg:pl-48 h-fit w-full">
      <h1 class="text-2xl lg:text-4xl font-bold text-white">Inalix Airport Solutions</h1>
      <p
        class="mt-4 h-24 overflow-hidden text-ellipsis whitespace-normal lg:h-fit lg:overflow-visible text-base lg:text-2xl w-full lg:w-1/2"
      >
        Inalix offers wide range of solutions for all of your airport system
        needs. Our track records can prove our worthy. We develop our own
        custom system for airport from Flight Information Display System
        (FIDS), Billing system, to Airport Operation Data Base (AODB).
        Either Landside or Airside, Inalix has the solutions.
      </p>
    </div>
  </div>

  <div
    id="slide-2"
    class="slide-2 absolute translate-x-full flex min-w-full transition-transform duration-500 ease-in-out h-full items-center justify-center overflow-hidden bg-slate-800"
  >
    <img
      src="./images/slider-new2.jpg"
      class="w-full h-full brightness-50"
      alt=""
    />
    <div class="absolute text-left text-white px-8 lg:pl-48 h-fit w-full">
      <h1 class="text-2xl lg:text-4xl font-bold text-white">Inalix Industrial Solutions</h1>
      <p
        class="mt-4 h-24 overflow-hidden text-ellipsis whitespace-normal lg:h-fit lg:overflow-visible text-base lg:text-2xl w-full lg:w-1/2"
      >Inalix also offers wide range of solutions for all of your industrial needs. We can provide Control & Instrument, Mechanical, Electrical, and Electronical. Either Procurement or Instalation, Inalix has the solutions.                                        
      </p>
    </div>
  </div>
  </div>
</div>
<!-- Hero New End -->

<!-- Why Choose Us -->
<div class="w-full lg:w-[85%] bg-white m-auto flex flex-col lg:flex-row gap-10 p-4 lg:p-12 h-fit lg:h-[780px] items-center justify-between overflow-hidden bg-cover">
  <div class="w-full lg:w-1/2 h-auto bg-cover">
    <img
      src="./images/Section.png"
      class="h-full w-full object-cover"
      alt=""
    />
  </div>
  <div
    class="w-full lg:w-1/2 h-auto text-center lg:text-left flex flex-col gap-4"
  >
    <h1 class="text-2xl lg:text-4xl font-bold">Why Choose Us?</h1>
    <div class="flex flex-col lg:flex-row gap-4">
      <div
        class="flex flex-col items-center lg:items-start w-full lg:w-1/2"
      >
        <div class="w-8 h-8 p-1 flex items-center justify-center">
          <span class="material-symbols-outlined text-4xl text-[#FF0001]">
            dns
          </span>
        </div>
        <h2 class="text-xl lg:text-3xl mt-4 font-bold">
          Robust & Reliable System
        </h2>
        <p class="mt-2 text-[#6B7280]">
          Our comprehensive system design makes sure that our system able to
          operate and function in a reliable 24 hours, 7 days a week, all
          year long
        </p>
      </div>
      <div
        class="flex flex-col items-center lg:items-start w-full lg:w-1/2"
      >
        <div class="w-8 h-8 p-1 flex items-center justify-center">
          <span class="material-symbols-outlined text-4xl text-[#FF0001]">
            group
          </span>
        </div>
        <h2 class="text-xl lg:text-3xl mt-4 font-bold">
          Fast Technical Support
        </h2>
        <p class="mt-2 text-[#6B7280]">
          Our office based in Jakarta – Indonesia and we have great support
          team that will help you.
        </p>
      </div>
    </div>
    <div class="flex flex-col lg:flex-row gap-4">
      <div
        class="flex flex-col items-center lg:items-start w-full lg:w-1/2"
      >
        <div class="w-8 h-8 p-1 flex items-center justify-center">
          <span class="material-symbols-outlined text-4xl text-[#FF0001]">
            star
          </span>
        </div>
        <h2 class="text-xl lg:text-3xl mt-4 font-bold">
          20+ Years Experience
        </h2>
        <p class="mt-2 text-[#6B7280]">
          Our company was established in 2001, that means we have 20+ years
          experience in this business field. There is lots of valuable
          insight and experience, that we learned and will adopt in our next
          project.
        </p>
      </div>
      <div
        class="flex flex-col items-center lg:items-start w-full lg:w-1/2"
      >
        <div class="w-8 h-8 p-1 flex items-center justify-center">
          <span class="material-symbols-outlined text-4xl text-[#FF0001]">
            globe
          </span>
        </div>
        <h2 class="text-xl lg:text-3xl mt-4 font-bold">
          Professional & Solid Teamwork
        </h2>
        <p class="mt-2 text-[#6B7280]">
          Our office based in Jakarta – Indonesia and we have great support
          team that will help you.
        </p>
      </div>
    </div>
  </div>
</div>
<!-- Why Choose Us End -->

<!-- Case Studies -->
<div
      class="w-full lg:w-[80%] m-auto flex flex-col gap-10 px-2 lg:px-4 py-4 mt-10 h-fit items-center justify-center overflow-hidden bg-cover"
    >
      <div class="flex flex-col items-center gap-2">
        <h4 class="uppercase text-[#D94645] text-base">Our recent work</h4>
        <h1 class="text-black text-2xl lg:text-6xl font-bold">
          Our Case Studies
        </h1>
      </div>
      <div class="flex flex-col lg:flex-row gap-6">
        {{ partial "featured_casestudies.html" . }}
        
        
      </div>
    </div>
<!-- Case Studies End -->

<!-- Call to Action -->
    <div
      class="w-full lg:w-[80%] bg-[#191825] m-auto flex flex-col lg:flex-row gap-10 px-2 lg:px-4 py-14 mt-10 h-fit items-center justify-center overflow-hidden bg-cover"
    >
      <h3 class="w-64 text-2xl text-white text-center lg:text-center">
        Get your <span class="text-[#D94645]">FREE</span> business consultation
      </h3>
      <div class="h-px w-16 bg-gray-300"></div>

      <span
        class="material-symbols-outlined text-white !text-5xl w-24 h-24 text-center content-center bg-[#D94645] rounded-full"
      >
        perm_phone_msg
      </span>

      <div class="h-px w-16 bg-gray-300"></div>
      <div class="text-center lg:text-center">
        <h3 class="text-2xl text-white">+62-21-808 788 17</h3>
        <h4 class="text-[#D94645]">sales@inalix.com</h4>
      </div>
    </div>
<!-- Call to Action End -->

<!-- News -->
<div
      class="w-full lg:w-[80%] m-auto flex flex-col gap-10 px-2 lg:px-4 py-4 mt-10 h-fit items-center justify-center overflow-hidden bg-cover"
    >
      <div class="flex flex-col items-center gap-2">
        <h4 class="uppercase text-[#D94645] text-base">What's Happening</h4>
        <h2 class="text-black text-2xl lg:text-6xl font-bold">
          News & Articles
        </h2>
      </div>
      <div class="flex flex-col lg:flex-row gap-6">
        
      {{ partial "recent_posts.html" . }}
        
        
        
      </div>
    </div>
<!-- News End -->

  <!-- Klien -->
  <div class="w-full lg:w-[85%] m-auto flex flex-col lg:flex-col gap-10 p-4 lg:p-12 h-fit items-center justify-between overflow-hidden bg-cover">
    <div class="flex flex-col items-center gap-2">
        <h3 class="uppercase text-base">Our Clients</h3>
      </div>
    <div class="flex gap-5 animate-scroll">
      <img src="./images/hutama-karya.webp" alt="Client 1 Logo" class="max-h-24">
      <img src="./images/jaya-konstruksi.webp" alt="Client 2 Logo" class="max-h-24">
      <img src="./images/logo-pp.webp" alt="Client 3 Logo" class="max-h-24">
      <img src="./images/waskita.webp" alt="Client 4 Logo" class="max-h-24">
      <img src="./images/ap2.webp" alt="Client 5 Logo" class="max-h-24">
      <img src="./images/angkasa-pura-1.webp" alt="Client 3 Logo" class="max-h-24">
      <img src="./images/angkasa-pura-property.webp" alt="Client 4 Logo" class="max-h-24">
      <img src="./images/dirjen-perhubungan-negara.webp" alt="Client 5 Logo" class="max-h-24">
      <!-- Repeat logos if needed -->
      <img src="./images/hutama-karya.webp" alt="Client 1 Logo" class="max-h-24">
      <img src="./images/jaya-konstruksi.webp" alt="Client 2 Logo" class="max-h-24">
      <img src="./images/logo-pp.webp" alt="Client 3 Logo" class="max-h-24">
      <img src="./images/waskita.webp" alt="Client 4 Logo" class="max-h-24">
      <img src="./images/ap2.webp" alt="Client 5 Logo" class="max-h-24">
      <img src="./images/angkasa-pura-1.webp" alt="Client 3 Logo" class="max-h-24">
      <img src="./images/angkasa-pura-property.webp" alt="Client 4 Logo" class="max-h-24">
      <img src="./images/dirjen-perhubungan-negara.webp" alt="Client 5 Logo" class="max-h-24">
    </div>
    <div class="absolute inset-y-0 left-0 w-1/5 bg-gradient-to-r from-gray-100 to-transparent pointer-events-none"></div>
    <div class="absolute inset-y-0 right-0 w-1/5 bg-gradient-to-l from-gray-100 to-transparent pointer-events-none"></div>
  </div>

  <style>
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .animate-scroll {
      animation: scroll 10s linear infinite;
    }
  </style>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const slides = [
        document.getElementById("slide-1"),
        document.getElementById("slide-2"),
      ];
  
      let currentIndex = 0;
  
      function showSlide(index) {
        slides[index].classList.remove("translate-x-full");
        slides[index].classList.add("translate-x-0", "z-10");
  
        setTimeout(() => {
          slides[index].classList.remove("translate-x-0", "z-10");
          slides[index].classList.add("translate-x-full");
  
          // Increment index and loop back to 0 if it exceeds the array length
          currentIndex = (index + 1) % slides.length;
          showSlide(currentIndex);
        }, 4000); // Duration each slide is displayed
      }
  
      // Start the slider
      showSlide(currentIndex);
    });
  </script>

  <script>
    // Optional JavaScript to pause on hover (if needed)
    const slider = document.querySelector('.animate-scroll');

    slider.addEventListener('mouseover', () => {
      slider.style.animationPlayState = 'paused';
    });

    slider.addEventListener('mouseout', () => {
      slider.style.animationPlayState = 'running';
    });
  </script>
  <!-- Klien End -->
  
{{ end }}