<template>
    <div>
        <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
            <div class="flex flex-col xl:flex-row container mx-auto px-4 xl:px-24">
            <div class="flex flex-col px-6 justify-center w-fit">
                <h1 class="text-color-1 hero-text font-bold">What’s New In Preschool Education ?</h1>
                <p class="font-20px text-justify">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones.</p>
            </div>
            <div class="flex w-full justify-center place-items-center">
                <img class="w-full  rounded-3xl" src="/img/whats_new1.png" alt="">
            </div> 
            </div>
        </section>
        
        <!-- <section class="container-fluid">
            <div class="bg-gradient-to-t from-blue-200 px-4">
                <h1 class="text-center py-24 md:pt-24 text-color-1 hero-text font-bold">What’s New In Preschool Education ?</h1>
            </div>
            <div class="container-fluid shadow-xl">
                <p class="container mx-auto font-20px  text-justify p-4">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? 
                    The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones. </p>
            </div>
        </section> -->
        <!-- <section class="container mx-auto px-4">
            <div class="grid grid-rows-2">
                <div class="flex flex-col lg:flex-row place-items-center gap-6 ">
                    <div @click="showDescription('tabDetails')" class="flex relative"><img draggable="false" src="/img/robot.png" alt="">
                        <h1 class="absolute inset-20 left-40 text-4xl text-white">Robotics</h1>
                    </div>
                    
                    <div class="flex relative"><img draggable="false" src="/img/group.png" alt="">
                        <h1 class="absolute inset-20 left-40 text-4xl text-white">Coding</h1>
                    </div>            
                </div>
                
            </div>
        </section> -->
        <section class="container mx-auto mt-16 px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="grid place-items-center"><img class="shadow-xl" src="/img/robot.png" alt="robot"></div>
                <div class="grid h-fit">
                    <h2 class="hero-text text-color-1 font-semibold">Robotics</h2>
                    <p class="font-20px text-color-2 py-3 text-justify">Boost children’s interest and skills in robotics at the earliest stage of life and introduce them to a world of technology and opportunities. As a sub head of STEM, robotics induces creativity into children and makes their minds active.</p>
                    <p class="font-20px text-justify pl-6">
                        &#8226; With our platform for Robotics, add the subject to your curriculum and inject out of the box thoughts in your kids. <br> 
                        &#8226; Begin the first step to the enlightenment journey in early childhood education. <br>
                        &#8226; The right way to instill skills is through the right practise of Robotics, with right revision and resources that we supply! <br>
                        &#8226; Teach while disguising it as a play. <br>
                        &#8226; Preparation of a better and technologically advanced future commences with Robotics and Teeny Beans Preschool Curriculum. </p>
                        <p class="font-20px py-4">Implant the seeds of innovation and ideas with the introduction of ‘Robotics’ to your preschool curriculum. </p>
                </div>
            </div>
        </section>
        <!-- <section class="conatiner-fluid shadow">1</section> -->
        <hr>
        <section class="container mx-auto mt-16 px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="grid place-items-center"><img class="shadow-xl" src="/img/group.png" alt="group"></div>
                <div class="grid h-fit">
                    <h2 class="hero-text text-color-1 font-semibold">Coding</h2>
                    <p class="font-20px text-color-2 py-3 text-justify">A digital world with digitally advanced youngsters sounds like a great plan? Making toddlers acquainted with coding to make them think as a computer programmer is a kick start to their future. </p>
                    <p class="font-20px text-justify pl-6">
                        &#8226; Disguised Fun-activities and games that make children learn without their notice.<br> 
                        &#8226; Generate logical thinking with problem solving skills at the accurate age for laying a better educational foundation. <br>
                        &#8226; Children develop resilience and get competitive with Coding. <br>
                        &#8226; With Teeny Beans Preschool Curriculum, access easy coding resources such as fun games, activities, worksheets, quizzes and much more to make them learn and grow simultaneously. <br>
                    </p>
                    <p class="font-20px py-4">Educate children with the newest preschool education trends and give a boost to their journey of a better version of themselves and open a door to wider opportunities of growth for them.  </p>
                </div>
            </div>
        </section>
        <hr>
        <section class="my-16"></section>

        <!-- <section>
            <div v-if="tab">
                <div id="robottext" class="flex flex-col">
                    <h1 class="text-color-3 text-4xl font-semibold pt-12 pb-2">Why should you  include Robotics in your Preschool Curriculum?</h1>
                    <p class="text-2xl text-justify text-color-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna non senectus orci ultrices. Neque, mollis mauris est blandit mi at tincidunt vehicula. Nunc, in egestas senectus pharetra massa dignissim massa. Eu mi a risus ullamcorper sed consectetur fermentum praesent egestas. Sit aliquet tellus gravida lorem scelerisque. Volutpat sit arcu orci, lorem vel. Cras pellentesque odio libero, sed pellentesque facilisis ut rhoncus. Pellentesque purus quam erat vulputate. Sit pulvinar tempus tortor ultrices. In nulla cras.</p>
                </div>
            </div>

            <div v-if="robot">
                <div id="robottext" class="flex flex-col">
                    <h1 class="text-color-3 text-4xl font-semibold pt-12 pb-2">Why should you  include Robotics in your Preschool Curriculum?</h1>
                    <p class="text-2xl text-justify text-color-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna non senectus orci ultrices. Neque, mollis mauris est blandit mi at tincidunt vehicula. Nunc, in egestas senectus pharetra massa dignissim massa. Eu mi a risus ullamcorper sed consectetur fermentum praesent egestas. Sit aliquet tellus gravida lorem scelerisque. Volutpat sit arcu orci, lorem vel. Cras pellentesque odio libero, sed pellentesque facilisis ut rhoncus. Pellentesque purus quam erat vulputate. Sit pulvinar tempus tortor ultrices. In nulla cras.</p>
                </div>
            </div>
        </section> -->
        <section class="container mx-auto px-4">
                <div class="grid csbg grid-cols-1 md:grid-cols-2 mt-32 mb-16 ">
                    <div class="grid place-items-center">
                        <div class="grid text-color-1 text-4xl pt-10 font-semibold">Case Study</div>
                        <div class="w-full max-w-lg pb-16">
                            <h3 class="text-center text-xl p-4">You can download the case study here</h3>
                            <div v-if="wnQry">
                                <div  class="flex flex-wrap mb-6">
                                    <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
                                        <input v-model="wnname" 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" 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 v-model="wnemail" 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" type="text" placeholder="Your E-mail Id">
                                    </div>
                                </div>
                                <div class="flex justify-center -mt-4">
                                    <button @click="saveWhatsnewQry" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" >Download Now</button>
                                </div>
                            </div>
                            <div v-else="saveWhatsnewQry"> <h1 class="text-center text-xl">Thank You!</h1></div>
                        </div>
                    </div>
                    <div class="grid place-items-center">
                        <div class="grid bg-gray-200 ml-0 w-72 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl">
                            <img class=" rotate-6 rounded-tl-3xl rounded-br-3xl" src="/img/case_study.png" alt="Case Study Image"></div>
                    </div>
                </div>
        </section>
    </div>
</template>

<script>
    export default {
  data() {
    return {
      isLoading: true,
      wnQry:true,
      wnname: null,
      wnemail: null,
      robot:true,
      tab:false

    //   contact_form:{}
    }
  },
  mounted: function () {
    // this.getItemByCategory()
    // console.log(this.smProducts)
    // console.log(this.$route.query.cat)
    // console.log(this.fruits)
    
  },
 
  methods: {
    saveWhatsnewQry() {
        let formData = new FormData();
        formData.append('Name', this.wnname);
        formData.append('Phone', this.wnemail);
        formData.append('formName', 'tb-whatsnew-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(this.scsOccetion)
            // console.log(data)
        });
        // formData=""
        this.wnQry=false
    },
    showDescription(div){
        this.tab=false
        this.robot=false
        this.div
    }
    }
  }
</script>

<style scoped>
.text-color-1 {
    color: #7c4c23;
}
.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
.font-20px {
    font-size: 20px;
}


@media screen and (min-width: 801px) {
  .hero-text {
    font-size: 50px;
    
    
  }
}

@media screen and (max-width: 800px) {
  .hero-text {
    font-size: 25px;
    
  }
}
.text-color-3 {
    color: #063F78;
}
.csbg {
    background: rgba(18, 75, 189, 0.1);
}
</style>