<template>
    <div>
        <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-4 w-fit justify-center">
                    <h1 class="text-blue-700 hero-text font-bold">Discover Solutions<span class="text-color-1 "> For Your Preschool</span></h1>
                    <p class="font-20px pt-8 text-justify">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods.</p>
                    <div class="pt-8"><button class="shadow-2xl text-lg px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
                </div>
                <!-- <button>Discover Now</button> -->
                <div class="flex w-fit justify-center place-items-center">
                    <img class="w-fit h-fit" src="/img/administrator1a.png" alt="">
                </div> 
            </div>
        </section>
        <!-- <section class="container-fluid">
            <div class="flex relative"><img class="w-screen" src="/img/header-administrator.jpg" alt="">
                <div class="absolute pl-6 pt-4 xl:pl-40 2xl:pt-40">
                    <h1 class="text-blue-700 hero-text font-bold lg:w-6/12">Discover Solutions <span class="text-color-1">For Your Preschool</span></h1>
                </div>
            </div>
            <div class="text-blue-700 text-3xl md:text-6xl bg-gradient-to-t from-blue-200 pt-28 pb-28 md:pl-48 text-center md:text-start">
            </div>
        </section> -->
        <!-- <section class="container-fluid shadow-xl"> 
            <p class="container mx-auto text-justify p-6 font-20px">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. 
                Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods. </p>
        </section> -->
        <section class="container mx-auto px-4 xl:px-24" >
            <h1 class="text-center h1-text pt-28 text-color-1 font-semibold">Preschool Marketing Solutions</h1>
            <p class="text-justify font-20px pt-2 text-color-2 pt-6">Want to increase your enrollments and profit? Why don’t you try the most efficacious and lucrative methods that have been tested and tried by us and our partners? We are here with our professionals to serve you the best experience and tell you the techniques that actually help in boosting admissions! Our preschool marketing solutions have been made specifically for your preschool’s growth. </p>
        </section>
        <section>
            <div class="container mx-auto xl:px-8">
                <div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 font-20px pt-10">
                    <div class="grid px-8">
                        <h1 class="p-2">Social Media Advertisement </h1>
                        <h1 class="p-2">FAQ Webinars</h1>
                        <h1 class="p-2">Video Marketing </h1>
                    </div>
                    <div class="grid px-8">
                        <h1 class="p-2">Virtual Tour</h1>
                        <h1 class="p-2">Instant Message Marketing</h1>
                    </div>
                    <div class="grid px-8">
                        <h1 class="p-2 pr-4">SEO (Search Engine Optimization)</h1>
                        <h1 class="p-2">E-mail Marketing</h1>
                        <h1 class="p-2">Audio Marketing</h1>
                    </div>
                </div>
            </div>
        </section>
        <section class="container mx-auto px-2 xl:px-24">
            <h1 class=" text-color-1 h1-text text-center pt-10 px-4 font-semibold">Check Out Our Marketing Blog</h1>
            <p class="text-justify text-xl lg:text-2xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
            <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="marketing in marketing" :key="marketing"> 
                    <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" >
                    <div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div>
                    <h2 class="text-color-1 text-3xl font-semibold pt-10 px-4">{{ marketing.title}}</h2>
                    <div class="text-justify line-clamp-3 font-20px text-color-2 px-4" v-html="marketing.meta_description"></div>
                        <a  href="'/blog/' + marketing.slug" class="text-blue-600 font-20px px-4">Read More >> </a>
                </div>
            </div>
            <a href="/blog">
                <div class="flex justify-center mt-8">
                    <button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
                </div>
            </a>
        </section>
         <section class="container mx-auto px-4 my-16 xl:px-24">
            <div class="grid bg-amber-100 grid-cols-1 lg:grid-cols-2">
                <div class="grid place-items-center "><img class=" rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/marketing.png" alt=""/></div>
                <div class="grid px-4 w-fit">
                    <div class="text-blue-700 hero-text pt-16 px-4 font-semibold">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
                    <h3 class="font-20px py-4 text-color-2 px-4">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3>
                    <form class="" v-if="MarketingSolutionsQry">
                        <div class="flex flex-wrap mb-6 md:mb-0">
                            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                                <input class="appearance-none block w-full text-gray-700 border border-gray-400 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="name" type="text" placeholder="Your Name">
                            </div>
                            <div class="w-full md:w-1/2 px-3">
                                <input class="appearance-none block w-full text-gray-700  border border-gray-400 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100"  v-model="phone" type="text" placeholder="Your Phone No.">
                            </div>
                        </div>
                        <div class="form-control px-3">
                            <textarea class="p-4 w-full textarea textarea-bordered border box text-lg h-40  focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea>
                        </div>
                    </form>
                    <div v-else>
                        Thank you, we will get back to you soon!
                    </div>
                    <div class="flex justify-center md:justify-end mt-3 px-4"><button class="bg-blue-700 text-2xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8" @click="saveMarketingSolutionsQry">Send Now</button></div> 
                </div>
            </div>
        </section>
        
        <section class="container mx-auto px-4 xl:px-24">
            <h1 class="text-color-1 h1-text font-semibold text-center">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
            <p class="text-justify font-20px pt-2 text-color-2 text-center">Smoothen your daily preschool management process with the administration preschool solutions provided by us. Minimize the troubles and save your efforts, time and ideas for the most essential tasks, while we guide and support in fulfillment of your administrative tasks. 
                With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
            <div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 pl-10" >
                <p class="text-left">Adminstration Technology</p>
                <p class="text-left">Curriculum Implementation</p>
                <p class="text-left">Employee Training</p>
                <p class="text-left">Preschool Marketing</p>
            </div>
        </section>
        <section class="container mx-auto px-4 xl:px-24">
            <h1 class="text-color-1 h1-text mt-16 font-semibold text-center">Our Solutions Help You in <span class="text-blue-700">Adminstrating your Preschool</span> </h1>
            <p class="text-justify font-20px pt-2 text-color-2">Teeny Beans Preschool Curriculum offers a blend of all types of preschool solutions that you must need to fulfill your preschool’s daily needs. Whether it is marketing, operations or technology, we have covered it all for you! </p>
        </section>
        <section class="container mx-auto my-16 px-4 xl:px-24"> 
            <h1 class="text-color-1 h1-text font-semibold text-center">Technology Solution For Preschool</h1>
            <p class="text-justify font-20px pt-2 text-color-2">Escalate your playschool’s growth with the technological preschool solution that offers administration with digitization! Accuracy, effectiveness and newer ways of management comes true with our efficacious solution curated for your preschool’s needs. Find the fundamental technology solutions for your preschool below and raise your growth seamlessly. </p>
            <div class="grid grid-cols-1 lg:grid-cols-3 text-blue-700 pt-10 font-20px justify-center">
                <div class="grid grid-rows-3 text-start md:text-left gap-10">
                    <h1 class="">Digital Books</h1>
                    <h1 class="">Blockchain Technology</h1>
                    <h1 class="">Artificial Inteligence</h1>
                </div>
                <div class="grid grid-rows-3 text-start md:text-center gap-10">
                    <h1 class="">Multi Sensory Classrooms</h1>
                    <h1 class="">VR and AR</h1>
                    <h1 class="">Attendance & Progress Tracking</h1>
                </div>
                <div class="grid grid-rows-3 text-start md:text-right gap-10">
                    <h1 class="">Remote Learning</h1>
                    <h1 class="">Intractive Gamification</h1>
                    <h1 class="">Staff Management</h1>
                </div>
            </div>
        </section>
        <section class="container mx-auto px-2 xl:px-24">
            <div class="flex text-color-1 h1-text justify-center font-semibold">Check Out Our Adminstration Blog</div>
            <p class="text-xl lg:text-3xl pt-2 text-color-2">Read the most suitable administration preschool solutions and be familiar with all necessary information for your management decisions. </p>
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
                <div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration"> 
                    <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" >
                    <div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
                    <h1 class="text-color-1 text-2xl  pt-4 px-4 line-clamp-2 font-semibold">{{ adminstration.meta}}</h1>
                    <div class="font-20px text-justify text-color-2 px-4 line-clamp-4" v-html="adminstration.meta_description"></div>
                        <a  href="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </a>
                </div>
            </div>
            <a href="/blog">
                <div class="flex justify-center mt-8">
                    <button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
                </div></a>
        </section>
        <section  class="container mx-auto xl:px-24 px-4">
                <div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6 gap-x-16">
                    <div class="grid">
                        <img class="md:p-14" src="/img/skill-up.png" alt="">
                    </div>
                    <div class="grid hero-text text-blue-700 pt-16 leading-tight font-semibold">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
                        <p class=" font-20px py-2 text-color-2 pr-6 font-normal">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p>
                        <div class="flex justify-start mt-2 pb-20">
                            <button class="bg-blue-700 p-1 text-lg font-normal text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 ">Know More</button>
                        </div>
                    </div>
                </div>
        </section>
        <section  class="container mx-auto px-4 xl:px-24">
            <div class="grid md:grid-cols-2 place-items-between pt-20">
                <div class="grid justify-start h1-text text-color-1 font-semibold">Latest Trends In Preschool Education 
                    <p class="text-justify font-20px pt-2 text-color-2 font-normal">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p>
                </div>
                <div class="grid md:justify-evenly justify-start md:ml-72 px-6"><a href="/whatsnew" class="shadow-2xl text-lg bg-blue-700 p-1 text-white px-6 py-2 h-fit rounded-tl-lg rounded-br-lg mt-2">Read All </a></div>
            </div>
            <div class="container mx-auto">
                <!-- <carousel :items-to-show="2.5">
                    <slide v-for="slide in 10" :key="slide">
                        <div class="container mx-auto">
                            <div class="grid w-96 mt-20 border-2 p-4 rounded-xl">
                                <div class="grid w-fit text-justify text-lg line-clamp-3 bg-gray-100"><img src="/img/person4.png" alt="" class="">
                                    <h1 class="text-2xl font-semibold pt-4 pb-4">Focus On Health Protocols</h1>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies quam diam pulvinar donec nam turpis nibh
                                    consectetur mattis. laculis duis amet tortor arcu, in lorem tortor. Sit sed rhoncus sollicitudin porttitor consequat
                                    massa amet duis. Massa eros, vel diam vel at amet etiam facilisis. Placerat quam gravida amet justo, massa odio in
                                    lorem eget. Amet imperdiet faucibus in quis. Bibendum at felis, dolor, bibendum ac turpis fringilla erat.
                                    A tincidunt ut tincidunt pharetra. Ut viverra varius cras nisi, tincidunt. Lacus semper nibh et neque facilisis.
                                </div>
                                <a href=""><div class="text-blue-700 text-start bg-gray-100 rounded-xl">Read More>> </div></a>
                            </div>
                        </div>
                    </slide>
                    <template #addons>
                        <navigation />
                    </template>
                </carousel> -->
            </div>
        </section>
        <section class="container mx-auto xl:px-24">
            <div class="grid md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16">
                <div class="grid place-items-center px-4">
                    <div class="text-color-1 hero-text pt-6 font-semibold">Reach Out to Us</div>
                        <h3 class="text-justify font-20px text-color-2 my-4 px-4">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3>
                        <form class="grid place-items-center" v-if="rOutQry">
                            <div class="flex flex-wrap mb-6 justify-center">
                                <div class="md:w-1/2 px-3 mb-6 md:mb-0">
                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name">
                                </div>
                                <div class="md:w-1/2 px-3">
                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number">
                                </div>
                            </div>
                            <div class="flex flex-wrap mb-6 justify-center">
                                <div class="md:w-1/2 px-3 mb-6 md:mb-0">
                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="rOutEmail" type="email" placeholder="Your E-mail">
                                </div>
                                <div class="md:w-1/2 px-3">
                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100"  v-model="rOutAddress" type="text" placeholder="Your Address">
                                </div>
                            </div>
                            <div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-lg p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div> 
                        </form>
                        <div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div>
                    </div>
                    <div class="grid place-items-center"><img src="/img/rectangle100.png" alt=""></div>

            </div>
        </section>
        <section class="container mx-auto px-4 xl:px-24">
            <div class="grid md:grid-cols-2 place-items-between ">
                <div class="grid justify-start h1-text text-color-1 font-semibold">Trending Themes for Preschools in 2023
                    <p class="font-20px pt-2 text-color-2 text-justify font-normal">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p>
                </div>
                <div class="grid md:justify-evenly justify-start md:ml-72"><a href="/themes" class="shadow-2xl bg-blue-700 p-1 text-lg text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 h-fit">Explore Themes</a></div>
            </div>
                <!-- <carousel :items-to-show="2.5">
                    <slide v-for="slide in 10" :key="slide">
                        <div class="container mx-auto">
                            <div class="grid w-96 mt-20 border-2 p-4 rounded-xl">
                                <div class="grid text-justify text-lg line-clamp-3 bg-gray-100"><img src="/img/person4.png" alt="" class="">
                                    <h1 class="text-2xl font-semibold pt-4 pb-4">Focus On Health Protocols</h1>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies quam diam pulvinar donec nam turpis nibh
                                    consectetur mattis. laculis duis amet tortor arcu, in lorem tortor. Sit sed rhoncus sollicitudin porttitor consequat
                                    massa amet duis. Massa eros, vel diam vel at amet etiam facilisis. Placerat quam gravida amet justo, massa odio in
                                    lorem eget. Amet imperdiet faucibus in quis. Bibendum at felis, dolor, bibendum ac turpis fringilla erat.
                                    A tincidunt ut tincidunt pharetra. Ut viverra varius cras nisi, tincidunt. Lacus semper nibh et neque facilisis.
                                </div>
                                <a href=""><div class="text-blue-700 text-start bg-gray-100 rounded-xl">Read More>></div></a>
                            </div>
                        </div>
                    </slide>
                    <template #addons>
                        <navigation />
                        
                    </template>
                </carousel> -->

        </section>
        <section>
            <div class="container mx-auto xl:px-24">
                <div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16 gap-y-8">
                    <div class="grid place-items-center">
                        <div class="grid text-color-1 h1-text pt-6 font-semibold">Case Study</div>
                        <div class="w-full max-w-lg" v-if="csQry">
                            <h3 class="text-center text-xl lg:text-3xl p-4">You can download the case study here</h3>
                            <div class="flex flex-wrap mb-6">
                                <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" type="text" placeholder="Your Name">
                                </div>
                            </div>
                            <div class="flex flex-wrap mb-6">
                                <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="csEmail"  type="text" placeholder="Your E-mail Id">
                                </div>
                            </div>
                            <div class="flex justify-center -mt-4">
                            <button class="bg-blue-700 p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8 text-lg" @click="saveCsQry" >Download Now</button></div>
                        </div>
                        <div v-else>
                            Thank you!
                        </div>
                         
                    </div>
                    <div class="grid place-items-center">
                        <div class="grid ml-0 w-72 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl">
                            <img src="/img/case_study.png" alt="">
                        </div>
                    </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="faqAdministrators in faqAdministrators" :key="faqAdministrators.id" class="">
                        <details>
                            <summary> 
                                <div class="flex inline-flex cursor-pointer" v-if="faqAdministrators"> &nbsp; {{ faqAdministrators.title }}</div>
                            </summary>
                                <div  v-html="faqAdministrators.content"></div>
                        </details>
                    </div>
                </div>
                <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
            </div>
        </section>
    </div>
</template>
<script>
export default {
    setup(){
    // const route = useRoute();
},
  data() {
    return {
      isLoading: true,
      faqAdministrators: null,
      name:null,
      phone:null,
      msg:null,
      MarketingSolutionsQry:true,
      rOutName:null,
      rOutPhone:null,
      rOutEmail:null,
      rOutAddress:null,
      rOutQry:true,
      csName:null,
      csEmail:null,
      csQry:true,
      marketing:null,
      adminstration:null,
    //   contact_form:{}
    }
  },
  mounted: function () {
    // this.getItemByCategory()
    // console.log(this.smProducts)
    // console.log(this.$route.query.cat)
    // console.log(this.fruits)
    
  },

  methods: {
    saveMarketingSolutionsQry() {
        let formData = new FormData();
        formData.append('Name', this.name);
        formData.append('Phone', this.phone);
        formData.append('MessageDetails', this.msg);
        formData.append('formName', 'tb-administrators-Marketing-Solutions-Questions');
        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
            {
                method: 'POST',
                // headers: { 
                // 'Content-Type': 'multipart/form-data',
                // // 'Authorization': 'Bearer my-token',
                // // 'My-Custom-Header': 'foobar'
                // },
                body: formData,
            }
        )
        .then(response => response.json())
        .then(data => {
            // console.log(data)
        });
        // formData=""
        this.MarketingSolutionsQry=false
    },
    saveReachoutQry() {
        let formData = new FormData();
        formData.append('Name', this.rOutName);
        formData.append('Phone', this.rOutPhone);
        formData.append('Email', this.rOutEmail);
        formData.append('MessageDetails', this.rOutAddress);
        formData.append('formName', 'tb-administrators-Reach-Out');
        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
            {
                method: 'POST',
                // headers: { 
                // 'Content-Type': 'multipart/form-data',
                // // 'Authorization': 'Bearer my-token',
                // // 'My-Custom-Header': 'foobar'
                // },
                body: formData,
            }
        )
        .then(response => response.json())
        .then(data => {
            // console.log(data)
        });
        // formData=""
        this.rOutQry=false
    },
    saveCsQry() {
        let formData = new FormData();
        formData.append('Name', this.csName);
        formData.append('Email', this.csEmail);
        formData.append('formName', 'tb-administrators-Case-Study');
        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
            {
                method: 'POST',
                // headers: { 
                // 'Content-Type': 'multipart/form-data',
                // // 'Authorization': 'Bearer my-token',
                // // 'My-Custom-Header': 'foobar'
                // },
                body: formData,
            }
        )
        .then(response => response.json())
        .then(data => {
            // console.log(data)
        });
        // formData=""
        this.csQry=false
    },
    
    
    // saveReachoutQry() {
    //     let formData={
    //         "name":this.rOutName,
    //         "email":this.rOutEmail,
    //         "phone":this.rOutPhone,
    //         "address":this.rOutAddress,
    //         "form_id":"tb-administrators-Reach-Out-to-Us"
    //     }
    //     let dataToSave = {
    //     method: 'POST',
    //     headers: { 
    //     'Content-Type': 'application/json',
    //     // 'Authorization': 'Bearer my-token',
    //     // 'My-Custom-Header': 'foobar'
    //     },
    //     body: JSON.stringify(formData)
    // };
    // fetch('https://curriculum-app-api.beanstalkedu.com/items/contact_form', dataToSave)
    //     .then(response => response.json())
    //     .then(data => this.contact_form = data.data);
    //     // console.log(this.contact_form)
    //     this.rOutQry=false
    // }
  },
     mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=marketing&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
            .then(resp => resp.json())
            .then(data => {
                this.marketing=data.data
                // console.log(this.marketing)
            })
        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=adminstration&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
            .then(resp => resp.json())
            .then(data => {
                this.adminstration=data.data
                // console.log(this.marketing)
            })
            fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=administrators')
            .then(resp => resp.json())
            .then(data => {
            this.faqAdministrators=data.data
            // console.log(this.faqAdministrators)
    })
      
            
            },
    
        
            
            
}
</script>

<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;
}
.text-color-1 {
    color: #7C4C23;
}

.text-color-2 {
    color: #333333;
}
.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: 801px) {
  .h1-text {
    font-size: 40px;
    
    
  } 
}

@media screen and (max-width: 800px) {
  .h1-text {
    font-size: 25px;
    
  }
}
.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
</style>
