@extends('layouts.guest')

@section('content')

@include('front.partials.navbar')

@include('front.partials.mobile-menu')

<!-- =========== Hero Section Start =========== -->
<section class="py-24 bg-gradient-to-t from-slate-500/10">
    <div class="container">
        <div class="max-w-7xl">
            <img class="h-48 mb-6" src="{{ asset('assets/images/features/portable.svg') }}" alt="">
            <h2 class="mb-5 text-2xl font-semibold md:text-4xl/tight">Portatif Enerji Çözümleri</h2>
            <p class="leading-7 lg:text-lg text-slate-500">5kW'ya kadar olan benzinli ve dizel jeneratörler</p>
        </div>
    </div>
</section>
<!-- =========== Hero Section End =========== -->

<!-- =========== Filter Section Start =========== -->
<!--
      This example requires some changes to your config:

      ```
      // tailwind.config.js
      module.exports = {
        // ...
        plugins: [
          // ...
          require('@tailwindcss/aspect-ratio'),
        ],
      }
      ```
    -->
<div class="bg-white">
    <div class="py-16 sm:py-24 lg:mx-auto lg:max-w-7xl lg:px-8">

        <div class="relative mt-8">
            <div class="relative w-full pb-6 -mb-6 overflow-x-auto">
                <ul role="list"
                    class="inline-flex mx-4 space-x-8 sm:mx-6 lg:mx-0 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-x-0">

                    @foreach ($products as $item)
                    <li class="inline-flex flex-col w-64 lg:w-auto">
                        <div class="relative group">
                            <div class="w-full overflow-hidden bg-gray-200 rounded-md aspect-h-1 aspect-w-1">
                                <img src="{{ $item->image }}" alt="{{ $item->name }}"
                                    class="object-cover object-center w-full h-full group-hover:opacity-75">
                            </div>
                            <div class="mt-6">
                                <p class="text-sm text-gray-500">{{ $item->brand }}</p>
                                <h3 class="mt-1 font-semibold text-gray-900">
                                    <a href="#">
                                        <span class="absolute inset-0"></span>
                                        {{ $item->name }}
                                    </a>
                                    <p class="text-xs font-light">{{ $item->description }}</p>
                                </h3>
                                <p class="mt-1 text-gray-900">{{ $item->price }}₺/gün</p>
                            </div>
                        </div>
                    </li>
                    @endforeach

                </ul>
            </div>
        </div>

        <div class="flex px-4 mt-12 sm:hidden">
            <a href="#" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
                See everything
                <span aria-hidden="true"> &rarr;</span>
            </a>
        </div>
    </div>
</div>
<!-- =========== Filter Section End =========== -->

@include('front.partials.clients')

@include('front.partials.faq')

@include('front.partials.sgs')

@include('front.partials.footer')

@include('front.partials.back-to-top')

@endsection

@section('scripts')
<!-- Shufflejs Plugin Js -->
<script src="{{ asset('assets/libs/shufflejs/shuffle.min.js') }}"></script>
<!-- glightbox Plugin Js -->
<script src="{{ asset('assets/libs/glightbox/js/glightbox.min.js') }}"></script>
<!-- Portfolio Masonary Js -->
<script src="{{ asset('assets/js/gallery.min.js') }}"></script>
@endsection