@extends('_layouts.master')

@section('content')
    <div class="isolate px-6 py-24 sm:py-32 lg:px-8">
        <div class="mx-auto max-w-2xl sm:text-center">
            <h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Get Support</h2>
            <p class="mt-2 text-lg/8 text-gray-600">What kind of support do you need?</p>
        </div>
        <div class="mx-auto mt-20 max-w-lg space-y-16">
            <div class="flex gap-x-6">
                <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-600">
                                        <span class="material-symbols-rounded text-white">
                                            flare
                                        </span>
                </div>
                <div>
                    <h3 class="text-base/7 font-semibold text-gray-900">Sales Support</h3>
                    <p class="mt-2 text-base/7 text-gray-600">If you want to become a Bulut Adisyon user, contact our sales team.</p>
                    <p class="mt-4 text-sm/6 font-semibold">
                        <a href="https://wa.me/908502551090" class="text-orange-600">Live Sales Support <span aria-hidden="true">&rarr;</span></a>
                    </p>
                </div>
            </div>
            <div class="flex gap-x-6">
                <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-600">
                                        <span class="material-symbols-rounded text-white">
                                            history_edu
                                        </span>
                </div>
                <div>
                    <h3 class="text-base/7 font-semibold text-gray-900">Training Support</h3>
                    <p class="mt-2 text-base/7 text-gray-600">You can check out our training videos for support on Bulut Adisyon. If you want to get
                        online or on-site support, please write to us.</p>
                    <p class="mt-4 text-sm/6 font-semibold">
                        <a href="https://disk.yandex.com.tr/d/YJbb_KI5whet5A" class="text-orange-600">Training Videos <span
                                aria-hidden="true">&rarr;</span></a>
                    </p>
                    <p class="mt-2 text-sm/6 font-semibold">
                        <a href="https://wa.me/908502551090" class="text-orange-600">Write to Us <span aria-hidden="true">&rarr;</span></a>
                    </p>
                </div>
            </div>
            <div class="flex gap-x-6">
                <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-600">
                                        <span class="material-symbols-rounded text-white">
                                            code
                                        </span>
                </div>
                <div>
                    <h3 class="text-base/7 font-semibold text-gray-900">Technical Support</h3>
                    <p class="mt-2 text-base/7 text-gray-600">If you encounter any problems during use, you can get live chat support from our experts
                        or benefit from the support documents.</p>
                    <p class="mt-4 text-sm/6 font-semibold">
                        <a href="https://wa.me/908502551090" class="text-orange-600">Live Support (WhatsApp) <span
                                aria-hidden="true">&rarr;</span></a>
                    </p>
                    <p class="mt-4 text-sm/6 font-semibold">
                        <a href="https://tawk.to/chat/5d83c9a49f6b7a4457e29640/1g1uqgv2k" class="text-orange-600">Live Support (Tawk.to) <span
                                aria-hidden="true">&rarr;</span></a>
                    </p>
                    <p class="mt-4 text-sm/6 font-semibold">
                        <a href="https://poscloud.tawk.help" class="text-orange-600">Support Documents <span aria-hidden="true">&rarr;</span></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection