@php
    $productCards = [
        [
            'id' => '0',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'Food & Beverage',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '1',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'Rew Material',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '2',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'ETC',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '3',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
           'tag' =>'Tobacco',
           'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '0',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'Food & Beverage',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '1',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'Rew Material',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '2',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
            'tag' =>'ETC',
            'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
        [
            'id' => '3',
            'img' => 'img/xiaomi-4-lite-air-purifier-34964-001.jpg',
            'title' => 'Name Product',
           'tag' =>'Tobacco',
           'subtitle' => 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, repellendus eius fuga sapiente magnam quo quod assumenda, quisquam est libero quas consequuntur! Eius quidem fuga eos optio inventore? Delectus, dolor.'
        ],
       
       
       
    ];
@endphp

<div class="flex flex-wrap -mx-4 pt-2 md:pt-4">

    @foreach ($productCards as $index => $card)
    <div class=" w-full xs:w-1/2 lg:w-1/3 2xl:w-1/4 p-2 md:p-4"  >
        <x-frontend::card.Card05Basic :img="$card['img']"  :title="$card['title']"  :subtitle="$card['subtitle']"  :tag="$card['tag']" >
        </x-frontend>
        <div class="flex justify-center">
            <a href="#contacts" class="co-card-05-btn">Contact Us</a>
        </div>

    </div>
    @endforeach
</div>

<x-frontend::modal.ModalBasic name="popupzoom" class="w-11/12 max-w-5xl">
    @slot('content')
      <div class="p-8">
           <h2 class="home-titl text-center mb-5">Name Product</h2>
           <div class="flex flex-wrap -mx-4 mb-4">
            <div class=" w-full tn:w-1/2 md:w-1/3 lg:w-1/4 p-2">
                <img src="{{ Module::asset('frontend:img/xiaomi-4-lite-air-purifier-34964-001.jpg') }}" alt="product" class=" rounded-lg">
            </div>
            <div class=" w-full tn:w-1/2 md:w-1/3 lg:w-1/4 p-2">
                <img src="{{ Module::asset('frontend:img/xiaomi-4-lite-air-purifier-34964-001.jpg') }}" alt="product" class=" rounded-lg">
            </div>
            <div class=" w-full tn:w-1/2 md:w-1/3 lg:w-1/4 p-2">
                <img src="{{ Module::asset('frontend:img/xiaomi-4-lite-air-purifier-34964-001.jpg') }}" alt="product" class=" rounded-lg">
            </div>
            <div class=" w-full tn:w-1/2 md:w-1/3 lg:w-1/4 p-2">
                <img src="{{ Module::asset('frontend:img/xiaomi-4-lite-air-purifier-34964-001.jpg') }}" alt="product" class=" rounded-lg">
            </div>
           </div>
           <p  class=" line-clamp-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum labore culpa, accusantium ipsa quibusdam ex sit nihil molestiae repellat vero beatae debitis consequatur cupiditate saepe aliquam delectus facere maxime laboriosam?
           Vitae suscipit voluptatibus autem dolore beatae ipsam officiis maiores nulla similique quisquam accusamus, repellat facilis, excepturi veniam sit temporibus qui rerum odio itaque eligendi asperiores eum vero! Iure, totam facere.
           Eum fuga consectetur saepe hic ab laboriosam modi beatae unde quibusdam ea aliquid rem animi quam similique nam ratione odit, necessitatibus natus? Quos optio modi libero deserunt nulla suscipit voluptatem.
           Error qui consequatur corporis, dicta ad suscipit maiores quae dolor animi voluptatum possimus perferendis dolores vel nulla sapiente amet explicabo eveniet laborum nemo vero nobis. Deserunt laborum enim quisquam praesentium!
           Cum quibusdam maiores, autem alias quam eius temporibus, sed quisquam, illo exercitationem non ut necessitatibus quis? Perspiciatis, ipsum sed dicta minus unde explicabo est ratione ullam iste? Inventore, magni est.</p>
      </div>
        
    @endslot
</x-frontend>