@extends('layouts.frontend.master')

@section('content')
<!-- Section Products -->
<div class="my-4 relative z-[9] py-[20px]">
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 items-center justify-center overflow-hidden">
            @foreach($data['products'] as $key => $product)
                <div class="lg:col-span-3 col-span-12 my-2 text-center">
                    <div class="text-center group bg-white rounded-[20px] overflow-hidden shadow-lg p-3">
                        <div class="overflow-hidden rounded-[20px]">
                            <img loading="lazy" src="{{ $product->image() }}"
                                class="w-full h-[200px] m-auto transition duration-500 ease-in-out group-hover:scale-[1.1]"
                                alt="" />
                        </div>
                        <div class="p-4">
                            <h3 class="text-secondary mb-3 text-[25px] font-bold relative">
                                {{ app()->getLocale() == 'ar' ? $product->title_ar : $product->title_en }}
                            </h3>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        {{$data['products']->links('front.components.pagination')}}
    </div>
</div>
@endsection