<?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 Content -->
<div class="bg-primary-dark">
  <div class="content content-full text-center pt-7 pb-5">
    <h1 class="h2 text-white mb-2">
      Super flexible plans just for you.
    </h1>
    <h2 class="h4 fw-normal text-white-75">
      Step up your game with a better plan.
    </h2>
  </div>
</div>
<!-- END Hero Content -->

<!-- Pricing -->
<div class="content overflow-hidden">
  <div class="row">
    <div class="col-md-6 col-xl-3">
      <!-- Developer Plan -->
      <a class="block block-rounded 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 fw-bold mb-2">$9</p>
            <p class="h6 text-muted">per month</p>
          </div>
        </div>
        <div class="block-content">
          <div class="fs-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-rounded 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 fw-bold mb-2">$29</p>
            <p class="h6 text-muted">per month</p>
          </div>
        </div>
        <div class="block-content">
          <div class="fs-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-rounded 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 me-1"></i> Business
          </h3>
        </div>
        <div class="block-content bg-body-light">
          <div class="py-2">
            <p class="h1 fw-bold mb-2">$49</p>
            <p class="h6 text-muted">per month</p>
          </div>
        </div>
        <div class="block-content">
          <div class="fs-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-rounded 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 fw-bold mb-2">$99</p>
            <p class="h6 text-muted">per month</p>
          </div>
        </div>
        <div class="block-content">
          <div class="fs-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>
</div>
<!-- END Pricing -->

<!-- Features -->
<div class="bg-body-extra-light">
  <div class="content content-full">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <!-- Circle Mini Features -->
        <div class="row items-push text-center py-5">
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-vector text-default"></i>
            </div>
            <div class="fw-semibold">Design</div>
          </div>
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-badge text-flat"></i>
            </div>
            <div class="fw-semibold">Quality</div>
          </div>
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-chemistry text-smooth"></i>
            </div>
            <div class="fw-semibold">Creativity</div>
          </div>
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-heart text-city"></i>
            </div>
            <div class="fw-semibold">Passion</div>
          </div>
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-clock text-modern"></i>
            </div>
            <div class="fw-semibold">Time</div>
          </div>
          <div class="col-4 col-lg-2">
            <div class="item item-circle bg-body-extra-light border mb-2 mx-auto">
              <i class="si si-drop text-warning"></i>
            </div>
            <div class="fw-semibold">Colors</div>
          </div>
        </div>
        <!-- END Circle Mini Features -->

        <!-- Feature List -->
        <div class="row items-push">
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Support
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Rich Features
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Updates
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Services
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Versions
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
          <div class="col-md-6">
            <h3 class="h5 text-uppercase mb-2">
              <i class="fa fa-check text-primary me-2"></i> Applications
            </h3>
            <?php $one->get_text('small'); ?>
          </div>
        </div>
        <!-- END Feature List -->
      </div>
    </div>
  </div>
</div>
<!-- END Features -->

<!-- Mini Stats -->
<div class="bg-image" style="background-image: url('<?php echo $one->assets_folder; ?>/media/photos/photo14@2x.jpg');">
  <div class="bg-primary-dark-op">
    <div class="content">
      <div class="row items-push text-center py-4">
        <div class="col-sm-4">
          <div class="h2 text-white mb-1">15760+</div>
          <div class="fw-semibold fs-sm text-uppercase text-white-75">Accounts Today</div>
        </div>
        <div class="col-sm-4">
          <div class="h2 text-white mb-1">3890+</div>
          <div class="fw-semibold fs-sm text-uppercase text-white-75">Products</div>
        </div>
        <div class="col-sm-4">
          <div class="h2 text-white mb-1">890+</div>
          <div class="fw-semibold fs-sm text-uppercase text-white-75">Web Apps</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END Mini Stats -->

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