@extends('layouts.frontend.master')
@section('content')
<div class="bg-[#dee5e1] py-8">
    <div class="container">
        <div class="relative my-3">
            <img loading="lazy" src="https://i.ibb.co/tK0skJB/2.png"
                class="lg:max-w-[400px] max-w-[100%] lg:absolute rtl:left-0 ltr:right-0 top-0" alt="" />
            <h4 class="text-[30px] font-bold">{{ __('website.projects') }}</h4>
            <p class="max-w-[500px] mt-4">
                {{ app()->getLocale() == 'ar' ? $settings['website_bio_ar'] : $settings['website_bio_en'] }}
            </p>
        </div>
    </div>
</div>

<!-- Section projects -->
<div class="my-4 relative py-[100px]">
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 py-3 items-center justify-center overflow-hidden">
            @foreach ($projects as $project)
                <div class="lg:col-span-3 col-span-12 my-3 text-center">
                    <div class="text-center group">
                        <div
                            class="bg-[#fcf7f0] w-[220px] h-[220px] m-auto relative overflow-hidden flex items-center justify-center rounded-[10px]">
                            <img loading="lazy" src="{{ $project->image() }}"
                                class="w-full h-full m-auto transition duration-500 ease-in-out group-hover:translate-y-[-10px]"
                                alt="" />
                            <a href="{{ $project->image() }}" data-fancybox="watermrk" data-caption="{{ app()->getLocale() == 'ar' ? $project->title_ar : $project->title_en }}"
                                class="absolute top-0 right-0 w-full h-full bg-overlay flex items-center justify-center text-white transition duration-500 ease-in-out lg:opacity-0 group-hover:opacity-[100%]">
                                <i class="fa-solid fa-magnifying-glass-plus text-white text-[30px]"></i>
                            </a>
                        </div>
                        <h3 class="text-black text-[17px] mt-2 leading-[40px] relative">
                            {{ app()->getLocale() == 'ar' ? $project->title_ar : $project->title_en }}
                        </h3>
                    </div>
                </div>
            @endforeach
        </div>
        {{$projects->links('front.components.pagination')}}
    </div>
</div>
@endsection