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

{% block modules_section %}
<!-- This block is intentionally left empty to exclude the modules section -->
{% endblock modules_section %}

{% block content %}


<div class="w-full flex flex-col gap-5 mt-5 mb-5">
    <div class="w-full h-fit bg-white rounded-md shadow-md px-5 py-9 flex flex-col justify-center items-center">
        <p class="text-osiblue uppercase text-xl s:text-3xl font-poppinsBold text-center">Cloud VPS Hosting</p>

        <!-- PRICING ON DESKTOP -->
        <div class="w-full hidden xlg:grid grid-cols-2 xll:grid-cols-4 mt-24">
            <div class="w-full h-full border border-gray-200 border-r-transparent p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 1</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">$46.16/month</p>
                    <p class="text-gray-500">Regular Price: $65.95/month</p>
                </div>

                <a href="">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>

                <div class="w-full flex flex-col gap-2 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>Single CPU Virtual Core</p>
                        <p>2 GB ECC RAM</p>
                        <p>50 GB SSD Space</p>
                        <p>2 TB Bandwidth</p>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>Unlimited Websites</p>
                        <p>Dedicated IP Address</p>
                        <p>cPanel/WHM</p>
                        <p>Imunify360 Security</p>
                        <p>WordPress Toolkit</p>
                    </div>
                </div>


                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>DDos Protection</p>
                        <p>Free SSL Certificate</p>
                        <p>Daily Backup</p>
                        <p>SSH Root Access</p>
                        <p>Free Website Transfer</p>
                    </div>
                </div>

            </div>

            <div class="relative">
                <div
                    class="w-full bg-osiblue text-white text-center px-3 py-3 text-xl absolute -top-[54px] rounded-t-md border border-osiblue font-poppinsBold">
                    <p>Best Value</p>
                </div>

                <div class="border h-full border-osiblue w-full p-9 flex flex-col gap-5 items-center">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 2</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$53.86/month
                        </p>
                        <p class="text-gray-500">Regular Price: $76.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>

                    <div class="w-full flex flex-col gap-2 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>2 CPU Virtual Cores</p>
                            <p>4 GB ECC RAM</p>
                            <p>80 GB SSD Space</p>
                            <p>4 TB Bandwidth</p>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Unlimited Websites</p>
                            <p>Dedicated IP Address</p>
                            <p>cPanel/WHM</p>
                            <p>Imunify360 Security</p>
                            <p>WordPress Toolkit</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>DDos Protection</p>
                            <p>Free SSL Certificate</p>
                            <p>Daily Backup</p>
                            <p>SSH Root Access</p>
                            <p>Free Website Transfer</p>
                        </div>
                    </div>
                </div>
            </div>


            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 3</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">$69.26/month</p>
                    <p class="text-gray-500">Regular Price: $98.95/month</p>
                </div>

                <a href="">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>


                <div class="w-full flex flex-col gap-2 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>4 CPU Virtual Cores</p>
                        <p>8 GB ECC RAM</p>
                        <p>160 GB SSD Space</p>
                        <p>5 TB Bandwidth</p>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>Unlimited Websites</p>
                        <p>Dedicated IP Address</p>
                        <p>cPanel/WHM</p>
                        <p>Imunify360 Security</p>
                        <p>WordPress Toolkit</p>
                    </div>
                </div>


                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>DDos Protection</p>
                        <p>Free SSL Certificate</p>
                        <p>Daily Backup</p>
                        <p>SSH Root Access</p>
                        <p>Free Website Transfer</p>
                    </div>
                </div>

            </div>


            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 4</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
                    <p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$107.76/month</p>
                    <p class="text-gray-500">Regular Price: $153.95/month</p>
                </div>

                <a href="">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>


                <div class="w-full flex flex-col gap-2 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>6 CPU Virtual Cores</p>
                        <p>16 GB ECC RAM</p>
                        <p>320 GB SSD Space</p>
                        <p>8 TB Bandwidth</p>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>Unlimited Websites</p>
                        <p>Dedicated IP Address</p>
                        <p>cPanel/WHM</p>
                        <p>Imunify360 Security</p>
                        <p>WordPress Toolkit</p>
                    </div>
                </div>


                <div class="w-full flex flex-col gap-2">
                    <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                    <div class="w-full flex flex-col gap-1 text-secondosiblue">
                        <p>DDos Protection</p>
                        <p>Free SSL Certificate</p>
                        <p>Daily Backup</p>
                        <p>SSH Root Access</p>
                        <p>Free Website Transfer</p>
                    </div>
                </div>

            </div>
        </div>


        <!-- PRICING ON MOBILE -->
        <div class="w-full flex xlg:hidden flex-col gap-10 mt-10">
            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">OSICLOUD 1</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$46.16/month</p>
                        <p class="text-gray-500">Regular Price: $65.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col gap-5 p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-2 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Single CPU Virtual Core</p>
                            <p>2 GB ECC RAM</p>
                            <p>50 GB SSD Space</p>
                            <p>2 TB Bandwidth</p>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Unlimited Websites</p>
                            <p>Dedicated IP Address</p>
                            <p>cPanel/WHM</p>
                            <p>Imunify360 Security</p>
                            <p>WordPress Toolkit</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>DDos Protection</p>
                            <p>Free SSL Certificate</p>
                            <p>Daily Backup</p>
                            <p>SSH Root Access</p>
                            <p>Free Website Transfer</p>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md">
                    <p>Best Value</p>
                </div>

                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 2</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$53.86/month</p>
                        <p class="text-gray-500">Regular Price: $76.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-osiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-osiblue hover:bg-white hover:text-osiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col gap-5 p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-2 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>2 CPU Virtual Cores</p>
                            <p>4 GB ECC RAM</p>
                            <p>80 GB SSD Space</p>
                            <p>4 TB Bandwidth</p>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Unlimited Websites</p>
                            <p>Dedicated IP Address</p>
                            <p>cPanel/WHM</p>
                            <p>Imunify360 Security</p>
                            <p>WordPress Toolkit</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>DDos Protection</p>
                            <p>Free SSL Certificate</p>
                            <p>Daily Backup</p>
                            <p>SSH Root Access</p>
                            <p>Free Website Transfer</p>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 3</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$69.26/month</p>
                        <p class="text-gray-500">Regular Price: $98.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-2 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>4 CPU Virtual Cores</p>
                            <p>8 GB ECC RAM</p>
                            <p>160 GB SSD Space</p>
                            <p>5 TB Bandwidth</p>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Unlimited Websites</p>
                            <p>Dedicated IP Address</p>
                            <p>cPanel/WHM</p>
                            <p>Imunify360 Security</p>
                            <p>WordPress Toolkit</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>DDos Protection</p>
                            <p>Free SSL Certificate</p>
                            <p>Daily Backup</p>
                            <p>SSH Root Access</p>
                            <p>Free Website Transfer</p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">OSICLOUD 4</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$107.76/month</p>
                        <p class="text-gray-500">Regular Price: $153.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-2 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Server Resources:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>6 CPU Virtual Cores</p>
                            <p>16 GB ECC RAM</p>
                            <p>320 GB SSD Space</p>
                            <p>8 TB Bandwidth</p>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>Unlimited Websites</p>
                            <p>Dedicated IP Address</p>
                            <p>cPanel/WHM</p>
                            <p>Imunify360 Security</p>
                            <p>WordPress Toolkit</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2">
                        <h1 class="text-gray-500 text-xl font-light">Important Features:</h1>

                        <div class="w-full flex flex-col gap-1 text-secondosiblue">
                            <p>DDos Protection</p>
                            <p>Free SSL Certificate</p>
                            <p>Daily Backup</p>
                            <p>SSH Root Access</p>
                            <p>Free Website Transfer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>


{% endblock %}