@extends('_layouts.master')

@section('content')

    <div class="mt-2 grid grid-cols-1 gap-4 sm:mt-4 lg:grid-cols-6 lg:grid-rows-2">
        <div class="relative lg:col-span-3">
            <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
            <div
                class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
                <img class="h-80 object-cover object-left" src="{{ asset('/uploads/img/front-en.gif') }}" alt="Poscloud Interface">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Interface</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Designed for ease of use</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Poscloud includes two different designs for daily and management interfaces for
                        ease of use.</p>
                </div>
            </div>
            <div
                class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
        </div>
        <div class="relative lg:col-span-3">
            <div class="absolute inset-px rounded-lg bg-white lg:rounded-tr-[2rem]"></div>
            <div
                class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
                <img class="h-80 object-cover object-left lg:object-right" src="{{ asset('/uploads/img/admin-en.gif') }}" alt="Poscloud Features">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Features</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Everything you need</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Poscloud comes with many features to make your job easier.</p>
                </div>
            </div>
            <div
                class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
        </div>
        <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white lg:rounded-bl-[2rem]"></div>
            <div
                class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
                <img class="h-80 object-cover object-top" src="{{ asset('/uploads/img/menu.png') }}" alt="Poscloud Digital Menu">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Digital Menu</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Integrated and up-to-date</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">The digital menu works integrated with Poscloud and is automatically updated.
                        This saves time.</p>
                </div>
            </div>
            <div
                class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
        </div>
        <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white"></div>
            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
                <img class="h-80 object-cover" src="{{ asset('/uploads/img/entegrasyon.gif') }}" alt="Poscloud Integrations">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Integrations</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Tools that work together</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Integrations such as Cash Register POS, Online order platforms, and Hotel
                        software lighten your workload.</p>
                </div>
            </div>
            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
        </div>
        <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
            <div
                class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
                <img class="h-80 object-cover" src="{{ asset('/uploads/img/clients.gif') }}" alt="Poscloud Users">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Users</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">500+ users worldwide</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">We provide innovative and reliable solutions for visionary businesses.</p>
                </div>
            </div>
            <div
                class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
        </div>
    </div>

@endsection