---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import SliderLessonplan from "../components/SliderLessonplan.vue";
import HeroButton from "../components/HeroButton.vue";
import Roundchart from "../components/Roundchart.vue";
import ModalIndexWorksheet from "../components/ModalIndexWorksheet.vue";
import ModalIndexLesson from "../components/ModalIndexLesson.vue";
import ModalIndexThemes from "../components/ModalIndexThemes.vue";
import ModalIndexEventIdeas from "../components/ModalIndexEventIdeas.vue";
import ModalIndexVideos from "../components/ModalIndexVideos.vue";

const faqResp = await fetch('https://management.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
import Footer from "../components/Footer.vue";
---
<Layout title="Teeny Beans " 
        metaTitle="Preschooling with #1 Preschool Curriculum and Lesson Planstle" 
        description="Preschool curriculum and lesson plans are essential for developing children's abilities. Check out our digital curriculum for smart preschool management." 
        ogImg={'https://teenybeanspreschoolcurriculum.com/img/homepage1c.png'}
        schema="" >
    <Menu/>
    <main class="quicksand">
        <div>
            <section class="bg3 shadow-2xl container-fluid h-fit">
                <div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
                    <div class="flex flex-col justify-center">
                        <h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
                        <h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
                        <p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
                        <!-- <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4"> 
                            <div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 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>Speak with Us</button></a></div>
                            <div class="grid text-base xl:text-lg col-span-1 font-bold text-color-2">OR</div> 
                            <div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 text-white shadow-2xl  px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>   
                        </div> -->
                        <HeroButton client:visible/>
                    </div>
                    <div class="flex w-full justify-end place-items-end">
                        <img class="h-fit " src="/img/hompage-r.png" alt="Tech-First Preschool Curriculum">
                    </div> 
                </div>
            </section>
            <div class="container-fluid mt-10">
                <div class="container mx-auto px-4 xl:px-24 font-20px  text-justify">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world.</div>
            </div>
            <div class="container mx-auto xl:px-24"> 
                <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
                    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center">
                      <div class="grid place-items-center">
                        <ModalIndexWorksheet client:visible />
                      </div>
                      <div class="grid place-items-center">
                        <ModalIndexLesson client:visible />
                      </div>
                      <div class="grid place-items-center">
                        <ModalIndexThemes client:visible />
                      </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 text-center">
                      <div class="grid place-items-center">
                        <ModalIndexEventIdeas client:visible />
                      </div>
                      <div class="grid place-items-center">
                        <ModalIndexVideos client:visible />
                      </div>
                    </div>
                </div>
            </div>
            <section class="container mx-auto xl:px-24">
                <div class="mt-10 px-4 font-20px pb-20 px-6">
                    <p class="text-justify text-color-2">Enrich every learning experience with your preschool’s best performance through the right  preschool curriculumsolutions that Teeny Beans provide. Embellish your early education institution and provide a higher standing to your play school.</p>
                    <div class="mt-4"></div>
                    <p class="text-justify text-color-2">Plan your play school curriculum with us and give the highest quality service and receive enormous enrollments in return. Your success has no bounds with the correct preschool curriculum provided by our right guidance and support.</p>
                </div>
            </section>
            <section class="container mx-auto xl:px-24">
                <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
                <div class="grid grid-rows-1 md:grid-rows-2 place-items-center my-8 w-auto">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 place-items-center">
                        <div class="grid text-2xl font-semibold text-slate-700"><a href="/audio-books"><img class="flex inline-flex" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
                        <div class="grid text-2xl font-semibold text-slate-700"><a href="/worksheets"><img class="flex inline-flex" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
                        <div class="grid text-2xl font-semibold text-slate-700"><a href="/videos"><img class="flex inline-flex" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 place-items-center">
                      <div class="grid text-2xl font-semibold text-slate-700"><a href="/occasion"><img class="flex inline-flex" draggable="false" src="/img/occasions.png" alt="Occasion">Occasion</a></div>
                        <div class="grid text-2xl font-semibold text-slate-700"><a href="/themes"><img class="flex inline-flex" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
                    </div>
                </div>
            </section>
            <SliderLessonplan client:visible/>
            <section class="container mx-auto px-4 xl:px-24 bg-gray-200">
                <div class="flex flex-row place-content-between">
                    <div class="flex flex-col justify-center ">
                    <h2 class="text-color-1 hero-text font-bold 2xl:w-8/12">Discover our Worksheets for Preschoolers</h2>
                    <a href="/worksheets"><button class="bg-blue-700 text-white text-lg rounded-tl-lg rounded-br-lg shadow-xl w-fit px-6 py-2">Discover All</button></a>
                    </div>
                    <div class="flex ">
                    <img class="w-80" src="/img/fire-fighter.png" alt="fire-fighter"/>
                    </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-4">
                    <div class="grid">
                        <div class="text-justify text-color-2">
                            <p class="py-8 font-20px">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
                            <p class="py-8 font-20px">The play school Curriculum will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS playschool curriculum is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
                            <p class="py-8 font-20px">The British kindergarten curriculum will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
                        </div>
                    </div>
                    <div class="grid ">
                        <img src="/img/legends.png" alt="EYFS Curriculum & Its Impact" class="p-8"> 
                        <div class="flex relative justify-center text-xs ">
                            <div class="grid">
                                <div class="flex relative justify-center text-xs">
                                    <img class="" src="/img/frame1.png" alt="">
                                    <p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer">
                                      <abbr title="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>
                        <h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
                        <p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
                        <div class="pl-8"><button class="bg-blue-700 text-white px-4 shadow-2xl py-2 rounded-tl-lg rounded-br-lg text-lg">Discover All</button></div>
                    </div>
                </div>
            </section>
            <section class="container mx-auto px-4 xl:px-24 mt-8 xl:mt-16">
                <div class="flex flex-col lg:flex-row justify-center gap-16">
                    <a href="/educators">
                        <div class="flex rotate1 rounded-xl place-items-center">
                        <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/teacherb.png" alt="Teeny Beans for Educators & Teachers"></div>
                        <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Educators & Teachers</h1>
                    </div>
                    </a>
                    <a href="/administrators">
                        <div class="flex rotate1 rounded-xl place-items-center">
                        <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/ownersb.png" alt="Teeny Beans for Owners & Administrators"></div>
                        <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Owners & Administrators</h1>
                    </div>
                    </a>
                </div>
            </section>
            <section class="container mx-auto px-4 xl:px-24 pt-16">
                <h1 class="hero-text text-center text-blue-700 font-semibold underline-1">What people are Saying!  </h1>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start pt-16" style="font-family:Quicksand">
                    <div class="grid background border0 rounded-xl shadow-xl">
                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
                            <img class=" w-full rounded-t-2xl" src="/img/sudha-gosavi.png" alt="Sudha Mangesh Gosavi">
                            <h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Completely Satisfied" </h1>
                            <p class="text-color-2 font-20px">I'm very thankful to Teeny Beans, because when I planned to open a preschool in Nagpur, I was very confused about how to start and what to do and things were going very messy. When I found Teeny Beans, I was completely happy since there was no royalty, no deposit, and no franchise fee, but I received complete help to open my preschool.
                              <br> <br> 
                                  <strong class="">Sudha Mangesh Gosavi</strong>  
                                  <strong> 
                                      <br>Stepping Stones International Preschool
                                      <br>Director
                                </strong> 
                              </p>
                        </div>
                    </div>
                    <div class="grid background border0 rounded-xl shadow-xl">
                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
                            <img class=" w-full rounded-t-2xl" src="/img/nirmal-singh.png" alt="Nirmal Singh">
                            <h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Perfect Solution" </h1>
                            <p class="text-color-2 font-20px">As many other preschool service providers do not give us an opportunity to create our own brand, Teeny Beans does. Building our own brand is beneficial for us in the long run as we are not only targeting preschool education but also high-level eucation (secondary) in the long run. It’s also a matter of pride for pre school owners to operate their own brand.
                                <br> <br> 
                                  <strong>Nirmal Singh</strong>
                                  <strong> <br>Dakshya International Preschool
                                    <br>Director</strong>
                            </p>
                        </div>
                    </div>
                    <div class="grid background border0 rounded-xl shadow-xl">
                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
                            <img class=" w-full rounded-t-2xl" src="/img/sharmistha-mishra.png" alt="Sharmistha Mishra">
                            <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Great Service" </h1>
                            <p class="text-color-2 font-20px">Being a beginner in this business, I was a bit tense about opening up the PRE-SCHOOL. But the continuous support and guidance regarding the whole training process, benefits, selection of area, pre-advertising, etc., made me confident and satisfied to start with it.
                                <br> <br> <strong>Sharmistha Mishra</strong> <strong> <br>NEST International Preschool
                                <br>Founder and Director
                                </strong>
                            </p>
                        </div>
                    </div>
                    <div class="grid background border0 rounded-xl shadow-xl">
                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
                            <img class=" w-full rounded-t-2xl" src="/img/jane-martina.png" alt="Ms. Jane Martina">
                            <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Extremely Supportive" </h1>
                            <p class="text-color-2 font-20px">You need the right partner to support you in establishing your school. Teeny Beans was extremely supportive, right from choosing the teaching aids, play items, and furniture, and they said that a friendly ambiance is much more preferred than a very expensive outlook. "You need to trust your partner. Every communication was very supportive, even when you doubted yourself. Teeny beans were giving options."
                                <br> <br> <strong>Ms. Jane Martina</strong> <strong> 
                                <br>Chinchilla International Preschool
                                <br>Founder and Director
                                </strong>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
                <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>
                        {faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) => 
                            <details>
                                <summary> 
                                    <div class="flex inline-flex cursor-pointer" v-if="faqHome"> &nbsp; { data.title }</div>
                                </summary>
                                    <div  set:html="data.content"></div>
                            </details>
                        )}    
                    </div>
                    <div class="grid place-items-center"><img src="/img/frequentlycc.png" alt="Frequently Asked Questions"></div> 
                </div>
            </section>
        </div>
    </main>
<Footer client:visible/>
</Layout>

<style >
  .underline-1 {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: 20px;
    border-radius: 4px;
    text-decoration-color: #7C4C23;
  }
  .underline-2 {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: 20px;
    border-radius: 20px;
    text-decoration-color: red;
  }
    details {
        font-weight: lighter;
        border-bottom: 1px solid #d4d4d4;
        border-color: #d4d4d4;    
        padding: .75em .75em 0;
        font-size: 16px;
        /* margin-top: 10px; */
        /* box-shadow:0 0 8px #d4d4d4; */
    }
    
    summary {	
        margin: -.75em -.75em 0;
        padding: .80em;
    }
    
    details[open] {
        padding: .75em;
          border-bottom: 1px solid #d4d4d4;
    }
    
    details[open] summary {
        border-bottom: 1px solid #d4d4d4;
        margin-bottom: 10px;
    }
    .slider-width {
      width: 350px;
    }
    .block-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .block-content__button {
      color: #1d4ed8;
      text-decoration: underline;
    }
        .position {
            position: relative;
            width: 100%;
            bottom: 0px;
        }
        @media screen and (min-width: 1500px) {
          .h2-text {
            font-size: 30px;
          } 
        }
        @media screen and (max-width: 1499px) {
          .h2-text {
            font-size: 24px;
          }
        }
        @media screen and (max-width: 1199px) {
          .h2-text {
            font-size: 20px;
          }
        }
        
        .bg3 {
          background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
        .load-wraper{
          position: relative;
          height: 100%;
          width: 100%;
          background-color: rgb(211,211,211);
          z-index: 44;
          overflow: hidden;
          border-radius: 5px;
        }
        .activity{
          position: absolute;
          left: -45%;
          height: 100%;
          width: 45%;
          background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
          background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
          background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
          animation: loading 1s infinite;
          z-index: 45;
        }
        
        @keyframes loading {
          0%{
            left: -45%;
          }
          100%{
            left: 100%;
          }
        }
        .literacy {
            top: 110px;
            transform: rotate(25deg);
        }
        .comunication {
        transform: rotate(80deg);
        /* left: 360px; */
        top: 170px;
    }
    .mathematics {
        transform: rotate(-50deg);
        top: 360px;
    }
    .world {
        transform: rotate(-10deg);
        top: 420px;
    }
    .physical {
        transform: rotate(44deg);
        top: 340px;
    }
    .expressive {
        transform: rotate(-90deg);
        top: 225px;
    }
        .preschool {
            transform: rotate(-35deg);
            top: 95px;
        }
        .border0 {
            border-color: #F2F2F2;
            border-width: 20px;
            border-radius: 20px;
        }
        .border0:hover {
            border-color: #FCFCFC;
            border-width: 20px;
            border-radius: 20px;
        }
        .background {
            background-color: #F2F2F2;    
        }
        .background:hover {
            background-color: #FCFCFC;
        }
        /* # 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;
          }
            .bottombar {
          font-size: large;
          /* width: 42px; */
          overflow: hidden;
          white-space: nowrap;
          /* position: fixed; */
          bottom: 12;
          line-clamp: 3;
          width: auto;
        }
        
        .bottombar:hover{
          overflow: visible; 
          white-space: normal; 
          width: auto;
          height: auto;
        }
        .text-color-1 {
            color: #7C4C23;
            font-family: 'Quicksand';
        }
        
        .text-color-2 {
            color: #333333;
            font-family: 'Quicksand';
        }
        .font-20px {
            font-size: 18px;
        }
        .h1-text {
            font-size: 30px;
        }
        @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;
            
          }
        }
        .quicksand {
          font-family: "Quicksand", sans-serif
        }
        /* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@500&family=Quicksand:wght@500&display=swap'); */
        </style>