<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">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-2xl font-semibold pr-8 pl-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <router-link to="/educators#getintouch"><button>Reach Us</button></router-link></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>
                <div class="flex "><img class="w-screen" src="/img/header-educator.jpg" alt="">
                    <div class="absolute pl-4 lg:pl-40 pt-0 2xl:pt-28 ">
                        <h1 class="hero-text font-semibold text-color-1 lg:w-8/12">Educate Conveniently by Acquiring
                        <span class="text-blue-700">Resources Smoothly!</span></h1>
                        <div class="absolute">
                        <button class="bg-blue-700 pb-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg  h-9 md:text-2xl" >Know More</button>
                    </div>
                    </div>
                </div>
            </section> -->
            <!-- <div class="flex bg-yellow-100 md:h-96 h-72 px-4"></div> -->
            <!-- <section class="p-6 container-fluid shadow-xl">
                <div class="container mx-auto">
                    <p class="text-color-2 font-20px text-justify">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>
            </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>
                <!-- <div class="z-10 grid grid cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16 place-items-center xl:px-24">
                <div class="grid shadow-2xl">
                    <div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6 ">
                        <div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
                            <img class="rounded-lg" src="/img/plan.jpg" alt="">
                            <div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
                                <img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
                        </div>
                    </div>
                </div>
                <div class="grid shadow-2xl">
                    <div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6">
                        <div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
                            <img class="rounded-lg" src="/img/plan.jpg" alt="">
                            <div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
                                <img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
                        </div>
                    </div>
                </div>
                <div class="grid shadow-2xl">
                    <div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6">
                        <div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
                            <img class="rounded-lg" src="/img/plan.jpg" alt="">
                            <div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
                                <img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
                        </div>
                    </div>
                </div>
            </div> -->
            </section>
            <!-- <div class="flex flex-cols-3 justify-center font-bold text-lg py-16">
                <button >
                    <div class="flex border-2 border-blue-700 rounded-l-md w-16 h-8 justify-center text-blue-700">&#60</div>
                </button>
                <div class="flex border-2 border-blue-700 w-16 h-8 justify-center text-blue-700">01 </div>
                <button>
                    <div class="flex border-2 border-blue-700 rounded-r-md w-16 h-8 justify-center text-blue-700">&#62</div>
                </button>
            </div> -->
            <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 mt-16">
                    <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."><router-link to="/dailyplan"><img src="/img/Daily.png" alt=""></router-link></abbr>
                    <abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><router-link to="/weeklyplan"><img src="/img/Weekly.png" alt=""></router-link></abbr>
                    <abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><router-link to="/monthlyplan"><img src="/img/Monthly.png" alt=""></router-link></abbr>
                </div>
            </section>
            <!-- <div class="flex justify-center my-20">
                <button class="bg-blue-700 p-1 text-white pl-4 pr-4 mb-2 rounded-tl-lg rounded-br-lg text-lg ">Start Planning Now</button>
            </div> -->
            <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" style="font-family:Quicksand">Get in Touch</p>
                            <p class="text-2xl md:text-3xl text-color-1 lg:text-justify">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> 
                        <!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
                    </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 xl:px-24 px-4">
                <div class="flex text-color-1 hero-text justify-center pt-8 p-4">Resources For Your Classroom</div>
                <p class="text-xl lg:text-3xl text-justify ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept. </p>
                <div class="grid grid-cols-1 md:grid-cols-5 mt-16 gap-8 place-items-center">
                    <div class=""> <router-link to="/celebrationstories#submitCelebration">
                        <img draggable="false" src="/img/event-ideas1.png" alt="">                      </router-link></div>
                    <div class=""><router-link to="#"><img src="/img/games1.png" alt="">                </router-link></div>
                    <div class=""><router-link to="/worksheets"><img src="/img/worksheets1.png" alt=""> </router-link></div>
                    <div class=""><router-link to="#"><img src="/img/activities1.png" alt="">           </router-link></div>
                    <div class=""><router-link to="#"><img src="/img/more1.png" alt="">                 </router-link></div>
                </div>
                <div class="flex justify-center md:mt-20 mt-8">
                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
                </div>
            </section>
            <section class="container mx-auto pt-20 xl:px-24">
                <div class="flex text-color-1 hero-text justify-center ">Curriculum Blogs</div>
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
                    <div class="grid w-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://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;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-10 px-4">{{ item.meta}}</h1>
                        <div class="text-lg text-justify font-light w-96 text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
                            <!-- <a class=" text-blue-800" href="">Read More>></a> -->
                            <router-link :to="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </router-link>
                    </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>
            <router-link to="/blog">
                <div class="flex justify-center mt-8">
                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
                </div>
            </router-link>
            </section>
            <section class="container mx-auto mt-16 xl:px-24">
                <div class="grid grid-cols-1  xl:grid-cols-2 bg-yellow-100 ">
                    <div class="grid"></div>
                    <div class="grid py-10 px-4">
                        <h1 class="hero-text text-blue-700" 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-6">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"><button class="text-white bg-blue-700 p-2 text-2xl rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Know More</button></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"> Years 2-3</h1>
                        <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-2xl">Download</button>
                    </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"> Years 3-4</h1>
                        <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-2xl">Download</button>
                    </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"> Years 4-5</h1>
                        <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-2xl">Download</button>
                    </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"> Years 5-6</h1>
                        <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-2xl">Download</button>
                    </div>
                </div>
            </section>
            <section class="container mx-auto xl:px-24">
                <div class="grid place-content-center text-color-1 hero-text font-bold pt-48 py-24"> EYFS Curriculum & Its Impact</div>
                <div class="grid grid-cols-1 md:grid-cols-2 p-6">
                    <div class="grid font-20px text-justify text-color-2">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).
                        <img src="/img/legends.png" alt="" class="md:-mt-24">
                    </div>
                    <div class="grid">
                        <div class="flex relative justify-center text-xs">
                            <RoundChart/>
                        </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">
                            <button class="text-blue-700 bg-white text-center w-fit p-1 px-2 lg:text-2xl rounded-tl-xl rounded-br-xl" >Discover Now</button>
                        </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="">
                            <div class="grid h-fit text-color-2">
                                <div tabindex="0" class="collapse collapse-arrow border-b">
                                    <div v-if="faqEducators" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqEducators.title }}</div>
                                    <div class="collapse-content md:text-lg"> 
                                        <p class="" v-html="faqEducators.content"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
                </div>
            </section>
    </div>
</template>
<style scoped>

.h2 {
    font-size: 40px;
}
.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: 16px;
  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;
    
  }
}
</style>

<script>
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://curriculum-app-api.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>