/* Add custom JS code below */
window.addEventListener('load', function () {
    // Get the target element using the query selector
    const gridElement = document.querySelector('.index .banner-images .content-image');
    
    // Check if the gridElement exists
    if (gridElement) {
        // Create the HTML for the link and image
        const linkHTML = `
        <div class="cat rounded-md relative !max-h-[250px] h-[250px] overflow-hidden xl:overflow-visible">
          <a href="https://electroclub24.com/%D9%85%D8%B3%D8%AA%D9%84%D8%B2%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84/c1765287840">
            <div class="photo w-full h-full">
              <img loading="lazy" class="object-cover rounded-md" width="100%" height="100%" src="https://cdn.salla.sa/form-builder/DRASdNYLA8G3cBl5WoUvm44niX4L002aDn1IvEI0.png" alt="مستلزمات الجوال">
            </div>          

            <div style="color: #ffffff" class="box-text-cat pt-[24px] rtl:pr-[24px] ltr:pl-[24px] absolute top-0 rtl:right-0 ltr:left-0">
              <h2 class="title flex items-center gap-[9px] text-[15px] md:text-[19px] xl:text-[24px] mb-1 md:mb-[6px] font-bold">
                مستلزمات الجوال
                <span class="pt-2 text-inherit"><i class="sicon-arrow-left"></i></span>
              </h2>
              <p class="desc font-normal text-[13px] md:text-[14px ] xl:text-[16px] leading-normal text-inherit">أحدث الاجهزة بأحسن الاسعار</p>
            </div>
          </a>
        </div>`;
        
        // Insert the HTML at the end of the target element
        gridElement.insertAdjacentHTML('beforeend', linkHTML);
    }
});