<?php require 'inc/_global/config.php'; ?>
<?php require 'inc/backend/config.php'; ?>
<?php require 'inc/_global/views/head_start.php'; ?>
<?php require 'inc/_global/views/head_end.php'; ?>
<?php require 'inc/_global/views/page_start.php'; ?>

<!-- Hero -->
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
            <h1 class="flex-sm-fill h3 my-2">
                Pricing Tables <small class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted">Clean and responsive pricing tables that will improve your conversions.</small>
            </h1>
            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-alt">
                    <li class="breadcrumb-item">Tables</li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a class="link-fx" href="">Pricing</a>
                    </li>
                </ol>
            </nav>
        </div>
   </div>
</div>
<!-- END Hero -->

<!-- Page Content -->
<div class="content">
    <!-- Modern Design -->
    <h2 class="content-heading">Modern Design <small>Grid Based</small></h2>
    <div class="row">
        <div class="col-md-6 col-xl-3">
            <!-- Developer Plan -->
            <a class="block block-link-shadow text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">Developer</h3>
                </div>
                <div class="block-content bg-body-light">
                    <div class="py-2">
                        <p class="h1 font-w700 mb-2">$9</p>
                        <p class="h6 text-muted">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>2</strong> Projects
                        </p>
                        <p>
                            <strong>10GB</strong> Storage
                        </p>
                        <p>
                            <strong>15</strong> Clients
                        </p>
                        <p>
                            <strong>Email</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-secondary px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Developer Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- Startup Plan -->
            <a class="block block-link-shadow text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">Startup</h3>
                </div>
                <div class="block-content bg-body-light">
                    <div class="py-2">
                        <p class="h1 font-w700 mb-2">$29</p>
                        <p class="h6 text-muted">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>10</strong> Projects
                        </p>
                        <p>
                            <strong>30GB</strong> Storage
                        </p>
                        <p>
                            <strong>100</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-secondary px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Startup Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- Business Plan -->
            <a class="block block-link-shadow block-themed block-fx-shadow text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">
                        <i class="fa fa-thumbs-up mr-1"></i> Business
                    </h3>
                </div>
                <div class="block-content bg-body-light">
                    <div class="py-2">
                        <p class="h1 font-w700 mb-2">$49</p>
                        <p class="h6 text-muted">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>50</strong> Projects
                        </p>
                        <p>
                            <strong>100GB</strong> Storage
                        </p>
                        <p>
                            <strong>1000</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-primary px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Business Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- VIP Plan -->
            <a class="block block-link-shadow text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">VIP</h3>
                </div>
                <div class="block-content bg-body-light">
                    <div class="py-2">
                        <p class="h1 font-w700 mb-2">$99</p>
                        <p class="h6 text-muted">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>Unlimited</strong> Projects
                        </p>
                        <p>
                            <strong>Unlimited</strong> Storage
                        </p>
                        <p>
                            <strong>Unlimited</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-secondary px-4">Sign Up</span>
                </div>
            </a>
            <!-- END VIP Plan -->
        </div>
    </div>
    <h2 class="content-heading">Variations <small>Hover animations, colors and style</small></h2>
    <div class="row">
        <div class="col-md-6 col-xl-3">
            <!-- Developer Plan -->
            <a class="block text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">Developer</h3>
                </div>
                <div class="block-content bg-warning">
                    <div class="py-2">
                        <p class="h1 font-w700 text-white mb-2">$9</p>
                        <p class="h6 text-white-75">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>2</strong> Projects
                        </p>
                        <p>
                            <strong>10GB</strong> Storage
                        </p>
                        <p>
                            <strong>15</strong> Clients
                        </p>
                        <p>
                            <strong>Email</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-square btn-warning px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Developer Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- Startup Plan -->
            <a class="block block-link-rotate text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">Startup</h3>
                </div>
                <div class="block-content bg-primary">
                    <div class="py-2">
                        <p class="h1 font-w700 text-white mb-2">$29</p>
                        <p class="h6 text-white-75">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>10</strong> Projects
                        </p>
                        <p>
                            <strong>30GB</strong> Storage
                        </p>
                        <p>
                            <strong>100</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-square btn-primary px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Startup Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- Business Plan -->
            <a class="block block-link-shadow text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">Business</h3>
                </div>
                <div class="block-content bg-danger">
                    <div class="py-2">
                        <p class="h1 font-w700 text-white mb-2">$49</p>
                        <p class="h6 text-white-75">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>50</strong> Projects
                        </p>
                        <p>
                            <strong>100GB</strong> Storage
                        </p>
                        <p>
                            <strong>1000</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-square btn-danger px-4">Sign Up</span>
                </div>
            </a>
            <!-- END Business Plan -->
        </div>
        <div class="col-md-6 col-xl-3">
            <!-- VIP Plan -->
            <a class="block block-link-pop text-center" href="javascript:void(0)">
                <div class="block-header">
                    <h3 class="block-title">VIP</h3>
                </div>
                <div class="block-content bg-success">
                    <div class="py-2">
                        <p class="h1 font-w700 text-white mb-2">$99</p>
                        <p class="h6 text-white-75">per month</p>
                    </div>
                </div>
                <div class="block-content">
                    <div class="font-size-sm py-2">
                        <p>
                            <strong>Unlimited</strong> Projects
                        </p>
                        <p>
                            <strong>Unlimited</strong> Storage
                        </p>
                        <p>
                            <strong>Unlimited</strong> Clients
                        </p>
                        <p>
                            <strong>FULL</strong> Support
                        </p>
                    </div>
                </div>
                <div class="block-content block-content-full bg-body-light">
                    <span class="btn btn-square btn-success px-4">Sign Up</span>
                </div>
            </a>
            <!-- END VIP Plan -->
        </div>
    </div>
    <!-- END Modern Design -->

    <!-- Classic Design -->
    <h2 class="content-heading">Classic Design <small>Table Based</small></h2>
    <div class="block">
        <div class="table-responsive">
            <table class="table table-borderless table-hover table-vcenter text-center mb-0">
                <thead class="thead-dark text-uppercase font-size-sm">
                    <tr>
                        <th class="py-3" style="width: 180px;"></th>
                        <th class="py-3">Freelancer</th>
                        <th class="py-3">Startup</th>
                        <th class="py-3">
                            <i class="fa fa-thumbs-up mr-1"></i> Business
                        </th>
                        <th class="py-3">VIP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="bg-body-light">
                        <td></td>
                        <td class="py-4">
                            <div class="h1 font-w700 mb-2">$9</div>
                            <div class="h6 text-muted mb-0">per month</div>
                        </td>
                        <td class="py-4">
                            <div class="h1 font-w700 mb-2">$29</div>
                            <div class="h6 text-muted mb-0">per month</div>
                        </td>
                        <td class="py-4">
                            <div class="h1 font-w700 text-primary mb-2">$49</div>
                            <div class="h6 text-muted mb-0">per month</div>
                        </td>
                        <td class="py-4">
                            <div class="h1 font-w700 mb-2">$99</div>
                            <div class="h6 text-muted mb-0">per month</div>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-w600 text-left">Projects</td>
                        <td>2</td>
                        <td>10</td>
                        <td>50</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td class="font-w600 text-left">Storage</td>
                        <td>10GB</td>
                        <td>30GB</td>
                        <td>100GB</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td class="font-w600 text-left">Clients</td>
                        <td>15</td>
                        <td>100</td>
                        <td>1000</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <td class="font-w600 text-left">Support</td>
                        <td>Email</td>
                        <td>FULL</td>
                        <td>FULL</td>
                        <td>FULL</td>
                    </tr>
                    <tr>
                        <td class="font-w600 text-left">Customizations</td>
                        <td>
                            <i class="fa fa-times fa-fw text-danger"></i>
                        </td>
                        <td>
                            <i class="fa fa-times fa-fw text-danger"></i>
                        </td>
                        <td>
                            <i class="fa fa-times fa-fw text-danger"></i>
                        </td>
                        <td>
                            <i class="fa fa-check fa-fw text-success"></i>
                        </td>
                    </tr>
                    <tr class="bg-body-light">
                        <td></td>
                        <td>
                            <button type="button" class="btn btn-rounded btn-secondary px-4">Sign Up</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-rounded btn-secondary px-4">Sign Up</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-rounded btn-primary px-4">Sign Up</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-rounded btn-secondary px-4">Sign Up</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- END Classic Design -->
</div>
<!-- END Page Content -->

<?php require 'inc/_global/views/page_end.php'; ?>
<?php require 'inc/_global/views/footer_start.php'; ?>
<?php require 'inc/_global/views/footer_end.php'; ?>
