586 lines
32 KiB
Vue
586 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=" w-fit rounded-t-2xl " src="/img/dailylesson-planw.jpg" alt="Daily Plan">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/dailyplan">Daily Plan</a> </h1>
|
||
<p class="text-color-1 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-fit rounded-t-2xl " src="/img/weekly-lesson-planw.jpg" alt="Weekly Plan">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/weeklyplan">Weekly Plan</a> </h1>
|
||
<p class="text-color-1 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-fit rounded-t-2xl" src="/img/monthly-lesson-planw.jpg" alt="Monthly Plan">
|
||
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/monthlyplan">Monthly Plan</a> </h1>
|
||
<p class="text-color-1 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="Daily Plan"></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="Weekly Plan"></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="Monthly Plan"></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" 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" 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" 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" 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" 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" style="width:100%; height: 205px;" :alt="item.alt_text" >
|
||
<div class="flex bg-yellow-200 absolute mt-32 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="Skill Up with Us & to Be a superhero at your Preschool">
|
||
</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="Report Card Years-2-3">
|
||
<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="Report Card Years-3-4">
|
||
<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="Report Card Years-4-5">
|
||
<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="Report Card Years-5-6">
|
||
<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="legends.png" 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="EYFS Curriculum & Its Impact">
|
||
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer">
|
||
<abbr title="The aim is to lay a strong foundation for children in literacy by introducing them to language during the early stages of their life, thereby preparing them for school.">
|
||
Literacy</abbr>
|
||
</p>
|
||
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer">
|
||
<abbr title="The objective is to teach appropriate behavioral patterns and develop skills in toddlers to enhance their confidence and facilitate smooth communication with others.">
|
||
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=" Build a strong math foundation by starting with basics to enhance pre-math knowledge and boost performance in future learning.">
|
||
Mathematics</abbr>
|
||
</p>
|
||
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer">
|
||
<abbr title="Foster self-responsibility, independence, and positive character development in children to better understand societal phenomena.">
|
||
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="Offering guidance and engaging in outdoor activities for fun to promote physical development at every stage.">
|
||
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="Stimulating the mind cells through extracurricular activities especially arts and designing to help children acquire new talents.">
|
||
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="The focus is on the comprehensive development of children, taking into consideration all aspects of their growth to ensure a better future.">
|
||
Personal, 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="New Interventions in Preschool Education">
|
||
<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;
|
||
}
|
||
.image {
|
||
height: 300px;
|
||
}
|
||
.bottombar {
|
||
font-size: large;
|
||
width: fit-content;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
/* position: fixed; */
|
||
bottom: 12;
|
||
line-clamp: 3;
|
||
width: auto;
|
||
padding: 10px;
|
||
background-color: #fef9c3;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.bottombar:hover{
|
||
overflow: visible;
|
||
white-space: normal;
|
||
width: auto;
|
||
height: auto;
|
||
padding: 10px;
|
||
background-color: #fef9c3;
|
||
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> |