{% extends "customer_main.html" %}
{%load static%}
{% block content %}

<div class="w-full flex flex-col gap-5">


    <!--<div class="w-full bg-white rounded-md h-fit shadow-md p-5 flex justify-center items-center text-center"> 
        <p class="text-secondosiblue font-poppinsBold text-xl s:text-2xl">Ositcom Support is Availale 24h a Day on Whatsapp <a href="https://wa.me/96171918718" target="_blank" class="cursor-pointer hover:text-gray-400 duration-300">+961 71 918 718</a></p>
    </div>-->

    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
            <div class="w-full rounded-md shadow-md bg-secondosiblue p-5 s:p-9 flex flex-col gap-5">
                <p class="text-2xl text-white">Open a Support Ticket</p>

                <p class="text-white opacity-80 text-[17px leading-7]">Our award-winning service team has no tiers, no
                    bots, no hand-offs, just highly trained professionals who
                    answer your questions and solve your issue.</p>

                <button
                    class="w-fit px-5 py-2 rounded-md border border-white text-white hover:bg-white hover:text-secondosiblue duration-300">
                    Create a Ticket
                </button>
            </div>

            <div class="w-full rounded-md shadow-md bg-secondosiblue p-5 s:p-9 flex flex-col gap-5">
                <p class="text-2xl text-white">Getting Started Guide</p>

                <p class="text-white opacity-80 text-[17px leading-7]">Need help kicking off your project with Ositcom
                    Ltd? at Oitcom Blog we have prepared many articles about every service provided by us
                </p>

                <button
                    class="w-fit px-5 py-2 rounded-md border border-white text-white hover:bg-white hover:text-secondosiblue duration-300">
                    View Guide
                </button>
            </div>
        </div>
    </div>

    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
            <div
                class="w-full rounded-md shadow-md bg-gray-50 border border-hray-100 p-5 s:p-9 flex flex-col justify-between gap-5">
                <p class="text-2xl text-secondosiblue">Call OSITCOM Support</p>

                <p class="text-gray-500">Phone support is available day and night for existing customers, account
                    support, and general
                    inquiries.<br><br>

                    You could contact us via LiveChat or Whatsaap on +9619918718.<br><br>

                    You could contact Ositcom development department on +961918718 or via whatsaap on +961918719</p>

            </div>

            <div
                class="w-full rounded-md shadow-md bg-gray-50 border border-hray-100 p-5 s:p-9 flex flex-col justify-between gap-5">
                <p class="text-2xl text-secondosiblue">Contact OSITCOM Sales
                </p>

                <p class="text-gray-500">If you have a question about a large deployment or migration, we are here to
                    help. Request a meeting with one of our solutions consultants today.<br><br>

                    You could contact our sales department on +9619918718 during working hours or schedule a meeting via
                    Whatsapp on +96171918718.
                </p>

                <button
                    class="w-fit px-5 py-2 bg-secondosiblue rounded-md text-white border border-secondosiblue cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
                    Schedule A Meeting
                </button>
            </div>

            <div
                class="w-full rounded-md shadow-md bg-gray-50 border border-hray-100 p-5 s:p-9 flex flex-col justify-between gap-5">
                <p class="text-2xl text-secondosiblue">Email Us
                </p>

                <p class="text-gray-500">Contact us if you need help recovering your account credentials or have a
                    general inquiry.<br><br>

                    For general inquiery: info@ositcom.net<br>
                    For sales: info@ositcom.net<br>
                    For ositcom admin: info@ositcom.net<br>
                </p>

                <button
                    class="w-fit px-5 py-2 bg-secondosiblue rounded-md text-white border border-secondosiblue cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
                    Send Email
                </button>
            </div>


            <div
                class="w-full rounded-md shadow-md bg-gray-50 border border-hray-100 p-5 s:p-9 flex flex-col justify-between gap-5">
                <p class="text-2xl text-secondosiblue">Professional Services
                </p>

                <p class="text-gray-500">Professional, system administration assistance as a service.<br><br>

                    To ask for a Quotation contact us on +96171918718 or send an email to info@ositcom.com
                </p>

                <button
                    class="w-fit px-5 py-2 bg-secondosiblue rounded-md text-white border border-secondosiblue cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
                    Get A Quote
                </button>
            </div>
        </div>
    </div>

    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div
        class="w-full rounded-md shadow-md bg-gray-50 border border-hray-100 p-5 s:p-9">

        <p class="text-secondosiblue text-2xl">Contact Us</p>
            <form class="w-full grid grid-cols-1 md:grid-cols-2 gap-3 mt-5">
                <input class="w-full border border-gray-300 px-5 py-3 outline-none rounded-md" placeholder="First Name">
                <input class="w-full border border-gray-300 px-5 py-3 outline-none rounded-md" placeholder="Last Name">
                <input class="w-full border border-gray-300 px-5 py-3 outline-none rounded-md" placeholder="Email">
                <input class="w-full border border-gray-300 px-5 py-3 outline-none rounded-md" placeholder="Mobile Number">
                <textarea name="" id="" class="w-full border border-gray-300 px-5 py-3 outline-none rounded-md resize-none col-span-1 md:col-span-2" placeholder="Your Message..." rows="8"></textarea>
                <button class="w-full bg-secondosiblue border border-secondosiblue text-white rounded-md px-5 py-3 col-span-1 md:col-span-2 hover:text-secondosiblue hover:bg-transparent duration-300">
                    Submit
                </button>
            </form>
        </div>

    </div>
</div>


{% endblock %}