@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.gif') }}" alt="Bulut Adisyon Arayüz">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Arayüz</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Kolay kullanım için tasarlandı</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Bulut Adisyon kolay kullanım için günlük ve yönetim arayüzü
                        olarak iki farklı tasarım içerir.</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.gif') }}" alt="Bulut Adisyon Özellikler">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Özellikler</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">İhtiyacınız olan her şey</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Bulut Adisyon işinizi kolaylaştıracak bir çok özellik ile
                        birlikte gelir.</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="Bulut Adisyon Dijital Menü">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Dijital Menü</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Entegre ve güncel</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Dijital menü Bulut Adisyon ile entegre çalışır ve otomatik
                        olarak güncellenir. Bu sayede zaman kazandırır.</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="Bulut Adisyon Entegrasyonlar">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Entegrasyonlar</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Birlikte çalışan araçlar</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Yazarkasa POS, Online sipariş platformları ve Otel yazılımı
                        gibi entegrasyonlar ile iş yükünüz hafifler.</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="Bulut Adisyon Kullanıcılar">
                <div class="p-10 pt-4">
                    <h3 class="text-sm/4 font-semibold text-orange-600">Kullanıcılar</h3>
                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Tüm dünyada 500+ kullanıcı</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-600">Vizyoner işletmeler için yenilikçi ve güvenilir çözümler
                        üretiyoruz.</p>
                    <a href="https://www.getposcloud.com/" target="_blank"><img class="h-4 mt-4 w-auto"
                                                                src="{{ asset('/uploads/img/poscloud.svg') }}" alt=""></a>
                </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