dwd-projects
/
teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

master
Suvodip Ghosh 2023-02-07 20:59:23 +05:30
parent b39b8d624b
commit d8478b86bf
17 changed files with 1422 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/audio-book1a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 777 KiB

BIN
public/img/homepage1c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 834 KiB

BIN
public/img/lesson-plan1a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 725 KiB

BIN
public/img/lesson-plan1c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 725 KiB

BIN
public/img/videos1a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 677 KiB

BIN
public/img/worksheet1a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 KiB

334
src/components/Administrators.vue
View File

@ -1,64 +1,79 @@
<template> <template>
<div> <div>
<section class="container-fluid"> <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<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">Discover Solutions <br> <div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<span class="text-color-1">For Your Preschool</span> <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-2xl 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> </div>
</section> </section>
<section class="container-fluid shadow-xl"> <!-- <section class="container-fluid">
<p class="container mx-auto text-2xl text-justify p-6">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. <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> 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> -->
<section class="container mx-auto px-6" > <section class="container mx-auto px-4 xl:px-24" >
<h1 class="text-center text-3xl md:text-4xl pt-28 text-color-1">Marketing Solutions</h1> <h1 class="text-center h1-text pt-28 text-color-1 font-semibold">Preschool Marketing Solutions</h1>
<h2 class="text-center text-2xl pt-8 text-color-2">Preschool Marketing Solutions</h2> <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>
<p class="text-justify text-xl pt-2 text-color-2">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? </p>
<p class="text-justify text-xl pt-2 text-color-2">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>
<section> <section>
<div class="container mx-auto"> <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 md:text-xl pt-10"> <div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 font-20px pt-10">
<div class="grid grid-rows-3 md:text-left px-8"> <div class="grid px-8">
<h1 class="p-2">Social Media Advertisement </h1> <h1 class="p-2">Social Media Advertisement </h1>
<h1 class="p-2">FAQ Webinars</h1> <h1 class="p-2">FAQ Webinars</h1>
<h1 class="p-2">Video Marketing </h1> <h1 class="p-2">Video Marketing </h1>
</div> </div>
<div class="grid grid-rows-2 md:text-center px-8"> <div class="grid px-8">
<h1 class="p-2">Virtual Tour</h1> <h1 class="p-2">Virtual Tour</h1>
<h1 class="p-2">Instant Message Marketing</h1> <h1 class="p-2">Instant Message Marketing</h1>
</div> </div>
<div class="grid grid-rows-3 md:text-right px-8"> <div class="grid px-8">
<h1 class="p-2">SEO (Search Engine Optimization)</h1> <h1 class="p-2 pr-4">SEO (Search Engine Optimization)</h1>
<h1 class="p-2">E-mail Marketing</h1> <h1 class="p-2">E-mail Marketing</h1>
<h1 class="p-2">Audio Marketing</h1> <h1 class="p-2">Audio Marketing</h1>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto px-2 "> <section class="container mx-auto px-2 xl:px-24">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Check Out Our Marketing Blog</div> <h1 class=" text-color-1 h1-text text-center pt-10 px-4 font-semibold">Check Out Our Marketing Blog</h1>
<p class="text-center text-xl pt-2 text-color-2">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p> <p class="text-justify text-xl lg:text-3xl 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 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"> <div class="grid w-fit" v-for="marketing in marketing" :key="marketing">
<img class="w-full rounded-tl-3xl rounded-br-3xl" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" > <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-64 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div> <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-2xl font-semibold pt-10 line-clamp-1">{{ marketing.title}}</h2> <h2 class="text-color-1 text-3xl font-semibold pt-10 px-4">{{ marketing.title}}</h2>
<div class="text-lg text-justify line-clamp-3 font-light text-color-2" v-html="marketing.preview_text"></div> <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 ">Read More >> </a> <router-link :to="'/blog/' + marketing.slug" class="text-blue-600 font-20px px-4">Read More >> </router-link>
</div> </div>
</div> </div>
<a href="/blog"> <router-link to="/blog">
<div class="flex justify-center mt-8"> <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> <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div> </div>
</a> </router-link>
</section> </section>
<section class="container mx-auto px-4 my-32"> <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 bg-amber-100 grid-cols-1 lg:grid-cols-2">
<div class="grid place-items-center "><img class="w-96 h-88 rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/person4.png" alt=""/></div> <div class="grid place-items-center "><img class="w-96 h-88 rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/person4.png" alt=""/></div>
<div class="grid px-4 w-fit"> <div class="grid px-4 w-fit">
<div class="text-blue-700 text-2xl lg:text-5xl pt-16">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div> <div class="text-blue-700 hero-text pt-16 px-4">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
<h3 class="text-sm lg:text-2xl py-4 text-color-2">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3> <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"> <form class="" v-if="MarketingSolutionsQry">
<div class="flex flex-wrap mb-6 md:mb-0"> <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"> <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
@ -75,79 +90,110 @@
<div v-else> <div v-else>
Thank you, we will get back to you soon! Thank you, we will get back to you soon!
</div> </div>
<div class="flex justify-center md:justify-end mt-3 px-4"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" @click="saveMarketingSolutionsQry">Send Now</button></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>
</div> </div>
<h1 class="text-color-1 text-3xl text-center mt-8">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
<p class="text-justify text-xl pt-2 text-color-2">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>
<h1 class="text-color-1 text-3xl text-center mt-16">Our Solutions Help You in Adminstrating your Preschool</h1>
<p class="text-justify text-xl 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>
<h1 class="text-color-1 text-3xl text-center my-16">Technology Solution For Preschool</h1>
<p class="text-justify text-xl 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>
</section> </section>
<section>
<div class="container mx-auto"> <section class="container mx-auto px-4 xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 md:text-xl pt-10"> <h1 class="text-color-1 h1-text font-semibold text-center">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
<div class="grid grid-rows-3 md:text-left px-8"> <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.
<h1 class="p-2">Digital Books</h1> With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
<h1 class="p-2">Blockchain Technology</h1> <div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 place-items-center" >
<h1 class="p-2">Artificial Inteligence</h1> <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 place-items-center">
<div class="grid grid-rows-3 md:text-left gap-10">
<h1 class="">Digital Books</h1>
<h1 class="">Blockchain Technology</h1>
<h1 class="">Artificial Inteligence</h1>
</div> </div>
<div class="grid grid-rows-2 md:text-center px-8"> <div class="grid grid-rows-2 md:text-center gap-10">
<h1 class="p-2">Multi Sensory Classrooms</h1> <h1 class="">Multi Sensory Classrooms</h1>
<h1 class="p-2">VR and AR</h1> <h1 class="">VR and AR</h1>
<h1 class="p-2">Attendance & Progress Tracking</h1> <h1 class="">Attendance & Progress Tracking</h1>
</div> </div>
<div class="grid grid-rows-3 md:text-right px-8"> <div class="grid grid-rows-3 md:text-right gap-10">
<h1 class="p-2">Remote Learning</h1> <h1 class="">Remote Learning</h1>
<h1 class="p-2">Intractive Gamification</h1> <h1 class="">Intractive Gamification</h1>
<h1 class="p-2">Staff Management</h1> <h1 class="">Staff Management</h1>
</div> </div>
</div> </div>
</div> </section>
</section> <section class="container mx-auto px-2 xl:px-24">
<section class="container mx-auto px-2 "> <div class="flex text-color-1 h1-text justify-center font-semibold">Check Out Our Adminstration Blog</div>
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">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>
<p class="text-center text-xl 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 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"> <div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration">
<img class="w-full rounded-tl-3xl rounded-br-3xl" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" > <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-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div> <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 font-semibold pt-10 line-clamp-1">{{ adminstration.title}}</h1> <h1 class="text-color-1 text-3xl pt-10 px-4">{{ adminstration.title}}</h1>
<div class="text-lg text-justify line-clamp-3 font-light w-96 text-color-2" v-html="adminstration.preview_text"></div> <div class="font-20px text-justify text-color-2 px-4" v-html="adminstration.preview_text"></div>
<a :href="'/blog/' + adminstration.slug" class="text-blue-600 "> Read More >> </a> <router-link :to="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </router-link>
</div> </div>
</div> </div>
<a href="/blog"> <router-link to="/blog">
<div class="flex justify-center mt-8"> <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> <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div></a> </div></router-link>
</section> </section>
<section class="container mx-auto"> <section class="container mx-auto xl:px-24">
<div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6"> <div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6">
<div class="grid"></div> <div class="grid"></div>
<div class="grid text-2xl lg:text-3xl text-blue-700 pt-16">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span> <div class="grid hero-text text-blue-700 pt-16">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
<p class="text-base lg:text-2xl py-2 text-color-2 pr-6 ">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p> <p class=" font-20px py-2 text-color-2 pr-6 ">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"> <div class="flex justify-start mt-2 pb-20">
<button class="bg-blue-700 p-1 text-lg text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Know More</button> <button class="bg-blue-700 p-1 text-2xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 ">Know More</button>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto"> <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 md:grid-cols-2 place-items-between pt-20">
<div class="grid justify-start text-2xl lg:text-4xl text-color-1 px-6">Latest Trends In Preschool Education <div class="grid justify-start h1-text text-color-1">Latest Trends In Preschool Education
<p class="text-justify text-xl pt-2 text-color-2">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> <p class="text-justify font-20px pt-2 text-color-2">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>
<div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl text-lg bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Read All </button></div> <div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl text-2xl bg-blue-700 p-1 text-white px-6 py-2 h-fit rounded-tl-lg rounded-br-lg mt-2">Read All </button></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>
<router-link to=""><div class="text-blue-700 text-start bg-gray-100 rounded-xl">Read More>> </div></router-link>
</div>
</div>
</slide>
<template #addons>
<navigation />
</template>
</carousel> -->
</div> </div>
</section> </section>
<section class="container mx-auto"> <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 md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16">
<div class="grid place-items-center"> <div class="grid place-items-center px-4">
<div class="text-color-1 text-2xl lg:text-4xl pt-6">Reach Out to Us</div> <div class="text-color-1 hero-text pt-6">Reach Out to Us</div>
<h3 class="text-center p-6 text-lg lg:text-xl text-color-2">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> <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"> <form class="grid place-items-center" v-if="rOutQry">
<div class="flex flex-wrap mb-6 justify-center"> <div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0"> <div class="md:w-1/2 px-3 mb-6 md:mb-0">
@ -165,28 +211,51 @@
<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"> <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> </div>
<div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9">Contact Us</button></div> <div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-2xl p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div>
</form> </form>
<div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div> <div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div>
</div> </div>
<div class="grid place-items-center"><img src="/img/rectangle100.png" alt=""></div> <div class="grid place-items-center"><img src="/img/rectangle100.png" alt=""></div>
</div> </div>
</section> </section>
<section class="container mx-auto"> <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 md:grid-cols-2 place-items-between ">
<div class="grid justify-start text-2xl lg:text-4xl text-color-1 px-6">Trending Themes for Preschools in 2022 <div class="grid justify-start h1-text text-color-1 ">Trending Themes for Preschools in 2023
<p class="text-justify text-xl pt-2 text-color-2">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> <p class="font-20px pt-2 text-color-2 text-justify">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>
<div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl bg-blue-700 p-1 text-lg text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Read All </button></div> <div class="grid md:justify-evenly justify-start md:ml-72"><button class="shadow-2xl bg-blue-700 p-1 text-xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 h-fit">Read All </button></div>
</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>
<router-link to=""><div class="text-blue-700 text-start bg-gray-100 rounded-xl">Read More>></div></router-link>
</div>
</div>
</slide>
<template #addons>
<navigation />
</template>
</carousel> -->
</section> </section>
<section> <section>
<div class="container mx-auto"> <div class="container mx-auto xl:px-24">
<div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 mt-32 mb-16"> <div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16">
<div class="grid place-items-center"> <div class="grid place-items-center">
<div class="grid text-color-1 text-3xl pt-6">Case Study</div> <div class="grid text-color-1 h1-text pt-6">Case Study</div>
<div class="w-full max-w-lg" v-if="csQry"> <div class="w-full max-w-lg" v-if="csQry">
<h3 class="text-center text-xl p-4">You can download the case study here</h3> <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="flex flex-wrap mb-6">
<div class="w-full md:w-3/3 px-3 mb-6 md:mb-0"> <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"> <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">
@ -198,7 +267,7 @@
</div> </div>
</div> </div>
<div class="flex justify-center -mt-4"> <div class="flex justify-center -mt-4">
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" @click="saveCsQry" >Download Now</button></div> <button class="bg-blue-700 p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8 text-2xl" @click="saveCsQry" >Download Now</button></div>
</div> </div>
<div v-else> <div v-else>
Thank you! Thank you!
@ -212,15 +281,35 @@
</div> </div>
<div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div> <div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div>
</section> </section>
<div class="my-32"></div> <section class="container mx-auto xl:px-24 py-20 px-4 ">
<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="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqAdministrators" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqAdministrators.title }}</div>
<div class="collapse-content md:text-lg">
<p class="list-disc" v-html="faqAdministrators.content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
setup(){
// const route = useRoute();
},
data() { data() {
return { return {
isLoading: true, isLoading: true,
faqAdministrators: null,
name:null, name:null,
phone:null, phone:null,
msg:null, msg:null,
@ -358,6 +447,13 @@ export default {
this.adminstration=data.data this.adminstration=data.data
// console.log(this.marketing) // 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)
})
}, },
@ -366,8 +462,52 @@ export default {
} }
</script> </script>
<style> <style>
.text-color-1 { .text-color-1 {
color: #7C4C23; color: #7C4C23;
} }
</style>
.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>

41
src/components/Educators.vue
View File

@ -3,10 +3,11 @@
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid"> <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 xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-6 w-full justify-center"> <div class="flex flex-col px-6 w-full justify-center">
<h1 class="text-color-1 hero-text font-bold w-full">Educate Conveniently by Acquiring <span class="text-blue-700">Resources Smoothly!</span></h1> <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> <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="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"> <a href="/educators#getintouch"><button>Reach Us</button></a></div> <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> </div>
<div class="flex w-fit justify-center place-items-center"> <div class="flex w-fit justify-center place-items-center">
@ -34,25 +35,25 @@
<section class="container mx-auto xl:px-24"> <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> <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> <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 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
<div class="grid background rounded-xl shadow-xl "> <div class="grid background rounded-xl">
<div class="bottombar cursor-pointer"> <div class="bottombar cursor-pointer mt-4">
<img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt=""> <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> <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> <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> </div>
<div class="grid background rounded-xl shadow-xl"> <div class="grid background rounded-xl">
<div class="bottombar cursor-pointer"> <div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt=""> <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> <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> <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> </div>
<div class="grid background rounded-xl shadow-xl"> <div class="grid background rounded-xl">
<div class="bottombar cursor-pointer"> <div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt=""> <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> <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> <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>
@ -168,8 +169,8 @@
<div class="grid w-fit" v-for="(item, index) in tbBlog"> <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="" > <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> <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.title}}</h1> <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" v-html="item.preview_text"></div> <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> --> <!-- <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> <router-link :to="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </router-link>
</div> </div>
@ -189,7 +190,8 @@
<router-link to="/blog"> <router-link to="/blog">
<div class="flex justify-center mt-8"> <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> <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> </div>
</router-link>
</section> </section>
<section class="container mx-auto mt-16 xl:px-24"> <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 grid-cols-1 xl:grid-cols-2 bg-yellow-100 ">
@ -246,7 +248,7 @@
<section class="container mx-auto py-20 px-4 xl:px-24"> <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 grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit"> <div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1> <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 v-for="faqEducators in faqEducators" :key="faqEducators.id" class="">
<div class="grid h-fit text-color-2"> <div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b"> <div tabindex="0" class="collapse collapse-arrow border-b">
@ -264,6 +266,10 @@
</div> </div>
</template> </template>
<style scoped> <style scoped>
.h2 {
font-size: 40px;
}
.bg3 { .bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);} background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
.h1-text { .h1-text {
@ -288,6 +294,7 @@
white-space: normal; white-space: normal;
width: auto; width: auto;
height: auto; height: auto;
padding: 16px;
background-color: #f9b8ce; background-color: #f9b8ce;
border-radius: 16px; border-radius: 16px;
} }

325
src/components/Homepage.vue
View File

@ -1,104 +1,121 @@
<template> <template>
<div class=""> <div class="">
<div> <div>
<section class="container-fluid "> <!-- This Event is Round The Corner -->
<div class="flex load-wraper"> <section class="bg3 shadow-2xl container-fluid h-fit">
<img class="relative md:opacity-100 opacity-70 h-max " src="/img/home-page-1.png" alt=""/> <div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
<div class="absolute p-2 pl-4 md:pt-24 lg:pt-40 xl:pl-28 "> <div class="flex flex-col justify-center">
<h1 class="text-color-1 text-xl lg:text-4xl font-semibold">This Event is Round The Corner</h1> <h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<h1 class="font-semibold text-sm lg:text-2xl text-color-2 py-2">Strat Planning Your Classroom Curriculum now</h1> <h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<div class="grid grid-cols-7 md:text-base text-xs place-items-center py-2"> <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="rounded-tl-full rounded-br-full col-span-3 text-blue-700 font-semibold pr-4 pl-4 p-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Speak with Us</button></div> <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-base 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"> <router-link to="/educators#getintouch"><button>Speak with Us</button></router-link></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div> <div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full rounded-br-full col-span-3 text-white font-semibold pr-4 pl-4 p-2 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Check Out Event</button></div> <div class="rounded-tl-full text-sm xl:text-base 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"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
</div>
</div>
<div class="flex w-full justify-end place-items-end">
<img class="h-fit " src="/img/homepage1c.png" alt="">
</div>
</div>
<!-- <div class="grid w-full"><img class="w-full" src="/img/hero-banner1a.png" alt="">#f9f9b4</div> -->
</section>
<div class="container-fluid mt-16">
<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>
<!-- <section class="container-fluid">
<div class="flex w-screen load-wraper">
<img class="relative w-screen" src="/img/homepage.jpg" alt="">
<div class="absolute pl-4 xl:pl-32 xl:pt-40">
<h1 class="text-color-1 hero-text font-bold">This Event is Round The Corner</h1>
<h2 class="font-semibold text-color-2 text-base lg:text-3xl font-bold">Strat Planning Your Classroom Curriculum now</h2>
<div class="grid grid-cols-7 md:text-base text-xs place-items-center py-2">
<div class="rounded-tl-full rounded-br-full col-span-3 text-blue-700 font-semibold pr-4 pl-4 p-2 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>Speak with Us</button></router-link></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full rounded-br-full col-span-3 text-white font-semibold pr-4 pl-4 p-2 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section> -->
<section class="container mx-auto"> <!-- <section class="container-fluid shadow-xl py-4">
<div class="md:text-xl text-justify pt-14 px-4"> <div class="container mx-auto text-justify pt-6 px-4 font-20px ">
<p class="text-color-2">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> <p class="text-color-2 ">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>
<p class="text-color-2 mt-3">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. </p> <div class="my-4"></div>
<p class="text-color-2">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. </p>
</div> </div>
</section> </section> -->
<section class="container mx-auto"> <section class="container mx-auto xl:px-24">
<div class="flex md:justify-center justify-center font-bold text-3xl mt-8 text-color-1 py-14">Discover our solutions</div> <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 grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
<div class="grid place-items-center pb-8 px-6"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt=""/> <img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Creat Personalised Plan</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">Planning your preschool’s daily schedule becomes convenient and efficient with our astonishing features which allows you all support to create your plan and accomplish it.</p> <p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/dailyplan"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link> <router-link to="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
<div class="grid place-items-center pb-8 px-6"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt=""/> <img draggable="false" src="/img/report.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Report Card Format</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Popular Curriculum</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">Use the most appropriate report card format with our <strong> preschool curriculum</strong> and let parents know everything they should, regarding their child’s progress.</p> <p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button> <router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
<div class="grid place-items-center pb-8 px-6"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt=""/> <img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">All Classroom Resources</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">No need to search syllabus for different subjects, or playful activities to promote learning. Our <strong> play school curriculum</strong> provides every resource you need to teach those little ones. Get tips, innovative ideas, different methods and much more.</p> <p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/worksheets"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link> <router-link to="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12"> <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt=""> <img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Popular Curriculum</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2 xl:px-24">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p> <p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button> <router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
<div class="grid place-items-center pb-8 px-6"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt=""> <img draggable="false" src="/img/event.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2 xl:px-24">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p> <p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link> <router-link to="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto"> <section class="container mx-auto xl:px-24">
<div class="mt-16 px-4"> <div class="mt-16 px-4 font-20px pb-20 px-6">
<p class="text-xl p-2 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> <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>
<p class="text-xl p-2 text-justify text-color-2"><strong>Worksheets :</strong> Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells. </p> <div class="mt-8"></div>
<p class="text-xl p-2 text-justify text-color-2"><strong>Lesson Plans :</strong> Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education</p> <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>
<p class="text-xl p-2 text-justify text-color-2"><strong>Videos :</strong> See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Audio Books :</strong> Enhance teaching with the use of multiple audio books which our preschool curriculum provides. Let the toddlers hear, learn and recognize simultaneously. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Games :</strong> Get different game ideas to play with your preschoolers while ensuring their physical development needs and promoting companionship in them. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Themes :</strong> Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience. </p>
<p class="text-xl p-2 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> </div>
</section> </section>
<section class="container mx-auto"> <section class="container mx-auto xl:px-24">
<div class="flex flex-rows-2 justify-center font-semibold text-2xl mt-8 text-color-1 py-20">Resources To Choose From</div> <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 m-8 w-auto"> <div class="grid grid-rows-1 md:grid-rows-2 place-items-center m-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
<div class="grid"><a href=""><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div> <div class="grid"><router-link to="/audiobooks"><img draggable="false" src="/img/Audiobooks.png" alt=""></router-link></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Worksheet.png" alt=""></a></div> <div class="grid"><router-link to="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></router-link></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Videos.png" alt=""></a></div> <div class="grid"><router-link to="/videos"><img draggable="false" src="/img/Videos.png" alt=""></router-link></div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
<div class="grid"><a href=""><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div> <div class="grid"><router-link to="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></router-link></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></div> <div class="grid"><router-link to=""><img draggable="false" src="/img/Reference-Links.png" alt=""></router-link></div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto mt-12 "> <section class="container mx-auto mt-12 xl:px-24">
<div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 "> <div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 ">
<div class="grid row-span-1 h-fit px-4"> <div class="grid row-span-1 h-fit px-4">
<h1 class="md:text-3xl text-2xl text-color-1 font-semibold py-3">Trending Lesson Plans</h1> <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
<h1 class="md:text-xl text-lg text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1> <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
<div class="text-lg bg-blue-700 p-2 text-white rounded-tl-xl rounded-br-xl w-fit">Check Out Now</div> <div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
</div> </div>
<div class="grid row-span-2 place-items-center lg:place-items-end"> <div class="grid row-span-2 place-items-center lg:place-items-end">
<!-- <vueper-slides <vueper-slides
class="no-shadow w-96 px-14 md:px-0" arrows-outside class="no-shadow w-96 px-14 md:px-0" arrows-outside
:visible-slides="1" :visible-slides="1"
:bullets="false" :bullets="false"
@ -108,16 +125,16 @@
:touchable="true" :touchable="true"
:dragging-distance="200" :dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, } }"> :breakpoints="{ 800: { visibleSlides: 1, } }">
<vueper-slide v-for="worksheet in allworksheet" :key="worksheet.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" /> <vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
</vueper-slides> --> </vueper-slides>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto"> <section class="container mx-auto xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200"> <div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
<div class="grid place-items-start p-16"> <div class="grid place-items-start p-10 h-fit">
<p class="text-color-1 md:text-4xl text-xl font-semibold mt-20">Discover Our Preschool <br>Solutions</p> <p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white pr-4 h-10 pl-4">Discover All</button></router-link> <router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
</div> </div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div> <div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
</div> </div>
@ -141,14 +158,14 @@
</div> </div>
</div> </div>
</section> --> </section> -->
<section class="container mx-auto pt-16"> <section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
<h1 class="text-color-1 text-3xl font-bold text-center">EYFS Curriculum & Its Impact</h1> <h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10"> <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
<div class="grid"> <div class="grid">
<div class="text-justify text-color-2"> <div class="text-justify text-color-2">
<p class="py-8 ">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 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">The <strong> play school curriculum</strong> 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 <strong> playschool curriculum</strong> 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 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">The British <strong> kindergarten curriculum</strong> 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> <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> </div>
<div class="grid "> <div class="grid ">
@ -156,62 +173,99 @@
<div class="flex relative justify-center text-xs "> <div class="flex relative justify-center text-xs ">
<RoundChart/> <RoundChart/>
</div> </div>
<h1 class="text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</h1> <h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
<p class="text-lg md:text-2xl text-color-2">Mentions are going to implemented Preschool Education System</p> <p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
<div><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">Discover All</button></div> <div class="pl-8"><button class="bg-blue-700 text-white px-6 py-2 rounded-tl-lg rounded-br-lg text-2xl">Discover All</button></div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto px-4"> <section class="container mx-auto px-4 xl:px-24">
<div class="grid text-color-1 text-3xl font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your School <div class="grid text-color-1 hero-text font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your Preschool
<p class="text-xl text-center font-light text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div> <p class="text-xl text-center text-xl md:text-3xl text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid"><a href="/educators"><img src="/img/left-slid.png" alt=""></a></div> <div class="grid"><router-link to="/educators"><img src="/img/left-slid.png" alt=""></router-link></div>
<div class="grid"><a href="/administrators"><img src="/img/right-slid.png" alt=""></a></div> <div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
</div> </div>
</section> </section>
<section class="container mx-auto cursor-pointer"> <section class="container mx-auto xl:px-24">
<h1 class="text-2xl lg:text-4xl text-center text-blue-700 leading-relaxed font-light py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1> <h1 class="hero-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start "> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
<div class="grid background border0 rounded-xl shadow-xl"> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar"> <div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt=""> <img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1> <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p> <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div> </div>
</div> </div>
<div class="grid background border0 rounded-xl shadow-xl"> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar"> <div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt=""> <img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1> <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p> <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div> </div>
</div> </div>
<div class="grid background border0 rounded-xl shadow-xl"> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar"> <div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt=""> <img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1> <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p> <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div> </div>
</div> </div>
<div class="grid background border0 rounded-xl shadow-xl"> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar"> <div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt=""> <img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1> <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p> <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section> <section class="container mx-auto py-20 px-4 xl:px-24">
<faqSection/> <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="faqHome in faqHome" :key="faqHome.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqHome" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqHome.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqHome.content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section> </section>
</div> </div>
</div> </div>
</template> </template>
<style>
<style scoped>
.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{ .load-wraper{
position: relative; position: relative;
height: 100%; height: 100%;
@ -394,7 +448,6 @@ details summary::-webkit-details-marker { display: none; }
bottom: 12; bottom: 12;
line-clamp: 3; line-clamp: 3;
width: auto; width: auto;
padding: 0px;
} }
.bottombar:hover{ .bottombar:hover{
@ -405,20 +458,64 @@ details summary::-webkit-details-marker { display: none; }
} }
.text-color-1 { .text-color-1 {
color: #7C4C23; color: #7C4C23;
font-family: 'Quicksand';
} }
.text-color-2 { .text-color-2 {
color: #333333; color: #333333;
font-family: 'Quicksand';
}
.font-20px {
font-size: 18px;
}
.h1-text {
font-size: 30px;
}
/* @media screen and (min-width: 801px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 800px) {
.hero-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;
}
} }
</style> </style>
<!-- <script> <script>
import { VueperSlides, VueperSlide } from 'vueperslides' import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css' import 'vueperslides/dist/vueperslides.css'
export default { export default {
setup(){ setup(){
const route = useRoute(); // const route = useRoute();
useHead({ useHead({
title: 'Teenybeans Preschool Curriculum', title: 'Teenybeans Preschool Curriculum',
meta: [ meta: [
@ -438,8 +535,9 @@ components: { VueperSlides, VueperSlide },
data() { data() {
return { return {
page: null, page: null,
faqHome: null,
themes:null, themes:null,
allworksheet:null, lessonplan:null,
stories: null, stories: null,
ideas: null, ideas: null,
worksheets: null, worksheets: null,
@ -451,15 +549,22 @@ components: { VueperSlides, VueperSlide },
} }
}, },
mounted: function () { mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu') fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.allworksheet = data.data this.lessonplan = data.data
// this.isLoading = false // this.isLoading = false
// console.log(this.page[0].id) // console.log(this.page[0].id)
// return this.page[0].id // return this.page[0].id
}),
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
.then(resp => resp.json())
.then(data => {
this.faqHome=data.data
// console.log(this.faqHome)
}) })
},
} }
}
</script> --> </script>

66
src/components/Occassion.vue
View File

@ -5,7 +5,7 @@
<div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24"> <div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
<div class="flex flex-col w-full justify-center"> <div class="flex flex-col w-full justify-center">
<div v-if="page" class=""> <div v-if="page" class="">
<h1 class="text-blue-700 hero-text font-bold">Occassion of the Month- <span class="text-color-1" v-if="page">{{page[0].occasson_title}}</span></h1> <h1 class="text-blue-700 hero-text font-bold">Occasion Based Resources <br> <span class="text-color-1" v-if="page">{{page[0].occasson_title}}</span></h1>
<div class="flex h2-text text-color-1 font-semibold pt-8">{{page[0].occassion_text }}</div> <div class="flex h2-text text-color-1 font-semibold pt-8">{{page[0].occassion_text }}</div>
<div class="flex text-justify font-20px text-color-2 pt-4">{{page[0].occassion_details }}</div> <div class="flex text-justify font-20px text-color-2 pt-4">{{page[0].occassion_details }}</div>
</div> </div>
@ -37,8 +37,8 @@
</section> --> </section> -->
<!-- celebration ideas --> <!-- celebration ideas -->
<section class="container mx-auto px-3 xl:px-24"> <section class="container mx-auto px-3 xl:px-24">
<div class="h1-text text-color-1 pt-10">Celebretion Ideas </div> <div class="h1-text text-blue-700 font-semibold pt-10">Celebretion Ideas </div>
<div class="text-2xl text-color-2 text-justify mt-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum ex necessitatibus deleniti voluptatem optio architecto fuga, ad exercitationem tempora recusandae expedita soluta, cum obcaecati maxime numquam vel repellat aperiam excepturi. </div> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].celebretion_ideas_text}}</h1>
<div v-if="ideas" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6"> <div v-if="ideas" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">
<div v-for="ida in ideas.slice(0, 3)" :key="ideas.id" class=" bg-grey-400"> <div v-for="ida in ideas.slice(0, 3)" :key="ideas.id" class=" bg-grey-400">
<div class=" relative"> <div class=" relative">
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class=" "> <div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class=" ">
<div class="flex relative"> <div class="flex relative">
<img v-if="ida.occassion_celebration_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.occassion_celebration_img" alt="" class="w-96 rounded-tl-lg rounded-br-lg" /> <img v-if="ida.occassion_celebration_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.occassion_celebration_img" alt="" class="w-96 rounded-tl-lg rounded-br-lg" />
@ -64,13 +64,13 @@
</div> </div>
</div> </div>
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- Worksheets --> <!-- Worksheets -->
<section class="container mx-auto xl:px-24 p-4 py-14"> <section class="container mx-auto xl:px-24 p-4 py-14">
<div class="h1-text text-color-1 ">Worksheets</div> <div class="h1-text text-blue-700 font-semibold">Worksheets</div>
<div class="text-2xl text-justify text-color-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum ex necessitatibus deleniti voluptatem optio architecto fuga, ad exercitationem tempora recusandae expedita soluta, cum obcaecati maxime numquam vel repellat aperiam excepturi. </div> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].worksheets_text}}</h1>
<div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-10"> <div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-10">
<div v-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4 "> <div v-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4 ">
<div class="flex relative"> <div class="flex relative">
@ -82,7 +82,7 @@
</div> </div>
</div> </div>
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div v-for="wkst in worksheets.slice(3, 4)" :key="worksheets.id" class="p-4"> <div v-for="wkst in worksheets.slice(3, 4)" :key="worksheets.id" class="p-4">
<div class="flex relative"> <div class="flex relative">
<img v-if="wkst.occassion_worksheets_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.occassion_worksheets_img" alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" /> <img v-if="wkst.occassion_worksheets_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.occassion_worksheets_img" alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
@ -92,13 +92,13 @@
</div> </div>
</div> </div>
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- Videos --> <!-- Videos -->
<section class="container mx-auto py-6 px-4 xl:px-24"> <section class="container mx-auto py-6 px-4 xl:px-24">
<div class="h1-text text-color-1 py-4">Videos</div> <div class="h1-text text-blue-700 font-semibold py-4">Videos</div>
<div class="text-2xl text-justify pb-12 text-color-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum ex necessitatibus deleniti voluptatem optio architecto fuga, ad exercitationem tempora recusandae expedita soluta, cum obcaecati maxime numquam vel repellat aperiam excepturi. </div> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4"> <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)"> <div @click="showYtModal(vdo.youtube_id)">
@ -128,7 +128,7 @@
</label> </label>
</label> --> </label> -->
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4"> <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
<div class="flex bg-gray-200 -rotate-6 gap-8"> <div class="flex bg-gray-200 -rotate-6 gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" /> <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
@ -139,13 +139,13 @@
</div> </div>
</div> </div>
<div class="mt-6 text-center text-lg ">...</div> <div class="mt-6 text-center text-lg ">...</div>
</div></a> </div></router-link>
</div> </div>
</section> </section>
<!-- Audio Books --> <!-- Audio Books -->
<section class="container mx-auto py-6 px-4 xl:px-24" > <section class="container mx-auto py-6 px-4 xl:px-24" >
<div class="h1-text text-color-1 py-4">Audio Books</div> <div class="h1-text text-blue-700 font-semibold py-4">Audio Books</div>
<div class="text-2xl text-justify text-color-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum ex necessitatibus deleniti voluptatem optio architecto fuga, ad exercitationem tempora recusandae expedita soluta, cum obcaecati maxime numquam vel repellat aperiam excepturi. </div> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].audio_books_text}}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 pt-6"> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 pt-6">
<div v-for="aud in audio" :key="audio.id" class="p-2"> <div v-for="aud in audio" :key="audio.id" class="p-2">
<label :for="aud.file" > <label :for="aud.file" >
@ -162,19 +162,19 @@
</label> </label>
</label> </label>
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div> <div>
<img class="rounded-tl-xl rounded-br-xl w-72 " src="/img/audio-icon.png" alt=""> <img class="rounded-tl-xl rounded-br-xl w-72 " src="/img/audio-icon.png" alt="">
<div class="text-center"><button class="text-xl bg-blue-700 p-1 text-white rounded-tl-lg rounded-br-lg px-6 ">View All</button></div> <div class="text-center"><button class="text-xl bg-blue-700 p-1 text-white rounded-tl-lg rounded-br-lg px-6 ">View All</button></div>
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- Celebration Stories --> <!-- Celebration Stories -->
<section class="container mx-auto pt-16 xl:px-24 px-4"> <section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-color-1">Celebretion stories</h1> <h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
<h1 class="text-2xl text-justify text-color-2 py-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti esse alias praesentium eos tenetur voluptatum ad rem sed reiciendis officia quod magni sequi, beatae doloremque dignissimos eum exercitationem quae quaerat.</h1> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].celebretion_stories_text}}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4"> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4">
<div v-for="slide in stories" :key="stories.id" class="p-4 pt-8"> <div v-for="slide in stories" :key="stories.id" class="p-4 pt-8">
<div class="flex bg-gray-200 rotate-6 gap-8 "> <div class="flex bg-gray-200 rotate-6 gap-8 ">
@ -182,7 +182,7 @@
<!-- <img v-else src="/img/image_not_available.png" alt="" /> --> <!-- <img v-else src="/img/image_not_available.png" alt="" /> -->
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div> <div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p> <p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </a></span> <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><router-link to="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </router-link></span>
</div> </div>
</div> </div>
</div> </div>
@ -192,9 +192,8 @@
<SubmitCelebration /> <SubmitCelebration />
<!-- Youtube Videos --> <!-- Youtube Videos -->
<section class="container mx-auto xl:px-24"> <section class="container mx-auto xl:px-24">
<div class="h1-text text-color-1 pt-16"> YouTube Videos for your reference </div> <div class="h1-text text-blue-700 font-semibold pt-16">YouTube Videos for your reference </div>
<div class="text-2xl text-justify py-8 text-color-2"> We have found some useful videos for you, just click the thumbnail you will be redirected to the specific youtube page. </div> <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].youtube_text}}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 "> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 ">
<div v-for="yt in youtube" :key="youtube.id" class="p-2"> <div v-for="yt in youtube" :key="youtube.id" class="p-2">
<a :href="'https://www.youtube.com/watch?v='+yt.youtube_id"> <a :href="'https://www.youtube.com/watch?v='+yt.youtube_id">
@ -210,11 +209,11 @@
<!-- <h2 class="h1-text text-center text-color-1 py-16"> Other's Occassions</h2> <!-- <h2 class="h1-text text-center text-color-1 py-16"> Other's Occassions</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-10"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-10">
<div class="grid" v-for="occassion in allOccassion" :key="occassion.id"> <div class="grid" v-for="occassion in allOccassion" :key="occassion.id">
<a :href="'/occassion/'+occassion.occassion_slug"> <router-link :to="'/occassion/'+occassion.occassion_slug">
<div> <div>
<img class="rounded-lg shadow-2xl" v-if="occassion.occassion_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + occassion.occassion_icon" alt=""/> <img class="rounded-lg shadow-2xl" v-if="occassion.occassion_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + occassion.occassion_icon" alt=""/>
</div> </div>
</a> </router-link>
</div> </div>
</div> --> </div> -->
@ -233,7 +232,7 @@
<section class="container mx-auto py-20 px-4 xl:px-24"> <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 grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit"> <div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1> <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqOccassion in faqOccassion" :key="faqOccassion.id" class=""> <div v-for="faqOccassion in faqOccassion" :key="faqOccassion.id" class="">
<div class="grid h-fit text-color-2"> <div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b"> <div tabindex="0" class="collapse collapse-arrow border-b">
@ -262,6 +261,7 @@
</div> </div>
</template> </template>
<script is:inline> <script is:inline>
export default { export default {
setup(){ setup(){
// const route = useRoute(); // const route = useRoute();
@ -307,7 +307,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(stories => { .then(stories => {
this.stories=stories.data this.stories=stories.data.reverse().slice(0, 4)
// console.log(this.stories) // console.log(this.stories)
}) })
// console.log(occassionID) // console.log(occassionID)
@ -317,7 +317,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/Occassion_celebration_ideas?filter[Occassion_key][_in]=' + occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/Occassion_celebration_ideas?filter[Occassion_key][_in]=' + occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(ideas => { .then(ideas => {
this.ideas=ideas.data this.ideas=ideas.data.reverse().slice(0, 4)
// console.log(this.ideas) // console.log(this.ideas)
}) })
return occassionID return occassionID
@ -326,7 +326,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_worksheets?filter[occassion_key][_in]='+ occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_worksheets?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.worksheets=worksheets.data this.worksheets=worksheets.data.reverse().slice(0, 4)
// console.log(this.worksheets) // console.log(this.worksheets)
}) })
return occassionID return occassionID
@ -335,7 +335,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_videos?filter[occassion_key][_in]='+ occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(videos => { .then(videos => {
this.videos=videos.data this.videos=videos.data.reverse().slice(0, 4)
// console.log(this.videos) // console.log(this.videos)
}) })
return occassionID return occassionID
@ -344,7 +344,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_youtube_videos?filter[occassion_key][_in]='+ occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_youtube_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(youtube => { .then(youtube => {
this.youtube=youtube.data this.youtube=youtube.data.reverse().slice(0, 3)
// console.log(youtube) // console.log(youtube)
}) })
return occassionID return occassionID
@ -353,7 +353,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_audio_book?filter[occassion_key][_in]='+ occassionID) fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_audio_book?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(audio => { .then(audio => {
this.audio=audio.data this.audio=audio.data.reverse().slice(0, 3)
// console.log(this.audio) // console.log(this.audio)
}) })
}) })
@ -371,7 +371,7 @@ methods: {
.then(resp => resp.json()) .then(resp => resp.json())
.then(data => { .then(data => {
this.faqOccassion=data.data this.faqOccassion=data.data
console.log(this.faqOccassion) // console.log(this.faqOccassion)
}) })

6
src/components/Roundchart.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="grid"> <div class="grid">
<div class="flex relative justify-center text-xs"> <div class="flex relative justify-center text-xs">
<img class="animate-[spin_20s_ease-in-out_1]" src="/img/frame1.png" alt=""> <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="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi."> <p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Literacy</abbr> Literacy</abbr>
</p> </p>
@ -29,6 +29,10 @@
</div> </div>
</template> </template>
<style> <style>
.literacy {
top: 110px;
transform: rotate(25deg);
}
.comunication { .comunication {
transform: rotate(80deg); transform: rotate(80deg);
/* left: 360px; */ /* left: 360px; */

82
src/components/Themes.vue
View File

@ -40,13 +40,13 @@
</section> --> </section> -->
<!-- section Celebretion Ideas --> <!-- section Celebretion Ideas -->
<section class="container mx-auto xl:px-24 py-16 px-4"> <section class="container mx-auto xl:px-24 py-16 px-4">
<div class="h1-text text-color-1">Celebration Ideas </div> <div class="h1-text text-blue-700 font-semibold">Celebration Ideas </div>
<div class="text-2xl text-justify text-color-2">Enrich your classroom celebration with innovative ideas of community helper from a collection of themes for the preschoolers and teach them with uniqueness. From theme dress up to classroom decoration, find every idea here.</div> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].celebration_ideas_text}}</div>
<div v-if="ideas" class="grid place-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 "> <div v-if="ideas" class="grid place-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 ">
<div v-for="ida in ideas.slice(0, 3)" :key="ideas.id" class=""> <div v-for="ida in ideas.slice(0, 3)" :key="ideas.id" class="">
<div class="flex relative"> <div class="flex relative">
<img v-if="ida.celebration_ideas_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.celebration_ideas_img" alt="" class="pt-4 rounded-tl-xl rounded-br-xl shadow-xl" /> <img v-if="ida.celebration_ideas_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.celebration_ideas_img" alt="" class="pt-4 rounded-tl-xl rounded-br-xl shadow-xl" />
<div class="absolute top-10 left-8 text-2xl text-color-1">{{ida.celebration_ideas_title}} <div class="absolute top-10 left-8 text-2xl text-color-1 font-semibold">{{ida.celebration_ideas_title}}
</div> </div>
<div class="absolute top-16 py-3 left-8 text-xl text-color-2">{{ida.celebration_ideas_body_text}} <div class="absolute top-16 py-3 left-8 text-xl text-color-2">{{ida.celebration_ideas_body_text}}
</div> </div>
@ -58,7 +58,7 @@
</div> </div>
<!-- <div class=" text-center text-lg ">{{ida.title}}</div> --> <!-- <div class=" text-center text-lg ">{{ida.title}}</div> -->
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class=""> <div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class="">
<div class="flex relative"> <div class="flex relative">
<img v-if="ida.celebration_ideas_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.celebration_ideas_img" alt="" class="pt-4 rounded-tl-xl rounded-br-xl shadow-xl" /> <img v-if="ida.celebration_ideas_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.celebration_ideas_img" alt="" class="pt-4 rounded-tl-xl rounded-br-xl shadow-xl" />
@ -69,13 +69,13 @@
</div> </div>
<!-- <div class=" text-center text-lg ">...</div> --> <!-- <div class=" text-center text-lg ">...</div> -->
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- section Worksheets --> <!-- section Worksheets -->
<section class="container mx-auto xl:px-24 py-10 px-4"> <section class="container mx-auto xl:px-24 py-10 px-4">
<div class="h1-text text-color-1">Worksheets</div> <div class="h1-text text-blue-700 font-semibold">Worksheets</div>
<div class="text-2xl text-justify text-color-2 py-4">Increase the little one's knowledge with our worksheets of community helpers among the themes for the preschoolers where you help your toddlers to practice and revise more while learning through the right approach.</div> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].worksheets_text}}</div>
<div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6"> <div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">
<div v-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4"> <div v-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4">
<div class="flex relative"> <div class="flex relative">
@ -88,7 +88,7 @@
</div> </div>
<!-- <div class=" text-center text-lg ">{{wkst.title}}</div> --> <!-- <div class=" text-center text-lg ">{{wkst.title}}</div> -->
</div> </div>
<a href="/worksheets"> <router-link to="/worksheets">
<div v-for="wkst in worksheets.slice(3, 4)" :key="worksheets.id" class="p-4"> <div v-for="wkst in worksheets.slice(3, 4)" :key="worksheets.id" class="p-4">
<div class="flex relative"> <div class="flex relative">
<img v-if="wkst.theme_worksheets_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.theme_worksheets_img" alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" /> <img v-if="wkst.theme_worksheets_img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.theme_worksheets_img" alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
@ -99,13 +99,13 @@
</div> </div>
<!-- <div class=" text-center text-lg ">...</div> --> <!-- <div class=" text-center text-lg ">...</div> -->
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- section videos --> <!-- section videos -->
<section class="container mx-auto xl:px-24 py-16 px-4"> <section class="container mx-auto xl:px-24 py-16 px-4">
<div class="h1-text text-color-1">Videos </div> <div class="h1-text text-blue-700 font-semibold">Videos </div>
<div class="text-xl text-justify pb-4 text-color-2">Show videos associated with community helpers and aware your play schoolers of their surrounding people to generate further curiosity in them. </div> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].videos_text}}</div>
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 "> <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 ">
<div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4"> <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)"> <div @click="showYtModal(vdo.youtube_id)">
@ -135,7 +135,7 @@
</label> </label>
</label> --> </label> -->
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4"> <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
<div class="flex bg-gray-00 -rotate-6 gap-8"> <div class="flex bg-gray-00 -rotate-6 gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl" /> <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl" />
@ -146,13 +146,13 @@
</div> </div>
</div> </div>
<div class="mt-6 text-center text-lg ">...</div> <div class="mt-6 text-center text-lg ">...</div>
</div></a> </div></router-link>
</div> </div>
</section> </section>
<!-- section audio book --> <!-- section audio book -->
<section class="container mx-auto xl:px-24 px-4" > <section class="container mx-auto xl:px-24 px-4" >
<div class="h1-text text-color-1 ">Audio Books</div> <div class="h1-text text-blue-700 font-semibold ">Audio Books</div>
<div class="text-2xl text-justify pb-8 text-color-2">Introduce the toddlers to a new world of imagination with audio stories of community helpers and assist them in their cognitive development with our resources.</div> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].audio_books_text}}</div>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 "> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 ">
<div v-for="aud in audio" :key="audio.id" class="p-2"> <div v-for="aud in audio" :key="audio.id" class="p-2">
<label :for="aud.file" > <label :for="aud.file" >
@ -170,18 +170,18 @@
</label> </label>
</label> </label>
</div> </div>
<a href="/plan"> <router-link to="/plan">
<div> <div>
<img class="rounded-tl-xl rounded-br-xl w-72" src="/img/audio-icon.png" alt=""> <img class="rounded-tl-xl rounded-br-xl w-72" src="/img/audio-icon.png" alt="">
<div class="text-center"><button class="text-xl bg-blue-700 py-2 text-white rounded-tl-lg rounded-br-lg px-6 ">View All</button></div> <div class="text-center"><button class="text-xl bg-blue-700 py-2 text-white rounded-tl-lg rounded-br-lg px-6 ">View All</button></div>
</div> </div>
</a> </router-link>
</div> </div>
</section> </section>
<!-- Celebration Stories --> <!-- Celebration Stories -->
<section class="container mx-auto xl:px-24 pt-16 px-4"> <section class="container mx-auto xl:px-24 pt-16 px-4">
<h1 class="h1-text text-color-1 ">Celebration stories</h1> <h1 class="h1-text text-blue-700 font-semibold">Celebration stories</h1>
<h1 class="text-2xl text-justify pb-8 text-color-2">The following stories of various classes celebrating Community helpers and adding elegance to their teaching will provide you better ideas for celebrating the particular theme for the preschoolers.</h1> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].celebration_stories_text}}</div>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4"> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4">
<div v-for="slide in stories" :key="stories.id" class="p-4 "> <div v-for="slide in stories" :key="stories.id" class="p-4 ">
<div class="flex bg-gray-200 rotate-6 gap-8"> <div class="flex bg-gray-200 rotate-6 gap-8">
@ -189,7 +189,7 @@
<img v-else src="/img/image_not_available.png" alt="" /> <img v-else src="/img/image_not_available.png" alt="" />
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div> <div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p> <p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </a></span> <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><router-link to="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </router-link></span>
</div> </div>
</div> </div>
</div> </div>
@ -200,7 +200,7 @@
<img v-else src="/img/image_not_available.png" alt="" /> <img v-else src="/img/image_not_available.png" alt="" />
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div> <div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{{slide.title}}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p> <p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{{slide.text}}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </a></span> <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><router-link to="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry>> </router-link></span>
</div> </div>
</div> </div>
</div> --> </div> -->
@ -210,9 +210,8 @@
<SubmitCelebration /> <SubmitCelebration />
<!-- section youtube --> <!-- section youtube -->
<section class="container mx-auto py-16 mt-20 px-4 xl:px-24" > <section class="container mx-auto py-16 mt-20 px-4 xl:px-24" >
<div class="h1-text text-color-1">YouTube Videos for your reference </div> <div class="h1-text text-blue-700 font-semibold">YouTube Videos for your reference </div>
<div class="text-2xl text-justify text-color-2">We have found some useful videos for you, just click the thumbnail you will be redirected to the specific youtube page. </div> <div class="text-2xl text-justify text-color-2" v-if="page">{{page[0].youtube_text}}</div>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 "> <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 ">
<div v-for="yt in youtube" :key="youtube.id" class="p-2"> <div v-for="yt in youtube" :key="youtube.id" class="p-2">
<a :href="'https://www.youtube.com/watch?v='+yt.youtube_id"> <a :href="'https://www.youtube.com/watch?v='+yt.youtube_id">
@ -228,11 +227,11 @@
<h2 class="h1-text text-center text-color-1 py-16"> Other's Themes </h2> <h2 class="h1-text text-center text-color-1 py-16"> Other's Themes </h2>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-10"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-10">
<div class="grid" v-for="themes in allThemes" :key="themes.id"> <div class="grid" v-for="themes in allThemes" :key="themes.id">
<a :href="'/themes/'+ themes.theme_slug"> <router-link :to="'/themes/'+ themes.theme_slug">
<div> <div>
<img class="rounded-lg shadow-2xl" v-if="themes.theme_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + themes.theme_icon" alt=""/> <img class="rounded-lg shadow-2xl" v-if="themes.theme_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + themes.theme_icon" alt=""/>
</div> </div>
</a> </router-link>
</div> </div>
</div> </div>
@ -250,7 +249,7 @@
<section class="container mx-auto py-20 px-4 xl:px-24"> <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 grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit"> <div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1> <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqThemes in faqThemes" :key="faqThemes.id" class=""> <div v-for="faqThemes in faqThemes" :key="faqThemes.id" class="">
<div class="grid h-fit text-color-2"> <div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b"> <div tabindex="0" class="collapse collapse-arrow border-b">
@ -265,8 +264,6 @@
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div> </div>
</section> </section>
<!-- Youtube Modal --> <!-- Youtube Modal -->
<div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal"> <div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
<div class="modal-content"> <div class="modal-content">
@ -291,11 +288,6 @@ export default {
setup(){ setup(){
// const route = useRoute(); // const route = useRoute();
}, },
methods: {
// onReady() {
// this.$refs.youtube.playVideo()
// },
},
data() { data() {
return { return {
@ -333,8 +325,7 @@ methods: {
this.isLoading = false this.isLoading = false
// console.log(this.page[0].id) // console.log(this.page[0].id)
return this.page[0].id return this.page[0].id
}) }).then((themeID) => {
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_stories?filter[theme_key][_in]=' + themeID) fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_stories?filter[theme_key][_in]=' + themeID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(stories => { .then(stories => {
@ -344,13 +335,12 @@ methods: {
// console.log(themeID) // console.log(themeID)
return themeID return themeID
}) }).then((themeID) => {
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_ideas?filter[theme_key][_in]=' + themeID) fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_ideas?filter[theme_key][_in]=' + themeID)
.then(resp => resp.json()) .then(resp => resp.json())
.then(ideas => { .then(ideas => {
this.ideas=ideas.data this.ideas=ideas.data
// console.log(themeID) // console.log(ideas)
}) })
return themeID return themeID
}) })
@ -389,13 +379,13 @@ methods: {
// console.log(this.audio) // console.log(this.audio)
}) })
}) })
fetch('https://curriculum-app-api.beanstalkedu.com/items/themes??filter[status][_eq]=draft&limit=3') fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[status][_eq]=draft&limit=3')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.allThemes = data.data this.allThemes = data.data
// this.isLoading = false // this.isLoading = false
// // console.log(this.page[0].id) console.log(this.allThemes)
// return this.page[0].id // return this.page[0].id
}) })
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=themes') fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=themes')
@ -544,12 +534,4 @@ methods: {
border: 1px solid #888; border: 1px solid #888;
width: 80%; width: 80%;
} */ } */
</style>
</style>

320
src/components/Worksheets.vue Normal file
View File

@ -0,0 +1,320 @@
<template>
<div>
<section class="container-fluid bg3">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
<p class="font-20px text-justify pt-8">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents.</p>
<p class="font-20px text-justify pt-6">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
</div>
<div class="flex">
<img class="w-fit h-fit" src="/img/worksheet1a.png" alt="">
</div>
</div>
</section>
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl">
<div class="flex flex-col xl:flex-row">
<div class="flex flex-col px-6 xl:pt-28">
<h1 class="text-blue-700 hero-text font-bold xl:w-5/12">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
<p class="font-20px xl:w-8/12 text-justify">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents.</p>
<p class="font-20px xl:w-8/12 text-justify pt-4">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
</div>
<div class="flex w-full justify-center place-items-center">
<img class="w-full h-fit rounded-3xl py-4 cursor-none" src="/img/worksheet1.png" alt="">
</div>
</div>
</section> -->
<!-- <section class="container-fluid">
<div class="relative"><img src="/img/header-worksheet.png" alt="">
<div class="absolute inset-0 lg:inset-16">
<h1 class="hero-text text-blue-700 font-bold p-6 2xl:p-24 lg:w-5/12">Worksheet <span class="text-color-1">For Your Classroom</span></h1>
</div>
</div>
</section> -->
<section class="container-fluid">
<!-- <p class="font-20px text-color-2 text-justify py-4 container mx-auto px-4">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents. </p> -->
<!-- <p class="font-20px text-color-2 text-justify container mx-auto px-4">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children. </p> -->
<div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
<div class="flex">
<h1 class="pt-3 font-semibold ">Age:&nbsp;</h1>
<select class="select max-w-xs bg3" @change="switchSelect($event)">
<option value="2">Select Age</option>
<option value="2">2-3 Year</option>
<option value="3">3-4 Year</option>
<option value="4">4-5 Year</option>
<option value="5">5-6 Year</option>
</select>
</div>
</div>
</section>
<div class="my-24"></div>
<!-- Literacy section -->
<section class="container mx-auto pt-10 px-6">
<span class="h1-text text-color-1">Literacy</span>
<p class="font-20px text-color-2 text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
<div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit font-20px">{{worksheet.title}}</h1>
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
</div>
</div>
<span class="pt-16 md:pt-0">
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
<router-link to="literacy"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
</div>
</span>
</div>
</section>
<!-- Mathematics section -->
<section class="container mx-auto px-6">
<span class="h1-text text-color-1">Mathematics</span>
<p class="font-20px text-color-2 text-justify">Gaining smooth apprehension over mathematics becomes easier with the accurate Mathematics worksheet for playgroup. Equip children with pre-maths skills at an early stage of their life and transcend them with the correct knowledge of numbers, number names, addition, etc. through Teeny Beans’ worksheet for preschoolers. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
<div v-for="worksheet in wsMath" :key="wsMath.id" class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit font-20px">{{ worksheet.title}}</h1>
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
</div>
</div>
<span class="pt-16 md:pt-0">
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
<router-link to="mathematics"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
</div>
</span>
</div>
</section>
<!-- Understanding the Worlds section -->
<section class="container mx-auto px-6">
<span class="h1-text text-color-1">Understanding the Worlds</span>
<p class="font-20px text-color-2 text-justify">In the era of increasing competition, it becomes more essential for every child to be equipped with general understanding of his/her surroundings, which is the why, our worksheet for preschoolers aim at every topic including this to enhance IQ of every child and providing an absolute overview and comprehension of topics like family, senses, body, myself and others</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
<div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit">{{ worksheet.title}}</h1>
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
</div>
</div>
<span class="pt-16 md:pt-0">
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
<router-link to="world"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
</div>
</span>
</div>
</section>
<!-- Others section -->
<!-- <section class="container mx-auto pt-20 px-4">
<span class="text-2xl md:text-4xl text-color-1 px-6">Literacy</span>
<p class=" text-lg text-color-2 pt-6 text-base md:text-2xl px-6 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aut, explicabo velit saepe quas tenetur dolores tempore enim aspernatur magnam amet, laboriosam perferendis voluptatem. Dolorem neque esse sed minima blanditiis?</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-32 mt-32 place-items-center gap-32">
<div v-for="worksheet in worksheets" :key="worksheets.id" class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
</div>
<h1 class="text-center pt-8 ">{{ worksheet.title}}</h1>
<button class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
</div>
</div>
</div>
</section> -->
<section class="container mx-auto py-20 px-4 ">
<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">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqWorksheets in faqWorksheets" :key="faqWorksheets.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqWorksheets" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqWorksheets.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqWorksheets.content"></p>
</div>
</div>
</div>
</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 {
page: null,
faqWorksheets: null,
worksheets: null,
wsLiteracy: null,
wsMath: null,
wsWorld: null,
isLoading: true,
}
},
methods: {
switchSelect(event) {
// alert(event.target.value)
this.getWorksheets(event.target.value)
// this.selected = event.target.value;
},
getWorksheets(age=2){
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&literacy&limit=4')
.then(resp => resp.json())
.then(worksheets => {
this.wsLiteracy=worksheets.data
// console.log(this.wsLiteracy)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics&limit=4')
.then(resp => resp.json())
.then(worksheets => {
this.wsMath=worksheets.data
// console.log(this.wsMath)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world&limit=4')
.then(resp => resp.json())
.then(worksheets => {
this.wsWorld=worksheets.data
// console.log(this.wsWorld)
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=worksheets')
.then(resp => resp.json())
.then(data => {
this.faqWorksheets=data.data
// console.log(this.faqWorksheets)
})
// fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?limit=3')
// .then(resp => resp.json())
// .then(worksheets => {
// this.worksheets=worksheets.data
// // console.log(this.Main_Menu)
// this.wsLiteracy= this.worksheets.filter(item => { if (item.Category == "literacy") return item });
// this.wsMath = this.worksheets.filter(item => { if (item.Category == "mathematics") return item });
// this.wsWorld = this.worksheets.filter(item => { if (item.Category == "world") return item });
// console.log(this.worksheets)
// })
}
},
mounted: function () {
this.getWorksheets()
}
}
</script>
<style scoped>
@media (min-width: 640px)
{.colume {
grid-column: 1;
}
}
@media (min-width: 768px)
{.colume {
grid-column: 2;
}
}
@media (min-width: 1024px)
{.colume {
grid-column: 3;
}
}
@media (min-width: 1280px)
{.colume {
grid-column: 5;
}
}
.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;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 25px;
}
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
z-index: 999;
background-color: rgb(247, 235, 173);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
margin-left: -30px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: rgb(250, 230, 133);
color: #ff0000;
}
.services:hover .dropdown {
display: block;
}
input[type=checkbox]{
display: none;
}
</style>

10
src/pages/administrators.astro
View File

@ -1,11 +1,13 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue"; import Header from "../components/Header.vue";
import Administrators from "../components/Administrators.vue"; import Administrators from "../components/Administrators.vue";
import Footer from "../components/Footer.vue"; import Footer from "../components/Footer.vue";
--- ---
<Layout> <Layout title="">
<Header/> <!-- <Header/> -->
<Administrators/> <Menu/>
<Footer/> <Administrators client:visible/>
<Footer client:visible/>
</Layout> </Layout>

2
src/pages/educators.astro
View File

@ -6,5 +6,5 @@ import Footer from "../components/Footer.vue";
--- ---
<Layout title="Welcome"> <Layout title="Welcome">
<Educators client:visible/> <Educators client:visible/>
<Footer/> <Footer client:visible/>
</Layout> </Layout>

753
src/pages/homepage.astro
View File

@ -3,239 +3,562 @@ import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro"; import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue"; import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue"; import Footer from "../components/Footer.vue";
import Roundchart from "../components/Roundchart.vue";
--- ---
<Layout title="Welcome to Teenybeans"> <Layout title="Welcome to Teenybeans">
<Menu/> <Menu/>
<main> <main>
<section class="container-fluid hero-bg"> <div class="">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row"> <div>
<div class="flex flex-col justify-center w-full"> <!-- This Event is Round The Corner -->
<h1 class="hero-text font-semibold text-color-1 w-full">This Event is Round The Corner</h1> <section class="bg3 shadow-2xl container-fluid h-fit">
<p class="h2-text font-semibold py-8">Start Planning Your Classroom Curriculum now</p> <div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
<p class="font-18px text-justify">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="flex flex-col justify-center">
<div class="flex gap-16 place-items-center px-4 pt-6"> <h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<div><button class="text-base border-2 border-blue-700 text-blue-700 rounded-tl-full rounded-br-full px-6 py-2 shadow-2xl transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Speak with Us</button></div> <h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<p class="text-xl font-semibold">OR</p> <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><button class="text-base border-2 border-blue-700 bg-blue-700 text-white rounded-tl-full rounded-br-full px-6 py-2 shadow-2xl transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Check Out Event</button></div> <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
</div> <div class="rounded-tl-full text-sm xl:text-base 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"> <router-link to="/educators#getintouch"><button>Speak with Us</button></router-link></div>
</div> <div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="flex justify-center"> <div class="rounded-tl-full text-sm xl:text-base 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"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
<img class="w-fit h-fit" src="/img/homepage1b.png" alt=""> </div>
</div> </div>
<div class="flex w-full justify-end place-items-end">
</div> <img class="h-fit " src="/img/homepage1c.png" alt="">
</section> </div>
<section class="container mx-auto xl:px-24"> </div>
<h1 class="text-color-1 h1-text font-semibold text-center">Discover our solutions</h1> <!-- <div class="grid w-full"><img class="w-full" src="/img/hero-banner1a.png" alt="">#f9f9b4</div> -->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 px-4 h-fit"> </section>
<div class="grid place-items-center"> <div class="container-fluid mt-16">
<img src="/img/plan.png" alt=""> <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>
<h1 class="text-color-1 text-3xl font-semibold">Worksheets</h1>
<p class="font-18px text-justify line-clamp-3">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<button class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl shadow-2xl">Discover Now</button>
</div>
<div class="grid place-items-center">
<img src="/img/report.png" alt="">
<h1 class="text-color-1 text-3xl font-semibold">Popular Curriculum</h1>
<p class="font-18px text-justify line-clamp-3">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers. </p>
<button class="position text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl shadow-2xl">Discover Now</button>
</div>
<div class="grid place-items-center">
<img src="/img/classroom.png" alt="">
<h1 class="text-color-1 text-3xl font-semibold">Themes</h1>
<p class="font-18px text-justify line-clamp-3">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<button class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl shadow-2xl">Discover Now</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-16 px-4">
<div class="grid place-items-center">
<img src="/img/popular.png" alt="">
<h1 class="text-color-1 text-3xl font-semibold">Event Ideas for your Classroom</h1>
<p class="font-18px text-justify xl:px-24 line-clamp-3">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<button class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl shadow-2xl">Discover Now</button>
</div>
<div class="grid place-items-center">
<img src="/img/event.png" alt="">
<h1 class="text-color-1 text-3xl font-semibold">Videos</h1>
<p class="font-18px text-justify xl:px-24 line-clamp-3">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<button class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl shadow-2xl">Discover Now</button>
</div>
</div>
</section>
<section class="container mx-auto shadow-2xl xl:px-24 px-4 py-8">
<p class="font-18px text-justify">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>
<p class="font-18px mt-10 text-justify">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>
</section>
<section class="container mx-auto xl:px-24 my-32">
<h1 class="h1-text text-center text-color-1 font-semibold py-24">Resources To Choose From</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 place-items-center">
<div><a href=""><img src="/img/Audiobooks.png" alt=""></a></div>
<div><a href=""><img src="/img/Worksheet.png" alt=""></a></div>
<div><a href=""><img src="/img/Videos.png" alt=""></a></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center">
<div><a href=""><img src="/img/Event-ideas.jpg" alt=""></a></div>
<div><a href=""><img src="/img/Reference-Links.png" alt=""></a></div>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24 my-24">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="grid">
<h1 class="h1-text text-color-1 font-semibold">Trending Lesson Plans</h1>
<p class="text-xl md:text-3xl">Discover today`s popular lesson plans specially curated for your classroom.</p>
<button class="text-2xl text-white bg-blue-700 rounded-br-xl rounded-tl-xl px-6 py-2 w-fit">Check out Now</button>
</div>
<!-- 1 grid Empty -->
</div>
</section>
<section class="container mx-auto px-4 xl:px-24 my-32">
<div class="flex flex-col lg:flex-row justify-between bg-gray-200 px-4">
<div class="flex flex-col 2xl:pt-28 h-fit">
<p class="h1-text text-color-1 font-semibold w-8/12">Discover Our Preschool Solutions</p>
<button class="text-2xl text-white bg-blue-700 rounded-br-xl rounded-tl-xl px-6 py-2 w-fit ">Discover All</button>
</div>
<div class="grid ">
<img src="/img/rectangle1.png" alt="">
</div>
</div>
</section>
<section class="container mx-auto xl:px-24 px-4">
<h1 class="h1-text text-color-1 text-center font-semibold">EYFS Curriculum & Its Impact</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center">
<div class="grid h-fit justify-center">
<p class="text-justify font-18px">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="text-justify font-18px py-8">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="text-justify font-18px">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 class="grid h-fit">
<img class="p-8" src="/img/legends.png" alt="">
<img src="/img/frame1.png" alt="">
<h2 class="h2-text font-semibold">Discover in Preschool Education</h2>
<p class="h2-text">Mentions are going to implemented Preschool Education System</p>
<button class="text-xl px-6 py-2 text-white bg-blue-700 rounded-tl-xl rounded-br-xl w-fit ">Discover All</button>
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<h1 class="text-color-1 h1-text text-center font-semibold">Teeny Beans in Your School</h1>
<div class="flex flex-col lg:flex-row justify-center mt-20">
<div><a href=""><img src="/img/right-slid.png" alt=""></a></div>
<div><a href=""><img src="/img/right-slid.png" alt=""></a></div>
</div>
</section>
<section class="container mx-auto xl:px-24 my-48 px-4">
<h1 class="h1-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
<div class="grid background rounded-3xl shadow-xl">
<div class="hover-expand cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-18px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background rounded-3xl shadow-xl">
<div class="hover-expand cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-18px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background rounded-3xl shadow-xl">
<div class="hover-expand cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-18px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background rounded-3xl shadow-xl">
<div class="hover-expand cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-18px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div> </div>
<!-- <section class="container-fluid">
<div class="flex w-screen load-wraper">
<img class="relative w-screen" src="/img/homepage.jpg" alt="">
<div class="absolute pl-4 xl:pl-32 xl:pt-40">
<h1 class="text-color-1 hero-text font-bold">This Event is Round The Corner</h1>
<h2 class="font-semibold text-color-2 text-base lg:text-3xl font-bold">Strat Planning Your Classroom Curriculum now</h2>
<div class="grid grid-cols-7 md:text-base text-xs place-items-center py-2">
<div class="rounded-tl-full rounded-br-full col-span-3 text-blue-700 font-semibold pr-4 pl-4 p-2 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>Speak with Us</button></router-link></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full rounded-br-full col-span-3 text-white font-semibold pr-4 pl-4 p-2 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
</div>
</div>
</div>
</section> -->
<!-- <section class="container-fluid shadow-xl py-4">
<div class="container mx-auto text-justify pt-6 px-4 font-20px ">
<p class="text-color-2 ">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="my-4"></div>
<p class="text-color-2">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. </p>
</div>
</section> -->
<section 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 pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Popular Curriculum</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="mt-16 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-8"></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 m-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
<div class="grid"><router-link to="/audiobooks"><img draggable="false" src="/img/Audiobooks.png" alt=""></router-link></div>
<div class="grid"><router-link to="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></router-link></div>
<div class="grid"><router-link to="/videos"><img draggable="false" src="/img/Videos.png" alt=""></router-link></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
<div class="grid"><router-link to="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></router-link></div>
<div class="grid"><router-link to=""><img draggable="false" src="/img/Reference-Links.png" alt=""></router-link></div>
</div>
</div>
</section>
<section class="container mx-auto mt-12 xl:px-24">
<div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 ">
<div class="grid row-span-1 h-fit px-4">
<h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
<div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
</div>
<div class="grid row-span-2 place-items-center lg:place-items-end">
<!-- <vueper-slides
class="no-shadow w-96 px-14 md:px-0" arrows-outside
:visible-slides="1"
:bullets="false"
slide-multiple
:gap="1"
:slide-ratio="3/3"
:touchable="true"
:dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, } }">
<vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
</vueper-slides> -->
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
<div class="grid place-items-start p-10 h-fit">
<p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
</div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
</div>
</section>
<!-- <section class="container mx-auto">
<div class="grid place-content-center text-color-1 text-2xl font-bold py-20"> EYFS Curriculum & Its Impact</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 px-4">
<div class="grid text-sm md:text-base">
<div class="text-justify text-color-2">
<p class="py-8 ">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">The <strong> play school curriculum</strong> 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 <strong> playschool curriculum</strong> 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">The British <strong> kindergarten curriculum</strong> 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 place-items-center">
<img src="/img/legends.png" alt="" class="p-8 ">
<img src="/img/Frame-184.png" alt="">
<div class="grid text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</div>
<p class="text-lg md:text-2xl text-color-2">Mentions are going to implemented Preschool Education System</p>
<div><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">Discover All</button></div>
</div>
</div>
</section> -->
<section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
<h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
<div class="grid">
<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="" class="p-8">
<div class="flex relative justify-center text-xs ">
<Roundchart/>
</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-6 py-2 rounded-tl-lg rounded-br-lg text-2xl">Discover All</button></div>
</div>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24">
<div class="grid text-color-1 hero-text font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your Preschool
<p class="text-xl text-center text-xl md:text-3xl text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid"><router-link to="/educators"><img src="/img/left-slid.png" alt=""></router-link></div>
<div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<h1 class="hero-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</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="faqHome in faqHome" :key="faqHome.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqHome" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqHome.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqHome.content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section> -->
</div> </div>
</div> </div>
</section> </main>
</main>
<Footer/> <Footer/>
</Layout> </Layout>
<!-- <script>
export default {
setup(){
// const route = useRoute();
},
data() {
return {
page: null,
faqHome: null,
themes:null,
lessonplan:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
.then(response => response.json())
.then(data => {
this.lessonplan = data.data
// this.isLoading = false
// console.log(this.page[0].id)
// return this.page[0].id
}),
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
.then(resp => resp.json())
.then(data => {
this.faqHome=data.data
// console.log(this.faqHome)
})
},
}
</script> -->
<style scoped> <style scoped>
.line-clamp-3 { .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 {
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;
}
.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; overflow: hidden;
display: -webkit-box; }
-webkit-box-orient: vertical; details[open] > *:not(summary) { color: inherit; }
-webkit-line-clamp: 3;
height: auto; /* # 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;
} }
.line-clamp-3:hover {
overflow: visible; .bottombar:hover{
display: -webkit-box; overflow: visible;
-webkit-box-orient: vertical; white-space: normal;
-webkit-line-clamp: none; width: auto;
} height: auto;
.hero-bg {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
} }
.text-color-1 { .text-color-1 {
color: #7C4C23; color: #7C4C23;
font-family: 'Quicksand';
} }
.h1-text {
font-size: 50px; .text-color-2 {
color: #333333;
font-family: 'Quicksand';
} }
@media screen and (min-width: 1500px) { .font-20px {
.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;
}
}
.font-18px {
font-size: 18px; font-size: 18px;
} }
.hover-expand { .h1-text {
overflow: hidden; font-size: 30px;
white-space: nowrap;
width: auto;
line-clamp: 4;
bottom: 12;
padding: 20px;
border-radius: 16px;
background-color: #e5e7eb;
text-align: justify;
} }
.hover-expand:hover {
overflow: visible;
white-space: normal;
width: auto;
height: auto;
background-color: #f3f4f6;
}
/* @media screen and (min-width: 801px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 800px) {
.hero-text {
font-size: 30px;
}
} */
@media screen and (min-width: 1500px) { @media screen and (min-width: 1500px) {
.hero-text { .hero-text {
font-size: 50px; font-size: 50px;
}
}
@media screen and (max-width: 1499px) { }
.hero-text { }
font-size: 37px;
} @media screen and (max-width: 1499px) {
} .hero-text {
@media screen and (max-width: 1199px) { font-size: 40px;
.hero-text {
font-size: 30px; }
} }
} @media screen and (max-width: 1199px) {
</style> .hero-text {
font-size: 30px;
}
}
</style>

11
src/pages/worksheets.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Worksheets from "../components/Worksheets.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="Worksheets">
<Menu/>
<Worksheets client:visible/>
<Footer/>
</Layout>