Pricing

<!-- Vertical pricing plan: Border -->
<div class="card w-100">
  <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
    <h3 class="text-body mb-0">Free</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
      <span class="price display-2 fw-normal text-primary px-1 me-2">0</span>
      <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-x fs-xl text-muted me-2"></i>
        <span class="text-muted">No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-x fs-xl text-muted me-2"></i>
        <span class="text-muted">Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-x fs-xl text-muted me-2"></i>
        <span class="text-muted">Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-x fs-xl text-muted me-2"></i>
        <span class="text-muted">7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-outline-primary" href="#">Get started</a>
    </div>
  </div>
</div>

<!-- Vertical pricing plan: Shadow -->
<div class="card border-0 shadow w-100">
  <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
    <h3 class="text-body mb-0">Family</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
      <span class="price display-2 fw-normal text-primary px-1 me-2">15</span>
      <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-outline-primary" href="#">Get started</a>
    </div>
  </div>
</div>

// Vertical pricing plan: Border
.card.w-100
  .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
    h3.text-body.mb-0 Free
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.fw-normal.text-muted.mb-1.me-2 $
      span.price.display-2.fw-normal.text-primary.px-1.me-2 0
      span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.ai-x.fs-xl.text-muted.me-2
        span.text-muted No ads
      li.d-flex.align-items-center.mb-3
        i.ai-x.fs-xl.text-muted.me-2
        span.text-muted Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.ai-x.fs-xl.text-muted.me-2
        span.text-muted Offline mode
      li.d-flex.align-items-center.mb-3
        i.ai-x.fs-xl.text-muted.me-2
        span.text-muted 7 profiles
    .text-center.mb-2
      a.btn.btn-outline-primary(href="#") Get started

// Vertical pricing plan: Shadow
.card.border-0.shadow.w-100
  .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
    h3.text-body.mb-0 Family
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.fw-normal.text-muted.mb-1.me-2 $
      span.price.display-2.fw-normal.text-primary.px-1.me-2 15
      span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span No ads
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Offline mode
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span 7 profiles
    .text-center.mb-2
      a.btn.btn-outline-primary(href="#") Get started

<!-- Horizontal pricing plans -->

<!-- Pricing -->
<div class="d-sm-flex align-items-start justify-content-between border-bottom py-4 py-sm-5">
  <div class="ms-4 ms-sm-0 py-2" style="width: 10rem;">
    <h3 class="mb-2">Free</h3>
    <div class="fs-xs">Find aute irure dolor in reprehenderit in volatek</div>
  </div>
  <div class="d-flex align-items-end py-3 py-sm-2 px-4">
    <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
    <span class="price display-2 fw-normal text-primary px-1 me-2">0</span>
    <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
  </div>
  <ul class="list-unstyled py-2 mb-0">
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>Up to 3 projects for each member</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>2 team members allowed</span>
    </li>
  </ul>
</div>

<!-- Pricing -->
<div class="d-sm-flex align-items-start justify-content-between py-4 py-sm-5">
  <div class="ms-4 ms-sm-0 py-2" style="width: 10rem;">
    <h3 class="mb-2">Standard</h3>
    <div class="fs-xs">Find aute irure dolor in reprehenderit in volatek</div>
  </div>
  <div class="d-flex align-items-end py-3 py-sm-2 px-4">
    <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
    <span class="price display-2 fw-normal text-primary px-1 me-2">15</span>
    <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
  </div>
  <ul class="list-unstyled py-2 mb-0">
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>Unlimited number of projects</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>Up to 5 team members</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>24/7 support</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="ai-check fs-xl text-primary me-2"></i>
      <span>Up to 30GB storage space</span>
    </li>
  </ul>
</div>

// Horizontal pricing plans

// Pricing
.d-sm-flex.align-items-start.justify-content-between.border-bottom.py-4.py-sm-5
  .ms-4.ms-sm-0.py-2(style="width: 10rem;")
    h3.mb-2 Free
    .fs-xs Find aute irure dolor in reprehenderit in volatek
  .d-flex.align-items-end.py-3.py-sm-2.px-4
    span.h2.fw-normal.text-muted.mb-1.me-2 $
    span.price.display-2.fw-normal.text-primary.px-1.me-2 0
    span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
  ul.list-unstyled.py-2.mb-0
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span Up to 3 projects for each member
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span 2 team members allowed

// Pricing
.d-sm-flex.align-items-start.justify-content-between.py-4.py-sm-5
  .ms-4.ms-sm-0.py-2(style="width: 10rem;")
    h3.mb-2 Standard
    .fs-xs Find aute irure dolor in reprehenderit in volatek
  .d-flex.align-items-end.py-3.py-sm-2.px-4
    span.h2.fw-normal.text-muted.mb-1.me-2 $
    span.price.display-2.fw-normal.text-primary.px-1.me-2 15
    span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
  ul.list-unstyled.py-2.mb-0
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span Unlimited number of projects
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span Up to 5 team members
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span 24/7 support
    li.d-flex.align-items-center.mb-3
      i.ai-check.fs-xl.text-primary.me-2
      span Up to 30GB storage space

<!-- Featured pricing plan -->
<div class="card card-active w-100">
  <div class="card-img-top bg-gradient text-center py-5 px-grid-gutter">
    <h3 class="text-light mb-0">Premium</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
      <span class="price display-2 fw-normal text-primary px-1 me-2">10</span>
      <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="ai-check fs-xl text-primary me-2"></i>
        <span>7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-primary" href="#">Get started</a>
    </div>
  </div>
</div>

// Featured pricing plan
.card.card-active.w-100
  .card-img-top.bg-gradient.text-center.py-5.px-grid-gutter
    h3.text-light.mb-0 Premium
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.fw-normal.text-muted.mb-1.me-2 $
      span.price.display-2.fw-normal.text-primary.px-1.me-2 10
      span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span No ads
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span Offline mode
      li.d-flex.align-items-center.mb-3
        i.ai-check.fs-xl.text-primary.me-2
        span 7 profiles
    .text-center.mb-2
      a.btn.btn-primary(href="#") Get started

<!-- Price switcher -->
<div class="pricing-wrap">

  <!-- Switcher -->
  <div class="price-switch justify-content-end pb-2 mb-4">
    <span class="price-label me-2">Monthly</span>
    <div class="custom-control custom-switch">
      <input class="custom-control-input" type="checkbox" id="priceSwitch">
      <label class="custom-control-label" for="priceSwitch"></label>
    </div>
    <span class="price-label ms-1">Annual</span>
  </div>
  <div class="row">

    <!-- Plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card border-0 shadow w-100">
        <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
          <h3 class="text-body mb-0">Free</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
            <span class="price display-2 fw-normal text-primary px-1 me-2" data-current-price="0" data-new-price="0">0</span>
            <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-x fs-xl text-muted me-2"></i>
              <span class="text-muted">No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-x fs-xl text-muted me-2"></i>
              <span class="text-muted">Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-x fs-xl text-muted me-2"></i>
              <span class="text-muted">Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-x fs-xl text-muted me-2"></i>
              <span class="text-muted">7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-outline-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Featured plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card card-active w-100">
        <div class="card-img-top bg-gradient text-center py-5 px-grid-gutter">
          <h3 class="text-light mb-0">Premium</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
            <span class="price display-2 fw-normal text-primary px-1 me-2" data-current-price="10" data-new-price="8">10</span>
            <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card border-0 shadow w-100">
        <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
          <h3 class="text-body mb-0">Family</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 fw-normal text-muted mb-1 me-2">$</span>
            <span class="price display-2 fw-normal text-primary px-1 me-2" data-current-price="15" data-new-price="12">15</span>
            <span class="h3 fs-lg fw-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="ai-check fs-xl text-primary me-2"></i>
              <span>7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-outline-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// Price switcher
.pricing-wrap

  // Switcher
  .price-switch.justify-content-end.pb-2.mb-4
    span.price-label.me-2 Monthly
    .custom-control.custom-switch
      input(type="checkbox", id="priceSwitch").custom-control-input
      label(for="priceSwitch").custom-control-label
    span.price-label.ms-1 Annual
  .row

    // Plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.border-0.shadow.w-100
        .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
          h3.text-body.mb-0 Free
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.fw-normal.text-muted.mb-1.me-2 $
            span.price.display-2.fw-normal.text-primary.px-1.me-2(data-current-price="0", data-new-price="0") 0
            span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.ai-x.fs-xl.text-muted.me-2
              span.text-muted No ads
            li.d-flex.align-items-center.mb-3
              i.ai-x.fs-xl.text-muted.me-2
              span.text-muted Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.ai-x.fs-xl.text-muted.me-2
              span.text-muted Offline mode
            li.d-flex.align-items-center.mb-3
              i.ai-x.fs-xl.text-muted.me-2
              span.text-muted 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-outline-primary Get started
    
    // Featured plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.card-active.w-100
        .card-img-top.bg-gradient.text-center.py-5.px-grid-gutter
          h3.text-light.mb-0 Premium
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.fw-normal.text-muted.mb-1.me-2 $
            span.price.display-2.fw-normal.text-primary.px-1.me-2(data-current-price="10", data-new-price="8") 10
            span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span No ads
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Offline mode
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-primary Get started

    // Plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.border-0.shadow.w-100
        .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
          h3.text-body.mb-0 Family
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.fw-normal.text-muted.mb-1.me-2 $
            span.price.display-2.fw-normal.text-primary.px-1.me-2(data-current-price="15", data-new-price="12") 15
            span.h3.fs-lg.fw-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span No ads
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span Offline mode
            li.d-flex.align-items-center.mb-3
              i.ai-check.fs-xl.text-primary.me-2
              span 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-outline-primary Get started