@extends('template.front')

@section('container')


<section class="-mt-16 bg-white min-h-screen flex items-center justify-center py-20 pt-32"
    style="background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.90)), url('{{ asset('images/bg-indoor.jpg') }}')"
>
    <div class="max-w-6xl mx-auto container" data-aos="fade-up">
        <div class="h-1 w-24 bg-black opacity-80 lg:mx-auto mb-3"></div>
        <h1 class="font-bold text-4xl lg:text-7xl lg:text-center mb-2">Jelajah Produk Kami</h1>
        <h1 class="font-bold text-3xl lg:text-5xl lg:text-center text-transparent">Professional Cases</h1>

        <div id="scroll-down-animation" class="mt-20">
            <span class="mouse">
                <span class="move"></span>
            </span>
        </div>

    </div>
</section>

<section>

    <div class="max-w-6xl mx-auto container py-20">
        <div class="grid lg:grid-cols-4 gap-12 grid-cols-1">
            @foreach($portfolio as $k => $v)
                <x-product-thumbnail :portfolio="$v"></x-product-thumbnail>
            @endforeach
        </div>
    </div>

</section>

@stop