@extends("website.layouts.layout")

@section("title")
Portfolios
@endsection

@section("body")
    <h1 class="font-semibold text-2xl uppercase mb-10 flex justify-center">Portfolios</h1>

    @if ($portfolios->count() > 0)
        <div class="flex flex-wrap justify-center gap-x-5">
            @foreach ($portfolios as $portfolio)
                <div class="mb-10">
                    <div class="w-56 shadow-lg p-3 rounded-md cursor-pointer transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">
                        @if ($portfolio->image)
                            <img src="/storage/{{ $portfolio->image }}" alt="Image of {{ $portfolio->name }}" class="h-56 mx-auto rounded-md mb-2">
                        @else
                            <i class="fa-solid fa-cube flex justify-center mb-3"></i>
                        @endif

                        <p class="flex justify-center font-semibold">{{ $portfolio->company_name }}</p>
                        <p class="flex justify-center">{{ $portfolio->description }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection