<script setup lang="ts"> const { t, locale, setLocale } = useI18n() </script> <template> <FixArea></FixArea> <Header-top-section /> <TopHeader /> <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="t('search')" /> </div> </form> </div> </div> </div> <section class="hero-section hero-1 fix"> <div class="bottom-shape"> <img style="width: 100%; height: auto" src="/picture/bottom.svg" alt="shape-img" /> </div> <div class="parasuit-shape float-bob-y"> <img src="/picture/parasuit.png" alt="shape-img" /> </div> <div class="left-shape"> <img src="/picture/left.png" alt="shape-img" /> </div> <div class="book-shape float-bob-x"> <img src="/picture/book.png" alt="shape-img" /> </div> <div class="pencil-shape"> <img src="/picture/pencil.png" alt="shape-img" /> </div> <div class="bee-shape float-bob-y"> <img src="/picture/bee.png" alt="shape-img" /> </div> <div class="right-shape"> <img src="/picture/right.png" alt="shape-img" /> </div> <div class="star-shape"> <img src="/picture/star.png" alt="shape-img" /> </div> <div class="container"> <div class="row g-4 align-items-center"> <div class="col-lg-6"> <div class="hero-content"> <h5 class="wow fadeInUp">{{ t('kindergartenAndBabyCare') }}</h5> <h1 class="wow fadeInUp" data-wow-delay=".3s"> {{ t('happySpeaking') }} </h1> <h1 class="wow fadeInUp" data-wow-delay=".3s"> {{ t('happyReading') }} </h1> <h1 class="wow fadeInUp" data-wow-delay=".3s"> {{ t('happyWriting') }} </h1> <p class="wow fadeInUp" data-wow-delay=".5s"> {{ t('communicationIsNatural') }} </p> <div class="hero-button"> <NuxtLink to="/contact" class="theme-btn wow fadeInUp" data-wow-delay=".7s"> {{ t('applyToday') }} <i class="fa-solid fa-arrow-right-long"></i> </NuxtLink> </div> </div> </div> <div class="col-lg-6"> <div class="hero-image wow fadeInUp" data-wow-delay=".4s"> <img src="/picture/01.png" alt="hero-img" /> <div class="hero-shape"><img src="/picture/hero-shape.png" alt="shape-img" /></div> </div> </div> </div> </div> </section> <section class="about-section section-padding"> <div class="bus-shape float-bob-x"><img src="/picture/bus.png" alt="shape-img" /></div> <div class="girl-shape float-bob-y"><img src="/picture/girl.png" alt="shape-img" /></div> <div class="dot-shape"><img src="/picture/dot.png" alt="shape-img" /></div> <div class="container"> <div class="about-wrapper mb-40"> <div class="row g-4"> <div class="col-lg-6"> <div class="about-image wow fadeInUp" data-wow-delay=".3s"> <img src="/picture/011.png" alt="about-img" /> <div class="about-image-2"><img src="/picture/02.png" alt="about-img" /></div> </div> </div> <div class="col-lg-6"> <div class="about-content"> <div class="section-title"> <span class="wow fadeInUp">{{ t('aboutUs') }}</span> <h2 class="wow fadeInUp" data-wow-delay=".3s">{{ t('bestChoiceForChildren') }}</h2> </div> <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s"> {{ t('educationIsNotFilling') }} </p> <AboutList /> <div class="about-author"> <div class="about-button wow fadeInUp" data-wow-delay=".3s"> <a href="javascript:(0)" class="theme-btn"> {{ t('exploreMore') }} <i class="fa-solid fa-arrow-right-long"></i> </a> </div> <div class="author-icon wow fadeInUp" data-wow-delay=".5s"> <div class="icon"><i class="fa-solid fa-phone"></i></div> <div class="content"> <span>{{ t('callUsNow') }}</span> <h5><a href="tel:+86 18589716552">+86 18589716552</a></h5> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="program-section section-padding section-bg-2 fix"> <div class="top-shape"> <img class="bgCover" src="/picture/section-top-shape.svg" alt="shape-img" /> </div> <div class="bottom-shape"> <img class="bgCover" src="/picture/section-bottom-shape.svg" alt="shape-img" /> </div> <div class="mask-shape float-bob-x"><img src="/picture/mask.png" alt="shape-img" /></div> <div class="pencil-shape"><img src="/picture/pencil1.png" alt="shape-img" /></div> <div class="mask-shape-2"><img src="/picture/mask-2.png" alt="shape-img" /></div> <div class="compass-shape"><img src="/picture/compass.png" alt="shape-img" /></div> <div class="container container-xxxl"> <div class="section-title text-center mt-60"> <span class="wow fadeInUp">{{ t('ourPrograms') }}</span> <h2 class="wow fadeInUp" data-wow-delay=".3s"> {{ t('weMeetKidsAtTheirLevel') }} <br /> {{ t('regardlessOfTheirAge') }} </h2> </div> <HomeIndexKindergartenClass /> </div> </section> <HomeIndexWorkWrapper /> <HomeIndexActivitiesWrapper /> <HomeIndexRecommendation /> <HomeIndexTeachers /> <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> <div class="pencil-shape"> <img src="/picture/pencil3.png" alt="img" /> </div> <div class="container"> <div class="cta-wrapper"> <div class="row justify-content-between"> <div class="col-lg-6"> <div class="section-title"> <span class="text-white wow fadeInUp">{{ t('getYourQuality') }}</span> <h2 :class="locale == 'zh' ? 'text-with-spacing' : ''" class="text-white wow fadeInUp" data-wow-delay=".3s" > {{ t('comeAndBeAPartOfIt') }} </h2> </div> <div class="cta-button mt-4 mt-md-0 wow fadeInUp" data-wow-delay=".5s"> <NuxtLink to="/contact" class="theme-btn bg-white"> {{ t('applyNow') }} </NuxtLink> </div> </div> <div class="col-lg-5 wow fadeInUp" data-wow-delay=".4s"> <div class="cta-image"> <img src="/picture/cta-1.png" alt="cta-img" /> <div class="cta-shape"> <img src="/picture/cta-shape.png" alt="img" /> </div> </div> </div> </div> </div> </div> </section> <FooterSection></FooterSection> </template> <style lang="css" scoped> .bgCover { width: 100%; height: auto; object-fit: contain; } .text-with-spacing { letter-spacing: 5px; } </style>