{% extends "pxy_dashboard/partials/base.html" %} 
{% load static %} 

{% block title %}Dashboard{% endblock title %} 



{% block pagetitle %}
{% include "pxy_dashboard/partials/page-title.html" with pagetitle="Pages" title="Pricing" %}
{% endblock pagetitle %}

{% block content %} 
<div class="row justify-content-center">
    <div class="col-xxl-10">

        <!-- Pricing Title-->
        <div class="text-center">
            <h3 class="mb-2">Our <b>Plans</b></h3>
            <p class="text-muted">
                We have plans and prices that fit your business perfectly. Make your <br> client site a success with our products.
            </p>
        </div>

        <div class="row mt-4">

            <!--Pricing Column-->
            <article class="pricing-column col-xl-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="p-3 text-center">
                            <h3 class="text-primary text-uppercase fw-normal fs-16 mb-3">Basic</h3>
                            <h2 class="display-6 text-dark fw-normal mb-2">$19</h2>
                            <div class="text-muted fs-13">Per Month</div>
                        </div>
                        <ul class="d-flex flex-column gap-3 list-unstyled text-center p-3 mb-3">
                            <li>5 Projects</li>
                            <li>1 GB Storage</li>
                            <li>No Domain</li>
                            <li>1 User</li>
                            <li>24x7 Support</li>
                        </ul>

                        <div class="text-center mb-3">
                            <a href="#" class="btn btn-bordered-success btn-success rounded-pill waves-effect waves-light">Signup Now</a>
                        </div>
                    </div>
                </div>
            </article>

            <!--Pricing Column-->
            <article class="pricing-column col-xl-3 col-md-6">
                <div class="ribbon"><span>POPULAR</span></div>
                <div class="card">
                    <div class="card-body">
                        <div class="p-3 text-center">
                            <h3 class="text-primary text-uppercase fw-normal fs-16 mb-3">Premium</h3>
                            <h2 class="display-6 text-dark fw-normal mb-2">$29</h2>
                            <div class="text-muted fs-13">Per Month</div>
                        </div>
                        <ul class="d-flex flex-column gap-3 list-unstyled text-center p-3 mb-3">
                            <li>5 Projects</li>
                            <li>1 GB Storage</li>
                            <li>No Domain</li>
                            <li>1 User</li>
                            <li>24x7 Support</li>
                        </ul>

                        <div class="text-center mb-3">
                            <a href="#" class="btn btn-success btn-bordered-success rounded-pill waves-effect waves-light">Signup Now</a>
                        </div>
                    </div>
                </div>
            </article>


            <!--Pricing Column-->
            <article class="pricing-column col-xl-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="p-3 text-center">
                            <h3 class="text-primary text-uppercase fw-normal fs-16 mb-3">Developer</h3>
                            <h2 class="display-6 text-dark fw-normal mb-2">$39</h2>
                            <div class="text-muted fs-13">Per Month</div>
                        </div>
                        <ul class="d-flex flex-column gap-3 list-unstyled text-center p-3 mb-3">
                            <li>5 Projects</li>
                            <li>1 GB Storage</li>
                            <li>No Domain</li>
                            <li>1 User</li>
                            <li>24x7 Support</li>
                        </ul>

                        <div class="text-center mb-3">
                            <a href="#" class="btn btn-success btn-bordered-success rounded-pill waves-effect waves-light">Signup Now</a>
                        </div>
                    </div>
                </div>
            </article>

            <!--Pricing Column-->
            <article class="pricing-column col-xl-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="p-3 text-center">
                            <h3 class="text-primary text-uppercase fw-normal fs-16 mb-3">Business</h3>
                            <h2 class="display-6 text-dark fw-normal mb-2">$49</h2>
                            <div class="text-muted fs-13">Per Month</div>
                        </div>
                        <ul class="d-flex flex-column gap-3 list-unstyled text-center p-3 mb-3">
                            <li>5 Projects</li>
                            <li>1 GB Storage</li>
                            <li>No Domain</li>
                            <li>1 User</li>
                            <li>24x7 Support</li>
                        </ul>

                        <div class="text-center mb-3">
                            <a href="#" class="btn btn-success btn-bordered-success rounded-pill waves-effect waves-light">Signup Now</a>
                        </div>
                    </div>
                </div>
            </article>

        </div><!-- end row -->

    </div> <!-- end col-->
</div>

{% endblock content %} 

{% block extra_js %} 

        <!-- App js -->
        <script src="{% static 'dashboard/js/app.min.js' %}"></script>

{% endblock extra_js %}

