New changes.

osinaweb/billing/add/views.py

@@ -3,9 +3,9 @@ from osinacore.models import *
 from billing.models import *
 from django.http import JsonResponse, HttpResponse
 from django.template.loader import get_template
-from weasyprint import HTML
 from django.conf import settings
 import os
+from weasyprint import HTML
 
 
 def add_product (request, *args, **kwargs):
@@ -133,3 +133,8 @@ def add_invoice_pdf(request, order_id):
 
     return response
 
+
+
+
+
+

osinaweb/billing/templates/add_templates/add-order.html

@@ -50,7 +50,7 @@
                     <select name="items" id="itemsSelectTag"
                         class="border border-gray-300 p-3 rounded-md outline-none w-full text-gray-500 mt-1" multiple
                         required>
-                        <option disabled>Select Customer First</option>
+                        <option selected disabled>Select Customer First</option>
                     </select>
                 </div>
 

osinaweb/billing/views.py

@@ -4,7 +4,6 @@ from datetime import timedelta
 from .models import *
 from django.http import JsonResponse, HttpResponse
 from django.template.loader import get_template
-from weasyprint import HTML
 
 
 # LISTING

osinaweb/customercore/templates/payment.html

@@ -33,8 +33,6 @@
 
 
 <!---------------------- JS SCRIPTS -------------------->
-<script type="text/javascript" src='{% static "js/customer_dashboard/payment.js" %}'></script>
-
 <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
     integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
 
@@ -42,5 +40,7 @@
 
 <script src="https://creditlibanais-netcommerce.gateway.mastercard.com/static/checkout/checkout.min.js"></script>
 
+<script type="text/javascript" src='{% static "js/customer_dashboard/payment.js" %}'></script>
+
 
 {% endblock %}

osinaweb/customercore/templates/products/cloud-vps-hosting-plans.html

@@ -0,0 +1,513 @@
+{% 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 px-5 s:px-9 flex flex-col gap-5 mt-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 %}

osinaweb/customercore/templates/products/osimenu-plans.html

@@ -14,7 +14,7 @@
         <!-- PRICING ON DESKTOP -->
         <div class="w-full hidden l:grid grid-cols-3 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-3xl text-center">Basic</p>
+                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Basic</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
@@ -29,7 +29,7 @@
                 </a>
 
                 <div class="w-full flex flex-col gap-3 mt-5">
-                    <h1 class="text-gray-500 text-xl font-light">Features:</h1>
+                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
 
                     <div class="w-full flex flex-col">
                         <div class="flex justify-start items-center gap-2 py-1">
@@ -75,7 +75,7 @@
                 </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-3xl text-center">Standard</p>
+                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Standard</p>
 
                     <div class="w-full flex flex-col justify-center items-center">
                         <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
@@ -90,7 +90,7 @@
                     </a>
 
                     <div class="w-full flex flex-col gap-3 mt-5">
-                        <h1 class="text-gray-500 text-xl font-light">Features:</h1>
+                        <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
 
                         <div class="w-full flex flex-col">
                             <div class="flex justify-start items-center gap-2 py-1">
@@ -132,7 +132,7 @@
 
 
             <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-3xl text-center">Premium</p>
+                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Premium</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
@@ -147,7 +147,7 @@
                 </a>
 
                 <div class="w-full flex flex-col gap-3 mt-5">
-                    <h1 class="text-gray-500 text-xl font-light">Features:</h1>
+                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
 
                     <div class="w-full flex flex-col">
                         <div class="flex justify-start items-center gap-2 py-1">
@@ -192,10 +192,10 @@
         <div class="w-full flex l: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-3xl text-center">Basic</p>
+                    <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Basic</p>
 
                     <div class="w-full flex flex-col justify-center items-center">
-                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$0</p>
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
@@ -256,10 +256,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-3xl text-center">Standard</p>
+                    <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Standard</p>
 
                     <div class="w-full flex flex-col justify-center items-center">
-                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$89</p>
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
@@ -316,10 +316,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-3xl text-center">Premium</p>
+                    <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Premium</p>
 
                     <div class="w-full flex flex-col justify-center items-center">
-                        <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$169</p>
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 

osinaweb/customercore/templates/products/shared-hosting-plans.html

@@ -0,0 +1,888 @@
+{% 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 px-5 s:px-9 flex flex-col gap-5 mt-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">Shared Hosting</p>
+
+        <!-- PRICING ON DESKTOP -->
+        <div class="w-full hidden xlg:grid grid-cols-3 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">Shared Basic</p>
+
+                <div class="w-full flex flex-col justify-center items-center">
+                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
+                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">$2.40/month</p>
+                    <p class="text-gray-500">Regular Price: $12.00/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-3 mt-5">
+                    <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Single Website</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">15GB SSD Space</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free SSL Certificate</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free Backups</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">DDoS Protection</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">CPanel</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Unlimited Email Account</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free Website Transfer</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full flex flex-col gap-3">
+                    <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-red-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                            <p class="text-secondosiblue">Performance Boost</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-red-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                            <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-red-500">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                            <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full flex flex-col gap-3">
+                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">WordPress Toolkit</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Getting Started Kit</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Development Tools</p>
+                        </div>
+                    </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">Shared Plus</p>
+
+                    <div class="w-full flex flex-col justify-center items-center">
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$4.80/month</p>
+                        <p class="text-gray-500">Regular Price: $24.00/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-3 mt-5">
+                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">5 Websites</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">25GB SSD Space</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free SSL Certificate</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Backups</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">DDoS Protection</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">CPanel</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Unlimited Email Account</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Website Transfer</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Performance Boost</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Toolkit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Getting Started Kit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Development Tools</p>
+                            </div>
+                        </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">Shared Power</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-3 mt-5">
+                    <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Unlimited Websites</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">35GB SSD Space</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free SSL Certificate</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free Backups</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">DDoS Protection</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">CPanel</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Unlimited Email Account</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Free Website Transfer</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full flex flex-col gap-3">
+                    <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Performance Boost</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full flex flex-col gap-3">
+                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+
+                    <div class="w-full flex flex-col">
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">WordPress Toolkit</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Getting Started Kit</p>
+                        </div>
+                        <div class="flex justify-start items-center gap-2 py-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-6 h-6 text-green-600">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                            </svg>
+                            <p class="text-secondosiblue">Development Tools</p>
+                        </div>
+                    </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">Basic</p>
+
+                    <div class="w-full flex flex-col justify-center items-center">
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$2.40/month</p>
+                        <p class="text-gray-500">Regular Price: $12.00/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-3 mt-5">
+                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Single Website</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">15GB SSD Space</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free SSL Certificate</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Backups</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">DDoS Protection</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">CPanel</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Unlimited Email Account</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Website Transfer</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">Performance Boost</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Toolkit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Getting Started Kit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Development Tools</p>
+                            </div>
+                        </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">Shared Plus</p>
+
+                    <div class="w-full flex flex-col justify-center items-center">
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
+                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$4.80/month</p>
+                        <p class="text-gray-500">Regular Price: $24.00/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-3 mt-5">
+                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">5 Websites</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">25GB SSD Space</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free SSL Certificate</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Backups</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">DDoS Protection</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">CPanel</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Unlimited Email Account</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Website Transfer</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Performance Boost</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                                </svg>
+                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Toolkit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Getting Started Kit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Development Tools</p>
+                            </div>
+                        </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">Shared Power</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 p-5 border border-gray-200 featuresContainer hidden">
+                    <div class="w-full flex flex-col gap-3 mt-5">
+                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
+    
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Unlimited Websites</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">35GB SSD Space</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free SSL Certificate</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Backups</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">DDoS Protection</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">CPanel</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Unlimited Email Account</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Free Website Transfer</p>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
+    
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Performance Boost</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="w-full flex flex-col gap-3">
+                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
+    
+                        <div class="w-full flex flex-col">
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">WordPress Toolkit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Getting Started Kit</p>
+                            </div>
+                            <div class="flex justify-start items-center gap-2 py-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                    stroke="currentColor" class="w-6 h-6 text-green-600">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                                <p class="text-secondosiblue">Development Tools</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>
+
+
+{% endblock %}

osinaweb/customercore/urls.py

@@ -3,22 +3,24 @@ from . import views
 
 
 urlpatterns = [
-
     # LISTING
-    path('customer-invoices/', views.customer_invoices, name='customerinvoices'),
+    path("customer-invoices/", views.customer_invoices, name="customerinvoices"),
-    path('products/', views.all_products, name='products'),
+    path("products/", views.all_products, name="products"),
-    path('orders/', views.customer_orders, name='orders'),
+    path("orders/", views.customer_orders, name="orders"),
 
 
     # PRODUCTS URL
-    path('osimenu-plans/', views.osimenu_plans, name='osimenuplans'),
+    path("osimenu-plans/", views.osimenu_plans, name="osimenuplans"),
-    path('shared-hosting-plans/', views.shared_hosting_plans,
+    path("shared-hosting-plans/", views.shared_hosting_plans, name="sharedhostingplans"),
-         name='sharedhostingplans'),
+    path("cloud-vps-hosting-plans/", views.cloud_vps_hosting_plans, name="cloudvpshostingplans"),
 
 
     # PAYMENT
-    path('payment/<int:item_id>/', views.payment, name='payment'),
+    path("payment/<int:item_id>/", views.payment, name="payment"),
-    path('initiate_checkout/', views.initiate_checkout, name='initiatecheckout'),
+    path("initiate_checkout/", views.initiate_checkout, name="initiatecheckout"),
-    path('check-order-status/<str:merchant_id>/<str:order_id>/',
+    path(
-         views.check_order_status, name='check_order_status'),
+        "check-order-status/<str:merchant_id>/<str:order_id>/",
+        views.check_order_status,
+        name="check_order_status",
+    ),
 ]

osinaweb/customercore/views.py

@@ -72,6 +72,16 @@ def shared_hosting_plans(request, *args, **kwargs):
     return render(request, 'products/shared-hosting-plans.html', context)
 
 
+@customer_login_required
+def cloud_vps_hosting_plans(request, *args, **kwargs):
+    
+    context = {
+
+    }
+
+    return render(request, 'products/cloud-vps-hosting-plans.html', context)
+
+