576 lines
32 KiB
Vue
576 lines
32 KiB
Vue
<template>
|
||
<div class="z-10">
|
||
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
|
||
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
|
||
<div class="flex flex-col px-6 w-full justify-center">
|
||
<h1 class="text-color-1 hero-text font-semibold w-full">Educate Conveniently by </h1>
|
||
<span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span>
|
||
<p class="font-20px text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p>
|
||
<div class="grid md:text-base place-items-center py-2 w-fit pt-8">
|
||
<div class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-base font-semibold px-6 py-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Reach Us</button></a></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex w-fit justify-center place-items-center">
|
||
<img class="w-fit h-fit" src="/img/educators1e.png" alt="">
|
||
</div>
|
||
</div>
|
||
</section> -->
|
||
<section class="container mx-auto xl:px-24">
|
||
<h1 class="text-center text-color-1 hero-text font-semibold pt-24 ">Lesson Plans Curated for You</h1>
|
||
<p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan. </p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
|
||
<div class="grid background rounded-xl">
|
||
<div class="bottombar cursor-pointer mt-4">
|
||
<img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt="">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Scholarly Plan </h1>
|
||
<p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid background rounded-xl">
|
||
<div class="bottombar cursor-pointer mt-4">
|
||
<img class=" w-full rounded-t-2xl " src="/img/plan.jpg" alt="">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Engaging Plan </h1>
|
||
<p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid background rounded-xl">
|
||
<div class="bottombar cursor-pointer mt-4">
|
||
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Effective Plan </h1>
|
||
<p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24">
|
||
<div class="flex justify-center hero-text text-color-1 font-semibold mt-20 py-4 text-center">Make your Ideal Lesson Plan</div>
|
||
<p class="font-20px text-color-2 text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 place-items-center">
|
||
<abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/lesson-plan/dailyplan"><img class="w-72 drop-shadow-xl" src="/img/daily.png" alt=""></a></abbr>
|
||
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/lesson-plan/weeklyplan"><img class="w-72 drop-shadow-xl" src="/img/weekly.png" alt=""></a></abbr>
|
||
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/lesson-plan/monthlyplan"><img class="w-72 drop-shadow-xl" src="/img/monthly.png" alt=""></a></abbr>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto xl:px-24 mt-32">
|
||
<div class="flex flex-col lg:flex-row place-items-center justify-center">
|
||
<div class="flex flex-col justify-center ">
|
||
<div class="bg-yellow-100 text-center border-radius px-16">
|
||
<p class="hero-text text-center p-3 text-blue-700 pt-32 font-semibold" style="font-family:Quicksand">Get in Touch</p>
|
||
<p class="text-2xl text-color-1 lg:text-justify font-semibold">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col" id="getintouch">
|
||
<div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
|
||
<div v-if="getinTouchQry">
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
|
||
<input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
|
||
<input type="email" v-model="gtemail" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
|
||
<input type="text" v-model="gtphone" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1"><label for="exampleInputYourAddress" class="form-label inline-block mb-2 text-gray-700">Your Address</label>
|
||
<input type="text" v-model="gtaddress" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group form-check mb-6"><input type="checkbox" value="whatsapp" class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
|
||
<label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
|
||
</div>
|
||
<button @click="saveGetinTouchQry" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-2xl leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
|
||
</div>
|
||
<div v-else>
|
||
<h2 class="text-center py-40 text-4xl">Thank You!</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24">
|
||
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-16 text-color-1 py-4 px-4">Resources To Choose From</div>
|
||
<h2 class="text-justify text-2xl ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
|
||
<div class="grid place-items-center w-auto ">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
|
||
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="drop-shadow-2xl" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
|
||
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="drop-shadow-2xl" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
|
||
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="drop-shadow-2xl" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
|
||
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="drop-shadow-2xl" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
|
||
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="drop-shadow-2xl" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
|
||
</section>
|
||
<section class="container mx-auto pt-20 xl:px-24">
|
||
<div class="flex text-color-1 hero-text justify-center font-semibold">Curriculum Blogs</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 justify-center">
|
||
<div class="grid w-fit h-fit" v-for="(item, index) in tbBlog">
|
||
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img+'?width=420&height=280'" alt="" >
|
||
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
|
||
<h1 class="text-color-1 text-2xl font-semibold pt-4 px-4 line-clamp-2 w-fit">{{ item.meta}}</h1>
|
||
<div class="text-lg text-justify font-light w-fit text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
|
||
<!-- <a class=" text-blue-800" href="">Read More>></a> -->
|
||
<a :href="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </a>
|
||
</div>
|
||
<!-- <div class="grid"> <img src="/img/Curriculum-blog2.png" alt="">
|
||
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">1 DEC</div>
|
||
<h1 class="text-color-1 text-xl font-semibold pt-10">Importance of Pre-school education</h1>
|
||
<p class="text-base text-justify line-clamp-3 font-light w-96 text-color-2 leading-loose">This is the firs exercise in which children are isolated from the warmth and safe environment of their parents. It must therefore be a place that is the second home of the child.</p>
|
||
<a class=" text-blue-800" href="">Read More>></a>
|
||
</div>
|
||
<div class="grid"> <img src="/img/Curriculum-blog3.png" alt="">
|
||
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">1 DEC</div>
|
||
<h1 class="text-color-1 text-xl font-semibold pt-10">Importance of Pre-school education</h1>
|
||
<p class="text-base text-justify line-clamp-3 font-light w-96 text-color-2 leading-loose">This is the firs exercise in which children are isolated from the warmth and safe environment of their parents. It must therefore be a place that is the second home of the child.</p>
|
||
<a class=" text-blue-800" href="">Read More>></a>
|
||
</div> -->
|
||
</div>
|
||
<a href="/blog">
|
||
<div class="flex justify-center mt-8">
|
||
<button class="bg-blue-700 p-2 text-base text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
|
||
</div>
|
||
</a>
|
||
</section>
|
||
<section class="container mx-auto mt-16 xl:px-24">
|
||
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 place-items-center">
|
||
<div class="grid">
|
||
<img class="p-16" src="/img/skill-up.png" alt="">
|
||
</div>
|
||
<div class="grid py-10 px-4 h-fit">
|
||
<h1 class="hero-text text-blue-700 leading-tight font-semibold" style="font-family:Quicksand">Skill Up with Us & <br>
|
||
<span class="text-color-1">to Be a superhero at your Preschool</span></h1>
|
||
<h1 class="text-xl md:text-2xl text-color-2 pt-2">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
|
||
<div class="flex py-4"><a target="_blank" href="https://atheneumglobal.education/"><button class="text-white bg-blue-700 py-2 px-4 text-2xl rounded-tl-lg rounded-br-lg h-fit" style="font-family:Quicksand">Know More</button></a></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto xl:px-24">
|
||
<div class="flex justify-center text-color-1 font-bold hero-text py-16 px-4">Download Report Card Format</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 place-items-center text-center gap-y-16 gap-x-8 px-4 " >
|
||
<div class="grid h-80 w-72 bg-yellow-100 relative">
|
||
<img class="" src="/img/report-card1.png" alt="">
|
||
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70">Years 2-3</h1>
|
||
<a href="/img/report-card1.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
|
||
</div>
|
||
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt="">
|
||
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 3-4</h1>
|
||
<a href="/img/report-card2.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
|
||
</div>
|
||
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt="">
|
||
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 4-5</h1>
|
||
<a href="/img/report-card3.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
|
||
</div>
|
||
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt="">
|
||
<h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 5-6</h1>
|
||
<a href="/img/report-card4.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
|
||
<h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
|
||
<div class="grid h-fit">
|
||
<div class="text-justify text-color-2">
|
||
<p class="py-8 font-20px">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).</p>
|
||
<img src="/img/legends.png" alt="" class="">
|
||
</div>
|
||
</div>
|
||
<div class="grid ">
|
||
<div class="flex relative justify-center text-xs ">
|
||
<div class="grid">
|
||
<div class="flex relative justify-center text-xs">
|
||
<img class="" src="/img/frame1.png" alt="">
|
||
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Literacy</abbr>
|
||
</p>
|
||
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Comunication <br>& Language</abbr>
|
||
</p>
|
||
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Mathematics</abbr>
|
||
</p>
|
||
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Understanding <br> the World </abbr>
|
||
</p>
|
||
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Physical <br> Development </abbr>
|
||
</p>
|
||
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Expressive Arts<br> & Desgine </abbr>
|
||
</p>
|
||
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
||
Preschool, Social <br>& Emotional <br>Development</abbr>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto xl:px-24">
|
||
<div class="flex justify-center place-items-right py-20"><img src="/img/bnnr.png" alt="">
|
||
<div class="absolute md:pt-8 xl:pt-40 text-white px-4 md:px-0 xl:pl-72">
|
||
<h1 class="text-lg md:text-2xl lg:text-4xl" >New Interventions in Preschool Education</h1>
|
||
<h1 class="text-sm lg:text-2xl" >Check Out what new interventions are going to be implemented <br> in Preschool education system</h1>
|
||
<div class="md:py-2">
|
||
<a target="_blank" href="/whats-new"><button class="text-blue-700 bg-white text-center w-fit py-1 px-4 lg:text-lg rounded-tl-xl rounded-br-xl" >Discover Now</button></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto py-20 px-4 xl:px-24">
|
||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
|
||
<div class="grid h-fit">
|
||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||
<div v-for="faqEducators in faqEducators" :key="faqEducators.id" class="">
|
||
<details>
|
||
<summary>
|
||
<div class="cursor-pointer" v-if="faqEducators"> {{ faqEducators.title }}</div>
|
||
</summary>
|
||
<div v-html="faqEducators.content"></div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
<style>
|
||
.line-clamp-4 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.line-clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
details {
|
||
font-weight: lighter;
|
||
border-bottom: 1px solid #d4d4d4;
|
||
border-color: #d4d4d4;
|
||
padding: .75em .75em 0;
|
||
font-size: 18px;
|
||
/* margin-top: 10px; */
|
||
/* box-shadow:0 0 8px #d4d4d4; */
|
||
}
|
||
|
||
summary {
|
||
margin: -.75em -.75em 0;
|
||
padding: .75em;
|
||
}
|
||
|
||
details[open] {
|
||
padding: .75em;
|
||
border-bottom: 1px solid #d4d4d4;
|
||
}
|
||
|
||
details[open] summary {
|
||
border-bottom: 1px solid #d4d4d4;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.body {
|
||
font-family: 'Quicksand', sans-serif;
|
||
}
|
||
.bg3 {
|
||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
|
||
.h1-text {
|
||
font-size: 30px;
|
||
}
|
||
.bottombar {
|
||
font-size: large;
|
||
/* width: 42px; */
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
/* position: fixed; */
|
||
bottom: 12;
|
||
line-clamp: 3;
|
||
width: auto;
|
||
padding: 0px;
|
||
background-color: #f9b8ce;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.bottombar:hover{
|
||
overflow: visible;
|
||
white-space: normal;
|
||
width: auto;
|
||
height: auto;
|
||
padding: 10px;
|
||
background-color: #f9b8ce;
|
||
border-radius: 16px;
|
||
}
|
||
.literacy {
|
||
transform: rotate(24deg);
|
||
/* left: 24px; */
|
||
top: 120px;
|
||
/* align-items: center; */
|
||
}
|
||
.comunication {
|
||
transform: rotate(80deg);
|
||
/* left: 360px; */
|
||
top: 170px;
|
||
}
|
||
.mathematics {
|
||
transform: rotate(-50deg);
|
||
top: 373px;
|
||
}
|
||
.world {
|
||
transform: rotate(-10deg);
|
||
top: 420px;
|
||
}
|
||
.physical {
|
||
transform: rotate(44deg);
|
||
top: 340px;
|
||
}
|
||
.expressive {
|
||
transform: rotate(-90deg);
|
||
top: 225px;
|
||
}
|
||
.preschool {
|
||
transform: rotate(-35deg);
|
||
top: 95px;
|
||
}
|
||
.border-radius{
|
||
border-top-left-radius: 200px;
|
||
height: 400px;
|
||
}
|
||
|
||
/* # The Rotating Marker # */
|
||
details summary::-webkit-details-marker { display: none; }
|
||
summary::before {
|
||
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
|
||
content: "▶";
|
||
position: absolute;
|
||
top: 1rem;
|
||
left: 0.8rem;
|
||
transform: rotate(0);
|
||
transform-origin: center;
|
||
transition: 0.2s transform ease;
|
||
}
|
||
details[open] > summary:before {
|
||
transform: rotate(90deg);
|
||
transition: 0.45s transform ease;
|
||
}
|
||
|
||
/* # The Sliding Summary # */
|
||
details { overflow: hidden; }
|
||
details summary {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
@keyframes details-show {
|
||
from {
|
||
margin-bottom: -80%;
|
||
opacity: 0;
|
||
transform: translateY(-100%);
|
||
}
|
||
}
|
||
details > *:not(summary) {
|
||
animation: details-show 500ms ease-in-out;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: all 0.3s ease-in-out;
|
||
color: transparent;
|
||
overflow: hidden;
|
||
}
|
||
details[open] > *:not(summary) { color: inherit; }
|
||
|
||
/* # Style 2 # */
|
||
details.style2 summary::before {
|
||
content: "×";
|
||
font-size: 2rem;
|
||
line-height: 1rem;
|
||
transform: rotate(-45deg);
|
||
top: 1.2rem;
|
||
left: 0.5rem;
|
||
}
|
||
details[open].style2 > summary:before {
|
||
transform: rotate(90deg);
|
||
color: rgb(0, 0, 0) !important;
|
||
transition: color ease 2s, transform ease 1s;
|
||
}
|
||
|
||
/* # Style 3 # */
|
||
details .moon-new { display: inline; }
|
||
details .moon-full { display: none; }
|
||
details[open] .moon-new { display: none; }
|
||
details[open] .moon-full { display: inline; }
|
||
details.style7 .content { background: #DDD; }
|
||
|
||
/* # Just Some Pretty Styles # */
|
||
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
|
||
img { max-width: 100%; }
|
||
p { margin: 0; padding-bottom: 10px; }
|
||
p:last-child { padding: 0; }
|
||
details {
|
||
max-width: 800px;
|
||
box-sizing: border-box;
|
||
margin-top: 5px;
|
||
background: rgb(255, 255, 255);
|
||
}
|
||
summary {
|
||
border: 4px solid transparent;
|
||
outline: none;
|
||
padding: 8px;
|
||
display: block;
|
||
padding-left: 2.2rem;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
details[open] summary,
|
||
summary:hover {
|
||
color: #1e293b;
|
||
}
|
||
summary:hover strong,
|
||
details[open] summary strong,
|
||
summary:hover::before,
|
||
details[open] summary::before {
|
||
color: #1e293b;
|
||
}
|
||
.content {
|
||
padding: 10px;
|
||
}
|
||
.text-color-1 {
|
||
color: #7C4C23;
|
||
font-family: 'Quicksand';
|
||
}
|
||
.text-color-2 {
|
||
color: #333333;
|
||
font-family: 'Quicksand';
|
||
}
|
||
.text-color-3 {
|
||
color: #434343;
|
||
}
|
||
.menu3 {
|
||
color: #c9d438;
|
||
}
|
||
.font-20px {
|
||
font-size: 20px;
|
||
}
|
||
|
||
|
||
@media screen and (min-width: 1500px) {
|
||
.hero-text {
|
||
font-size: 50px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1499px) {
|
||
.hero-text {
|
||
font-size: 40px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 1199px) {
|
||
.hero-text {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
|
||
@media screen and (min-width: 1500px) {
|
||
.h2 {
|
||
font-size: 40px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1499px) {
|
||
.h2 {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 1199px) {
|
||
.h2 {
|
||
font-size: 25px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script is:inline>
|
||
export default {
|
||
setup(){
|
||
// const route = useRoute();
|
||
},
|
||
data() {
|
||
return {
|
||
isLoading: true,
|
||
faqEducators: null,
|
||
name:null,
|
||
phone:null,
|
||
msg:null,
|
||
getinTouchQry:true,
|
||
gtname:null,
|
||
gtphone:null,
|
||
gtemail:null,
|
||
gtaddress:null,
|
||
tbBlog: {},
|
||
curriculum: {},
|
||
// contact_form:{}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
|
||
// this.getItemByCategory()
|
||
// console.log(this.smProducts)
|
||
// console.log(this.$route.query.cat)
|
||
// console.log(this.fruits)
|
||
|
||
},
|
||
mounted: function () {
|
||
this.getItemByCategory()
|
||
// console.log(this.smProducts)
|
||
// console.log(this.$route.query.cat)
|
||
// console.log(this.fruits)
|
||
},
|
||
methods: {
|
||
saveGetinTouchQry() {
|
||
let formData = new FormData();
|
||
formData.append('Name', this.gtname);
|
||
formData.append('Phone', this.gtphone);
|
||
formData.append('Email', this.gtemail);
|
||
formData.append('MessageDetails', this.gtaddress);
|
||
formData.append('formName', 'tb-educators-Need-Help-Planning-Curriculum');
|
||
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
|
||
{
|
||
method: 'POST',
|
||
body: formData,
|
||
}
|
||
)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// console.log(data)
|
||
});
|
||
// formData=""
|
||
this.getinTouchQry=false
|
||
},
|
||
getItemByCategory() {
|
||
fetch('https://management.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=curriculum&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
this.tbBlog = data.data
|
||
// console.log(data)
|
||
this.curriculum
|
||
this.isLoading = false
|
||
})
|
||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=educators')
|
||
.then(resp => resp.json())
|
||
.then(data => {
|
||
this.faqEducators=data.data
|
||
// console.log(this.faqEducators)
|
||
})
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
</script> |