fix:1.首页的样式修改，和js 逻辑 还有项目的配置修改

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.disabled": false,
+  "i18n-ally.localesPaths": ["locales"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "zh-CN"
+}

app.vue

@@ -4,16 +4,15 @@
 <script setup>
 useHead({
   link: [
-    { rel: 'stylesheet', href: '/css/all.min.css' },
+    { rel: 'stylesheet', href: '/css/bootstrap.min.css' },
+    { rel: 'stylesheet', href: '/css/swiper-bundle.min.css' },
 
+    { rel: 'stylesheet', href: '/css/all.min.css' },
     { rel: 'stylesheet', href: '/css/animate.css' },
     { rel: 'stylesheet', href: '/css/magnific-popup.css' },
     { rel: 'stylesheet', href: '/css/meanmenu.css' },
-
     { rel: 'stylesheet', href: '/css/nice-select.css' },
-    { rel: 'stylesheet', href: '/css/main.css' },
-    { rel: 'stylesheet', href: '/css/bootstrap.min.css' }
-    // { rel: 'stylesheet', href: '/css/swiper-bundle.min.css' }
+    { rel: 'stylesheet', href: '/css/main.css' }
   ],
   script: [
     { src: '/js/jquery-3.7.1.min.js', defer: true, body: true },

assets/css/main.css

@@ -1379,11 +1379,11 @@ span {
 }
 
 .contact-info-area {
-  padding-top: 220px;
+   padding-top: 70px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(56, 84, 105, 0.2);
+  /* border-bottom: 1px solid rgba(56, 84, 105, 0.2); */
 }
 @media (max-width: 1199px) {
   .contact-info-area {
@@ -3168,7 +3168,7 @@ span {
 .footer-bottom {
   position: relative;
   z-index: 9;
-  z-index: 9;
+  height: 98px;
 }
 .footer-bottom .f-bottom-shape {
   position: absolute;
@@ -3273,7 +3273,7 @@ span {
 }
 .footer-section .zebra-shape {
   position: absolute;
-  top: 50%;
+  top: 15%;
   right: 0;
   transform: translateY(-50%);
 }
@@ -3351,13 +3351,19 @@ span {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 92px;
   z-index: -1;
 }
 .header-top-section-4 .header-top-shape img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* height: 100%;
+  object-fit: cover; */
+  height: auto;          
+  /* 设置高度自适应，保持图片的纵横比 */
+  object-fit: contain;   
+  /* 保持图片完整显示，并让图片适应容器 */
+  z-index: -2;
 }
 
 .header-top-wrapper {
@@ -4691,7 +4697,7 @@ span {
 .hero-1 .book-shape {
   position: absolute;
   top: 10%;
-  left: 50%;
+  left: 47%;
   transform: translateX(-50%);
 }
 @media (max-width: 991px) {
@@ -6953,7 +6959,7 @@ input.main-search-input::placeholder {
 }
 .program-section .bottom-shape {
   position: absolute;
-  bottom: -1px;
+  bottom: -2px;
   left: 0;
   width: 100%;
 
@@ -7784,6 +7790,7 @@ input.main-search-input::placeholder {
 }
 .team-items .team-image {
   position: relative;
+  
 }
 .team-items .team-image img {
   width: 100%;
@@ -8231,7 +8238,7 @@ input.main-search-input::placeholder {
   position: relative;
   z-index: 9;
   max-width: 420px;
-  padding: 55px 60px;
+  padding: 55px 50px;
   text-align: center;
   margin: 30px auto;
 }

components/Footer-section/index.vue

@@ -1,17 +1,43 @@
+<style lang="css" scoped>
+.multi-line {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.clamp-1 {
+  -webkit-line-clamp: 1;
+}
+.clamp-2 {
+  -webkit-line-clamp: 2;
+}
+.clamp-3 {
+  -webkit-line-clamp: 3;
+}
+</style>
+
 <template>
   <footer class="footer-section section-bg fix">
-    <!-- <div class="footer-top-shape">
-			<img src="/picture/footer-top.png" alt="shape-img">
-		</div> -->
     <div class="frame-shape">
       <img src="/picture/frame1.png" alt="shape-img" />
     </div>
     <div class="zebra-shape float-bob-y">
-      <img src="/picture/zebra.png" alt="shape-img" />
+      <img style="width: 158px; height: 253px" src="/picture/zebra.png" alt="shape-img" />
     </div>
-    <div class="container">
+    <div class="container container-xxxl">
       <div class="contact-info-area">
         <div class="contact-info-items wow fadeInUp" data-wow-delay=".3s">
+          <div class="widget-head">
+            <a href="">
+              <img src="/picture/logo.svg" alt="logo-img" />
+            </a>
+          </div>
+
+          <div class="content">
+            <p style="width: 191px">Learning Chinese is actually very easy</p>
+          </div>
+        </div>
+        <div class="contact-info-items wow fadeInUp" data-wow-delay=".5s">
           <div class="icon">
             <svg
               width="30"
@@ -31,13 +57,13 @@
             </svg>
           </div>
           <div class="content">
-            <p>Call Us 7/24</p>
-            <h3>
-              <a href="tel:+2085550112">+208-555-0112</a>
+            <p>Call Us</p>
+            <h3 style="width: 191px">
+              <a href="javascript:(0)">18589716552</a>
             </h3>
           </div>
         </div>
-        <div class="contact-info-items wow fadeInUp" data-wow-delay=".5s">
+        <div class="contact-info-items wow fadeInUp" data-wow-delay=".7s">
           <div class="icon">
             <svg
               width="30"
@@ -62,12 +88,12 @@
           </div>
           <div class="content">
             <p>Make a Quote</p>
-            <h3>
-              <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+            <h3 style="width: 191px">
+              <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
             </h3>
           </div>
         </div>
-        <div class="contact-info-items wow fadeInUp" data-wow-delay=".7s">
+        <div class="contact-info-items wow fadeInUp" data-wow-delay=".9s">
           <div class="icon">
             <svg
               width="32"
@@ -92,156 +118,20 @@
           </div>
           <div class="content">
             <p>Location</p>
-            <h3>4517 Washington ave.</h3>
-          </div>
-        </div>
-      </div>
-    </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="">
-                  <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>Recent Posts</h3>
-              </div>
-              <div class="recent-post-area">
-                <div class="recent-post-items">
-                  <div class="thumb">
-                    <img src="/picture/pp1.jpg" alt="post-img" />
-                  </div>
-                  <div class="content">
-                    <ul class="post-date">
-                      <li>
-                        <i class="fa-solid fa-calendar-days me-2"></i>
-                        20 Feb, 2024
-                      </li>
-                    </ul>
-                    <h6>
-                      <a href="news-details.html">
-                        That jerk Form Finance
-                        <br />
-                        really threw me
-                      </a>
-                    </h6>
-                  </div>
-                </div>
-                <div class="recent-post-items mb-0">
-                  <div class="thumb">
-                    <img src="/picture/pp2.jpg" alt="post-img" />
-                  </div>
-                  <div class="content">
-                    <ul class="post-date">
-                      <li>
-                        <i class="fa-solid fa-calendar-days me-2"></i>
-                        15 Dec, 2024
-                      </li>
-                    </ul>
-                    <h6>
-                      <a href="news-details.html">
-                        From without content
-                        <br />
-                        style without
-                      </a>
-                    </h6>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <h3
+              style="width: 191px"
+              title="Room 1509, Building 11, Shidai Hui, Yuzhong District, Chongqing Municipality, China"
+              class="multi-line clamp-1"
+            >
+              Room 1509, Building 11, Shidai Hui, Yuzhong District, Chongqing Municipality, China
+            </h3>
           </div>
         </div>
       </div>
     </div>
     <div class="footer-bottom">
       <div class="f-bottom-shape">
-        <img src="/picture/footer-bottom.png" alt="shape-img" />
+        <img src="/picture/footer-bottom.svg" alt="" />
       </div>
       <div class="container">
         <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -260,7 +150,7 @@
         </div>
       </div>
       <a href="#" id="scrollUp" class="scroll-icon">
-        <i class="far fa-arrow-up"></i>
+        <img src="/image/back-top.svg" alt="" />
       </a>
     </div>
   </footer>

components/HomeIndex/Activities-wrapper/index.vue

@@ -65,7 +65,6 @@ const dataList = ref([
       <div class="about-activities-wrapper">
         <div class="row g-3">
           <div class="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
-            <!-- style="background-image: url('/picture/bg03.svg')" -->
             <div class="activities-image bg-cover">
               <img src="/picture/03.png" alt="img" />
             </div>

components/HomeIndex/Kindergarten-class/index.vue

@@ -27,7 +27,7 @@ const dataList = ref([
     abg: 'abg3',
     id: 'DrawingClass',
     wowDelay: '0.7s',
-    img: '/picture/012.png',
+    img: '/picture/082.png',
     title: 'Drawing Class',
     ageBracket: '9-15 years old',
     subTitle:
@@ -38,7 +38,7 @@ const dataList = ref([
     abg: 'abg4',
     id: 'Expanding',
     wowDelay: '0.9s',
-    img: '/picture/021.png',
+    img: '/picture/083.png',
     title: 'Beginning',
     ageBracket: '12-18years old',
     subTitle:

components/HomeIndex/Recommendation/index.vue

@@ -0,0 +1,111 @@
+<script setup>
+const { t, locale, setLocale } = useI18n()
+const dataList = ref([
+  {
+    bg: '',
+    abg: '',
+    id: 'Jenny0',
+    wowDelay: '0.3s',
+    img: '/picture/quote.png',
+    title: 'Jenny Wilson',
+    subTitle:
+      "The 'Cultural Theatre' session is a children's favorite, and it's so fun to learn festival customs with melodrama!"
+  },
+  {
+    bg: 'bg-2',
+    abg: 'style-2',
+    id: 'Jenny1',
+    wowDelay: '0.5s',
+    img: '/picture/quote-2.png',
+    title: 'Esther Howard',
+    subTitle:
+      'The pronunciation standard of the Chinese teacher, the child says that it is like learning Chinese with friends~'
+  },
+  {
+    bg: 'bg-3',
+    abg: 'style-3',
+    id: 'Jenny2',
+    wowDelay: '0.7s',
+    img: '/picture/quote-3.png',
+    title: 'Wade Warren',
+    subTitle:
+      'There is a video playback of the make-up class, which is too friendly to dual-income families.'
+  }
+])
+</script>
+<style lang="css" scoped>
+.multi-line {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.h-color {
+  color: white;
+}
+.clamp-1 {
+  -webkit-line-clamp: 1;
+}
+.clamp-2 {
+  -webkit-line-clamp: 2;
+}
+.clamp-3 {
+  -webkit-line-clamp: 3;
+}
+</style>
+
+<template>
+  <section class="testimonial-section fix section-padding">
+    <div class="tree-shape float-bob-y"><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 text-center">
+        <span class="wow fadeInUp">Recommendation</span>
+        <h2 class="wow fadeInUp w-50 m-auto" data-wow-delay=".3s">
+          Parents' feedback on Happy Chin
+        </h2>
+      </div>
+
+      <div class="row">
+        <template v-for="(item, index) in dataList" :key="item?.id">
+          <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
+            <div class="swiper-slide">
+              <div style="box-sizing: border-box" class="testimonial-items" :class="item.abg">
+                <div class="icon">
+                  <img :src="item?.img" alt="img" />
+                </div>
+                <div class="testimonial-bg" :class="item.bg"></div>
+                <div class="testimonial-content">
+                  <p class="multi-line clamp-3">
+                    {{ item?.subTitle }}
+                  </p>
+                  <h6 class="">{{ item?.title }}</h6>
+                </div>
+              </div>
+            </div>
+
+            <!-- <div class="program-box-items">
+              <div :class="`program-bg ${item?.bg}`"></div>
+              <div class="program-image">
+                <img :src="item?.img" alt="img" />
+              </div>
+              <div class="program-content text-center">
+                <h4 class="multi-line clamp-1 h-color">
+                  {{ item?.title }}
+                </h4>
+                <span>({{ item?.ageBracket }})</span>
+                <p class="multi-line clamp-2">
+                  {{ item?.subTitle }}
+                </p>
+              
+                <a href="javascript:(0)" :class="`arrow-icon  ${item?.abg}`">
+                  <i class="fa-solid fa-arrow-right"></i>
+                </a>
+              </div>
+            </div> -->
+          </div>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>

components/HomeIndex/Teachers/index.vue

@@ -0,0 +1,308 @@
+<script setup>
+const { t, locale, setLocale } = useI18n()
+const dataList = ref([
+  {
+    bg: '',
+    abg: '',
+    id: 'teacher0',
+    wowDelay: '0.3s',
+    img: '/picture/01.jpg',
+    name: 'Aria Lan',
+    tType: 'English teacher',
+    subSchool: "Bachelor's Degree in English",
+    introduce:
+      'Five years of extensive teaching experience. Former outstanding instructor and former excellent teacher at an international kindergarten.  Holds a Teaching Certificate issued by the Ministry of Education, TEM-4, and Mandarin Level 2-A Certificate. Proficient in standard pronunciation and intonation, skilled in Chinese picture book reading, phonics, and oral Chinese teaching'
+  },
+  {
+    bg: 'bg-2',
+    abg: 'style-2',
+    id: 'teacher1',
+    wowDelay: '0.5s',
+    img: '/picture/02.jpg',
+    name: 'Wendy Chen',
+    tType: 'English teacher',
+    subSchool: '',
+    introduce:
+      'Graduated from a normal college with a Bachelor’s degree and holds CET6 (National College English Test Band 4 and 6) certificate, TEM4 (Test for English Major) certificate, BEC (BUSINESS ENGLISH CERTIFICATE) Intermediate certificate, Mandarin Level 1 B certificate.With strong affinity, she is good at mobilizing the classroom atmosphere with rich teaching methods.'
+  },
+  {
+    bg: 'bg-3',
+    abg: 'style-3',
+    id: 'teacher2',
+    wowDelay: '0.7s',
+    img: '/picture/03.jpg',
+    name: 'Aspen Chou',
+    tType: 'English teacher',
+    subSchool: 'Graduated from a normal university.',
+    introduce:
+      "I have the Ministry of Education's teaching certification and a Level 2A Mandarin proficiency certificate. I have three years of one-on-one teaching experience. I've participated in public - welfare volunteer teaching activities multiple times. Proficient in oral Chinese teaching with standard pronunciation and intonation, I create a child - loved atmosphere."
+  },
+  {
+    bg: 'bg-3',
+    abg: 'style-3',
+    id: 'teacher3',
+    wowDelay: '0.7s',
+    img: '/picture/04.jpg',
+    name: 'Olivia Huang',
+    tType: 'English teacher',
+    subSchool: '',
+    introduce:
+      "Graduated from the University of Valencia, Spain with a doctorate in linguistics, with TEM-8 Certificate in English and Spanish, Mandarin Level 2A Certificate and the“National Outstanding Teacher”. Has American English pronunciation, places emphasis on practice, and cultivates students' practical application abilities."
+  }
+])
+</script>
+<style lang="css" scoped>
+.multi-line {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.h-color {
+  color: white;
+}
+.clamp-1 {
+  -webkit-line-clamp: 1;
+}
+.clamp-2 {
+  -webkit-line-clamp: 2;
+}
+.clamp-3 {
+  -webkit-line-clamp: 3;
+}
+
+.left-social-profile {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  z-index: 99;
+  width: 40px;
+  height: 40px;
+  border: 1px solid white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.left-social-profile div {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.left-social-profile div img {
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.introduce {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  box-sizing: border-box;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  color: white;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  -ms-overflow-style: none; /* IE 和 Edge */
+  scrollbar-width: none;
+  transition: all 0.1s ease-in-out;
+  display: none;
+  cursor: pointer;
+}
+
+.introduce::-webkit-scrollbar {
+  width: 0px; /* Chrome, Safari 和 Opera */
+}
+
+.left-social-profile:hover + .introduce {
+  display: block;
+}
+.introduce:hover {
+  display: block;
+}
+.bgCover {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+</style>
+
+<template>
+  <section class="team-section fix section-bg section-padding">
+    <div class="top-shape">
+      <img class="bgCover" src="/picture/section-top-shape.svg" alt="shape-img" />
+    </div>
+    <div class="love-shape float-bob-x"><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 mt-60">
+          <span class="wow fadeInUp">Our Experts</span>
+          <h2 class="wow fadeInUp" data-wow-delay=".3s">Our Expert Instructors</h2>
+        </div>
+      </div>
+      <div class="row">
+        <template v-for="(item, index) in dataList" :key="item?.id">
+          <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
+            <div class="swiper-slide">
+              <div class="team-items">
+                <div style="overflow: hidden" class="team-image">
+                  <div class="shape-img">
+                    <img src="/picture/team-shape.png" alt="img" />
+                  </div>
+                  <img :src="item?.img" 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 class="left-social-profile">
+                    <div class="w-24 h-24">
+                      <img class="w-100 h-100" src="/image/omit.svg" alt="" />
+                    </div>
+                  </div>
+                  <div class="introduce">
+                    <p class="fs-5 text-white text-center pb-2">{{ item?.name }}</p>
+                    <p class="text-white">{{ item?.subSchool }}</p>
+                    {{ item?.introduce }}
+                  </div>
+                </div>
+                <div class="team-content">
+                  <h3>
+                    <a href="team-details.html">{{ item?.name }}</a>
+                  </h3>
+                  <p>{{ item?.tType }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </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>
+</template>

components/HomeIndex/Work-wrapper/index.vue

@@ -76,7 +76,9 @@ const { t, locale, setLocale } = useI18n()
               </div>
               <div class="content">
                 <h4>Expert Teachers</h4>
-                <p>The excellent team of teachers escorts students' learning</p>
+                <p class="multi-line clamp-2">
+                  The excellent team of teachers escorts students' learning
+                </p>
               </div>
             </div>
           </div>
@@ -88,7 +90,9 @@ const { t, locale, setLocale } = useI18n()
               </div>
               <div class="content">
                 <h4>E-learning Media</h4>
-                <p>Learners can freely explore knowledge via E-learning media</p>
+                <p class="multi-line clamp-2">
+                  Learners can freely explore knowledge via E-learning media
+                </p>
               </div>
             </div>
           </div>
@@ -100,7 +104,9 @@ const { t, locale, setLocale } = useI18n()
               </div>
               <div class="content">
                 <h4>Professional Service</h4>
-                <p>Tailor-made learning plans for students to achieve personalized development</p>
+                <p class="multi-line clamp-2">
+                  Tailor-made learning plans for students to achieve personalized development
+                </p>
               </div>
             </div>
           </div>
@@ -108,7 +114,7 @@ const { t, locale, setLocale } = useI18n()
             <div class="work-process-items text-center">
               <div class="content style-two">
                 <h4>Teaching Assistant Tracking</h4>
-                <p>
+                <p class="multi-line clamp-2">
                   Remedial system of professional teaching assistant to track during the whole
                   process.
                 </p>

components/TopHeader.vue

@@ -18,7 +18,7 @@ const switchLanguage = (event) => {
     <div class="container-fluid">
       <div class="mega-menu-wrapper">
         <div class="header-main style-2">
-          <div class="header-left">
+          <div class="header-left zindex">
             <div class="logo">
               <a href="" class="header-logo"><img src="/picture/logo.svg" alt="logo-img" /></a>
             </div>
@@ -211,4 +211,9 @@ select {
 option {
   outline: none;
 }
+
+.zindex {
+  position: relative;
+  z-index: 100;
+}
 </style>

nuxt.config.ts

@@ -17,11 +17,37 @@ export default defineNuxtConfig({
     strategy: 'no_prefix',
     vueI18n: './i18n.config.ts',
   },
- 
-  
-  css: [
-    '@/css/swiper-bundle.min.css', // 引入 FontAwesome 样式
-  ],
+  runtimeConfig: {
+    public: {
+      baseApi: process.env.VITE_APP_BASE_URL,
+    }
+  },
+  app: {
+    head: {
+      title: '开心中文',
+      meta: [
+        {
+          name: 'charset',
+          content: 'utf-8'
+        },
+        {
+          name: 'viewport',
+          content: 'width=device-width,width=1250,maximum-scale=1.0'
+        },
+        {
+          name: 'renderer',
+          content: 'webkit'
+        }
+      ],
+      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }]
+    }
+  },
+  devServer: {
+    port:3002
+  }
+  // css: [
+  //   '@/css/swiper-bundle.min.css', // 引入 FontAwesome 样式
+  // ],
   // build: {
   //   transpile: ['@fortawesome/fontawesome-free'], // 确保 FontAwesome 样式和字体文件能够被编译
   // }

package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@nuxtjs/i18n": "9.2.1",
+    "accounting": "^0.4.1",
+    "axios": "^1.8.2",
     "nuxt": "^3.15.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

pages/blog/blog-carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,188 +237,218 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Blog Carousel</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>
-                        Blog Carousel
-                    </li>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Blog Carousel</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>Blog Carousel</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="news-section-3 fix section-padding">
+    <div class="container">
+      <div class="swiper news-slider news-slider">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="news-card-items mt-0">
+              <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>
-    <section class="news-section-3 fix section-padding">
-        <div class="container">
-            <div class="swiper news-slider news-slider">
-                <div class="swiper-wrapper">
-                    <div class="swiper-slide">
-                        <div class="news-card-items mt-0">
-                            <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="swiper-slide">
-                        <div class="news-card-items mt-0">
-                            <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="swiper-slide">
-                        <div class="news-card-items mt-0">
-                            <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 class="swiper-slide">
+            <div class="news-card-items mt-0">
+              <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="swiper-slide">
+            <div class="news-card-items mt-0">
+              <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="swiper-dot text-center pt-5">
-                    <div class="dot"></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>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+        <div class="swiper-dot text-center pt-5">
+          <div class="dot"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -444,7 +474,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -465,7 +495,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -632,7 +662,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -658,4 +688,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/blog/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,371 +237,408 @@
             </div>
         </div>
     </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 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.png')">
+    <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">Blog Details</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>Blog Details</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="news-details fix section-padding">
+    <div class="container">
+      <div class="news-details-area">
+        <div class="row g-5">
+          <div class="col-12 col-lg-8">
+            <div class="blog-post-details">
+              <div class="single-blog-post">
+                <div
+                  class="post-featured-thumb bg-cover"
+                  style="background-image: url('/image/post-4.jpg')"
+                ></div>
+                <div class="post-content">
+                  <ul class="post-list d-flex align-items-center">
+                    <li>
+                      <i class="fa-regular fa-user"></i>
+                      By Admin
+                    </li>
+                    <li>
+                      <i class="fa-solid fa-calendar-days"></i>
+                      18 Dec, 2024
+                    </li>
+                    <li>
+                      <i class="fa-solid fa-tag"></i>
+                      Education
+                    </li>
+                  </ul>
+                  <h3>From without content style without</h3>
+                  <p class="mb-3">
+                    Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
+                    aute irure and dolor in reprehenderit.
+                  </p>
+                  <p class="mb-3">
+                    The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta
+                    arcu In hac habitasse the is platea augue thelorem turpoi dictumst. In lacus
+                    libero faucibus at malesuada sagittis placerat eros sed istincidunt augue ac
+                    ante rutrum sed the is sodales augue consequat.
+                  </p>
+                  <p>
+                    Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
+                    convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
+                    bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat
+                    auctor.
+                  </p>
+                  <div class="hilight-text mt-4 mb-4">
+                    <p>
+                      Pellentesque sollicitudin congue dolor non aliquam. Morbi volutpat, nisi vel
+                      ultricies
+                      <br />
+                      urnacondimentum, sapien neque lobortis tortor, quis efficitur mi ipsum eu
+                      metus. Praesent eleifend
+                      <br />
+                      orci sit amet est vehicula.
+                    </p>
+                    <svg
+                      width="36"
+                      height="36"
+                      viewbox="0 0 36 36"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+                        stroke="#F39F5F"
+                      ></path>
+                      <path
+                        d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+                        stroke="#F39F5F"
+                      ></path>
+                    </svg>
+                  </div>
+                  <p class="mt-4 mb-5">
+                    Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam
+                    in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula
+                    consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis
+                    imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu.
+                    Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.
+                    Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam
+                    condimentum, vel euismod erat placerat. In iaculis arcu eros.
+                  </p>
+                  <div class="row g-4">
+                    <div class="col-lg-6">
+                      <div class="details-image">
+                        <img src="/picture/post-5.jpg" alt="img" />
+                      </div>
                     </div>
+                    <div class="col-lg-6">
+                      <div class="details-image">
+                        <img src="/picture/post-6.jpg" alt="img" />
+                      </div>
+                    </div>
+                  </div>
+                  <p class="pt-5">
+                    Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
+                    aute irure and dolor in reprehenderit.Consectetur adipisicing elit, sed do
+                    eiusmod tempor incididunt ut labore et dolore of magna aliqua. Ut enim ad minim
+                    veniam, made of owl the quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea dolor commodo consequat. Duis aute irure and dolor in
+                    reprehenderit.
+                  </p>
+                </div>
+              </div>
+              <div class="row tag-share-wrap mt-4 mb-5">
+                <div class="col-lg-8 col-12">
+                  <div class="tagcloud">
+                    <a href="">Class</a>
+                    <a href="">Sports</a>
+                    <a href="">Canteen</a>
+                  </div>
+                </div>
+                <div class="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
+                  <div class="social-share">
+                    <span class="me-3">Share:</span>
+                    <a href="#"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                  </div>
+                </div>
+              </div>
+              <div class="comments-area">
+                <div class="comments-heading">
+                  <h3>02 Comments</h3>
+                </div>
+                <div class="blog-single-comment d-flex gap-4 pt-4 pb-5">
+                  <div class="image">
+                    <img src="/picture/comment.png" alt="image" />
+                  </div>
+                  <div class="content">
+                    <div
+                      class="head d-flex flex-wrap gap-2 align-items-center justify-content-between"
+                    >
+                      <div class="con">
+                        <h5><a href="">Albert Flores</a></h5>
+                        <span>March 20, 2024 at 2:37 pm</span>
+                      </div>
+                      <div class="star">
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                      </div>
+                    </div>
+                    <p class="mt-30 mb-4">
+                      Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi
+                      architecto var sed efficitur turpis gilla sed sit amet finibus eros. Lorem
+                      Ipsum is simply dummy
+                    </p>
+                    <a href="" class="reply">Reply</a>
+                  </div>
+                </div>
+                <div class="blog-single-comment d-flex gap-4 pt-5 pb-5">
+                  <div class="image">
+                    <img src="/picture/comment-2.png" alt="image" />
+                  </div>
+                  <div class="content">
+                    <div
+                      class="head d-flex flex-wrap gap-2 align-items-center justify-content-between"
+                    >
+                      <div class="con">
+                        <h5><a href="">Alex Flores</a></h5>
+                        <span>March 20, 2024 at 2:37 pm</span>
+                      </div>
+                      <div class="star">
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                        <i class="fa-solid fa-star"></i>
+                      </div>
+                    </div>
+                    <p class="mt-30 mb-4">
+                      Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi
+                      architecto var sed efficitur turpis gilla sed sit amet finibus eros. Lorem
+                      Ipsum is simply dummy
+                    </p>
+                    <a href="" class="reply">Reply</a>
+                  </div>
+                </div>
+              </div>
+              <div class="comment-form-wrap pt-5">
+                <h3>Leave a comments</h3>
+                <form action="#" id="contact-form" method="POST">
+                  <div class="row g-4">
+                    <div class="col-lg-6">
+                      <div class="form-clt">
+                        <span>Your Name*</span>
+                        <input type="text" name="name" id="name" placeholder="Your Name" />
+                      </div>
+                    </div>
+                    <div class="col-lg-6">
+                      <div class="form-clt">
+                        <span>Your Email*</span>
+                        <input type="text" name="email" id="email2" placeholder="Your Email" />
+                      </div>
+                    </div>
+                    <div class="col-lg-12">
+                      <div class="form-clt">
+                        <span>Message*</span>
+                        <textarea
+                          name="message"
+                          id="message"
+                          placeholder="Write Message"
+                        ></textarea>
+                      </div>
+                    </div>
+                    <div class="col-lg-6">
+                      <button type="submit" class="theme-btn">
+                        post comment
+                        <i class="fa-solid fa-arrow-right-long"></i>
+                      </button>
+                    </div>
+                  </div>
                 </form>
+              </div>
             </div>
-        </div>
-    </div>
-    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Blog Details</h1>
-                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
+          </div>
+          <div class="col-12 col-lg-4">
+            <div class="main-sidebar">
+              <div class="single-sidebar-widget">
+                <div class="wid-title">
+                  <h3>Search</h3>
+                </div>
+                <div class="search-widget">
+                  <form action="#">
+                    <input type="text" placeholder="Search here" />
+                    <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
+                  </form>
+                </div>
+              </div>
+              <div class="single-sidebar-widget">
+                <div class="wid-title">
+                  <h3>Categories</h3>
+                </div>
+                <div class="news-widget-categories">
+                  <ul>
                     <li>
-                        <a href="p9wfc14694.html">
-                            Home
-                        </a>
+                      <a href="">Teachers</a>
+                      <span>(5)</span>
                     </li>
                     <li>
-                        <i class="fas fa-chevron-right"></i>
+                      <a href="">Indoor Games</a>
+                      <span>(3)</span>
+                    </li>
+                    <li class="active">
+                      <a href="">Education</a>
+                      <span>(6)</span>
                     </li>
                     <li>
-                        Blog Details
+                      <a href="">Canteen</a>
+                      <span>(2)</span>
                     </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <section class="news-details fix section-padding">
-        <div class="container">
-            <div class="news-details-area">
-                <div class="row g-5">
-                    <div class="col-12 col-lg-8">
-                        <div class="blog-post-details">
-                            <div class="single-blog-post">
-                                <div class="post-featured-thumb bg-cover"
-                                    style="background-image: url('/image/post-4.jpg');"></div>
-                                <div class="post-content">
-                                    <ul class="post-list d-flex align-items-center">
-                                        <li>
-                                            <i class="fa-regular fa-user"></i>
-                                            By Admin
-                                        </li>
-                                        <li>
-                                            <i class="fa-solid fa-calendar-days"></i>
-                                            18 Dec, 2024
-                                        </li>
-                                        <li>
-                                            <i class="fa-solid fa-tag"></i>
-                                            Education
-                                        </li>
-                                    </ul>
-                                    <h3>From without content
-                                        style without </h3>
-                                    <p class="mb-3">
-                                        Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                                        dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                        exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
-                                        aute irure and dolor in reprehenderit.
-                                    </p>
-                                    <p class="mb-3">
-                                        The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta
-                                        arcu In hac habitasse the is platea augue thelorem turpoi dictumst. In lacus
-                                        libero faucibus at malesuada sagittis placerat eros sed istincidunt augue ac
-                                        ante rutrum sed the is sodales augue consequat.
-                                    </p>
-                                    <p>
-                                        Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
-                                        convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
-                                        bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat
-                                        auctor.
-                                    </p>
-                                    <div class="hilight-text mt-4 mb-4">
-                                        <p>
-                                            Pellentesque sollicitudin congue dolor non aliquam. Morbi volutpat, nisi vel
-                                            ultricies <br> urnacondimentum, sapien neque lobortis tortor, quis efficitur
-                                            mi ipsum eu metus. Praesent eleifend <br> orci sit amet est vehicula.
-                                        </p>
-                                        <svg width="36" height="36" viewbox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <path
-                                                d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
-                                                stroke="#F39F5F"></path>
-                                            <path
-                                                d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
-                                                stroke="#F39F5F"></path>
-                                        </svg>
-                                    </div>
-                                    <p class="mt-4 mb-5">
-                                        Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam
-                                        in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula
-                                        consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis
-                                        imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu.
-                                        Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.
-                                        Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam
-                                        condimentum, vel euismod erat placerat. In iaculis arcu eros.
-                                    </p>
-                                    <div class="row g-4">
-                                        <div class="col-lg-6">
-                                            <div class="details-image">
-                                                <img src="/picture/post-5.jpg" alt="img">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-6">
-                                            <div class="details-image">
-                                                <img src="/picture/post-6.jpg" alt="img">
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <p class="pt-5">
-                                        Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                                        dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                        exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
-                                        aute irure and dolor in reprehenderit.Consectetur adipisicing elit, sed do
-                                        eiusmod tempor incididunt ut labore et dolore of magna aliqua. Ut enim ad minim
-                                        veniam, made of owl the quis nostrud exercitation ullamco laboris nisi ut
-                                        aliquip ex ea dolor commodo consequat. Duis aute irure and dolor in
-                                        reprehenderit.
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="row tag-share-wrap mt-4 mb-5">
-                                <div class="col-lg-8 col-12">
-                                    <div class="tagcloud">
-                                        <a href="">Class</a>
-                                        <a href="">Sports</a>
-                                        <a href="">Canteen</a>
-                                    </div>
-                                </div>
-                                <div class="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
-                                    <div class="social-share">
-                                        <span class="me-3">Share:</span>
-                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
-                                        <a href="#"><i class="fab fa-twitter"></i></a>
-                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="comments-area">
-                                <div class="comments-heading">
-                                    <h3>02 Comments</h3>
-                                </div>
-                                <div class="blog-single-comment d-flex gap-4 pt-4 pb-5">
-                                    <div class="image">
-                                        <img src="/picture/comment.png" alt="image">
-                                    </div>
-                                    <div class="content">
-                                        <div
-                                            class="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
-                                            <div class="con">
-                                                <h5><a href="">Albert Flores</a></h5>
-                                                <span>March 20, 2024 at 2:37 pm</span>
-                                            </div>
-                                            <div class="star">
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                            </div>
-                                        </div>
-                                        <p class="mt-30 mb-4">Neque porro est qui dolorem ipsum quia quaed inventor
-                                            veritatis et quasi
-                                            architecto var sed efficitur turpis gilla sed
-                                            sit amet finibus eros. Lorem Ipsum is simply dummy</p>
-                                        <a href="" class="reply">Reply</a>
-                                    </div>
-                                </div>
-                                <div class="blog-single-comment d-flex gap-4 pt-5 pb-5">
-                                    <div class="image">
-                                        <img src="/picture/comment-2.png" alt="image">
-                                    </div>
-                                    <div class="content">
-                                        <div
-                                            class="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
-                                            <div class="con">
-                                                <h5><a href="">Alex Flores</a></h5>
-                                                <span>March 20, 2024 at 2:37 pm</span>
-                                            </div>
-                                            <div class="star">
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                                <i class="fa-solid fa-star"></i>
-                                            </div>
-                                        </div>
-                                        <p class="mt-30 mb-4">Neque porro est qui dolorem ipsum quia quaed inventor
-                                            veritatis et quasi
-                                            architecto var sed efficitur turpis gilla sed
-                                            sit amet finibus eros. Lorem Ipsum is simply dummy</p>
-                                        <a href="" class="reply">Reply</a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="comment-form-wrap pt-5">
-                                <h3>Leave a comments</h3>
-                                <form action="#" id="contact-form" method="POST">
-                                    <div class="row g-4">
-                                        <div class="col-lg-6">
-                                            <div class="form-clt">
-                                                <span>Your Name*</span>
-                                                <input type="text" name="name" id="name" placeholder="Your Name">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-6">
-                                            <div class="form-clt">
-                                                <span>Your Email*</span>
-                                                <input type="text" name="email" id="email2" placeholder="Your Email">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-12">
-                                            <div class="form-clt">
-                                                <span>Message*</span>
-                                                <textarea name="message" id="message"
-                                                    placeholder="Write Message"></textarea>
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-6">
-                                            <button type="submit" class="theme-btn ">
-                                                post comment<i class="fa-solid fa-arrow-right-long"></i>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
+                    <li>
+                      <a href="">Classes</a>
+                      <span>(4)</span>
+                    </li>
+                    <li>
+                      <a href="">Examination</a>
+                      <span>(7)</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="single-sidebar-widget">
+                <div class="wid-title">
+                  <h3>Recent Post</h3>
+                </div>
+                <div class="recent-post-area">
+                  <div class="recent-items">
+                    <div class="recent-thumb">
+                      <img src="/picture/pp3.jpg" alt="img" />
                     </div>
-                    <div class="col-12 col-lg-4">
-                        <div class="main-sidebar">
-                            <div class="single-sidebar-widget">
-                                <div class="wid-title">
-                                    <h3>Search</h3>
-                                </div>
-                                <div class="search-widget">
-                                    <form action="#">
-                                        <input type="text" placeholder="Search here">
-                                        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
-                                    </form>
-                                </div>
-                            </div>
-                            <div class="single-sidebar-widget">
-                                <div class="wid-title">
-                                    <h3>Categories</h3>
-                                </div>
-                                <div class="news-widget-categories">
-                                    <ul>
-                                        <li><a href="">Teachers</a> <span>(5)</span></li>
-                                        <li><a href="">Indoor Games</a> <span>(3)</span></li>
-                                        <li class="active"><a href="">Education</a><span>(6)</span></li>
-                                        <li><a href="">Canteen</a> <span>(2)</span></li>
-                                        <li><a href="">Classes</a> <span>(4)</span></li>
-                                        <li><a href="">Examination</a> <span>(7)</span></li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div class="single-sidebar-widget">
-                                <div class="wid-title">
-                                    <h3>Recent Post</h3>
-                                </div>
-                                <div class="recent-post-area">
-                                    <div class="recent-items">
-                                        <div class="recent-thumb">
-                                            <img src="/picture/pp3.jpg" alt="img">
-                                        </div>
-                                        <div class="recent-content">
-                                            <ul>
-                                                <li>
-                                                    <i class="fa-solid fa-calendar-days"></i>
-                                                    18 Dec, 2024
-                                                </li>
-                                            </ul>
-                                            <h6>
-                                                <a href="">
-                                                    That Jerk Form Finance <br>
-                                                    Really Me
-                                                </a>
-                                            </h6>
-                                        </div>
-                                    </div>
-                                    <div class="recent-items">
-                                        <div class="recent-thumb">
-                                            <img src="/picture/pp4.jpg" alt="img">
-                                        </div>
-                                        <div class="recent-content">
-                                            <ul>
-                                                <li>
-                                                    <i class="fa-solid fa-calendar-days"></i>
-                                                    18 Dec, 2024
-                                                </li>
-                                            </ul>
-                                            <h6>
-                                                <a href="">
-                                                    How to keep Chidden Safe <br>
-                                                    Online In Simple
-                                                </a>
-                                            </h6>
-                                        </div>
-                                    </div>
-                                    <div class="recent-items">
-                                        <div class="recent-thumb">
-                                            <img src="/picture/pp5.jpg" alt="img">
-                                        </div>
-                                        <div class="recent-content">
-                                            <ul>
-                                                <li>
-                                                    <i class="fa-solid fa-calendar-days"></i>
-                                                    18 Dec, 2024
-                                                </li>
-                                            </ul>
-                                            <h6>
-                                                <a href="">
-                                                    Form Without Content <br>
-                                                    Style Without
-                                                </a>
-                                            </h6>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="single-sidebar-widget">
-                                <div class="wid-title">
-                                    <h3>Tags</h3>
-                                </div>
-                                <div class="news-widget-categories">
-                                    <div class="tagcloud">
-                                        <a href="news-standard.html">Time-Table</a>
-                                        <a href="">Children</a>
-                                        <a href="">Examination</a>
-                                        <a href="">Class</a>
-                                        <a href="">Sports</a>
-                                        <a href="">Canteen</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="recent-content">
+                      <ul>
+                        <li>
+                          <i class="fa-solid fa-calendar-days"></i>
+                          18 Dec, 2024
+                        </li>
+                      </ul>
+                      <h6>
+                        <a href="">
+                          That Jerk Form Finance
+                          <br />
+                          Really Me
+                        </a>
+                      </h6>
+                    </div>
+                  </div>
+                  <div class="recent-items">
+                    <div class="recent-thumb">
+                      <img src="/picture/pp4.jpg" alt="img" />
+                    </div>
+                    <div class="recent-content">
+                      <ul>
+                        <li>
+                          <i class="fa-solid fa-calendar-days"></i>
+                          18 Dec, 2024
+                        </li>
+                      </ul>
+                      <h6>
+                        <a href="">
+                          How to keep Chidden Safe
+                          <br />
+                          Online In Simple
+                        </a>
+                      </h6>
                     </div>
+                  </div>
+                  <div class="recent-items">
+                    <div class="recent-thumb">
+                      <img src="/picture/pp5.jpg" alt="img" />
+                    </div>
+                    <div class="recent-content">
+                      <ul>
+                        <li>
+                          <i class="fa-solid fa-calendar-days"></i>
+                          18 Dec, 2024
+                        </li>
+                      </ul>
+                      <h6>
+                        <a href="">
+                          Form Without Content
+                          <br />
+                          Style Without
+                        </a>
+                      </h6>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="single-sidebar-widget">
+                <div class="wid-title">
+                  <h3>Tags</h3>
                 </div>
+                <div class="news-widget-categories">
+                  <div class="tagcloud">
+                    <a href="news-standard.html">Time-Table</a>
+                    <a href="">Children</a>
+                    <a href="">Examination</a>
+                    <a href="">Class</a>
+                    <a href="">Sports</a>
+                    <a href="">Canteen</a>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -627,7 +664,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -648,7 +685,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -815,7 +852,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -841,4 +878,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/blog/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,301 +237,284 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Blog Grid</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>Blog Grid</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="news-section-3 fix section-padding">
+    <div class="container">
+      <div class="row g-4">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="news-card-items mt-0">
+            <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="parasuit-shape float-bob-y">
-            <img src="/picture/parasuit1.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="news-card-items mt-0">
+            <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="frame-shape">
-            <img src="/picture/frame3.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
+          <div class="news-card-items mt-0">
+            <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 class="bee-shape float-bob-x">
-            <img src="/picture/bee1.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="news-card-items mt-0">
+            <div class="news-image">
+              <img src="/picture/08.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">That jerk Form Finance 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="container">
-            <div class="page-heading">
-                <h1 class="wow fadeInUp" data-wow-delay=".3s">Blog Grid</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>
-                        Blog Grid
-                    </li>
-                </ul>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="news-card-items mt-0">
+            <div class="news-image">
+              <img src="/picture/09.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">How to Keep Children Safe Online In Simple Steps</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>
-    <section class="news-section-3 fix section-padding">
-        <div class="container">
-            <div class="row g-4">
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="news-card-items mt-0">
-                        <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 mt-0">
-                        <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 mt-0">
-                        <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 class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="news-card-items mt-0">
-                        <div class="news-image">
-                            <img src="/picture/08.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">
-                                    That jerk Form Finance
-                                    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=".5s">
-                    <div class="news-card-items mt-0">
-                        <div class="news-image">
-                            <img src="/picture/09.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">
-                                    How to Keep Children Safe Online In Simple Steps
-                                </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 mt-0">
-                        <div class="news-image">
-                            <img src="/picture/10.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">
-                                    Students Intelligence in Education Building Resilient
-                                </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 mt-0">
+            <div class="news-image">
+              <img src="/picture/10.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">
+                  Students Intelligence in Education Building Resilient
+                </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>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -557,7 +540,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -578,7 +561,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -745,7 +728,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -771,4 +754,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/event/carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,216 +237,239 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Event Carousel</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>
-                        Event Carousel
-                    </li>
-                </ul>
-            </div>
-        </div>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <div class="line-shape">
+      <img src="/picture/line1.png" alt="shape-img" />
     </div>
-    <section class="event-section-2 fix section-padding">
-        <div class="container">
-            <div class="swiper event-slider">
-                <div class="swiper-wrapper">
-                    <div class="swiper-slide">
-                        <div class="event-box-items mt-0 box-shadow style-bottom">
-                            <div class="event-image">
-                                <img src="/picture/013.jpg" alt="event-img">
-                                <div class="event-shape">
-                                    <img src="/picture/shape1.png" alt="shape-img">
-                                </div>
-                                <ul class="post-date">
-                                    <li>
-                                        <img src="/picture/calender.svg" alt="img" class="me-2">
-                                        Jan 16, 2024
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="event-content">
-                                <ul>
-                                    <li>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                            viewbox="0 0 16 16" fill="none">
-                                            <path
-                                                d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                                fill="#F39F5F"></path>
-                                            <path
-                                                d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                                fill="#F39F5F"></path>
-                                        </svg>
-                                        <span>6391 Elgin St. Celina, USA</span>
-                                    </li>
-                                </ul>
-                                <h3>
-                                    <a href="event-details.html">Last Day of School end of Year Picnic</a>
-                                </h3>
-                                <div class="event-author">
-                                    <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                            class="fa-solid fa-arrow-right-long"></i></a>
-                                    <div class="author-ratting">
-                                        <span>(10 Review)</span>
-                                        <div class="star">
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star color-1"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="swiper-slide">
-                        <div class="event-box-items mt-0 box-shadow style-bottom">
-                            <div class="event-image">
-                                <img src="/picture/023.jpg" alt="event-img">
-                                <div class="event-shape">
-                                    <img src="/picture/shape1.png" alt="shape-img">
-                                </div>
-                                <ul class="post-date">
-                                    <li>
-                                        <img src="/picture/calender.svg" alt="img" class="me-2">
-                                        Feb 20, 2024
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="event-content">
-                                <ul>
-                                    <li>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                            viewbox="0 0 16 16" fill="none">
-                                            <path
-                                                d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                                fill="#F39F5F"></path>
-                                            <path
-                                                d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                                fill="#F39F5F"></path>
-                                        </svg>
-                                        <span>6391 Elgin St. Celina, USA</span>
-                                    </li>
-                                </ul>
-                                <h3>
-                                    <a href="event-details.html">The complete web developer guideline 2024</a>
-                                </h3>
-                                <div class="event-author">
-                                    <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                            class="fa-solid fa-arrow-right-long"></i></a>
-                                    <div class="author-ratting">
-                                        <span>(10 Review)</span>
-                                        <div class="star">
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star color-1"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </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">Event Carousel</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>Event Carousel</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="event-section-2 fix section-padding">
+    <div class="container">
+      <div class="swiper event-slider">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="event-box-items mt-0 box-shadow style-bottom">
+              <div class="event-image">
+                <img src="/picture/013.jpg" alt="event-img" />
+                <div class="event-shape">
+                  <img src="/picture/shape1.png" alt="shape-img" />
+                </div>
+                <ul class="post-date">
+                  <li>
+                    <img src="/picture/calender.svg" alt="img" class="me-2" />
+                    Jan 16, 2024
+                  </li>
+                </ul>
+              </div>
+              <div class="event-content">
+                <ul>
+                  <li>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewbox="0 0 16 16"
+                      fill="none"
+                    >
+                      <path
+                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                        fill="#F39F5F"
+                      ></path>
+                      <path
+                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                        fill="#F39F5F"
+                      ></path>
+                    </svg>
+                    <span>6391 Elgin St. Celina, USA</span>
+                  </li>
+                </ul>
+                <h3>
+                  <a href="event-details.html">Last Day of School end of Year Picnic</a>
+                </h3>
+                <div class="event-author">
+                  <a href="event-details.html" class="theme-btn">
+                    Get Ticket
+                    <i class="fa-solid fa-arrow-right-long"></i>
+                  </a>
+                  <div class="author-ratting">
+                    <span>(10 Review)</span>
+                    <div class="star">
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star color-1"></i>
                     </div>
-                    <div class="swiper-slide">
-                        <div class="event-box-items mt-0 box-shadow style-bottom">
-                            <div class="event-image">
-                                <img src="/picture/033.jpg" alt="event-img">
-                                <div class="event-shape">
-                                    <img src="/picture/shape1.png" alt="shape-img">
-                                </div>
-                                <ul class="post-date">
-                                    <li>
-                                        <img src="/picture/calender.svg" alt="img" class="me-2">
-                                        Mar 26, 2024
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="event-content">
-                                <ul>
-                                    <li>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                            viewbox="0 0 16 16" fill="none">
-                                            <path
-                                                d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                                fill="#F39F5F"></path>
-                                            <path
-                                                d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                                fill="#F39F5F"></path>
-                                        </svg>
-                                        <span>6391 Elgin St. Celina, USA</span>
-                                    </li>
-                                </ul>
-                                <h3>
-                                    <a href="event-details.html">Gathering & welcome speech marketing strategy</a>
-                                </h3>
-                                <div class="event-author">
-                                    <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                            class="fa-solid fa-arrow-right-long"></i></a>
-                                    <div class="author-ratting">
-                                        <span>(10 Review)</span>
-                                        <div class="star">
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star"></i>
-                                            <i class="fas fa-star color-1"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="event-box-items mt-0 box-shadow style-bottom">
+              <div class="event-image">
+                <img src="/picture/023.jpg" alt="event-img" />
+                <div class="event-shape">
+                  <img src="/picture/shape1.png" alt="shape-img" />
+                </div>
+                <ul class="post-date">
+                  <li>
+                    <img src="/picture/calender.svg" alt="img" class="me-2" />
+                    Feb 20, 2024
+                  </li>
+                </ul>
+              </div>
+              <div class="event-content">
+                <ul>
+                  <li>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewbox="0 0 16 16"
+                      fill="none"
+                    >
+                      <path
+                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                        fill="#F39F5F"
+                      ></path>
+                      <path
+                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                        fill="#F39F5F"
+                      ></path>
+                    </svg>
+                    <span>6391 Elgin St. Celina, USA</span>
+                  </li>
+                </ul>
+                <h3>
+                  <a href="event-details.html">The complete web developer guideline 2024</a>
+                </h3>
+                <div class="event-author">
+                  <a href="event-details.html" class="theme-btn">
+                    Get Ticket
+                    <i class="fa-solid fa-arrow-right-long"></i>
+                  </a>
+                  <div class="author-ratting">
+                    <span>(10 Review)</span>
+                    <div class="star">
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star color-1"></i>
                     </div>
+                  </div>
                 </div>
-                <div class="swiper-dot text-center mb-55">
-                    <div class="dot"></div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="event-box-items mt-0 box-shadow style-bottom">
+              <div class="event-image">
+                <img src="/picture/033.jpg" alt="event-img" />
+                <div class="event-shape">
+                  <img src="/picture/shape1.png" alt="shape-img" />
                 </div>
+                <ul class="post-date">
+                  <li>
+                    <img src="/picture/calender.svg" alt="img" class="me-2" />
+                    Mar 26, 2024
+                  </li>
+                </ul>
+              </div>
+              <div class="event-content">
+                <ul>
+                  <li>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewbox="0 0 16 16"
+                      fill="none"
+                    >
+                      <path
+                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                        fill="#F39F5F"
+                      ></path>
+                      <path
+                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                        fill="#F39F5F"
+                      ></path>
+                    </svg>
+                    <span>6391 Elgin St. Celina, USA</span>
+                  </li>
+                </ul>
+                <h3>
+                  <a href="event-details.html">Gathering & welcome speech marketing strategy</a>
+                </h3>
+                <div class="event-author">
+                  <a href="event-details.html" class="theme-btn">
+                    Get Ticket
+                    <i class="fa-solid fa-arrow-right-long"></i>
+                  </a>
+                  <div class="author-ratting">
+                    <span>(10 Review)</span>
+                    <div class="star">
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star"></i>
+                      <i class="fas fa-star color-1"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
+        </div>
+        <div class="swiper-dot text-center mb-55">
+          <div class="dot"></div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -472,7 +495,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -493,7 +516,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -660,7 +683,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -686,4 +709,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/event/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,230 +237,231 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Event Details</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>
-                        Event Details
-                    </li>
-                </ul>
-            </div>
-        </div>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <div class="line-shape">
+      <img src="/picture/line1.png" alt="shape-img" />
     </div>
-    <section class="event-details-section fix section-padding">
-        <div class="container">
-            <div class="event-details-wrapper">
-                <div class="row g-5">
-                    <div class="col-lg-8">
-                        <div class="event-details-items">
-                            <div class="details-image">
-                                <img src="/picture/event-details-1.jpg" alt="img">
-                            </div>
-                            <div class="event-details-content">
-                                <div class="post-items">
-                                    <span class="post-date">
-                                        <i class="fa-regular fa-calendar-days"></i>
-                                        October 20, 2024
-                                    </span>
-                                    <span class="post-time">
-                                        <i class="fa-regular fa-calendar-days"></i>
-                                        October 20, 2024
-                                    </span>
-                                </div>
-                                <h2>Let’s spend summer together with your teachers</h2>
-                                <p class="mb-3">
-                                    Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
-                                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
-                                    aute irure and dolor in reprehenderit.
-                                </p>
-                                <p class="mb-4">
-                                    The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
-                                    In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus libero
-                                    faucibus at malesuada sagittis placerat eros sed istincidunt augue ac ante rutrum
-                                    sed the is sodales augue consequat.
-                                </p>
-                                <h2>Requirements for the event</h2>
-                                <p class="mb-4">
-                                    Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
-                                    convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
-                                    bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat auctor.
-                                </p>
-                                <div class="row g-4">
-                                    <div class="col-md-6">
-                                        <ul class="list">
-                                            <li>
-                                                <i class="fa-solid fa-check"></i>
-                                                Ut viverra bibendum lorem, at tempus nibh mattis
-                                            </li>
-                                            <li>
-                                                <i class="fa-solid fa-check"></i>
-                                                quis nostrud exercitation ullamco laboris nisi
-                                            </li>
-                                        </ul>
-                                    </div>
-                                    <div class="col-md-6">
-                                        <ul class="list">
-                                            <li>
-                                                <i class="fa-solid fa-check"></i>
-                                                Duis aute irure and dolor in reprehenderit.
-                                            </li>
-                                            <li>
-                                                <i class="fa-solid fa-check"></i>
-                                                ante rutrum sed the is sodales augue
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                                <div class="row g-4 mt-4">
-                                    <div class="col-md-6">
-                                        <div class="thumb">
-                                            <img src="/picture/event-details-2.jpg" alt="img">
-                                        </div>
-                                    </div>
-                                    <div class="col-md-6">
-                                        <div class="thumb">
-                                            <img src="/picture/event-details-3.jpg" alt="img">
-                                        </div>
-                                    </div>
-                                </div>
-                                <p class="mt-4">
-                                    Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
-                                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
-                                    aute irure and dolor in reprehenderit.
-                                </p>
-                            </div>
-                            <div class="about-author">
-                                <div class="about-button">
-                                    <a href="contact.html" class="theme-btn">
-                                        Register Yourself <i class="fa-solid fa-arrow-right-long"></i>
-                                    </a>
-                                </div>
-                                <div class="author-icon">
-                                    <div class="icon">
-                                        <i class="fa-solid fa-phone"></i>
-                                    </div>
-                                    <div class="content">
-                                        <span>Call Us Now</span>
-                                        <h5>
-                                            <a href="tel:+2085550112">+208-555-0112</a>
-                                        </h5>
-                                    </div>
-                                </div>
-                            </div>
-                        </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">Event Details</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>Event Details</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="event-details-section fix section-padding">
+    <div class="container">
+      <div class="event-details-wrapper">
+        <div class="row g-5">
+          <div class="col-lg-8">
+            <div class="event-details-items">
+              <div class="details-image">
+                <img src="/picture/event-details-1.jpg" alt="img" />
+              </div>
+              <div class="event-details-content">
+                <div class="post-items">
+                  <span class="post-date">
+                    <i class="fa-regular fa-calendar-days"></i>
+                    October 20, 2024
+                  </span>
+                  <span class="post-time">
+                    <i class="fa-regular fa-calendar-days"></i>
+                    October 20, 2024
+                  </span>
+                </div>
+                <h2>Let’s spend summer together with your teachers</h2>
+                <p class="mb-3">
+                  Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
+                  dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
+                  aute irure and dolor in reprehenderit.
+                </p>
+                <p class="mb-4">
+                  The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
+                  In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus
+                  libero faucibus at malesuada sagittis placerat eros sed istincidunt augue ac ante
+                  rutrum sed the is sodales augue consequat.
+                </p>
+                <h2>Requirements for the event</h2>
+                <p class="mb-4">
+                  Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
+                  convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
+                  bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat auctor.
+                </p>
+                <div class="row g-4">
+                  <div class="col-md-6">
+                    <ul class="list">
+                      <li>
+                        <i class="fa-solid fa-check"></i>
+                        Ut viverra bibendum lorem, at tempus nibh mattis
+                      </li>
+                      <li>
+                        <i class="fa-solid fa-check"></i>
+                        quis nostrud exercitation ullamco laboris nisi
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="col-md-6">
+                    <ul class="list">
+                      <li>
+                        <i class="fa-solid fa-check"></i>
+                        Duis aute irure and dolor in reprehenderit.
+                      </li>
+                      <li>
+                        <i class="fa-solid fa-check"></i>
+                        ante rutrum sed the is sodales augue
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="row g-4 mt-4">
+                  <div class="col-md-6">
+                    <div class="thumb">
+                      <img src="/picture/event-details-2.jpg" alt="img" />
                     </div>
-                    <div class="col-lg-4">
-                        <div class="details-list-area">
-                            <h3>Event Information:</h3>
-                            <ul class="details-list">
-                                <li>
-                                    <span>
-                                        <img src="/picture/012.svg" alt="img" class="me-2">
-                                        Start Date:
-                                    </span>
-                                    October 20, 2024
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/09.svg" alt="img" class="me-2">
-                                        Duration:
-                                    </span>
-                                    09:00am - 05:00pm
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/032.svg" alt="img" class="me-2">
-                                        Location:
-                                    </span>
-                                    6391 Elgin St. Celina, USA
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/042.svg" alt="img" class="me-2">
-                                        Phone:
-                                    </span>
-                                    319-555-1225
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/051.svg" alt="img" class="me-2">
-                                        Email:
-                                    </span>
-                                    Info@gmail.com
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/13.svg" alt="img" class="me-2">
-                                        Language
-                                    </span>
-                                    English
-                                </li>
-                            </ul>
-                            <a href="" class="theme-btn w-100">
-                                Get Tickets Now <i class="fa-solid fa-arrow-right-long"></i>
-                            </a>
-                            <div class="social-icon d-flex align-items-center">
-                                <span>Share: </span>
-                                <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 class="map-items">
-                            <iframe
-                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6678.7619084840835!2d144.9618311901502!3d-37.81450084255415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sbd!4v1641984054261!5m2!1sen!2sbd"
-                                style="border:0;" allowfullscreen="" loading="lazy"></iframe>
-                        </div>
+                  </div>
+                  <div class="col-md-6">
+                    <div class="thumb">
+                      <img src="/picture/event-details-3.jpg" alt="img" />
                     </div>
+                  </div>
+                </div>
+                <p class="mt-4">
+                  Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
+                  dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
+                  aute irure and dolor in reprehenderit.
+                </p>
+              </div>
+              <div class="about-author">
+                <div class="about-button">
+                  <a href="contact.html" class="theme-btn">
+                    Register Yourself
+                    <i class="fa-solid fa-arrow-right-long"></i>
+                  </a>
                 </div>
+                <div class="author-icon">
+                  <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 class="col-lg-4">
+            <div class="details-list-area">
+              <h3>Event Information:</h3>
+              <ul class="details-list">
+                <li>
+                  <span>
+                    <img src="/picture/012.svg" alt="img" class="me-2" />
+                    Start Date:
+                  </span>
+                  October 20, 2024
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/09.svg" alt="img" class="me-2" />
+                    Duration:
+                  </span>
+                  09:00am - 05:00pm
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/032.svg" alt="img" class="me-2" />
+                    Location:
+                  </span>
+                  6391 Elgin St. Celina, USA
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/042.svg" alt="img" class="me-2" />
+                    Phone:
+                  </span>
+                  319-555-1225
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/051.svg" alt="img" class="me-2" />
+                    Email:
+                  </span>
+                  Info@gmail.com
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/13.svg" alt="img" class="me-2" />
+                    Language
+                  </span>
+                  English
+                </li>
+              </ul>
+              <a href="" class="theme-btn w-100">
+                Get Tickets Now
+                <i class="fa-solid fa-arrow-right-long"></i>
+              </a>
+              <div class="social-icon d-flex align-items-center">
+                <span>Share:</span>
+                <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 class="map-items">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6678.7619084840835!2d144.9618311901502!3d-37.81450084255415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sbd!4v1641984054261!5m2!1sen!2sbd"
+                style="border: 0"
+                allowfullscreen=""
+                loading="lazy"
+              ></iframe>
+            </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -486,7 +487,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -507,7 +508,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -674,7 +675,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -700,4 +701,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/event/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,358 +237,408 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Event Grid</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>
-                        Event Grid
-                    </li>
-                </ul>
-            </div>
-        </div>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <div class="line-shape">
+      <img src="/picture/line1.png" alt="shape-img" />
     </div>
-    <section class="event-section fix section-padding">
-        <div class="container">
-            <div class="row g-4">
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/013.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Jan 16, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">Last Day of School end of Year Picnic</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </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">Event Grid</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>Event Grid</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="event-section fix section-padding">
+    <div class="container">
+      <div class="row g-4">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/013.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Jan 16, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">Last Day of School end of Year Picnic</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/023.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Feb 20, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">The complete web developer guideline 2024</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/023.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Feb 20, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">The complete web developer guideline 2024</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/033.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Mar 26, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">Gathering & welcome speech marketing strategy</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/033.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Mar 26, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">Gathering & welcome speech marketing strategy</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/043.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Mar 10, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">How to prepare your child for preschool</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/043.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Mar 10, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">How to prepare your child for preschool</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/052.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Oct 28, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">Last Day of School end of Year Picnic</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/052.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Oct 28, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">Last Day of School end of Year Picnic</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
-                    <div class="event-box-items mt-0 box-shadow">
-                        <div class="event-image">
-                            <img src="/picture/062.jpg" alt="event-img">
-                            <div class="event-shape">
-                                <img src="/picture/shape1.png" alt="shape-img">
-                            </div>
-                            <ul class="post-date">
-                                <li>
-                                    <img src="/picture/calender.svg" alt="img" class="me-2">
-                                    Jun 26, 2024
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="event-content">
-                            <ul>
-                                <li>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16"
-                                        fill="none">
-                                        <path
-                                            d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
-                                            fill="#F39F5F"></path>
-                                        <path
-                                            d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
-                                            fill="#F39F5F"></path>
-                                    </svg>
-                                    <span>6391 Elgin St. Celina, USA</span>
-                                </li>
-                            </ul>
-                            <h3>
-                                <a href="event-details.html">Which toys are best for preschool kids in</a>
-                            </h3>
-                            <div class="event-author">
-                                <a href="event-details.html" class="theme-btn">Get Ticket <i
-                                        class="fa-solid fa-arrow-right-long"></i></a>
-                                <div class="author-ratting">
-                                    <span>(10 Review)</span>
-                                    <div class="star">
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star"></i>
-                                        <i class="fas fa-star color-1"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
+          <div class="event-box-items mt-0 box-shadow">
+            <div class="event-image">
+              <img src="/picture/062.jpg" alt="event-img" />
+              <div class="event-shape">
+                <img src="/picture/shape1.png" alt="shape-img" />
+              </div>
+              <ul class="post-date">
+                <li>
+                  <img src="/picture/calender.svg" alt="img" class="me-2" />
+                  Jun 26, 2024
+                </li>
+              </ul>
+            </div>
+            <div class="event-content">
+              <ul>
+                <li>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewbox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
+                      fill="#F39F5F"
+                    ></path>
+                    <path
+                      d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
+                      fill="#F39F5F"
+                    ></path>
+                  </svg>
+                  <span>6391 Elgin St. Celina, USA</span>
+                </li>
+              </ul>
+              <h3>
+                <a href="event-details.html">Which toys are best for preschool kids in</a>
+              </h3>
+              <div class="event-author">
+                <a href="event-details.html" class="theme-btn">
+                  Get Ticket
+                  <i class="fa-solid fa-arrow-right-long"></i>
+                </a>
+                <div class="author-ratting">
+                  <span>(10 Review)</span>
+                  <div class="star">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star color-1"></i>
+                  </div>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -614,7 +664,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -635,7 +685,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -802,7 +852,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -828,4 +878,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/index/index.client.vue

@@ -136,7 +136,7 @@ const bestList = ref([
                   <div class="icon"><i class="fa-solid fa-phone"></i></div>
                   <div class="content">
                     <span>Call Us Now</span>
-                    <h5><a href="tel:+2085550112">+208-555-0112</a></h5>
+                    <h5><a href="tel:18589716552">18589716552</a></h5>
                   </div>
                 </div>
               </div>
@@ -172,203 +172,10 @@ const bestList = ref([
   </section>
   <HomeIndexWorkWrapper />
   <HomeIndexActivitiesWrapper />
-  <section class="testimonial-section fix section-padding">
-    <div class="tree-shape float-bob-y"><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 text-center">
-        <span class="wow fadeInUp">Recommendation</span>
-        <h2 class="wow fadeInUp w-50 m-auto" data-wow-delay=".3s">
-          Parents' feedback on Happy Chin
-        </h2>
-      </div>
-      <div class="swiper testimonial-slider">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide">
-            <div class="testimonial-items">
-              <div class="icon">
-                <img src="/picture/quote.png" alt="img" />
-              </div>
-              <div class="testimonial-bg"></div>
-              <div class="testimonial-content">
-                <p>
-                  Corquent per conubia nostra, per inceptos himenaeos. Suspendisse gravida vitae
-                  nisi Class aptent taciti sociosqu ad litora
-                </p>
-                <h6>Esther Howard</h6>
-              </div>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="testimonial-items style-2">
-              <div class="icon">
-                <img src="/picture/quote-2.png" alt="img" />
-              </div>
-              <div class="testimonial-bg bg-2"></div>
-              <div class="testimonial-content">
-                <p>
-                  Corquent per conubia nostra, per inceptos himenaeos. Suspendisse gravida vitae
-                  nisi Class aptent taciti sociosqu ad litora
-                </p>
-                <h6>Wade Warren</h6>
-              </div>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="testimonial-items style-3">
-              <div class="icon">
-                <img src="/picture/quote-3.png" alt="img" />
-              </div>
-              <div class="testimonial-bg bg-3"></div>
-              <div class="testimonial-content">
-                <p>
-                  Corquent per conubia nostra, per inceptos himenaeos. Suspendisse gravida vitae
-                  nisi Class aptent taciti sociosqu ad litora
-                </p>
-                <h6>Jenny Wilson</h6>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="swiper-dot text-center pt-5">
-          <div class="dot"></div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="team-section fix section-bg section-padding">
-    <div class="top-shape">
-      <img class="bgCover" src="/picture/section-top-shape.svg" alt="shape-img" />
-    </div>
-    <div class="love-shape float-bob-x"><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 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"><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>
+  <HomeIndexRecommendation />
+  <HomeIndexTeachers />
 
-  <section
-    class="cta-section fix section-padding bg-cover"
-    style="background-image: url('/image/cta-bg.jpg')"
-  >
+  <section style="background-color: #71a5b2" class="cta-section fix section-padding bg-cover">
     <div class="plane-shape">
       <img src="/picture/plane.png" alt="img" />
     </div>
@@ -382,16 +189,18 @@ const bestList = ref([
             <div class="section-title">
               <span class="text-white wow fadeInUp">Get your quality</span>
               <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">
-                Come and be Part of
-                <br />
-                Our Latest Session
+                Come and be a part of it Our newest member
               </h2>
             </div>
             <div class="cta-button mt-4 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
-              <a href="contact.html" class="theme-btn bg-white">
+              <NuxtLink to="/contact" class="theme-btn bg-white">
+                Apply Now
+                <!-- <i class="fa-solid fa-arrow-right-long"></i> -->
+              </NuxtLink>
+              <!-- <a href="contact.html" class="theme-btn bg-white">
                 Apply Now
                 <i class="fa-solid fa-arrow-right-long"></i>
-              </a>
+              </a> -->
             </div>
           </div>
           <div class="col-lg-5 wow fadeInUp" data-wow-delay=".4s">

pages/program/carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,153 +237,170 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Programs Carousel</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>
-                        Programs Carousel
-                    </li>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Programs Carousel</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>Programs Carousel</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="clases-section section-padding">
+    <div class="container">
+      <div class="swiper clases-slider">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="clases-items mt-0">
+              <div class="clases-bg style-2"></div>
+              <div class="clases-image">
+                <img src="/picture/013.png" alt="img" />
+              </div>
+              <div class="clases-content">
+                <h4>
+                  <a href="program-details.html">English Classes</a>
+                </h4>
+                <p>
+                  Nulla a auctor leo. Vestibulum viverra mattis arcu
+                  <br />
+                  nec viverra. Vivamus
+                </p>
+                <ul class="clases-schedule">
+                  <li>
+                    <span>age</span>
+                    <br />
+                    3-5 years
+                  </li>
+                  <li>
+                    <span>weekly</span>
+                    <br />
+                    5 Days
+                  </li>
+                  <li>
+                    <span>time</span>
+                    <br />
+                    4.30 Hors
+                  </li>
                 </ul>
+              </div>
             </div>
-        </div>
-    </div>
-    <section class="clases-section section-padding">
-        <div class="container">
-            <div class="swiper clases-slider">
-                <div class="swiper-wrapper">
-                    <div class="swiper-slide">
-                        <div class="clases-items mt-0">
-                            <div class="clases-bg style-2"></div>
-                            <div class="clases-image">
-                                <img src="/picture/013.png" alt="img">
-                            </div>
-                            <div class="clases-content">
-                                <h4>
-                                    <a href="program-details.html">English Classes</a>
-                                </h4>
-                                <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                                <ul class="clases-schedule">
-                                    <li>
-                                        <span>age</span> <br>
-                                        3-5 years
-                                    </li>
-                                    <li>
-                                        <span>weekly</span> <br>
-                                        5 Days
-                                    </li>
-                                    <li>
-                                        <span>time</span> <br>
-                                        4.30 Hors
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="swiper-slide">
-                        <div class="clases-items mt-0">
-                            <div class="clases-bg style-2"></div>
-                            <div class="clases-image">
-                                <img src="/picture/023.png" alt="img">
-                            </div>
-                            <div class="clases-content">
-                                <h4>
-                                    <a href="program-details.html">Tutoring Individual</a>
-                                </h4>
-                                <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                                <ul class="clases-schedule">
-                                    <li>
-                                        <span>age</span> <br>
-                                        3-5 years
-                                    </li>
-                                    <li>
-                                        <span>weekly</span> <br>
-                                        5 Days
-                                    </li>
-                                    <li>
-                                        <span>time</span> <br>
-                                        4.30 Hors
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="swiper-slide">
-                        <div class="clases-items mt-0">
-                            <div class="clases-bg style-2"></div>
-                            <div class="clases-image">
-                                <img src="/picture/031.png" alt="img">
-                            </div>
-                            <div class="clases-content">
-                                <h4>
-                                    <a href="program-details.html">Tutoring Online</a>
-                                </h4>
-                                <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                                <ul class="clases-schedule">
-                                    <li>
-                                        <span>age</span> <br>
-                                        3-5 years
-                                    </li>
-                                    <li>
-                                        <span>weekly</span> <br>
-                                        5 Days
-                                    </li>
-                                    <li>
-                                        <span>time</span> <br>
-                                        4.30 Hors
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="swiper-dot text-center pt-5">
-                    <div class="dot"></div>
-                </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="clases-items mt-0">
+              <div class="clases-bg style-2"></div>
+              <div class="clases-image">
+                <img src="/picture/023.png" alt="img" />
+              </div>
+              <div class="clases-content">
+                <h4>
+                  <a href="program-details.html">Tutoring Individual</a>
+                </h4>
+                <p>
+                  Nulla a auctor leo. Vestibulum viverra mattis arcu
+                  <br />
+                  nec viverra. Vivamus
+                </p>
+                <ul class="clases-schedule">
+                  <li>
+                    <span>age</span>
+                    <br />
+                    3-5 years
+                  </li>
+                  <li>
+                    <span>weekly</span>
+                    <br />
+                    5 Days
+                  </li>
+                  <li>
+                    <span>time</span>
+                    <br />
+                    4.30 Hors
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="clases-items mt-0">
+              <div class="clases-bg style-2"></div>
+              <div class="clases-image">
+                <img src="/picture/031.png" alt="img" />
+              </div>
+              <div class="clases-content">
+                <h4>
+                  <a href="program-details.html">Tutoring Online</a>
+                </h4>
+                <p>
+                  Nulla a auctor leo. Vestibulum viverra mattis arcu
+                  <br />
+                  nec viverra. Vivamus
+                </p>
+                <ul class="clases-schedule">
+                  <li>
+                    <span>age</span>
+                    <br />
+                    3-5 years
+                  </li>
+                  <li>
+                    <span>weekly</span>
+                    <br />
+                    5 Days
+                  </li>
+                  <li>
+                    <span>time</span>
+                    <br />
+                    4.30 Hors
+                  </li>
+                </ul>
+              </div>
             </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+        <div class="swiper-dot text-center pt-5">
+          <div class="dot"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -409,7 +426,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -430,7 +447,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -597,7 +614,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -623,4 +640,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/program/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -236,229 +236,222 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Programs Details</h1>
-                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
-                    <li>
-                        <a href="p9wfc14694.html">
-                            Home
-                        </a>
-                    </li>
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Programs Details</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>Programs Details</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="program-details-section fix section-padding">
+    <div class="container">
+      <div class="program-details-wrapper">
+        <div class="row g-5">
+          <div class="col-lg-8">
+            <div class="program-details-items">
+              <div class="details-image">
+                <img src="/picture/details-1.jpg" alt="img" />
+              </div>
+              <div class="details-content">
+                <div class="post">
+                  <span>Kindergarten</span>
+                </div>
+                <h2 class="mb-0">Drawing Classes</h2>
+                <div class="details-author-area">
+                  <div class="author-items">
+                    <img src="/picture/author2.png" alt="img" />
+                    <p>Savannah Nguyen</p>
+                  </div>
+                  <ul class="class-list">
                     <li>
-                        <i class="fas fa-chevron-right"></i>
+                      <i class="fa-regular fa-circle-play me-2"></i>
+                      30 Classes
                     </li>
                     <li>
-                        Programs Details
+                      <i class="fas fa-star me-2"></i>
+                      3.4 (36 Review)
                     </li>
+                  </ul>
+                </div>
+                <h2>Descriptions</h2>
+                <p class="mb-3">
+                  Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
+                  dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
+                  aute irure and dolor in reprehenderit.
+                </p>
+                <p class="mb-4">
+                  The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
+                  In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus
+                  libero faucibus at malesuada sagittis placerat eros sed istincidunt augue ac ante
+                  rutrum sed the is sodales augue consequat.
+                </p>
+                <h2>Requirements for The Classes</h2>
+                <p>
+                  Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
+                  convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
+                  bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat auctor.
+                </p>
+                <ul class="list-items">
+                  <li>
+                    <i class="fa-solid fa-check"></i>
+                    Ut viverra bibendum lorem, at tempus nibh mattis
+                  </li>
+                  <li>
+                    <i class="fa-solid fa-check"></i>
+                    quis nostrud exercitation ullamco laboris nisi
+                  </li>
+                  <li>
+                    <i class="fa-solid fa-check"></i>
+                    Duis aute irure and dolor in reprehenderit.
+                  </li>
+                  <li>
+                    <i class="fa-solid fa-check"></i>
+                    ante rutrum sed the is sodales augue consequat.
+                  </li>
                 </ul>
+              </div>
             </div>
-        </div>
-    </div>
-    <section class="program-details-section fix section-padding">
-        <div class="container">
-            <div class="program-details-wrapper">
-                <div class="row g-5">
-                    <div class="col-lg-8">
-                        <div class="program-details-items">
-                            <div class="details-image">
-                                <img src="/picture/details-1.jpg" alt="img">
-                            </div>
-                            <div class="details-content">
-                                <div class="post">
-                                    <span>Kindergarten</span>
-                                </div>
-                                <h2 class="mb-0">Drawing Classes</h2>
-                                <div class="details-author-area">
-                                    <div class="author-items">
-                                        <img src="/picture/author2.png" alt="img">
-                                        <p>Savannah Nguyen</p>
-                                    </div>
-                                    <ul class="class-list">
-                                        <li>
-                                            <i class="fa-regular fa-circle-play me-2"></i>
-                                            30 Classes
-                                        </li>
-                                        <li>
-                                            <i class="fas fa-star me-2"></i>
-                                            3.4 (36 Review)
-                                        </li>
-                                    </ul>
-                                </div>
-                                <h2>Descriptions</h2>
-                                <p class="mb-3">
-                                    Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
-                                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea dolor commodo consequat. Duis
-                                    aute irure and dolor in reprehenderit.
-                                </p>
-                                <p class="mb-4">
-                                    The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
-                                    In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus libero
-                                    faucibus at malesuada sagittis placerat eros sed istincidunt augue ac ante rutrum
-                                    sed the is sodales augue consequat.
-                                </p>
-                                <h2>Requirements for The Classes</h2>
-                                <p>
-                                    Nulla facilisi. Vestibulum tristique sem in eros eleifend imperdiet. Donec quis
-                                    convallis neque. In id lacus pulvinar lacus, eget vulputate lectus. Ut viverra
-                                    bibendum lorem, at tempus nibh mattis in. Sed a massa eget lacus consequat auctor.
-                                </p>
-                                <ul class="list-items">
-                                    <li>
-                                        <i class="fa-solid fa-check"></i>
-                                        Ut viverra bibendum lorem, at tempus nibh mattis
-                                    </li>
-                                    <li>
-                                        <i class="fa-solid fa-check"></i>
-                                        quis nostrud exercitation ullamco laboris nisi
-                                    </li>
-                                    <li>
-                                        <i class="fa-solid fa-check"></i>
-                                        Duis aute irure and dolor in reprehenderit.
-                                    </li>
-                                    <li>
-                                        <i class="fa-solid fa-check"></i>
-                                        ante rutrum sed the is sodales augue consequat.
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-4">
-                        <div class="details-list-area">
-                            <h3>Classes includes:</h3>
-                            <ul class="details-list">
-                                <li>
-                                    <span>
-                                        <img src="/picture/08.svg" alt="img" class="me-2">
-                                        Age
-                                    </span>
-                                    3-5 year
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/09.svg" alt="img" class="me-2">
-                                        Duration:
-                                    </span>
-                                    9:00-11:00
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/10.svg" alt="img" class="me-2">
-                                        Lessons:
-                                    </span>
-                                    15
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/11.svg" alt="img" class="me-2">
-                                        Students:
-                                    </span>
-                                    50
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/14.svg" alt="img" class="me-2">
-                                        Certifications:
-                                    </span>
-                                    Yes
-                                </li>
-                                <li>
-                                    <span>
-                                        <img src="/picture/13.svg" alt="img" class="me-2">
-                                        Language
-                                    </span>
-                                    English
-                                </li>
-                            </ul>
-                            <a href="" class="theme-btn w-100 border-style mb-3">
-                                This course Free $49.00
-                            </a>
-                            <a href="" class="theme-btn w-100">
-                                Enroll Your Kid <i class="fa-solid fa-arrow-right-long"></i>
-                            </a>
-                            <div class="social-icon d-flex align-items-center">
-                                <span>Share: </span>
-                                <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 class="col-lg-12">
-                        <div class="program-author-items">
-                            <div class="thumb">
-                                <img src="/picture/p-author.jpg" alt="img">
-                            </div>
-                            <div class="content">
-                                <h2>Savannah Nguyen</h2>
-                                <span>Children Diet</span>
-                                <p>
-                                    Adipiscing elit. Mauris viverra nisl quis mollis laoreet. Ut eget lacus a felis
-                                    accumsan pharetra in dignissim enim. In amet odio mollis urna aliquet volutpat. Sed
-                                    bibendum nisl vehicula imperdiet imperdiet, augue massa fringilla.
-                                </p>
-                                <ul>
-                                    <li>
-                                        Experience: 10 Years
-                                    </li>
-                                    <li>
-                                        <i class="fas fa-user"></i>
-                                        188 Students
-                                    </li>
-                                    <li>
-                                        <i class="fa-solid fa-star color-star"></i>
-                                        454 (36 Review)
-                                    </li>
-                                </ul>
-                                <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>
+          <div class="col-lg-4">
+            <div class="details-list-area">
+              <h3>Classes includes:</h3>
+              <ul class="details-list">
+                <li>
+                  <span>
+                    <img src="/picture/08.svg" alt="img" class="me-2" />
+                    Age
+                  </span>
+                  3-5 year
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/09.svg" alt="img" class="me-2" />
+                    Duration:
+                  </span>
+                  9:00-11:00
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/10.svg" alt="img" class="me-2" />
+                    Lessons:
+                  </span>
+                  15
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/11.svg" alt="img" class="me-2" />
+                    Students:
+                  </span>
+                  50
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/14.svg" alt="img" class="me-2" />
+                    Certifications:
+                  </span>
+                  Yes
+                </li>
+                <li>
+                  <span>
+                    <img src="/picture/13.svg" alt="img" class="me-2" />
+                    Language
+                  </span>
+                  English
+                </li>
+              </ul>
+              <a href="" class="theme-btn w-100 border-style mb-3">This course Free $49.00</a>
+              <a href="" class="theme-btn w-100">
+                Enroll Your Kid
+                <i class="fa-solid fa-arrow-right-long"></i>
+              </a>
+              <div class="social-icon d-flex align-items-center">
+                <span>Share:</span>
+                <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 class="col-lg-12">
+            <div class="program-author-items">
+              <div class="thumb">
+                <img src="/picture/p-author.jpg" alt="img" />
+              </div>
+              <div class="content">
+                <h2>Savannah Nguyen</h2>
+                <span>Children Diet</span>
+                <p>
+                  Adipiscing elit. Mauris viverra nisl quis mollis laoreet. Ut eget lacus a felis
+                  accumsan pharetra in dignissim enim. In amet odio mollis urna aliquet volutpat.
+                  Sed bibendum nisl vehicula imperdiet imperdiet, augue massa fringilla.
+                </p>
+                <ul>
+                  <li>Experience: 10 Years</li>
+                  <li>
+                    <i class="fas fa-user"></i>
+                    188 Students
+                  </li>
+                  <li>
+                    <i class="fa-solid fa-star color-star"></i>
+                    454 (36 Review)
+                  </li>
+                </ul>
+                <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>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -484,7 +477,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -505,7 +498,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -672,7 +665,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -698,4 +691,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/program/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,232 +237,270 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Programs Grid</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>Programs Grid</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="clases-section section-padding">
+    <div class="container">
+      <div class="row g-4">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/013.png" alt="img" />
+            </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">English Classes</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-        <div class="parasuit-shape float-bob-y">
-            <img src="/picture/parasuit1.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/023.png" alt="img" />
+            </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">Tutoring Individual</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-        <div class="frame-shape">
-            <img src="/picture/frame3.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/031.png" alt="img" />
+            </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">Tutoring Online</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-        <div class="bee-shape float-bob-x">
-            <img src="/picture/bee1.png" alt="shape-img">
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/042.png" alt="img" />
+            </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">Art and Craft Classes</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-        <div class="container">
-            <div class="page-heading">
-                <h1 class="wow fadeInUp" data-wow-delay=".3s">Programs Grid</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>
-                        Programs Grid
-                    </li>
-                </ul>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/052.png" alt="img" />
+            </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">Imagination Classes</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
             </div>
+          </div>
         </div>
-    </div>
-    <section class="clases-section section-padding">
-        <div class="container">
-            <div class="row g-4">
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/013.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">English Classes</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/023.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">Tutoring Individual</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/031.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">Tutoring Online</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/042.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">Art and Craft Classes</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/052.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">Imagination Classes</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
-                    <div class="clases-items mt-0">
-                        <div class="clases-bg style-2"></div>
-                        <div class="clases-image">
-                            <img src="/picture/062.png" alt="img">
-                        </div>
-                        <div class="clases-content">
-                            <h4>
-                                <a href="program-details.html">Wizards of Chess</a>
-                            </h4>
-                            <p>Nulla a auctor leo. Vestibulum viverra mattis arcu <br> nec viverra. Vivamus </p>
-                            <ul class="clases-schedule">
-                                <li>
-                                    <span>age</span> <br>
-                                    3-5 years
-                                </li>
-                                <li>
-                                    <span>weekly</span> <br>
-                                    5 Days
-                                </li>
-                                <li>
-                                    <span>time</span> <br>
-                                    4.30 Hors
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
+        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
+          <div class="clases-items mt-0">
+            <div class="clases-bg style-2"></div>
+            <div class="clases-image">
+              <img src="/picture/062.png" alt="img" />
             </div>
+            <div class="clases-content">
+              <h4>
+                <a href="program-details.html">Wizards of Chess</a>
+              </h4>
+              <p>
+                Nulla a auctor leo. Vestibulum viverra mattis arcu
+                <br />
+                nec viverra. Vivamus
+              </p>
+              <ul class="clases-schedule">
+                <li>
+                  <span>age</span>
+                  <br />
+                  3-5 years
+                </li>
+                <li>
+                  <span>weekly</span>
+                  <br />
+                  5 Days
+                </li>
+                <li>
+                  <span>time</span>
+                  <br />
+                  4.30 Hors
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -488,7 +526,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -509,7 +547,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -676,7 +714,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -702,4 +740,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/team/carousel.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,165 +237,185 @@
             </div>
         </div>
     </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 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 class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <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">Teacher Carousel</h1>
-                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
+  </div>
+  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png')">
+    <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">Teacher Carousel</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>Teacher Carousel</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="team-section-4 fix section-padding mb-1">
+    <div class="container">
+      <div class="swiper team-slider">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="team-items mt-0">
+              <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="p9wfc14694.html">
-                            Home
-                        </a>
+                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                     </li>
                     <li>
-                        <i class="fas fa-chevron-right"></i>
+                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                     </li>
                     <li>
-                        Teacher Carousel
+                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                     </li>
-                </ul>
+                  </ul>
+                </div>
+              </div>
+              <div class="team-content">
+                <h3>
+                  <a href="team-details.html">Brooklyn Simmons</a>
+                </h3>
+                <p>Instructors</p>
+              </div>
             </div>
-        </div>
-    </div>
-    <section class="team-section-4 fix section-padding mb-1">
-        <div class="container">
-            <div class="swiper team-slider">
-                <div class="swiper-wrapper">
-                    <div class="swiper-slide">
-                        <div class="team-items mt-0">
-                            <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 mt-0">
-                            <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 mt-0">
-                            <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 mt-0">
-                            <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 class="swiper-slide">
+            <div class="team-items mt-0">
+              <div class="team-image">
+                <div class="shape-img">
+                  <img src="/picture/team-shape.png" alt="img" />
                 </div>
-                <div class="swiper-dot text-center pt-5">
-                    <div class="dot"></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 mt-0">
+              <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 mt-0">
+              <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>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+        <div class="swiper-dot text-center pt-5">
+          <div class="dot"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -421,7 +441,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -442,7 +462,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -609,7 +629,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -635,4 +655,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/team/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,274 +237,280 @@
             </div>
         </div>
     </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 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.png')">
+    <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">Teacher Details</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>Teacher Details</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="team-details-section fix section-padding pb-0">
+    <div class="container">
+      <div class="team-details-wrapper">
+        <div class="team-author-items">
+          <div class="thumb">
+            <img src="/picture/p-author.jpg" alt="img" />
+          </div>
+          <div class="content">
+            <h2>Savannah Nguyen</h2>
+            <span>Children Diet</span>
+            <p>
+              Adipiscing elit. Mauris viverra nisl quis mollis laoreet. Ut eget lacus a felis
+              accumsan pharetra in dignissim enim. In amet odio mollis urna aliquet volutpat. Sed
+              bibendum nisl vehicula imperdiet imperdiet, augue massa fringilla.
+            </p>
+            <ul>
+              <li>Experience: 10 Years</li>
+              <li>
+                <i class="fas fa-user"></i>
+                188 Students
+              </li>
+              <li>
+                <i class="fa-solid fa-star color-star"></i>
+                454 (36 Review)
+              </li>
+            </ul>
+            <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 class="details-info-items">
+          <div class="row g-5 align-items-center">
+            <div class="col-lg-6">
+              <div class="info-content">
+                <h2>Professional Info</h2>
+                <p class="mb-3">
+                  Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
+                  dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip
+                </p>
+                <p>
+                  The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
+                  In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus
+                  libero faucibus
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-6">
+              <div class="progress-area">
+                <div class="progress-wrap">
+                  <div class="pro-items">
+                    <div class="pro-head">
+                      <h6 class="title">Creativity</h6>
+                      <span class="point">90%</span>
+                    </div>
+                    <div class="progress">
+                      <div class="progress-value"></div>
+                    </div>
+                  </div>
+                  <div class="pro-items">
+                    <div class="pro-head">
+                      <h6 class="title">Time Management</h6>
+                      <span class="point">70%</span>
                     </div>
-                </form>
+                    <div class="progress">
+                      <div class="progress-value style-two"></div>
+                    </div>
+                  </div>
+                  <div class="pro-items">
+                    <div class="pro-head">
+                      <h6 class="title">Art and Carft</h6>
+                      <span class="point">55%</span>
+                    </div>
+                    <div class="progress">
+                      <div class="progress-value style-three"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
-    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <div class="line-shape">
-            <img src="/picture/line1.png" alt="shape-img">
+  </section>
+  <section class="team-section-4 fix section-padding pt-80">
+    <div class="container">
+      <div class="section-title-area">
+        <div class="section-title">
+          <h2 class="fz-40 wow fadeInUp" data-wow-delay=".3s">Related Teacher</h2>
         </div>
-        <div class="plane-shape float-bob-y">
-            <img src="/picture/plane2.png" alt="shape-img">
+        <div class="array-button wow fadeInUp" data-wow-delay=".5s">
+          <button class="array-prev border-array-style"><i class="fal fa-arrow-left"></i></button>
+          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
         </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">Teacher Details</h1>
-                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
+      </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="p9wfc14694.html">
-                            Home
-                        </a>
+                      <a href="#"><i class="fab fa-facebook-f"></i></a>
                     </li>
                     <li>
-                        <i class="fas fa-chevron-right"></i>
+                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
                     </li>
                     <li>
-                        Teacher Details
+                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
                     </li>
-                </ul>
+                  </ul>
+                </div>
+              </div>
+              <div class="team-content">
+                <h3>
+                  <a href="">Brooklyn Simmons</a>
+                </h3>
+                <p>Instructors</p>
+              </div>
             </div>
-        </div>
-    </div>
-    <section class="team-details-section fix section-padding pb-0">
-        <div class="container">
-            <div class="team-details-wrapper">
-                <div class="team-author-items ">
-                    <div class="thumb">
-                        <img src="/picture/p-author.jpg" alt="img">
-                    </div>
-                    <div class="content">
-                        <h2>Savannah Nguyen</h2>
-                        <span>Children Diet</span>
-                        <p>
-                            Adipiscing elit. Mauris viverra nisl quis mollis laoreet. Ut eget lacus a felis accumsan
-                            pharetra in dignissim enim. In amet odio mollis urna aliquet volutpat. Sed bibendum nisl
-                            vehicula imperdiet imperdiet, augue massa fringilla.
-                        </p>
-                        <ul>
-                            <li>
-                                Experience: 10 Years
-                            </li>
-                            <li>
-                                <i class="fas fa-user"></i>
-                                188 Students
-                            </li>
-                            <li>
-                                <i class="fa-solid fa-star color-star"></i>
-                                454 (36 Review)
-                            </li>
-                        </ul>
-                        <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 class="swiper-slide">
+            <div class="team-items">
+              <div class="team-image">
+                <div class="shape-img">
+                  <img src="/picture/team-shape.png" alt="img" />
                 </div>
-                <div class="details-info-items">
-                    <div class="row g-5 align-items-center">
-                        <div class="col-lg-6">
-                            <div class="info-content">
-                                <h2>Professional Info</h2>
-                                <p class="mb-3">
-                                    Consectetur adipisicing elit, sed do eiusmod tempor is incididunt ut labore et
-                                    dolore of magna aliqua. Ut enim ad minim veniam, made of owl the quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip
-                                </p>
-                                <p>
-                                    The is ipsum dolor sit amet consectetur adipiscing elit. Fusce eleifend porta arcu
-                                    In hac augu ehabitasse the is platea augue thelorem turpoi dictumst. In lacus libero
-                                    faucibus
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-lg-6">
-                            <div class="progress-area">
-                                <div class="progress-wrap">
-                                    <div class="pro-items">
-                                        <div class="pro-head">
-                                            <h6 class="title">
-                                                Creativity
-                                            </h6>
-                                            <span class="point">
-                                                90%
-                                            </span>
-                                        </div>
-                                        <div class="progress">
-                                            <div class="progress-value"></div>
-                                        </div>
-                                    </div>
-                                    <div class="pro-items">
-                                        <div class="pro-head">
-                                            <h6 class="title">
-                                                Time Management
-                                            </h6>
-                                            <span class="point">
-                                                70%
-                                            </span>
-                                        </div>
-                                        <div class="progress">
-                                            <div class="progress-value style-two"></div>
-                                        </div>
-                                    </div>
-                                    <div class="pro-items">
-                                        <div class="pro-head">
-                                            <h6 class="title">
-                                                Art and Carft
-                                            </h6>
-                                            <span class="point">
-                                                55%
-                                            </span>
-                                        </div>
-                                        <div class="progress">
-                                            <div class="progress-value style-three"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </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="">Leslie Alexander</a>
+                </h3>
+                <p>Instructors</p>
+              </div>
             </div>
-        </div>
-    </section>
-    <section class="team-section-4 fix section-padding pt-80">
-        <div class="container">
-            <div class="section-title-area">
-                <div class="section-title">
-                    <h2 class="fz-40 wow fadeInUp" data-wow-delay=".3s">Related Teacher</h2>
+          </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>
-                <div class="array-button wow fadeInUp" data-wow-delay=".5s">
-                    <button class="array-prev border-array-style"><i class="fal fa-arrow-left"></i></button>
-                    <button class="array-next"><i class="fal fa-arrow-right"></i></button>
+                <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="">Ronald Richards</a>
+                </h3>
+                <p>Instructors</p>
+              </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="">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="">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="">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="">Kristin Watson</a>
-                                </h3>
-                                <p>Instructors</p>
-                            </div>
-                        </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="">Kristin Watson</a>
+                </h3>
+                <p>Instructors</p>
+              </div>
             </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -530,7 +536,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -551,7 +557,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -718,7 +724,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -744,4 +750,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pages/team/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- <div id="preloader" class="preloader">
+  <!-- <div id="preloader" class="preloader">
         <div class="animation-preloader">
             <div class="spinner"></div>
             <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
@@ -72,9 +72,9 @@
         </div>
     </div>
     <div class="offcanvas__overlay"></div> -->
-    <Preloader></Preloader>
-	<FixArea></FixArea>
-    <!-- <div class="header-top-section-4">
+  <Preloader></Preloader>
+  <FixArea></FixArea>
+  <!-- <div class="header-top-section-4">
         <div class="header-top-shape"><img src="/picture/header-top-shape-2.png" alt="shape-img"></div>
         <div class="container">
             <div class="header-top-wrapper style-2">
@@ -90,9 +90,9 @@
             </div>
         </div>
     </div> -->
-    <Header-top-section sectionClass="header-top-section-4" />
-    <TopHeader headerClass="header-4" />
-    <!-- <header id="header-sticky" class="header-4">
+  <Header-top-section sectionClass="header-top-section-4" />
+  <TopHeader headerClass="header-4" />
+  <!-- <header id="header-sticky" class="header-4">
         <div class="container">
             <div class="mega-menu-wrapper">
                 <div class="header-main style-2">
@@ -237,256 +237,300 @@
             </div>
         </div>
     </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 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.png')">
+    <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="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.png');">
-        <div class="line-shape">
-            <img src="/picture/line1.png" alt="shape-img">
+    <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 Teacher</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 Teacher</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <section class="team-section-4 fix section-padding">
+    <div class="container">
+      <div class="row g-4">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
+          <div class="team-items mt-0">
+            <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="plane-shape float-bob-y">
-            <img src="/picture/plane2.png" alt="shape-img">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
+          <div class="team-items mt-0">
+            <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="doll-shape float-bob-x">
-            <img src="/picture/doll.png" alt="shape-img">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
+          <div class="team-items mt-0">
+            <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="parasuit-shape float-bob-y">
-            <img src="/picture/parasuit1.png" alt="shape-img">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
+          <div class="team-items mt-0">
+            <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 class="frame-shape">
-            <img src="/picture/frame3.png" alt="shape-img">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
+          <div class="team-items mt-0">
+            <div class="team-image">
+              <div class="shape-img">
+                <img src="/picture/team-shape.png" alt="img" />
+              </div>
+              <img src="/picture/053.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">Esther Howard</a>
+              </h3>
+              <p>Instructors</p>
+            </div>
+          </div>
         </div>
-        <div class="bee-shape float-bob-x">
-            <img src="/picture/bee1.png" alt="shape-img">
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
+          <div class="team-items mt-0">
+            <div class="team-image">
+              <div class="shape-img">
+                <img src="/picture/team-shape.png" alt="img" />
+              </div>
+              <img src="/picture/063.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">Savannah Nguyen</a>
+              </h3>
+              <p>Instructors</p>
+            </div>
+          </div>
         </div>
-        <div class="container">
-            <div class="page-heading">
-                <h1 class="wow fadeInUp" data-wow-delay=".3s">Our Teacher</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 Teacher
-                    </li>
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
+          <div class="team-items mt-0">
+            <div class="team-image">
+              <div class="shape-img">
+                <img src="/picture/team-shape.png" alt="img" />
+              </div>
+              <img src="/picture/071.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">Dianne Russell</a>
+              </h3>
+              <p>Instructors</p>
+            </div>
+          </div>
         </div>
-    </div>
-    <section class="team-section-4 fix section-padding">
-        <div class="container">
-            <div class="row g-4">
-                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
-                    <div class="team-items mt-0">
-                        <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="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
-                    <div class="team-items mt-0">
-                        <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="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
-                    <div class="team-items mt-0">
-                        <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="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
-                    <div class="team-items mt-0">
-                        <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 class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
-                    <div class="team-items mt-0">
-                        <div class="team-image">
-                            <div class="shape-img">
-                                <img src="/picture/team-shape.png" alt="img">
-                            </div>
-                            <img src="/picture/053.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">Esther Howard</a>
-                            </h3>
-                            <p>Instructors</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
-                    <div class="team-items mt-0">
-                        <div class="team-image">
-                            <div class="shape-img">
-                                <img src="/picture/team-shape.png" alt="img">
-                            </div>
-                            <img src="/picture/063.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">Savannah Nguyen</a>
-                            </h3>
-                            <p>Instructors</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
-                    <div class="team-items mt-0">
-                        <div class="team-image">
-                            <div class="shape-img">
-                                <img src="/picture/team-shape.png" alt="img">
-                            </div>
-                            <img src="/picture/071.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">Dianne Russell</a>
-                            </h3>
-                            <p>Instructors</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
-                    <div class="team-items mt-0">
-                        <div class="team-image">
-                            <div class="shape-img">
-                                <img src="/picture/team-shape.png" alt="img">
-                            </div>
-                            <img src="/picture/081.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">Kathryn Murphy</a>
-                            </h3>
-                            <p>Instructors</p>
-                        </div>
-                    </div>
-                </div>
+        <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
+          <div class="team-items mt-0">
+            <div class="team-image">
+              <div class="shape-img">
+                <img src="/picture/team-shape.png" alt="img" />
+              </div>
+              <img src="/picture/081.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">Kathryn Murphy</a>
+              </h3>
+              <p>Instructors</p>
+            </div>
+          </div>
         </div>
-    </section>
-    <FooterSection></FooterSection>
-    <!-- <footer class="footer-section section-bg fix">
+      </div>
+    </div>
+  </section>
+  <FooterSection></FooterSection>
+  <!-- <footer class="footer-section section-bg fix">
         <div class="footer-top-shape">
             <img src="/picture/footer-top.png" alt="shape-img">
         </div>
@@ -512,7 +556,7 @@
                     <div class="content">
                         <p>Call Us 7/24</p>
                         <h3>
-                            <a href="tel:+2085550112">+208-555-0112</a>
+                            <a href="tel:18589716552">18589716552</a>
                         </h3>
                     </div>
                 </div>
@@ -533,7 +577,7 @@
                     <div class="content">
                         <p>Make a Quote</p>
                         <h3>
-                            <a href="mailto:kidsa@gmail.com">kidsa@gmail.com</a>
+                            <a href="mailto:happychin@gmail.com">happychin@gmail.com</a>
                         </h3>
                     </div>
                 </div>
@@ -700,7 +744,7 @@
         </div>
         <div class="footer-bottom">
             <div class="f-bottom-shape">
-                <img src="/picture/footer-bottom.png" alt="shape-img">
+                <img src="/picture/footer-bottom.svg" alt="shape-img">
             </div>
             <div class="container">
                 <div class="footer-wrapper d-flex align-items-center justify-content-between">
@@ -726,4 +770,4 @@
             </a>
         </div>
     </footer> -->
-</template>
+</template>

pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       '@nuxtjs/i18n':
         specifier: 9.2.1
         version: 9.2.1(@vue/compiler-dom@3.5.13)(eslint@9.21.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.34.9)(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+      accounting:
+        specifier: ^0.4.1
+        version: 0.4.1
+      axios:
+        specifier: ^1.8.2
+        version: 1.8.2
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.9)(db0@0.3.1)(eslint@9.21.0(jiti@2.4.2))(ioredis@5.5.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.0(@types/node@22.13.9)(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
@@ -1203,6 +1209,9 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
+  accounting@0.4.1:
+    resolution: {integrity: sha512-RU6KY9Y5wllyaCNBo1W11ZOTnTHMMgOZkIwdOOs6W5ibMTp72i4xIbEA48djxVGqMNTUNbvrP/1nWg5Af5m2gQ==}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -1281,6 +1290,9 @@ packages:
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1288,6 +1300,9 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axios@1.8.2:
+    resolution: {integrity: sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==}
+
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
@@ -1362,6 +1377,10 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1423,6 +1442,10 @@ packages:
   colorette@1.4.0:
     resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -1622,6 +1645,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
@@ -1674,6 +1701,10 @@ packages:
     resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
@@ -1714,9 +1745,25 @@ packages:
   errx@0.1.0:
     resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
   es-module-lexer@1.6.0:
     resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
 
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.24.2:
     resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
     engines: {node: '>=18'}
@@ -1882,10 +1929,23 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -1921,9 +1981,17 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
   get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -1978,6 +2046,10 @@ packages:
     resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
     engines: {node: '>=18'}
 
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -1992,6 +2064,14 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -2300,6 +2380,10 @@ packages:
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -2317,6 +2401,14 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -2838,6 +2930,9 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -4930,6 +5025,8 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
+  accounting@0.4.1: {}
+
   acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -5008,6 +5105,8 @@ snapshots:
 
   async@3.2.6: {}
 
+  asynckit@0.4.0: {}
+
   autoprefixer@10.4.20(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
@@ -5018,6 +5117,14 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  axios@1.8.2:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   b4a@1.6.7: {}
 
   balanced-match@1.0.2: {}
@@ -5106,6 +5213,11 @@ snapshots:
 
   cac@6.7.14: {}
 
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
   callsites@3.1.0: {}
 
   caniuse-api@3.0.0:
@@ -5172,6 +5284,10 @@ snapshots:
 
   colorette@1.4.0: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
@@ -5340,6 +5456,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   denque@2.1.0: {}
 
   depd@2.0.0: {}
@@ -5380,6 +5498,12 @@ snapshots:
 
   dotenv@16.4.7: {}
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
@@ -5407,8 +5531,23 @@ snapshots:
 
   errx@0.1.0: {}
 
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
   es-module-lexer@1.6.0: {}
 
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   esbuild@0.24.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.2
@@ -5650,11 +5789,20 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  follow-redirects@1.15.9: {}
+
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}
@@ -5680,8 +5828,26 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
   get-port-please@3.1.2: {}
 
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
   get-stream@6.0.1: {}
 
   get-stream@8.0.1: {}
@@ -5750,6 +5916,8 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.3.0
 
+  gopd@1.2.0: {}
+
   graceful-fs@4.2.11: {}
 
   gzip-size@7.0.0:
@@ -5770,6 +5938,12 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -6060,6 +6234,8 @@ snapshots:
       '@babel/types': 7.26.9
       source-map-js: 1.2.1
 
+  math-intrinsics@1.1.0: {}
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30: {}
@@ -6073,6 +6249,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mime@1.6.0: {}
 
   mime@3.0.0: {}
@@ -6751,6 +6933,8 @@ snapshots:
 
   protocols@2.0.2: {}
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   quansync@0.2.8: {}

public/css/main.css

@@ -1379,11 +1379,11 @@ span {
 }
 
 .contact-info-area {
-  padding-top: 220px;
+   padding-top: 70px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(56, 84, 105, 0.2);
+  /* border-bottom: 1px solid rgba(56, 84, 105, 0.2); */
 }
 @media (max-width: 1199px) {
   .contact-info-area {
@@ -3167,8 +3167,8 @@ span {
 
 .footer-bottom {
   position: relative;
-  z-index: 9;
-  z-index: 9;
+  z-index: 9; 
+  bottom: -100px;
 }
 .footer-bottom .f-bottom-shape {
   position: absolute;
@@ -3178,11 +3178,12 @@ span {
   transition: all 500ms ease;
   mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 92"><path d="M84.7504 27.2721C51.6574 -20.7819 14.4614 12.773 0 35.5572V92H1920V18.9869C1896.59 -9.59695 1871.91 7.07696 1862.49 18.9869C1844.33 45.0852 1828.02 37.4559 1822.13 30.379C1792.67 -11.4611 1766.47 2.24395 1757.06 14.3265C1734.46 44.1531 1718.38 37.4559 1713.17 30.379C1681.69 -9.38979 1655.66 3.10699 1646.58 14.3265C1626.8 44.1531 1612.11 37.4559 1607.23 30.379C1575.75 -11.0468 1551.07 2.41656 1542.66 14.3265C1523.69 43.7389 1504.49 37.2833 1497.26 30.379C1467.8 -9.38979 1440.59 3.10699 1430.67 14.3265C1410.89 48.71 1392.16 39.3546 1385.27 30.379C1357.42 -13.1181 1327.92 5.00568 1316.66 19.5047C1300.92 43.5317 1287.9 36.7655 1283.36 30.379C1252.29 -12.2896 1227.37 -0.862982 1218.79 10.1839C1198.61 47.4672 1178.43 39.182 1170.87 30.379C1140.2 -12.7039 1114.03 4.83308 1104.78 18.9869C1082.99 46.7422 1064.76 35.0395 1058.37 25.7187C1028.1 -14.0502 1001.03 4.66049 991.277 18.9869C976.748 46.7422 960.336 35.0395 953.946 25.7187C924.082 -13.2216 896.774 5.0057 886.852 18.9869C866.27 47.5708 849.017 35.3847 842.964 25.7187C816.732 -13.2216 786.295 5.0057 774.356 18.9869C757.003 50.4706 737.53 34.8668 729.963 23.1295C704.538 -11.6682 677.667 5.86872 667.409 18.9869C652.074 45.4995 635.124 34.5216 628.565 25.7187C606.369 -9.9076 580.305 1.20835 570.047 11.2196C548.658 46.4316 527.504 35.5573 519.601 25.7187C495.386 -10.7361 467.809 3.27964 457.047 14.8444C433.64 50.0564 415.681 36.7656 409.627 25.7187C387.834 -8.25056 361.534 1.89878 351.109 11.2196C334.562 49.3314 309.238 34.0038 298.644 21.576C271.605 -14.4645 245.003 6.55916 235.081 21.576C215.71 46.8458 199.096 32.1051 193.211 21.576C179.086 6.04134 151.34 -8.45772 127.126 21.576C107.754 45.603 90.804 35.3846 84.7504 27.2721Z" /></svg>');
   mask-repeat: no-repeat;
-  mask-position: center center;
+  /* mask-position: center center; */
   mask-size: cover;
   width: 100%;
   height: 100%;
   z-index: -1;
+  bottom: 0px;
 }
 .footer-bottom .footer-wrapper {
   position: relative;
@@ -3246,6 +3247,8 @@ span {
 
 .footer-section {
   position: relative;
+  min-height: 376px;
+  padding-bottom: 100px;
 }
 .footer-section .footer-top-shape {
   position: absolute;
@@ -3259,8 +3262,9 @@ span {
 }
 .footer-section .frame-shape {
   position: absolute;
-  top: 40%;
+  top: 0;
   left: 0;
+  z-index: 10;
   animation: rounded 5s linear infinite;
 }
 .footer-section .frame-shape.style-2 {
@@ -3273,7 +3277,7 @@ span {
 }
 .footer-section .zebra-shape {
   position: absolute;
-  top: 50%;
+  top: 15%;
   right: 0;
   transform: translateY(-50%);
 }
@@ -3352,12 +3356,18 @@ span {
   top: 0;
   left: 0;
   height: 92px;
-  z-index: -1;
+  width: 100%;
+  z-index: -3;
 }
 .header-top-section-4 .header-top-shape img {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* height: 100%;
+  object-fit: cover; */
+  height: auto;          
+  /* 设置高度自适应，保持图片的纵横比 */
+  object-fit: contain;   
+  /* 保持图片完整显示，并让图片适应容器 */
+  z-index: -4;
 }
 
 .header-top-wrapper {
@@ -4691,7 +4701,7 @@ span {
 .hero-1 .book-shape {
   position: absolute;
   top: 10%;
-  left: 50%;
+  left: 47%;
   transform: translateX(-50%);
 }
 @media (max-width: 991px) {
@@ -6953,7 +6963,7 @@ input.main-search-input::placeholder {
 }
 .program-section .bottom-shape {
   position: absolute;
-  bottom: -1px;
+  bottom: -2px;
   left: 0;
   width: 100%;
 
@@ -8231,7 +8241,7 @@ input.main-search-input::placeholder {
   position: relative;
   z-index: 9;
   max-width: 420px;
-  padding: 55px 60px;
+  padding: 55px 50px;
   text-align: center;
   margin: 30px auto;
 }

public/image/back-top.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13_811)">
+<path d="M20.2488 15.3107C19.9213 14.7565 13.3121 7.29268 12.7469 6.34748C12.3754 5.72664 11.49 5.73707 11.1183 6.34748C10.7037 7.02788 4.06078 14.534 3.59926 15.3391C3.2608 15.9287 3.63471 16.702 4.40471 16.702H8.64067V23.2828C8.64067 24.0616 9.27204 24.693 10.0509 24.693H13.8116C14.5904 24.693 15.2218 24.0616 15.2218 23.2828V16.702H19.4387C20.1376 16.702 20.6577 16.0023 20.2488 15.3107ZM4.40989 3.06924H19.4525C19.9717 3.06924 20.3927 2.64833 20.3927 2.12908C20.3927 1.60988 19.9717 1.18896 19.4525 1.18896H4.40989C3.89064 1.18896 3.46973 1.60988 3.46973 2.12908C3.46973 2.64833 3.89064 3.06924 4.40989 3.06924Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13_811">
+<rect width="24" height="24" fill="white" transform="translate(0 0.920898)"/>
+</clipPath>
+</defs>
+</svg>

public/image/omit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+<path d="M3 14.8271C2.46957 14.8271 1.96086 14.6164 1.58579 14.2414C1.21071 13.8663 1 13.3576 1 12.8271C1 12.2967 1.21071 11.788 1.58579 11.4129C1.96086 11.0379 2.46957 10.8271 3 10.8271C3.53043 10.8271 4.03914 11.0379 4.41421 11.4129C4.78929 11.788 5 12.2967 5 12.8271C5 13.3576 4.78929 13.8663 4.41421 14.2414C4.03914 14.6164 3.53043 14.8271 3 14.8271ZM12 14.8271C11.4696 14.8271 10.9609 14.6164 10.5858 14.2414C10.2107 13.8663 10 13.3576 10 12.8271C10 12.2967 10.2107 11.788 10.5858 11.4129C10.9609 11.0379 11.4696 10.8271 12 10.8271C12.5304 10.8271 13.0391 11.0379 13.4142 11.4129C13.7893 11.788 14 12.2967 14 12.8271C14 13.3576 13.7893 13.8663 13.4142 14.2414C13.0391 14.6164 12.5304 14.8271 12 14.8271ZM21 14.8271C20.4696 14.8271 19.9609 14.6164 19.5858 14.2414C19.2107 13.8663 19 13.3576 19 12.8271C19 12.2967 19.2107 11.788 19.5858 11.4129C19.9609 11.0379 20.4696 10.8271 21 10.8271C21.5304 10.8271 22.0391 11.0379 22.4142 11.4129C22.7893 11.788 23 12.2967 23 12.8271C23 13.3576 22.7893 13.8663 22.4142 14.2414C22.0391 14.6164 21.5304 14.8271 21 14.8271Z" fill="white"/>
+</svg>

public/picture/footer-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="1920" height="98" viewBox="0 0 1920 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.6687 29.0507C-7.58253 -22.1372 -47.2044 13.606 -62.6089 37.8761V98H1982.61V20.2252C1957.67 -10.2228 1931.38 7.5385 1921.35 20.2252C1902 48.0255 1884.63 39.8987 1878.36 32.3602C1846.97 -12.2086 1819.07 2.39029 1809.04 15.2608C1784.97 47.0326 1767.84 39.8987 1762.29 32.3602C1728.76 -10.0022 1701.03 3.30962 1691.36 15.2608C1670.29 47.0326 1654.64 39.8987 1649.44 32.3602C1615.91 -11.7672 1589.62 2.57416 1580.66 15.2608C1560.45 46.5914 1540 39.7148 1532.3 32.3602C1500.92 -10.0022 1471.93 3.30962 1461.37 15.2608C1440.3 51.8867 1420.34 41.9212 1413 32.3602C1383.34 -13.9736 1351.91 5.33214 1339.92 20.7767C1323.15 46.3707 1309.28 39.1632 1304.45 32.3602C1271.35 -13.0911 1244.81 -0.919264 1235.67 10.8481C1214.17 50.5629 1192.68 41.7373 1184.62 32.3602C1151.95 -13.5324 1124.08 5.14828 1114.22 20.2252C1091.01 49.7906 1071.59 37.3247 1064.79 27.396C1032.54 -14.9665 1003.71 4.96443 993.317 20.2252C977.84 49.7906 960.358 37.3247 953.551 27.396C921.739 -14.0839 892.65 5.33216 882.081 20.2252C860.157 50.6732 841.779 37.6924 835.331 27.396C807.388 -14.0839 774.966 5.33216 762.249 20.2252C743.764 53.7622 723.021 37.1407 714.96 24.6379C687.877 -12.4292 659.254 6.25146 648.327 20.2252C631.992 48.4669 613.936 36.773 606.949 27.396C583.306 -10.5537 555.542 1.28716 544.615 11.9513C521.831 49.4597 499.298 37.8763 490.879 27.396C465.085 -11.4363 435.709 3.49353 424.246 15.8125C399.312 53.3209 380.182 39.1634 373.733 27.396C350.519 -8.78864 322.503 2.02261 311.399 11.9513C293.772 52.5487 266.797 36.2214 255.512 22.9831C226.71 -15.4078 198.373 6.98693 187.803 22.9831C167.169 49.901 149.472 34.1989 143.203 22.9831C128.157 6.43534 98.6011 -9.00931 72.8079 22.9831C52.1725 48.5771 34.1171 37.6923 27.6687 29.0507Z" fill="#C9DDE2"/>
+</svg>

utils/index.js

@@ -0,0 +1,131 @@
+// 立即执行计时器
+import accounting from 'accounting'
+
+const setIntervalImmediately = (fn, duration) => setInterval((() => (fn(), fn))(), duration)
+
+async function needLogin() {
+  const route = useRoute()
+  const useAuth = useAuthStore()
+  const { token } = storeToRefs(useAuth)
+  if (!token.value) {
+    await navigateTo({
+      path: '/login',
+      query: {
+        redirect: route.fullPath,
+        ...route.query
+      },
+      replace: true
+    })
+    return
+  }
+}
+
+function jumpToLoginPage() {
+  const route = useRoute()
+  navigateTo({
+    path: '/login',
+    query: {
+      redirect: route.path,
+      ...route.query
+    },
+    replace: true
+  })
+}
+
+function formatImgSrc(srcArr) {
+  if (Array.isArray(srcArr) && srcArr.length > 0) {
+    return srcArr[0] ?? ''
+  }
+  return ''
+}
+function priceToArray(price) {
+  if (!price) return ['0', '00']
+  const priceStr = price.toString()
+  if (!priceStr.includes('.')) {
+    return [priceStr, '00']
+  }
+  return [priceStr.split('.')[0], priceStr.split('.')[1]]
+}
+
+function isEmail(email) {
+  if (!email) return false
+  const value = email.trim()
+  if (
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+      value
+    )
+  ) {
+    return true
+  }
+  return false
+}
+
+const isEmptyValue = (value) => {
+  if (value == null) return true
+
+  if (Array.isArray(value) && value.length === 0) return true
+
+  if (typeof value === 'object' && Object.keys(value).length === 0) return true
+
+  return false
+}
+
+const formatNumber = (n) => {
+  let num = Number(n ?? '')
+
+  // 如果数字大于或等于10,000万，则显示为9999w+
+  if (num >= 10000 * 10000) {
+    return '9999万+'
+  }
+  // 如果数字大于或等于1万，则转换为以“万”为单位，不四舍五入，最多保留1位小数
+  else if (num >= 10000) {
+    let w = Math.floor(num / 10000) // 取整，避免四舍五入
+    let remainder = num % 10000
+
+    // 计算小数部分并限制为最多两位
+    let decimalPart = ''
+    if (remainder > 0) {
+      // 将余数转换为1位小数，但不进行四舍五入
+      decimalPart = ('.' + Math.floor(remainder / 100)).slice(0, 2)
+      // 移除结尾的0，如果有的话
+      decimalPart = decimalPart.replace(/\.?0+$/, '')
+    }
+
+    return `${w}${decimalPart}万`
+  }
+
+  // 对于小于1万的数字直接输出
+  else {
+    // return accounting.formatNumber(num)
+  }
+}
+
+const transferCount = (num = 0) => {
+  if (isNaN(num)) return 0
+  if (num > 10000) {
+    return (num / 10000).toFixed(1) + 'w'
+  } else {
+    return num
+  }
+}
+const transferCountChinese = (num = 0) => {
+  if (isNaN(num)) return 0
+  if (num > 10000) {
+    return (num / 10000).toFixed(1) + '万'
+  } else {
+    return num
+  }
+}
+
+export {
+  setIntervalImmediately,
+  needLogin,
+  jumpToLoginPage,
+  formatImgSrc,
+  isEmail,
+  formatNumber,
+  isEmptyValue,
+  priceToArray,
+  transferCount,
+  transferCountChinese
+}

utils/request.js

@@ -0,0 +1,113 @@
+// import md5 from 'md5'
+// import { createDiscreteApi } from 'naive-ui'
+
+export function request(url, options = {}) {
+  const config = useRuntimeConfig()
+  // const authStore = useAuthStore()
+
+  const defatulOpts = {
+    method: 'get',
+    // baseURL: config.public.baseApi,
+    headers: {
+      // 'Content-Type': 'application/json',
+      // deviceType: config.public.deviceType,
+      // authorization: authStore.token,
+      project: '',
+      ...options.headers
+    },
+    onRequest({ options }) {
+      if (options.method === 'post') {
+        // const bodyJson = options.body ? JSON.stringify(options.body) : ''
+        // const timestamp = new Date().getTime()
+        // let sign = `yingdeweilai888${bodyJson}${timestamp}`
+        // sign = md5(sign).toUpperCase()
+        // options.headers.sign = sign
+        // options.headers.timestamp = timestamp
+      }
+    },
+    onRequestError() {
+      // showErrorMessage('请求出错，请重试~')
+    },
+    onResponse({ response: { _data: data } }) {
+      if (data && data.errorCode != 'NO-ERROR') {
+        handleServerError(data.errorCode, data.errorMessage)
+      }
+    },
+    onResponseError({ response }) {
+      handleHttpError(response.status)
+    },
+    ...options
+  }
+  return new Promise((resolve, reject) => {
+    $fetch(url, defatulOpts)
+      .then((res) => {
+        const { errorCode } = res
+        errorCode === 'NO-ERROR' ? resolve(res) : reject(res)
+      })
+      .catch((err) => reject(err))
+  })
+}
+
+const handleHttpError = (status) => {
+  switch (status) {
+    case 400:
+      // showErrorMessage('参数错误')
+      break
+    case 401:
+      // showErrorMessage('没有访问权限')
+      break
+    case 403:
+      // showErrorMessage('服务器拒绝访问')
+      break
+    case 404:
+      // showErrorMessage('请求地址错误')
+      break
+    case (502, 503):
+      // showErrorMessage('系统升级中')
+      break
+    default:
+      // showErrorMessage('服务器出错了')
+      break
+  }
+}
+
+const handleServerError = async (code, msg) => {
+  if (code === 'UNAUTHORIZED_LOGIN') {
+    // const authStore = useAuthStore()
+    // authStore.cleanToken()
+    // jumpToLoginPage()
+    // await navigateTo({
+    //   path: '/login',
+    //   replace: true
+    // })
+    return
+  }
+  if (msg) {
+    showErrorMessage(msg)
+  }
+}
+
+const showErrorMessage = (msg) => {
+  // const { message } = createDiscreteApi(['message'])
+  // if (process.server) return
+  // const { message } = useMessage()
+  // message.error(msg)
+}
+
+export const handleResponse = (response, isNeedData = true) => {
+  return new Promise((resolve, reject) => {
+    const success = response.success
+    switch (success) {
+      case true: {
+        if (isNeedData) {
+          if (response.data && !isEmptyValue(response.data)) return resolve()
+          return reject(response)
+        }
+        return resolve()
+      }
+      default: {
+        return reject(response)
+      }
+    }
+  })
+}