From caf6093e1f9f62e25eba395a4e7639df03bc96e9 Mon Sep 17 00:00:00 2001
From: nagocoler <nagocoler@qq.com>
Date: Wed, 6 Nov 2024 23:04:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E5=86=99=E9=A6=96=E9=A1=B5=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 232 +---------
 src/components/IndexFooter.vue | 107 +++++
 src/components/IndexHeader.vue | 107 +++++
 src/components/TopHeader.vue   |  39 ++
 src/router/index.js            |   6 +-
 src/views/Welcome.vue          | 804 +++++++++++++++++++++++++++++++++
 6 files changed, 1069 insertions(+), 226 deletions(-)
 create mode 100644 src/components/IndexFooter.vue
 create mode 100644 src/components/IndexHeader.vue
 create mode 100644 src/components/TopHeader.vue
 create mode 100644 src/views/Welcome.vue

diff --git a/src/App.vue b/src/App.vue
index 30d9f22..26de512 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,235 +1,17 @@
 <script setup>
-import {useHeaderSticky} from "@/utils/header.js";
-import {onMounted} from "vue";
-
-onMounted(useHeaderSticky)
+import TopHeader from "@/components/TopHeader.vue";
+import IndexHeader from "@/components/IndexHeader.vue";
+import IndexFooter from "@/components/IndexFooter.vue";
 </script>
 
 <template>
   <div>
-    <div class="top-header">
-      <div class="container h-100">
-        <div class="row h-100 align-items-center">
-          <div class="col-md-6 col-lg-7">
-            <div class="contact-info d-flex align-items-center">
-              <a href="mailto:info@doorsoft"><span class="icon-mail"></span> <span class="text-white contact-desc">alma.lawson@example.com</span></a>
-              <a href=""><span class="icon-phone-alt-solid-11"></span> <span class="text-white contact-desc">123 - 456 - 7890</span></a>
-            </div>
-          </div>
-          <div class="col-md-6 col-lg-5">
-            <div class="d-flex align-items-center top-social-conatct">
-              <!-- Dropdown -->
-              <div class="top-social-icon">
-                <ul class="header-icon">
-                  <li><span class="text-white">加入我们:</span></li>
-                  <li><a href="#"><span class="icon-facebook-f"></span></a></li>
-                  <li><a href="#"><span class="icon-linkedin-in"></span></a></li>
-                  <li><a href="#"><span class="icon-twitter"></span></a></li>
-                  <li><a href="#"><span class="icon-instagram"></span></a></li>
-                </ul>
-              </div>
-              <div class="contact-info">
-                <a class="login-btn" href="#"><span class="icon-user-plus-solid-1"></span> 注册</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <header class="header-area home-2 bg--navy" id="header">
-      <nav class="navbar navbar-expand-lg">
-        <div class="container menu-area-">
-          <!-- Navbar Brand -->
-          <div class="mobile-menu">
-            <a class="navbar-brand" href="index.html">
-              <img src="@/assets/img/core-img/logo-2.png" alt="Brand">
-            </a>
-          </div>
-
-          <!-- Navbar Toggler -->
-          <button class="navbar-toggler" id="navbarToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="icon-menu"></span>
-          </button>
-
-          <!-- Navbar -->
-          <div class="collapse navbar-collapse" id="navbarContent">
-            <ul class="navbar-nav navbar-nav-scroll mb-3 mb-lg-0" id="SupportHiveNav">
-              <li class="dropdown-list">
-                <a href="#">Home</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="index.html">Education</a></li>
-                <li><a href="index-kid-education.html">KidEducation</a></li>
-                <li><a href="index-marketplaxe.html">Marketplace</a></li>
-                <li><a href="index-university.html">University Classic</a></li>
-              </ul>
-              </li>
-              <li class="dropdown-list">
-                <a href="#">Course</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="course-list.html">Course list</a></li>
-                <li><a href="all-course.html">all Course</a></li>
-                <li><a href="course-details.html">Course Details</a></li>
-              </ul>
-              </li>
-
-              <li class="dropdown-list">
-                <a href="#">Pages</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="about.html">About</a></li>
-                <li><a href="gallery.html">Gallery</a></li>
-                <li><a href="faq.html">Faq</a></li>
-                <li><a href="pricing.html">Price</a></li>
-                <li><a href="team.html">Team</a></li>
-                <li><a href="contact.html">Contact</a></li>
-                <li><a href="login.html">Login</a></li>
-              </ul>
-              </li>
-              <li class="dropdown-list">
-                <a href="#">Event</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="event.html">Event list</a></li>
-                <li><a href="event-sidebar.html">Event Sidebar</a></li>
-                <li><a href="event-details.html">Event Details</a></li>
-              </ul>
-              </li>
-              <li class="dropdown-list">
-                <a href="#">Shop</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="shop.html">Shop</a></li>
-                <li><a href="shop-details.html">Shop Details</a></li>
-                <li><a href="cart.html">Cart</a></li>
-                <li><a href="checkout.html">Checkout</a></li>
-              </ul>
-              </li>
-
-              <li class="dropdown-list">
-                <a href="#">Blog</a>
-                <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="blog-details.html">Blog Details</a></li>
-              </ul>
-              </li>
-            </ul>
-
-            <div class="cart-search-area ml-auto d-flex align-items-center">
-              <div class="search-home-2">
-                <div class="header-action">
-                  <div class="search-toggle-open header-search">
-                    <div class="search-icon">
-                      <span class="icon-icon_search2"></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="cart-btn-area relative">
-                <a href="#" class="relative"><span class="icon-icon_cart_alt"></span></a>
-                <div class="cart-badge bg--dark">0</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-    </header>
+    <top-header/>
+    <index-header/>
     <div class="smooth-body">
-      <div style="height: 500px"></div>
       <div class="smooth-content">
-        <footer class="footer-wrap bg--dark">
-          <!-- Shape -->
-          <div class="f-shape-1 wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
-            <img src="@/assets/img/bg-img/f-shap-1.png" alt="">
-          </div>
-          <!-- Shape -->
-          <div class="f-shape-2 wow fadeInRight" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInRight;">
-            <img src="@/assets/img/bg-img/f-shap-2.png" alt="">
-          </div>
-          <!-- Shape -->
-          <div class="f-shape-3 wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
-            <img src="@/assets/img/bg-img/f-shape-3.png" alt="">
-          </div>
-          <div class="footer-content">
-            <div class="container">
-              <div class="row justify-content-between">
-                <div class="col-12 col-sm-6 col-lg-3">
-                  <div class="me-4">
-                    <a class="mb-4 d-block footer-logo" href="#">
-                      <img src="@/assets/img/core-img/logo-2.png" alt="">
-                    </a>
-                    <p class="footer-desc">超过 18,000+ 小朋友在我们这学习算竟</p>
-
-                    <div class="footer-contact-info wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
-                      <ul>
-                        <li><a href="#"><span class="icon-facebook-f"></span></a></li>
-                        <li><a href="#"><span class="icon-instagram"></span></a></li>
-                        <li><a href="#"><span class="icon-linkedin-in"></span></a></li>
-                        <li><a href="#"><span class="icon-instagram"></span></a></li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="col-12 col-sm-6 col-lg-2">
-                  <div class="quick-links-nav">
-                    <h5 class="mb-3 text-white">探索</h5>
-                    <span class="footer-shape-1"></span>
-                    <span class="footer-shape-2"></span>
-                    <ul>
-                      <li><a href="#">GMAT Coaching</a></li>
-                      <li><a href="#">GRE Coaching</a></li>
-                      <li><a href="#">IELTS Coaching</a></li>
-                      <li><a href="#">TOEFL Coaching</a></li>
-                      <li><a href="#">SAT Coaching</a></li>
-                    </ul>
-                  </div>
-                </div>
-
-                <div class="col-12 col-sm-6 col-lg-2">
-                  <div class="quick-links-nav">
-                    <h5 class="mb-3 text-white">友情链接</h5>
-                    <ul>
-                      <li><a href="#">SAT Coaching</a></li>
-                      <li><a href="#">IELTS Coaching</a></li>
-                      <li><a href="#">GRE Coaching</a></li>
-                      <li><a href="#">GMAT Coaching</a></li>
-                      <li><a href="#">TOEFL Coaching</a></li>
-                    </ul>
-                  </div>
-                </div>
-
-                <div class="col-12 col-sm-6 col-lg-3">
-                  <div class="quick-contact-nav">
-                    <h5 class="mb-3 text-white">联系我们</h5>
-                    <span class="footer-shape-1"></span>
-                    <span class="footer-shape-2"></span>
-                    <ul>
-                      <li>
-                        <p><span class="icon-incoming-call"></span> + 1 (246) 333-0088</p>
-                      </li>
-                      <li>
-                        <p><span class="icon-email"></span> alma.lawson@example.com</p>
-                      </li>
-                      <li>
-                        <p><span class="icon-map"></span> 4140 四川省成都市 XXX 宾馆</p>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="copy-right-area">
-            <div class="container">
-              <div class="row">
-                <div class="col-12">
-                  <div class="copy-right-text text-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
-                    <p class="mb-0"> © Copyright 2024 by <a href="https://www.bootstrapmb.com">bootstrapMB</a></p>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-          </div>
-        </footer>
+        <router-view/>
+        <index-footer/>
       </div>
     </div>
   </div>
diff --git a/src/components/IndexFooter.vue b/src/components/IndexFooter.vue
new file mode 100644
index 0000000..3edd061
--- /dev/null
+++ b/src/components/IndexFooter.vue
@@ -0,0 +1,107 @@
+<script setup>
+
+</script>
+
+<template>
+  <footer class="footer-wrap bg--dark">
+    <!-- Shape -->
+    <div class="f-shape-1 wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
+      <img src="@/assets/img/bg-img/f-shap-1.png" alt="">
+    </div>
+    <!-- Shape -->
+    <div class="f-shape-2 wow fadeInRight" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInRight;">
+      <img src="@/assets/img/bg-img/f-shap-2.png" alt="">
+    </div>
+    <!-- Shape -->
+    <div class="f-shape-3 wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
+      <img src="@/assets/img/bg-img/f-shape-3.png" alt="">
+    </div>
+    <div class="footer-content">
+      <div class="container">
+        <div class="row justify-content-between">
+          <div class="col-12 col-sm-6 col-lg-3">
+            <div class="me-4">
+              <a class="mb-4 d-block footer-logo" href="#">
+                <img src="@/assets/img/core-img/logo-2.png" alt="">
+              </a>
+              <p class="footer-desc">超过 18,000+ 小朋友在我们这学习算竟</p>
+
+              <div class="footer-contact-info wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
+                <ul>
+                  <li><a href="#"><span class="icon-facebook-f"></span></a></li>
+                  <li><a href="#"><span class="icon-instagram"></span></a></li>
+                  <li><a href="#"><span class="icon-linkedin-in"></span></a></li>
+                  <li><a href="#"><span class="icon-instagram"></span></a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-6 col-lg-2">
+            <div class="quick-links-nav">
+              <h5 class="mb-3 text-white">探索</h5>
+              <span class="footer-shape-1"></span>
+              <span class="footer-shape-2"></span>
+              <ul>
+                <li><a href="#">GMAT Coaching</a></li>
+                <li><a href="#">GRE Coaching</a></li>
+                <li><a href="#">IELTS Coaching</a></li>
+                <li><a href="#">TOEFL Coaching</a></li>
+                <li><a href="#">SAT Coaching</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-6 col-lg-2">
+            <div class="quick-links-nav">
+              <h5 class="mb-3 text-white">友情链接</h5>
+              <ul>
+                <li><a href="#">SAT Coaching</a></li>
+                <li><a href="#">IELTS Coaching</a></li>
+                <li><a href="#">GRE Coaching</a></li>
+                <li><a href="#">GMAT Coaching</a></li>
+                <li><a href="#">TOEFL Coaching</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-6 col-lg-3">
+            <div class="quick-contact-nav">
+              <h5 class="mb-3 text-white">联系我们</h5>
+              <span class="footer-shape-1"></span>
+              <span class="footer-shape-2"></span>
+              <ul>
+                <li>
+                  <p><span class="icon-incoming-call"></span> + 1 (246) 333-0088</p>
+                </li>
+                <li>
+                  <p><span class="icon-email"></span> alma.lawson@example.com</p>
+                </li>
+                <li>
+                  <p><span class="icon-map"></span> 4140 四川省成都市 XXX 宾馆</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="copy-right-area">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="copy-right-text text-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
+              <p class="mb-0"> © Copyright 2024 by <a href="https://www.bootstrapmb.com">bootstrapMB</a></p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/IndexHeader.vue b/src/components/IndexHeader.vue
new file mode 100644
index 0000000..fd914de
--- /dev/null
+++ b/src/components/IndexHeader.vue
@@ -0,0 +1,107 @@
+<script setup>
+import {onMounted} from "vue";
+import {useHeaderSticky} from "@/utils/header.js";
+
+onMounted(useHeaderSticky)
+</script>
+
+<template>
+  <header class="header-area home-2 bg--navy" id="header">
+    <nav class="navbar navbar-expand-lg">
+      <div class="container menu-area-">
+        <!-- Navbar Brand -->
+        <div class="mobile-menu">
+          <a class="navbar-brand" href="index.html">
+            <img src="@/assets/img/core-img/logo-2.png" alt="Brand">
+          </a>
+        </div>
+
+        <!-- Navbar Toggler -->
+        <button class="navbar-toggler" id="navbarToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="icon-menu"></span>
+        </button>
+
+        <!-- Navbar -->
+        <div class="collapse navbar-collapse" id="navbarContent">
+          <ul class="navbar-nav navbar-nav-scroll mb-3 mb-lg-0" id="SupportHiveNav">
+            <li class="dropdown-list">
+              <a href="#">Home</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="index.html">Education</a></li>
+              <li><a href="index-kid-education.html">KidEducation</a></li>
+              <li><a href="index-marketplaxe.html">Marketplace</a></li>
+              <li><a href="index-university.html">University Classic</a></li>
+            </ul>
+            </li>
+            <li class="dropdown-list">
+              <a href="#">Course</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="course-list.html">Course list</a></li>
+              <li><a href="all-course.html">all Course</a></li>
+              <li><a href="course-details.html">Course Details</a></li>
+            </ul>
+            </li>
+
+            <li class="dropdown-list">
+              <a href="#">Pages</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="about.html">About</a></li>
+              <li><a href="gallery.html">Gallery</a></li>
+              <li><a href="faq.html">Faq</a></li>
+              <li><a href="pricing.html">Price</a></li>
+              <li><a href="team.html">Team</a></li>
+              <li><a href="contact.html">Contact</a></li>
+              <li><a href="login.html">Login</a></li>
+            </ul>
+            </li>
+            <li class="dropdown-list">
+              <a href="#">Event</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="event.html">Event list</a></li>
+              <li><a href="event-sidebar.html">Event Sidebar</a></li>
+              <li><a href="event-details.html">Event Details</a></li>
+            </ul>
+            </li>
+            <li class="dropdown-list">
+              <a href="#">Shop</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="shop.html">Shop</a></li>
+              <li><a href="shop-details.html">Shop Details</a></li>
+              <li><a href="cart.html">Cart</a></li>
+              <li><a href="checkout.html">Checkout</a></li>
+            </ul>
+            </li>
+
+            <li class="dropdown-list">
+              <a href="#">Blog</a>
+              <div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
+              <li><a href="blog.html">Blog</a></li>
+              <li><a href="blog-details.html">Blog Details</a></li>
+            </ul>
+            </li>
+          </ul>
+
+          <div class="cart-search-area ml-auto d-flex align-items-center">
+            <div class="search-home-2">
+              <div class="header-action">
+                <div class="search-toggle-open header-search">
+                  <div class="search-icon">
+                    <span class="icon-icon_search2"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="cart-btn-area relative">
+              <a href="#" class="relative"><span class="icon-icon_cart_alt"></span></a>
+              <div class="cart-badge bg--dark">0</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/TopHeader.vue b/src/components/TopHeader.vue
new file mode 100644
index 0000000..e48b708
--- /dev/null
+++ b/src/components/TopHeader.vue
@@ -0,0 +1,39 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="top-header">
+    <div class="container h-100">
+      <div class="row h-100 align-items-center">
+        <div class="col-md-6 col-lg-7">
+          <div class="contact-info d-flex align-items-center">
+            <a href="mailto:info@doorsoft"><span class="icon-mail"></span> <span class="text-white contact-desc">alma.lawson@example.com</span></a>
+            <a href=""><span class="icon-phone-alt-solid-11"></span> <span class="text-white contact-desc">123 - 456 - 7890</span></a>
+          </div>
+        </div>
+        <div class="col-md-6 col-lg-5">
+          <div class="d-flex align-items-center top-social-conatct">
+            <!-- Dropdown -->
+            <div class="top-social-icon">
+              <ul class="header-icon">
+                <li><span class="text-white">加入我们:</span></li>
+                <li><a href="#"><span class="icon-facebook-f"></span></a></li>
+                <li><a href="#"><span class="icon-linkedin-in"></span></a></li>
+                <li><a href="#"><span class="icon-twitter"></span></a></li>
+                <li><a href="#"><span class="icon-instagram"></span></a></li>
+              </ul>
+            </div>
+            <div class="contact-info">
+              <a class="login-btn" href="#"><span class="icon-user-plus-solid-1"></span> 注册</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ed474c3..36aed45 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-
+    {
+      path: '',
+      name: 'welcome',
+      component: () => import('@/views/Welcome.vue'),
+    }
   ],
 })
 
diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
new file mode 100644
index 0000000..2b154e2
--- /dev/null
+++ b/src/views/Welcome.vue
@@ -0,0 +1,804 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <div class="hero-area-2">
+      <!-- Shape -->
+      <div class="hero-2-curbe-shape">
+        <img src="@/assets/img/bg-img/hero-2-shape.png" alt="">
+      </div>
+      <div class="hero-2-shape-1 wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
+        <img src="@/assets/img/bg-img/home-2/shape-1.png" alt="">
+      </div>
+
+      <div class="hero-2-shape-2">
+        <img src="@/assets/img/bg-img/home-2/shape-2.png" alt="">
+      </div>
+
+      <div class="hero-2-shape-3">
+        <img src="@/assets/img/bg-img/home-2/shape-4.png" alt="">
+      </div>
+
+      <div class="container h-100">
+        <div class="row h-100 align-items-center justify-content-between">
+          <div class="col-lg-5">
+            <!-- Content text -->
+            <div class="hero-content-text">
+              <h6 class="wow fadeInUp" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;"><i class="icon-icon_document_alt"></i>
+                欢迎加入柏码</h6>
+              <h2 class="wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">开心少儿编程俱乐部
+              </h2>
+              <div class="hero-btn-area mt-5 wow fadeInUp" data-wow-delay="1300ms" style="visibility: visible; animation-delay: 1300ms; animation-name: fadeInUp;">
+                <a class="btn-1" href="about.html">了解更多 <span class="icon-right-arrow-11"></span></a>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-7">
+            <div class="welcome-img-2 text-center relative">
+              <img class="wel-img-2 wow fadeInUp" data-wow-delay="500ms" src="@/assets/img/bg-img/hero-2.png" alt="" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;">
+              <div class="shape-box">
+                <img src="@/assets/img/bg-img/home-2/shape-5.png" alt="">
+              </div>
+              <div class="bag-shape wow fadeInLeft" data-wow-delay="1000ms" style="visibility: visible; animation-delay: 1000ms; animation-name: fadeInLeft;">
+                <img src="@/assets/img/bg-img/home-2/shape-3.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="care-program-area">
+      <div class="container">
+        <div class="row justify-content-center">
+          <!-- title -->
+          <div class="col-lg-6">
+            <div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
+              <h6>能学到什么？</h6>
+              <h2 class="mb-0">少儿编程课程安排</h2>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <!-- Single Card -->
+          <div class="col-md-6 col-lg-4">
+            <div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
+              <div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
+                <img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
+              </div>
+              <div class="care-card-img-content">
+                <div class="care-img">
+                  <img src="@/assets/img/bg-img/care-1.jpeg.jpg" alt="">
+                </div>
+
+                <div class="care-content-text">
+                  <h4>Java全套实战路线</h4>
+                  <p>从JavaSE入门开始学习，接着是JavaWeb网页后端开发，JSP大学课设折磨，SSM框架学习，SpringBoot一步到位，SpringCloud天天更新</p>
+                  <div class="care-count-info">
+                    <p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Single Card -->
+          <div class="col-md-6 col-lg-4">
+            <div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInLeft;">
+              <div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
+                <img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
+              </div>
+              <div class="care-card-img-content">
+                <div class="care-img">
+                  <img src="@/assets/img/bg-img/care-2.jpeg.jpg" alt="">
+                </div>
+
+                <div class="care-content-text">
+                  <h4>Scratch模块编程</h4>
+                  <p>适用于中国宝宝体制的，少儿编程软件，像拼图一样进行程序开发和设计，网页上可以出现动画实时交互</p>
+                  <div class="care-count-info">
+                    <p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Single Card -->
+          <div class="col-md-6 col-lg-4">
+            <div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="1100ms" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInLeft;">
+              <div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
+                <img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
+              </div>
+              <div class="care-card-img-content">
+                <div class="care-img">
+                  <img src="@/assets/img/bg-img/care-3.jpeg.jpg" alt="">
+                </div>
+
+                <div class="care-content-text">
+                  <h4>树莓派单片机编程</h4>
+                  <p>使用Python加树莓派进行编程开发，学习机器视觉，AI人工智能，制造智能小车，编写小车循迹算法</p>
+                  <div class="care-count-info">
+                    <p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="popular-cate-2-area bg-img bg-overlay relative" style="background-image: url(@/assets/img/bg-img/popular.png);">
+      <div class="cate-2-shape wow fadeInRight" data-wow-delay="1200ms" style="visibility: visible; animation-delay: 1200ms; animation-name: fadeInRight;">
+        <img src="@/assets/img/bg-img/home-2/shape-6.png" alt="">
+      </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-4">
+            <div class="section-title-area cate-heading">
+              <h6 class="wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">Popular categories</h6>
+              <h2 class="wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">Start your journey today with Mark
+                as your tutor.</h2>
+              <p class="mb-5 wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">All membership plans come with a
+                30-day satisfaction guarantee.</p>
+
+              <a class="btn-1 wow fadeInDown" data-wow-delay="1100ms" href="pricing.html" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInDown;">Learn More <span class="icon-right-arrow-11"></span></a>
+            </div>
+          </div>
+
+          <div class="col-md-6 col-lg-4">
+            <div class="cate-price-card wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
+              <div class="cate-price-body">
+                <h2>Mastery <span class="cate-price-title">$35 /</span> <span class="month-desc">m</span>
+                </h2>
+                <h6>1 device/ One user</h6>
+
+                <ul>
+                  <li>Access to Core Curriculum</li>
+                  <li>Weekly Homework Assignments</li>
+                  <li>One-on-One Monthly Consultation</li>
+                  <li>24/7 Email Support</li>
+                  <li>Download for offline viewing</li>
+                </ul>
+
+                <div class="price-btn-area">
+                  <a class="price-btn" href="login.html">Get Started <span class="icon-right-arrow-11"></span></a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-6 col-lg-4">
+            <div class="cate-price-card two wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
+              <div class="cate-price-body">
+                <h2>Mastery <span class="cate-price-title">$35 /</span> <span class="month-desc">m</span>
+                </h2>
+                <h6>1 device/ One user</h6>
+
+                <ul>
+                  <li>Access to Core Curriculum</li>
+                  <li>Weekly Homework Assignments</li>
+                  <li>One-on-One Monthly Consultation</li>
+                  <li>24/7 Email Support</li>
+                  <li>Download for offline viewing</li>
+                </ul>
+
+                <div class="price-btn-area">
+                  <a class="price-btn" href="login.html">Get Started <span class="icon-right-arrow-11"></span></a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+    <div class="certificate-area relative">
+      <!-- Shape -->
+      <div class="gra-shape-1 wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
+        <img src="@/assets/img/bg-img/home-2/shape-7.png" alt="">
+      </div>
+      <div class="gra-shape-2">
+        <img src="@/assets/img/bg-img/home-2/shape-8.png" alt="">
+      </div>
+      <div class="gra-shape-3 wow fadeInRight" data-wow-delay="1000ms" style="visibility: visible; animation-delay: 1000ms; animation-name: fadeInRight;">
+        <img src="@/assets/img/bg-img/home-2/shape-9.png" alt="">
+      </div>
+      <div class="gra-shape-4">
+        <img src="@/assets/img/bg-img/home-2/shape-10.png" alt="">
+      </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="gra-cert-image-area relative">
+              <div class="certi-img relative wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
+                <div class="gra-img-1 relative">
+                  <img src="@/assets/img/bg-img/home-2/g-1.png" alt="">
+                </div>
+              </div>
+              <div class="certi-img-2 wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
+                <div class="gra-img-2">
+                  <img src="@/assets/img/bg-img/home-2/g-2.png" alt="">
+                </div>
+              </div>
+
+              <div class="play-btn">
+                <div class="video_player_btn">
+                  <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" class="popup-video"><span class="icon-Polygon-1"></span></a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="certi-title-area wow fadeInRight" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
+              <h6 class="certi-sub-title"><span class="icon-open-book-1"></span> Guaranteed and
+                certified</h6>
+              <h2>Online Learning Wherever &amp; whenever.</h2>
+
+              <!-- Single Card -->
+              <div class="certi-single-card d-flex align-items-center">
+                <div class="certi-border border--primary">
+                  <div class="certi-icon bg--primary">
+                    <img src="@/assets/img/bg-img/icons/g-1.png" alt="">
+                  </div>
+                </div>
+                <div class="certi-card-info">
+                  <h4>Full day session</h4>
+                  <p>All membership plans come with a 30-day satisfaction guarantee.</p>
+                </div>
+              </div>
+
+              <!-- Single Card -->
+              <div class="certi-single-card d-flex align-items-center">
+                <div class="certi-border border--second">
+                  <div class="certi-icon bg--second">
+                    <img src="@/assets/img/bg-img/icons/g-2.png" alt="">
+                  </div>
+                </div>
+                <div class="certi-card-info">
+                  <h4>Knowledge Classes</h4>
+                  <p>All membership plans come with a 30-day satisfaction guarantee.</p>
+                </div>
+              </div>
+
+              <!-- Single Card -->
+              <div class="certi-single-card d-flex align-items-center">
+                <div class="certi-border border--navy">
+                  <div class="certi-icon bg--navy">
+                    <img src="@/assets/img/bg-img/icons/g-1.png" alt="">
+                  </div>
+                </div>
+                <div class="certi-card-info">
+                  <h4>Last minute request</h4>
+                  <p>All membership plans come with a 30-day satisfaction guarantee.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="partner-area-2 wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-12">
+            <!-- Slider -->
+            <div class="partner-slider owl-carousel owl-loaded owl-drag">
+              <!-- Single Slider -->
+
+              <!-- Single Slider -->
+
+              <!-- Single Slider -->
+
+              <!-- Single Slider -->
+
+              <!-- Single Slider -->
+
+              <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1220px, 0px, 0px); transition: 1s; width: 3965px;"><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
+              </div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-1.png" alt=""></a>
+              </div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
+              </div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
+              </div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
+              </div></div><div class="owl-item" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-1.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
+              </div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
+                <a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
+              </div></div></div></div><div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div><div class="owl-dots disabled"></div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="counter-area-home-2">
+      <div class="counter-shape wow fadeInLeft" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInLeft;">
+        <img src="@/assets/img/bg-img/counter-shape.png" alt="">
+      </div>
+      <div class="container">
+        <div class="row justify-content-center">
+          <!-- Single card -->
+          <div class="col-sm-6 col-lg-4">
+            <div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
+              <!-- icon -->
+              <div class="counter-2-icon">
+                <span class="icon-ruler-combined-solid-1"></span>
+              </div>
+              <!-- text -->
+              <div class="counter-2-text">
+                <h2><span class="counter">23</span><span>k</span></h2>
+                <p>Online Courses</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Single card -->
+          <div class="col-sm-6 col-lg-4">
+            <div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
+              <!-- icon -->
+              <div class="counter-2-icon">
+                <span class="icon-book-solid-11"></span>
+              </div>
+              <!-- text -->
+              <div class="counter-2-text">
+                <h2><span class="counter">5</span><span>k+</span></h2>
+                <p>Online Courses</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Single card -->
+          <div class="col-sm-6 col-lg-4">
+            <div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
+              <!-- icon -->
+              <div class="counter-2-icon">
+                <span class="icon-ruler-combined-solid-1"></span>
+              </div>
+              <!-- text -->
+              <div class="counter-2-text">
+                <h2><span class="counter">58</span><span>k+</span></h2>
+                <p>Online Student</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="portfolio-area">
+      <!-- Shape -->
+      <div class="gallery-curbe-shape">
+        <img src="@/assets/img/bg-img/hero-2-shape.png" alt="">
+      </div>
+      <div class="g-shape-2 wow fadeInDown animated" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: spin;">
+        <img src="@/assets/img/bg-img/home-2/shape-20.png" alt="">
+      </div>
+
+      <div class="g-shape-3">
+        <img src="@/assets/img/bg-img/home-2/shape-19.png" alt="">
+      </div>
+
+      <div class="g-shape-1 wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
+        <img src="@/assets/img/bg-img/home-2/shape-18.png" alt="">
+      </div>
+      <div class="container">
+        <div class="row justify-content-center">
+          <!-- title -->
+          <div class="col-lg-7">
+            <div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
+              <h6>Portfolio</h6>
+              <h2 class="mb-0">Our Colourful Journey</h2>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-4 g-lg-5 gallery-area" style="position: relative; height: 419.008px;">
+          <!-- Card -->
+          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 0%; top: 0px;">
+            <div class="portfolio-card border--pri-1">
+              <div class="portfolio-image  wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-1.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center venobox-area">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-1.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="portfolio-card border--pri-1 mt-20">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-2.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-2.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Card -->
+          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 25%; top: 0px;">
+            <div class="portfolio-card border--dark-1">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-3.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-3.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="portfolio-card border--navy-1 mt-20">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-4.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-4.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Card -->
+          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 50%; top: 0px;">
+            <div class="portfolio-card border--pri-2">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-5.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-5.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Card -->
+          <div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 75%; top: 0px;">
+            <div class="portfolio-card border--pri-1">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-6.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-6.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="portfolio-card border--navy-1 mt-20">
+              <div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
+                <img src="@/assets/img/bg-img/home-2/p-7.png" alt="">
+
+                <!-- Overlay Content -->
+                <div class="overlay-content d-flex align-items-center justify-content-center">
+                  <div class="text-center">
+                    <a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="img/bg-img/home-2/p-7.png">
+                      <span class="icon-Arrow-1"></span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="upcoming-event-area relative">
+      <!-- all shape img -->
+      <div class="up-shape-1">
+        <img src="@/assets/img/bg-img/home-2/shpe-11.png" alt="">
+      </div>
+      <div class="up-shape-2 wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
+        <img src="@/assets/img/bg-img/home-2/shpe-12.png" alt="">
+      </div>
+
+      <div class="up-shape-3 wow fadeInUp" data-wow-delay="1500ms" style="visibility: visible; animation-delay: 1500ms; animation-name: fadeInUp;">
+        <img src="@/assets/img/bg-img/home-2/shpe-13.png" alt="">
+      </div>
+
+      <div class="container">
+        <div class="row justify-content-center">
+          <!-- title -->
+          <div class="col-lg-6">
+            <div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
+              <h6>Events</h6>
+              <h2 class="mb-0">Upcoming Event</h2>
+            </div>
+          </div>
+        </div>
+
+        <div class="row align-items-end">
+          <div class="col-md-5">
+            <!-- Image -->
+            <div class="event-image wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
+              <img src="@/assets/img/bg-img/event.png" alt="">
+            </div>
+          </div>
+
+          <div class="col-md-1"></div>
+
+          <div class="col-md-6">
+            <div class="event-content-text">
+              <!-- Single Card -->
+              <div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
+                <div class="event-price">
+                  <h5>$30</h5>
+                </div>
+                <div class="event-card-content">
+                  <p>Age: 2-4 Years Time: 9.00 - 11.00</p>
+                  <h4>Magic Princess Birthday Party </h4>
+                </div>
+              </div>
+
+              <!-- Single Card -->
+              <div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1100ms" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInRight;">
+                <div class="event-price">
+                  <h5>$100</h5>
+                </div>
+                <div class="event-card-content">
+                  <p>Age: 2-4 Years Time: 9.00 - 11.00</p>
+                  <h4>Sports Day Carnival</h4>
+                </div>
+              </div>
+
+              <!-- Single Card -->
+              <div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1300ms" style="visibility: visible; animation-delay: 1300ms; animation-name: fadeInRight;">
+                <div class="event-price">
+                  <h5>$10</h5>
+                </div>
+                <div class="event-card-content">
+                  <p>Age: 2-4 Years Time: 9.00 - 11.00</p>
+                  <h4>Cultural Diversity Week </h4>
+                </div>
+              </div>
+
+              <!-- Single Card -->
+              <div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1500ms" style="visibility: hidden; animation-delay: 1500ms; animation-name: none;">
+                <div class="event-price">
+                  <h5>$30</h5>
+                </div>
+                <div class="event-card-content">
+                  <p>Magic Paper Plates Art Gallery</p>
+                  <h4>Magic Princess Birthday Party </h4>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="client-area-home-2 relative">
+      <!-- Curbe shape -->
+      <div class="client-curbe-shape">
+        <img src="@/assets/img/bg-img/home-2/shape-14.png" alt="">
+      </div>
+      <div class="client-2-shape-1">
+        <img src="@/assets/img/bg-img/home-4/shape-6.png" alt="">
+      </div>
+      <div class="container">
+        <div class="row justify-content-center">
+          <!-- title -->
+          <div class="col-md-8 col-lg-7">
+            <div class="section-title-area text-center  wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
+              <h6>Our Client Feedback</h6>
+              <h2 class="mb-0">What they’re saying about our courses</h2>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <!-- Image -->
+          <div class="col-md-4">
+            <div class="client-image-home-2 relative  wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
+              <img class="relative" src="@/assets/img/bg-img/home-2/client.jpeg.jpg" alt="">
+              <div class="c-2-border-1"></div>
+              <div class="c-2-border-2"></div>
+              <div class="c-2-border-3"></div>
+              <div class="c-2-border-4"></div>
+              <div class="c-2-border-5"></div>
+            </div>
+          </div>
+
+          <div class="col-lg-8">
+            <div class="swiper client-active-2 wow fadeInRight swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
+              <!-- If we need navigation buttons -->
+              <div class="testimonials-3-navigation-wrapper position-relative">
+                <div class="common-slider-navigation">
+                  <button class="client-active-1-button-prev" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-bab3cf46d0795ae5"><span class="icon-arrow-right"></span></button>
+                  <button class="client-active-1-button-next" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-bab3cf46d0795ae5"><span class="icon-right"></span></button>
+                </div>
+              </div>
+              <div class="swiper-wrapper" id="swiper-wrapper-bab3cf46d0795ae5" aria-live="off" style="transition-duration: 3000ms; transform: translate3d(-1076px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
+                <div class="client-slider-home-2">
+
+                  <!-- Single Slider -->
+                  <div class="clinet-single-slider">
+                    <div class="footer-icon-home-2">
+                      <span class="icon-search-soli1d-1"></span>
+                    </div>
+                    <div class="client-info-meta-home-2">
+                      <div class="client-img-rating-2">
+                        <div class="clinet-rating">
+                          <ul>
+                            <li><span class="icon-star1"></span></li>
+                            <li><span class="icon-star1"></span></li>
+                            <li><span class="icon-star1"></span></li>
+                            <li><span class="icon-star1"></span></li>
+                            <li><span class="icon-star1"></span></li>
+                          </ul>
+                        </div>
+                      </div>
+
+                      <p>"Edumastery has been an amazing experience for our daughter,
+                        Lily. The
+                        inclusive and enriching atmosphere has not only helped her
+                        academic
+                        growth but has also fostered her social and emotional
+                        development. We
+                        are grateful for the caring and dedicated staff."</p>
+                      <!-- client info -->
+                      <div class="client-footer d-flex align-items-end justify-content-between">
+                        <div class="d-flex align-items-center">
+                          <div class="user-icon">
+                            <span class="icon-Frame"></span>
+                          </div>
+                          <div class="client-info">
+                            <h4>Bessie Cooper</h4>
+                            <p>Nintendo</p>
+                          </div>
+                        </div>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+              </div>
+                <!-- single block -->
+                <div class="swiper-slide swiper-slide-duplicate-active swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
+                  <div class="client-slider-home-2">
+
+                    <!-- Single Slider -->
+                    <div class="clinet-single-slider">
+                      <div class="footer-icon-home-2">
+                        <span class="icon-search-soli1d-1"></span>
+                      </div>
+                      <div class="client-info-meta-home-2">
+                        <div class="client-img-rating-2">
+                          <div class="clinet-rating">
+                            <ul>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                            </ul>
+                          </div>
+                        </div>
+
+                        <p>"Edumastery has been an amazing experience for our daughter,
+                          Lily. The
+                          inclusive and enriching atmosphere has not only helped her
+                          academic
+                          growth but has also fostered her social and emotional
+                          development. We
+                          are grateful for the caring and dedicated staff."</p>
+                        <!-- client info -->
+                        <div class="client-footer d-flex align-items-end justify-content-between">
+                          <div class="d-flex align-items-center">
+                            <div class="user-icon">
+                              <span class="icon-Frame"></span>
+                            </div>
+                            <div class="client-info">
+                              <h4>Bessie Cooper</h4>
+                              <p>Nintendo</p>
+                            </div>
+                          </div>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="swiper-slide swiper-slide-duplicate swiper-slide-active swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
+                  <div class="client-slider-home-2">
+
+                    <!-- Single Slider -->
+                    <div class="clinet-single-slider">
+                      <div class="footer-icon-home-2">
+                        <span class="icon-search-soli1d-1"></span>
+                      </div>
+                      <div class="client-info-meta-home-2">
+                        <div class="client-img-rating-2">
+                          <div class="clinet-rating">
+                            <ul>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                              <li><span class="icon-star1"></span></li>
+                            </ul>
+                          </div>
+                        </div>
+
+                        <p>"Edumastery has been an amazing experience for our daughter,
+                          Lily. The
+                          inclusive and enriching atmosphere has not only helped her
+                          academic
+                          growth but has also fostered her social and emotional
+                          development. We
+                          are grateful for the caring and dedicated staff."</p>
+                        <!-- client info -->
+                        <div class="client-footer d-flex align-items-end justify-content-between">
+                          <div class="d-flex align-items-center">
+                            <div class="user-icon">
+                              <span class="icon-Frame"></span>
+                            </div>
+                            <div class="client-info">
+                              <h4>Bessie Cooper</h4>
+                              <p>Nintendo</p>
+                            </div>
+                          </div>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+                </div></div>
+              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file