happychin-web/pages/pricing/index.vue

<template>
  <Preloader></Preloader>
  <FixArea></FixArea>
  <Header-top-section sectionClass="header-top-section-4" />
  <TopHeader headerClass="header-4" />
  <div class="search-wrap">
    <div class="search-inner">
      <i class="fas fa-times search-close" id="search-close"></i>
      <div class="search-cell">
        <form method="get">
          <div class="search-field-holder">
            <input type="search" class="main-search-input" placeholder="Search..." />
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
    <div class="line-shape">
      <img src="/picture/line1.png" alt="shape-img" />
    </div>
    <div class="plane-shape float-bob-y">
      <img src="/picture/plane2.png" alt="shape-img" />
    </div>
    <div class="doll-shape float-bob-x">
      <img src="/picture/doll.png" alt="shape-img" />
    </div>
    <div class="parasuit-shape float-bob-y">
      <img src="/picture/parasuit1.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame3.png" alt="shape-img" />
    </div>
    <div class="bee-shape float-bob-x">
      <img src="/picture/bee1.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="page-heading">
        <h1 class="wow fadeInUp" data-wow-delay=".3s">Our Pricing</h1>
        <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
          <li>
            <a href="p9wfc14694.html">Home</a>
          </li>
          <li>
            <i class="fas fa-chevron-right"></i>
          </li>
          <li>Our Pricing</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="pricing-section section-padding mt-0">
    <div class="container">
      <div class="pricing-wrapper">
        <div class="section-title text-center mb-0">
          <span class="wow fadeInUp">Our pricing</span>
          <h2 class="wow fadeInUp" data-wow-delay=".3s">
            Select a plan according to
            <br />
            your requirements
          </h2>
        </div>
        <ul class="nav" role="tablist">
          <li class="nav-item wow fadeInUp" data-wow-delay=".3s" role="presentation">
            <a
              href="#monthly"
              data-bs-toggle="tab"
              class="nav-link active box-shadow"
              aria-selected="true"
              role="tab"
            >
              Monthly
            </a>
          </li>
          <li class="nav-item wow fadeInUp" data-wow-delay=".5s" role="presentation">
            <a
              href="#yearly"
              data-bs-toggle="tab"
              class="nav-link box-shadow"
              aria-selected="false"
              role="tab"
              tabindex="-1"
            >
              Yearly
            </a>
          </li>
        </ul>
      </div>
      <div class="tab-content">
        <div id="monthly" class="tab-pane fade show active" role="tabpanel">
          <div class="row">
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
              <div class="pricing-items box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Basic Plan</h4>
                  <h2>
                    $39
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
              <div class="pricing-items active box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element-2.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Premium Plan</h4>
                  <h2>
                    $49
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
              <div class="pricing-items box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Advanced</h4>
                  <h2>
                    $99
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div id="yearly" class="tab-pane fade" role="tabpanel">
          <div class="row">
            <div class="col-xl-4 col-lg-6 col-md-6">
              <div class="pricing-items box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Basic Plan</h4>
                  <h2>
                    $39
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6">
              <div class="pricing-items active box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element-2.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Premium Plan</h4>
                  <h2>
                    $49
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6">
              <div class="pricing-items box-shadow">
                <div class="icon">
                  <img src="/picture/icon.svg" alt="icon-img" />
                </div>
                <div class="element-shape">
                  <img src="/picture/element.png" alt="shape-img" />
                </div>
                <div class="pricing-header">
                  <h4>Advanced</h4>
                  <h2>
                    $99
                    <span>/monthly</span>
                  </h2>
                </div>
                <ul class="pricing-list">
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum porttitor sem
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Condimentum lacinia quisque
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Fusce sagittis est fringilla auctor
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Ligula enim varius lacus et luctus
                  </li>
                  <li>
                    <i class="fa-solid fa-check"></i>
                    Pellentesque non massa sed elit 
                  </li>
                </ul>
                <a href="contact.html" class="theme-btn">
                  Choose Plan
                  <i class="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <FooterSection></FooterSection>
</template>