happychin-web/pages/about/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">About Us</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>About Us</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="about-activities-section-2 style-2 section-padding">
    <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="team-section-3 fix section-padding pt-1 mt-60">
    <div class="tree-shape float-bob-x">
      <img src="/picture/tree-shape.png" alt="shape-img" />
    </div>
    <div class="right-shape">
      <img src="/picture/right.png" alt="shape-img" />
    </div>
    <div class="bee-shape float-bob-y">
      <img src="/picture/bee.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title-area">
        <div class="section-title mt-60">
          <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 bor-1"><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">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/01.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Brooklyn Simmons</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/02.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Leslie Alexander</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/03.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Ronald Richards</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="team-items">
              <div class="team-image">
                <div class="shape-img">
                  <img src="/picture/team-shape.png" alt="img" />
                </div>
                <img src="/picture/04.jpg" alt="team-img" />
                <div class="social-profile">
                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
                  <ul>
                    <li>
                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content">
                <h3>
                  <a href="team-details.html">Kristin Watson</a>
                </h3>
                <p>Instructors</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="testimonial-section-2 section-padding pt-0">
    <div class="container">
      <div class="testimonial-wrapper style-2 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>
  <div class="instagram-banner fix section-padding pt-0">
    <div class="instagram-wrapper">
      <h3 class="text-center wow fadeInUp" data-wow-delay=".3s">Follow Instagram</h3>
      <div class="swiper instagram-banner-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/012.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/022.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/032.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/041.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/05.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="instagram-banner-items">
              <div class="banner-image">
                <img src="/picture/06.jpg" alt="insta-img" />
                <a href="p9wfc14694.html" class="icon">
                  <i class="fa-brands fa-instagram"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <FooterSection></FooterSection>
</template>
<script setup></script>