@page
@model ServiceHost.Pages.services.ticketModel
@{
    Layout = "Shared/_LayoutHome";
}

<!-- Start Header -->
<div class="py-3 relative overflow-hidden">
    <img src="~/assetsmain/images/headerSingle.png" class="absolute inset-0 object-cover object-center dark:opacity-15 h-full w-full" alt="" srcset="">
    <div class="flex items-center justify-between gap-3 py-1 z-10">
        <div class="flex flex-col gap-2 lg:gap-4 px-6 w-full md:w-6/12 text-[#3F3F3F] dark:text-white opacity-100 z-10">
            <h4 class="text-[1.6rem] font-bold">پشتیبانی</h4>
            <p class="text-[0.8rem] md:text-[0.9rem] font-bold md:font-medium text-justify">
	            بخش پشتیبانی در نرم‌افزار شما به شکلی طراحی شده که کاربران در هر صفحه‌ای که باشند، بتوانند سریع و دقیق مشکل یا درخواست خود را ثبت و پیگیری کنند. این بخش یکی از مهم‌ترین ابزارهای تعامل بین کاربران و تیم پشتیبانی است.
	        </p>
            <div class="flex items-center justify-start gap-3 my-4">
                <button class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out">
                    <span>تماس با فروش</span>
                </button>
                @* <a asp-page="/register/Index" class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out cursor-pointer"> *@
                @*     <span>ثبت نام</span> *@
                @* </a> *@
            </div>
        </div>
        <div class="hidden md:flex justify-end gap-6 w-6/12 opacity-100 z-1">
            <img src="~/assetsmain/images/line-wave.svg" class="absolute left-0 -top-20 " alt="">
        </div>
    </div>
</div>
<!-- End Header -->
<!-- Start Contents -->

<div class="px-6 md:px-9 lg:px-12 mx-auto max-w-[1320px]">
    <div class="mb-9 max-w-screen-xl">
        <div class="w-full mx-auto">
            <div class="my-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 text-start items-start p-3 md:p-4 lg:p-6 gap-3 my-6">

                    <div class="">
                        <img src="~/assetsmain/images/globeX.png" class="w-30 text-center" alt="">
                        <div class="text-[#3F3F3F] dark:text-white text-[0.9rem] font-bold text-start my-3">دکمه شناور پشتیبانی</div>
                        <p class="text-[#818181] dark:text-white text-[0.8rem] font-medium">
                            در پایین تمام صفحات نرم‌افزار، یک دکمه پشتیبانی به‌صورت شناور قرار گرفته که همیشه در دسترس کاربران است..
                        </p>
                    </div>


                    <div class="">
                        <img src="~/assetsmain/images/globeX.png" class="w-30 text-center" alt="">
                        <div class="text-[#3F3F3F] dark:text-white text-[0.9rem] font-bold text-start my-3">دکمه شناور پشتیبانی</div>
                        <p class="text-[#818181] dark:text-white text-[0.8rem] font-medium">
                            در پایین تمام صفحات نرم‌افزار، یک دکمه پشتیبانی به‌صورت شناور قرار گرفته که همیشه در دسترس کاربران است..
                        </p>
                    </div>


                    <div class="">
                        <img src="~/assetsmain/images/globeX.png" class="w-30 text-center" alt="">
                        <div class="text-[#3F3F3F] dark:text-white text-[0.9rem] font-bold text-start my-3">دکمه شناور پشتیبانی</div>
                        <p class="text-[#818181] dark:text-white text-[0.8rem] font-medium">
                            در پایین تمام صفحات نرم‌افزار، یک دکمه پشتیبانی به‌صورت شناور قرار گرفته که همیشه در دسترس کاربران است..
                        </p>
                    </div>


                    <div class="">
                        <img src="~/assetsmain/images/globeX.png" class="w-30 text-center" alt="">
                        <div class="text-[#3F3F3F] dark:text-white text-[0.9rem] font-bold text-start my-3">دکمه شناور پشتیبانی</div>
                        <p class="text-[#818181] dark:text-white text-[0.8rem] font-medium">
                            در پایین تمام صفحات نرم‌افزار، یک دکمه پشتیبانی به‌صورت شناور قرار گرفته که همیشه در دسترس کاربران است..
                        </p>
                    </div>

                </div>
            </div>


        </div>
    </div>
</div>




<div class="py-3 px-6 mx-auto max-w-[1320px]">
    <div class="relative flex flex-col md:flex-row gap-6 items-center w-full mx-auto bg-gradient-to-l to-[#2EBEBE] 1E9D9D from-[#035757] overflow-hidden rounded-2xl my-1 p-3 md:p-6 lg:p-9">

	    <div class="absolute bottom-0 left-0">
		    <img src="~/assetsmain/images/lineSupportLeft.svg" class="" alt="">
	    </div>
	    <div class="absolute top-0 -right-6">
		    <img src="~/assetsmain/images/lineSupportRight.svg" class="" alt="">
	    </div>

	    <div class="w-full md:w-8/12 text-center md:text-start">
            <div class="text-white font-extrabold text-[1.6rem] mb-4">مدیریت یکپارچه منابع انسانی و هوشمند</div>
            <p class="text-white font-medium text-[0.8rem] p-0 text-justify">
                با استفاده از خدمات سامانه کارگاه، به اطلاعات پرسنلی، صورت‌حساب‌های مالی، گزارشات، حضور و غیاب، کارپوشه، مدیریت کاربران و پشتیبانی دسترسی داشته باشید و فرآیندهای سازمانی خود را بهینه کنید.
            </p>
        </div>
        <div class="w-full md:w-4/12 text-center md:text-left z-10">
            <a asp-page="/contact-us/Index" class="px-9 py-2 w-full md:w-auto text-[#138F8F] text-[0.8rem] font-semibold rounded-lg cursor-pointer bg-white hover:bg-[#DDDDDD] duration-500 ease-in-out">درخواست مشاوره</a>
        </div>
    </div>
</div>