happychin-web/pages/index/index-2.vue

<template>
  <Preloader></Preloader>
  <FixArea></FixArea>
  <header class="header-section">
    <Header-top-section />
    <TopHeader headerClass="header-2" />
  </header>
  <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>
  <section class="hero-section hero-2 fix">
    <div class="circle-shape">
      <img src="/picture/circle.png" alt="shape-img" />
    </div>
    <div class="line-shape">
      <img src="/picture/line-shape.png" alt="shape-img" />
    </div>
    <div class="right-shape">
      <img src="/picture/right-shape.png" alt="shape-img" />
    </div>
    <div class="roket-shape float-bob-y">
      <img src="/picture/roket.png" alt="shape-img" />
    </div>
    <div class="compass-shape">
      <img src="/picture/compass.png" alt="shape-img" />
    </div>
    <div class="bus-shape float-bob-x">
      <img src="/picture/bus.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame2.png" alt="shape-img" />
    </div>
    <div class="star-shape">
      <img src="/picture/star-2.png" alt="shape-img" />
    </div>
    <div class="pencil-shape">
      <img src="/picture/pencil.png" alt="" />
    </div>
    <div class="container">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <div class="hero-content">
            <h5 class="wow fadeInUp">Preschool & Baby Care</h5>
            <h1 class="wow fadeInUp" data-wow-delay=".3s">
              We Prepare Your
              <br />
              Child For
              <span>Life</span>
            </h1>
            <p class="wow fadeInUp" data-wow-delay=".5s">
              Suspendisse eget lectus vitae elit malesuada lacinia Vestibulum
              <br />
              scelerisque, ligula sit amet consequat
            </p>
            <div class="hero-button">
              <a href="" class="theme-btn wow fadeInUp" data-wow-delay=".7s">
                Explore More
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
              <a
                href="contact.html"
                class="theme-btn transparent wow fadeInUp"
                data-wow-delay=".8s"
              >
                Get In Touch
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
          <div class="hero-image">
            <img src="/picture/022.png" alt="hero-img" />
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="work-process-section-2 fix section-padding fix">
    <div class="top-shape">
      <img src="/picture/bottom-shape.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="process-work-wrapper style-padding">
        <div class="row g-4">
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
            <div class="work-process-items text-center">
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/01.svg" alt="img" />
              </div>
              <div class="content">
                <h4>Choose A Service</h4>
                <p>In a free hour, when our power of choice is untrammeled and</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
            <div class="work-process-items text-center">
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/02.svg" alt="img" />
              </div>
              <div class="content">
                <h4>Expert Teachers</h4>
                <p>In a free hour, when our power of choice is untrammeled and</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
            <div class="work-process-items text-center">
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/03.svg" alt="img" />
              </div>
              <div class="content">
                <h4>E-Learning Media</h4>
                <p>In a free hour, when our power of choice is untrammeled and</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
            <div class="work-process-items text-center">
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/04.svg" alt="img" />
              </div>
              <div class="content">
                <h4>Full Day Programs</h4>
                <p>In a free hour, when our power of choice is untrammeled and</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="about-activities-section-2 section-padding pt-0">
    <div class="left-shape">
      <img src="/picture/left-shape.png" alt="shape-img" />
    </div>
    <div class="zebra-shape float-bob-y">
      <img src="/picture/zebra.png" alt="shape-img" />
    </div>
    <div class="bottom-shape">
      <img src="/picture/section-top-shape-2.png" alt="shape-img" />
    </div>
    <div class="sun-shape">
      <img src="/picture/shape-2.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="about-activities-wrapper style-2">
        <div class="row g-4">
          <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
            <div class="activities-image-items">
              <img src="/picture/04.png" alt="img" />
              <div class="radius-shape">
                <img src="/picture/radius-shape.png" alt="shape-img" />
              </div>
              <div class="circle-shape">
                <img src="/picture/circle1.png" alt="shape-img" />
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="activities-content">
              <div class="section-title">
                <span class="wow fadeInUp">About Us</span>
                <h2 class="wow fadeInUp" data-wow-delay=".3s">
                  Learn to play, converse
                  <br />
                  with confidence.
                </h2>
              </div>
              <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                Luctus. Curabitur nibh justo imperdiet non ex non tempus faucibus urna Aliquam at
                elit vitae dui sagittis maximus eget vitae diam In fermentum
              </p>
              <div class="row g-4 mt-4">
                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                  <div class="icon-items">
                    <div class="icon">
                      <img src="/picture/icon-5.svg" alt="img" />
                    </div>
                    <div class="content">
                      <h5>Sport Program</h5>
                      <p>
                        Aliquam erat volutpat
                        <br />
                        nullam imperdiet
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                  <div class="icon-items">
                    <div class="icon">
                      <img src="/picture/icon-6.svg" alt="img" />
                    </div>
                    <div class="content">
                      <h5>Easy To Learn</h5>
                      <p>
                        Ut vehiculadictumst
                        <br />
                        maecenas ante.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="about-author">
                <div class="author-image wow fadeInUp" data-wow-delay=".3s">
                  <img src="/picture/author1.png" alt="author-img" />
                  <div class="content">
                    <h6>Ronald Richards</h6>
                    <p>Co, Founder</p>
                  </div>
                </div>
                <div class="author-icon wow fadeInUp" data-wow-delay=".5s">
                  <div class="icon">
                    <i class="fa-solid fa-phone"></i>
                  </div>
                  <div class="content">
                    <span>Call Us Now</span>
                    <h5>
                      <a href="tel:18589716552">18589716552</a>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="feature-value-section fix section-padding section-bg-2">
    <div class="shape-1">
      <img src="/picture/shape-1.png" alt="shape-img" />
    </div>
    <div class="shape-2 float-bob-x">
      <img src="/picture/shape-21.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title text-center">
        <span class="wow fadeInUp">Our values</span>
        <h2 class="wow fadeInUp" data-wow-delay=".3s">
          The best playschool
          <br />
          for your kid
        </h2>
      </div>
      <div class="row">
        <div class="col-xl-4 col-lg-6">
          <div class="feature-value-items">
            <div class="value-icon-items wow fadeInUp" data-wow-delay=".3s">
              <div class="icon">
                <img src="/picture/icon-11.svg" alt="img" />
              </div>
              <div class="content">
                <h5>Teacher Training and Progress</h5>
                <p>
                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
                  pulvinar.
                </p>
              </div>
            </div>
            <div class="value-icon-items wow fadeInUp" data-wow-delay=".5s">
              <div class="icon color-2">
                <img src="/picture/icon-21.svg" alt="img" />
              </div>
              <div class="content">
                <h5>Nanny Selection 24/7</h5>
                <p>
                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
                  pulvinar.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
          <div class="feature-value-items">
            <div class="feature-value-image">
              <img src="/picture/cta-2.png" alt="img" />
              <div class="value-shape">
                <img src="/picture/cta-shape-2.png" alt="shape-img" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6">
          <div class="feature-value-items">
            <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".3s">
              <div class="content">
                <h5>Advanced Placement Courses</h5>
                <p>
                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
                  pulvinar.
                </p>
              </div>
              <div class="icon color-3">
                <img src="/picture/icon-3.svg" alt="img" />
              </div>
            </div>
            <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".5s">
              <div class="content">
                <h5>Self-contained gifted programs​</h5>
                <p>
                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
                  pulvinar.
                </p>
              </div>
              <div class="icon color-2 color-4">
                <img src="/picture/icon-41.svg" alt="img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="counter-section fix">
    <div class="line-shape">
      <img src="/picture/line-shape1.png" alt="shape-img" />
    </div>
    <div class="box-shape float-bob-x">
      <img src="/picture/box-shape.png" alt="shape-img" />
    </div>
    <div class="counter-bg"></div>
    <div class="container">
      <div class="counter-wrapper">
        <div class="row g-4">
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
            <div class="counter-items">
              <div class="icon">
                <img src="/picture/icon-12.svg" alt="img" />
              </div>
              <div class="content">
                <h2>
                  <span class="count">25</span>
                  +
                </h2>
                <p>Year of Experience</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
            <div class="counter-items">
              <div class="icon">
                <img src="/picture/icon-22.svg" alt="img" />
              </div>
              <div class="content">
                <h2>
                  <span class="count">6,500</span>
                  +
                </h2>
                <p>Class Completed</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
            <div class="counter-items">
              <div class="icon">
                <img src="/picture/icon-31.svg" alt="img" />
              </div>
              <div class="content">
                <h2>
                  <span class="count">100</span>
                  +
                </h2>
                <p>Experts Instructors</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
            <div class="counter-items border-none">
              <div class="icon">
                <img src="/picture/icon-42.svg" alt="img" />
              </div>
              <div class="content">
                <h2>
                  <span class="count">6,561</span>
                  +
                </h2>
                <p>Students Enroll</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="program-section-2 section-padding fix">
    <div class="line-1">
      <img src="/picture/line-1.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title text-center">
        <span class="wow fadeInUp">Our Programs</span>
        <h2 class="wow fadeInUp" data-wow-delay=".3s">
          We meet kids at their level
          <br />
          regardless of their age
        </h2>
      </div>
      <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
          <div class="program-box-items-2">
            <div class="program-bg"></div>
            <div class="icon">
              <img src="/picture/011.svg" alt="icon-img" />
            </div>
            <div class="content text-center">
              <h4>
                <a href="program-details.html">Preschool</a>
              </h4>
              <span>(2-3 years)</span>
              <p>Consectur the adipiscing elit eiusmod.</p>
              <a href="program-details.html" class="arrow-icon">
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
          <div class="program-box-items-2">
            <div class="program-bg bg-2"></div>
            <div class="icon">
              <img src="/picture/021.svg" alt="icon-img" />
            </div>
            <div class="content text-center">
              <h4>
                <a href="program-details.html">Chemistry Class</a>
              </h4>
              <span>(4-5 years)</span>
              <p>Consectur the adipiscing elit eiusmod.</p>
              <a href="program-details.html" class="arrow-icon color-2">
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
          <div class="program-box-items-2">
            <div class="program-bg bg-3"></div>
            <div class="icon">
              <img src="/picture/031.svg" alt="icon-img" />
            </div>
            <div class="content text-center">
              <h4>
                <a href="program-details.html">Kindergarten</a>
              </h4>
              <span>(4-5 years)</span>
              <p>Consectur the adipiscing elit eiusmod.</p>
              <a href="program-details.html" class="arrow-icon color-3">
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
          <div class="program-box-items-2">
            <div class="program-bg bg-4"></div>
            <div class="icon">
              <img src="/picture/041.svg" alt="icon-img" />
            </div>
            <div class="content text-center">
              <h4>
                <a href="program-details.html">Drawing Class</a>
              </h4>
              <span>(1-2 years)</span>
              <p>Consectur the adipiscing elit eiusmod.</p>
              <a href="program-details.html" class="arrow-icon color-4">
                <i class="fa-solid fa-arrow-right-long"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="team-section-2 section-bg section-padding">
    <div class="top-shape">
      <img src="/picture/top-shape.png" alt="shape-img" />
    </div>
    <div class="love-shape float-bob-y">
      <img src="/picture/love.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title-area">
        <div class="section-title">
          <span class="wow fadeInUp">Our Experts</span>
          <h2 class="wow fadeInUp" data-wow-delay=".3s">Our Expert Instructors</h2>
        </div>
        <div class="array-button wow fadeInUp" data-wow-delay=".5s">
          <button class="array-prev"><i class="fal fa-arrow-left"></i></button>
          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
        </div>
      </div>
      <div class="swiper team-slider-2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="team-box-items">
              <div class="team-image">
                <img src="/picture/05.png" alt="team-img" />
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Leslie Alexander</a>
                </h3>
                <p>Math Teacher</p>
                <div class="social-icon d-flex align-items-center">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fa-brands fa-instagram"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-pinterest-p"></i></a>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-box-items">
              <div class="team-image">
                <img src="/picture/06.png" alt="team-img" />
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Esther Howard</a>
                </h3>
                <p>Art Teacher</p>
                <div class="social-icon d-flex align-items-center">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fa-brands fa-instagram"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-pinterest-p"></i></a>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-box-items">
              <div class="team-image">
                <img src="/picture/07.png" alt="team-img" />
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Ralph Edwards</a>
                </h3>
                <p>Sport Teacher</p>
                <div class="social-icon d-flex align-items-center">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fa-brands fa-instagram"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-pinterest-p"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="contact-section section-padding">
    <div class="line-1">
      <img src="/picture/line-1.png" alt="shape-img" />
    </div>
    <div class="line-2">
      <img src="/picture/line-21.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="contact-wrapper">
        <div class="row">
          <div class="col-lg-6">
            <div class="contact-content">
              <div class="section-title">
                <span class="text-white wow fadeInUp">Contact with Us</span>
                <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">How May We Help You!</h2>
              </div>
              <form action="#" id="contact-form" method="POST" class="contact-form-items">
                <div class="row g-4">
                  <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
                    <div class="form-clt">
                      <span>Your name*</span>
                      <input type="text" name="name" id="name" placeholder="Robot fox" />
                    </div>
                  </div>
                  <div class="col-lg-6 wow fadeInUp" data-wow-delay=".5s">
                    <div class="form-clt">
                      <span>Your Email*</span>
                      <input type="text" name="email" id="email" placeholder="info@example.com" />
                    </div>
                  </div>
                  <div class="col-lg-12 wow fadeInUp" data-wow-delay=".7s">
                    <div class="form-clt">
                      <span>Message*</span>
                      <textarea name="message" id="message" placeholder="Write Message"></textarea>
                    </div>
                  </div>
                  <div class="col-lg-7 wow fadeInUp" data-wow-delay=".9s">
                    <button type="submit" class="theme-btn bg-white">
                      Send Request
                      <i class="fa-solid fa-arrow-right-long"></i>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="contact-image wow fadeInUp" data-wow-delay=".4s">
              <img src="/picture/contact.png" alt="contact-img" />
              <div class="cricle-shape">
                <img src="/picture/circle-2.png" alt="shape-img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="pricing-section section-bg section-padding">
    <div class="tree-shape float-bob-x">
      <img src="/picture/tree-shape.png" alt="shape-img" />
    </div>
    <div class="pencil-shape">
      <img src="/picture/pencil4.png" alt="shape-img" />
    </div>
    <div class="top-shape">
      <img src="/picture/top-shape.png" alt="shape-img" />
    </div>
    <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"
              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"
              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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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>
  <section class="testimonial-section-2 fix section-padding">
    <div class="zebra-shape float-bob-y">
      <img src="/picture/zebra.png" alt="shape-img" />
    </div>
    <div class="left-shape">
      <img src="/picture/testi-l-shape.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="testimonial-wrapper section-padding">
        <div class="shape-1">
          <img src="/picture/shape-11.png" alt="shape-img" />
        </div>
        <div class="shape-2">
          <img src="/picture/shape-2.png" alt="shape-img" />
        </div>
        <div class="testimonial-bg"></div>
        <div class="section-title text-center">
          <span class="wow fadeInUp">Testimonials</span>
          <h2 class="wow fadeInUp" data-wow-delay=".3s">What clients say</h2>
        </div>
        <div class="swiper testimonial-slider-2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="testimonial-box-items">
                <p>
                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                  sapien ac elementum
                </p>
                <div class="client-info">
                  <img src="/picture/author1.png" alt="img" />
                  <div class="content">
                    <h5>Ronald Richards</h5>
                    <p>Co, Founder</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="testimonial-box-items">
                <p>
                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                  sapien ac elementum
                </p>
                <div class="client-info">
                  <img src="/picture/author1.png" alt="img" />
                  <div class="content">
                    <h5>Ronald Richards</h5>
                    <p>Co, Founder</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="testimonial-box-items">
                <p>
                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                  sapien ac elementum
                </p>
                <div class="client-info">
                  <img src="/picture/author1.png" alt="img" />
                  <div class="content">
                    <h5>Ronald Richards</h5>
                    <p>Co, Founder</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="array-button">
          <button class="array-prev"><i class="fal fa-arrow-left"></i></button>
          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
        </div>
      </div>
    </div>
  </section>
  <section class="news-section-2 fix section-padding">
    <div class="shape-1 float-bob-y">
      <img src="/picture/shape-12.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title text-center pt-40">
        <span class="text-white wow fadeInUp">Blog And News</span>
        <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">
          Education foundation
          <br />
          for a better
        </h2>
      </div>
      <div class="row">
        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
          <div class="news-card-items">
            <div class="news-image">
              <img src="/picture/042.jpg" alt="img" />
              <div class="news-layer-wrapper">
                <div class="news-layer-image" style="background-image: url('/image/04.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/04.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/04.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/04.jpg')"></div>
              </div>
              <div class="post">
                <span>Activities</span>
              </div>
            </div>
            <div class="news-content">
              <ul>
                <li>
                  <i class="fas fa-calendar-alt"></i>
                  Feb 10, 2024
                </li>
                <li>
                  <i class="far fa-user"></i>
                  By admin
                </li>
              </ul>
              <h3>
                <a href="news-details.html">
                  From without content
                  <br />
                  style without
                </a>
              </h3>
              <a href="news-details.html" class="theme-btn-2 mt-3">
                Read More
                <i class="fas fa-long-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
          <div class="news-card-items">
            <div class="news-image">
              <img src="/picture/051.jpg" alt="img" />
              <div class="news-layer-wrapper">
                <div class="news-layer-image" style="background-image: url('/image/05.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/05.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/05.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/05.jpg')"></div>
              </div>
              <div class="post">
                <span>Activities</span>
              </div>
            </div>
            <div class="news-content">
              <ul>
                <li>
                  <i class="fas fa-calendar-alt"></i>
                  Feb 10, 2024
                </li>
                <li>
                  <i class="far fa-user"></i>
                  By admin
                </li>
              </ul>
              <h3>
                <a href="news-details.html">
                  That jerk Form Finance
                  <br />
                  really threw me
                </a>
              </h3>
              <a href="news-details.html" class="theme-btn-2 mt-3">
                Read More
                <i class="fas fa-long-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
          <div class="news-card-items">
            <div class="news-image">
              <img src="/picture/061.jpg" alt="img" />
              <div class="news-layer-wrapper">
                <div class="news-layer-image" style="background-image: url('/image/06.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/06.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/06.jpg')"></div>
                <div class="news-layer-image" style="background-image: url('/image/06.jpg')"></div>
              </div>
              <div class="post">
                <span>Activities</span>
              </div>
            </div>
            <div class="news-content">
              <ul>
                <li>
                  <i class="fas fa-calendar-alt"></i>
                  Feb 10, 2024
                </li>
                <li>
                  <i class="far fa-user"></i>
                  By admin
                </li>
              </ul>
              <h3>
                <a href="news-details.html">
                  All Inclusive Ultimate Circle
                  <br />
                  Island Day with Lunch
                </a>
              </h3>
              <a href="news-details.html" class="theme-btn-2 mt-3">
                Read More
                <i class="fas fa-long-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="brand-section fix section-padding pt-0">
    <div class="container">
      <div class="brand-wrapper">
        <h6 class="text-center wow fadeInUp" data-wow-delay=".3s">1k + Brands Trust Us</h6>
        <div class="swiper brand-slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="brand-image">
                <img src="/picture/brand.png" alt="brand-img" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="brand-image">
                <img src="/picture/brand.png" alt="brand-img" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="brand-image">
                <img src="/picture/brand.png" alt="brand-img" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="brand-image">
                <img src="/picture/brand.png" alt="brand-img" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="brand-image">
                <img src="/picture/brand.png" alt="brand-img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <FooterSection></FooterSection>
  <!-- <footer class="footer-section section-bg">
        <div class="frame-shape style-2">
            <img src="/picture/frame-2.png" alt="shape-img">
        </div>
        <div class="frame-shape-3 float-bob-y">
            <img src="/picture/frame-3.png" alt="shape-img">
        </div>
        <div class="footer-widgets-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                        <div class="single-footer-widget">
                            <div class="widget-head">
                                <a href="p9wfc14694.html">
                                    <img src="/picture/logo.svg" alt="logo-img">
                                </a>
                            </div>
                            <div class="footer-content">
                                <p>
                                    Phasellus ultricies aliquam volutpat
                                    ullamcorper laoreet neque, a lacinia
                                    curabitur lacinia mollis
                                </p>
                                <div class="social-icon d-flex align-items-center">
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
                        <div class="single-footer-widget">
                            <div class="widget-head">
                                <h3>Quick Links</h3>
                            </div>
                            <ul class="list-area">
                                <li>
                                    <a href="program-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Our Services
                                    </a>
                                </li>
                                <li>
                                    <a href="news-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Our Blogs
                                    </a>
                                </li>
                                <li>
                                    <a href="faq.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        FAQ’S
                                    </a>
                                </li>
                                <li>
                                    <a href="contact.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Contact Us
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
                        <div class="single-footer-widget style-margin">
                            <div class="widget-head">
                                <h3>Categories</h3>
                            </div>
                            <ul class="list-area">
                                <li>
                                    <a href="program-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Music Learning
                                    </a>
                                </li>
                                <li>
                                    <a href="program-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Sports, Games
                                    </a>
                                </li>
                                <li>
                                    <a href="program-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Science Class
                                    </a>
                                </li>
                                <li>
                                    <a href="program-details.html">
                                        <i class="fa-solid fa-chevron-right"></i>
                                        Drawing
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                        <div class="single-footer-widget style-margin">
                            <div class="widget-head">
                                <h3>Our Galleries</h3>
                            </div>
                            <div class="footer-gallery">
                                <div class="gallery-wrap">
                                    <div class="gallery-item">
                                        <div class="thumb">
                                            <a href="/picture/gallery-1.jpg" class="img-popup">
                                                <img src="/picture/gallery-1.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="thumb">
                                            <a href="/picture/gallery-2.jpg" class="img-popup">
                                                <img src="/picture/gallery-2.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="thumb">
                                            <a href="/picture/gallery-3.jpg" class="img-popup">
                                                <img src="/picture/gallery-3.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="gallery-item">
                                        <div class="thumb">
                                            <a href="/picture/gallery-4.jpg" class="img-popup">
                                                <img src="/picture/gallery-4.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="thumb">
                                            <a href="/picture/gallery-5.jpg" class="img-popup">
                                                <img src="/picture/gallery-5.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="thumb">
                                            <a href="/picture/gallery-6.jpg" class="img-popup">
                                                <img src="/picture/gallery-6.jpg" alt="gallery-img">
                                                <div class="icon">
                                                    <i class="far fa-plus"></i>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="f-bottom-shape"></div>
            <div class="container">
                <div class="footer-wrapper d-flex align-items-center justify-content-between">
                    <p class="wow fadeInLeft color-2" data-wow-delay=".3s">
                        © All Copyright 2024 by <a href="https://www.99ziyuan.net">99ziyuan</a>
                    </p>
                    <ul class="footer-menu wow fadeInRight" data-wow-delay=".5s">
                        <li>
                            <a href="contact.html">
                                Terms & Condition
                            </a>
                        </li>
                        <li>
                            <a href="contact.html">
                                Privacy Policy
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <a href="#" id="scrollUp" class="scroll-icon">
                <i class="far fa-arrow-up"></i>
            </a>
        </div>
    </footer> -->
</template>