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

336
src/components/Administrators.vue
View File

@ -1,64 +1,79 @@
<template>
<div>
<section class="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>
<span class="text-color-1">For Your Preschool</span>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-4 w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Discover Solutions<span class="text-color-1 "> For Your Preschool</span></h1>
<p class="font-20px pt-8 text-justify">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods.</p>
<div class="pt-8"><button class="shadow-2xl text-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>
</section>
<section class="container-fluid shadow-xl">
<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.
<!-- <section class="container-fluid">
<div class="flex relative"><img class="w-screen" src="/img/header-administrator.jpg" alt="">
<div class="absolute pl-6 pt-4 xl:pl-40 2xl:pt-40">
<h1 class="text-blue-700 hero-text font-bold lg:w-6/12">Discover Solutions <span class="text-color-1">For Your Preschool</span></h1>
</div>
</div>
<div class="text-blue-700 text-3xl md:text-6xl bg-gradient-to-t from-blue-200 pt-28 pb-28 md:pl-48 text-center md:text-start">
</div>
</section> -->
<!-- <section class="container-fluid shadow-xl">
<p class="container mx-auto text-justify p-6 font-20px">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum.
Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods. </p>
</section>
<section class="container mx-auto px-6" >
<h1 class="text-center text-3xl md:text-4xl pt-28 text-color-1">Marketing Solutions</h1>
<h2 class="text-center text-2xl pt-8 text-color-2">Preschool Marketing Solutions</h2>
<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 class="container mx-auto px-4 xl:px-24" >
<h1 class="text-center h1-text pt-28 text-color-1 font-semibold">Preschool Marketing Solutions</h1>
<p class="text-justify font-20px pt-2 text-color-2 pt-6">Want to increase your enrollments and profit? Why don’t you try the most efficacious and lucrative methods that have been tested and tried by us and our partners? We are here with our professionals to serve you the best experience and tell you the techniques that actually help in boosting admissions! Our preschool marketing solutions have been made specifically for your preschool’s growth. </p>
</section>
<section>
<div class="container mx-auto">
<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-rows-3 md:text-left px-8">
<div class="container mx-auto xl:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 font-20px pt-10">
<div class="grid px-8">
<h1 class="p-2">Social Media Advertisement </h1>
<h1 class="p-2">FAQ Webinars</h1>
<h1 class="p-2">Video Marketing </h1>
</div>
<div class="grid grid-rows-2 md:text-center px-8">
<div class="grid px-8">
<h1 class="p-2">Virtual Tour</h1>
<h1 class="p-2">Instant Message Marketing</h1>
</div>
<div class="grid grid-rows-3 md:text-right px-8">
<h1 class="p-2">SEO (Search Engine Optimization)</h1>
<div class="grid px-8">
<h1 class="p-2 pr-4">SEO (Search Engine Optimization)</h1>
<h1 class="p-2">E-mail Marketing</h1>
<h1 class="p-2">Audio Marketing</h1>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Check Out Our Marketing Blog</div>
<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>
<section class="container mx-auto px-2 xl:px-24">
<h1 class=" text-color-1 h1-text text-center pt-10 px-4 font-semibold">Check Out Our Marketing Blog</h1>
<p class="text-justify text-xl lg:text-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 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="" >
<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>
<h2 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ marketing.title}}</h2>
<div class="text-lg text-justify line-clamp-3 font-light text-color-2" v-html="marketing.preview_text"></div>
<a :href="'/blog/' + marketing.slug" class="text-blue-600 ">Read More >> </a>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-10 px-4">{{ marketing.title}}</h2>
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4" v-html="marketing.meta_description"></div>
<router-link :to="'/blog/' + marketing.slug" class="text-blue-600 font-20px px-4">Read More >> </router-link>
</div>
</div>
<a href="/blog">
<router-link to="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
<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>
</router-link>
</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 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="text-blue-700 text-2xl lg:text-5xl pt-16">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>
<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="font-20px py-4 text-color-2 px-4">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3>
<form class="" v-if="MarketingSolutionsQry">
<div class="flex flex-wrap mb-6 md:mb-0">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
@ -75,79 +90,110 @@
<div v-else>
Thank you, we will get back to you soon!
</div>
<div class="flex justify-center md:justify-end mt-3 px-4"><button class="bg-blue-700 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>
<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.
</section>
<section class="container mx-auto px-4 xl:px-24">
<h1 class="text-color-1 h1-text font-semibold text-center">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
<p class="text-justify font-20px pt-2 text-color-2 text-center">Smoothen your daily preschool management process with the administration preschool solutions provided by us. Minimize the troubles and save your efforts, time and ideas for the most essential tasks, while we guide and support in fulfillment of your administrative tasks.
With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
<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>
<div class="container mx-auto">
<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-rows-3 md:text-left px-8">
<h1 class="p-2">Digital Books</h1>
<h1 class="p-2">Blockchain Technology</h1>
<h1 class="p-2">Artificial Inteligence</h1>
</div>
<div class="grid grid-rows-2 md:text-center px-8">
<h1 class="p-2">Multi Sensory Classrooms</h1>
<h1 class="p-2">VR and AR</h1>
<h1 class="p-2">Attendance & Progress Tracking</h1>
</div>
<div class="grid grid-rows-3 md:text-right px-8">
<h1 class="p-2">Remote Learning</h1>
<h1 class="p-2">Intractive Gamification</h1>
<h1 class="p-2">Staff Management</h1>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 place-items-center" >
<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-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Check Out Our Adminstration Blog</div>
<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>
<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 class="grid grid-rows-2 md:text-center gap-10">
<h1 class="">Multi Sensory Classrooms</h1>
<h1 class="">VR and AR</h1>
<h1 class="">Attendance & Progress Tracking</h1>
</div>
<div class="grid grid-rows-3 md:text-right gap-10">
<h1 class="">Remote Learning</h1>
<h1 class="">Intractive Gamification</h1>
<h1 class="">Staff Management</h1>
</div>
</div>
</section>
<section class="container mx-auto px-2 xl:px-24">
<div class="flex text-color-1 h1-text justify-center font-semibold">Check Out Our Adminstration Blog</div>
<p class="text-xl lg:text-3xl pt-2 text-color-2">Read the most suitable administration preschool solutions and be familiar with all necessary information for your management decisions. </p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
<div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration">
<img class="w-full rounded-tl-3xl rounded-br-3xl" 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>
<h1 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ 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>
<a :href="'/blog/' + adminstration.slug" class="text-blue-600 "> Read More >> </a>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
<h1 class="text-color-1 text-3xl pt-10 px-4">{{ adminstration.title}}</h1>
<div class="font-20px text-justify text-color-2 px-4" v-html="adminstration.preview_text"></div>
<router-link :to="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </router-link>
</div>
</div>
<a href="/blog">
<router-link to="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div></a>
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div></router-link>
</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"></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>
<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>
<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=" 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">
<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>
</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 justify-start text-2xl lg:text-4xl text-color-1 px-6">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>
<div class="grid justify-start h1-text text-color-1">Latest Trends In Preschool Education
<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 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>
</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 place-items-center">
<div class="text-color-1 text-2xl lg:text-4xl 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>
<div class="grid place-items-center px-4">
<div class="text-color-1 hero-text pt-6">Reach Out to Us</div>
<h3 class="text-justify font-20px text-color-2 my-4 px-4">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3>
<form class="grid place-items-center" v-if="rOutQry">
<div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
@ -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">
</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>
<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>
</section>
<section class="container mx-auto">
<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">Trending Themes for Preschools in 2022
<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>
<section class="container mx-auto px-4 xl:px-24">
<div class="grid md:grid-cols-2 place-items-between ">
<div class="grid justify-start h1-text text-color-1 ">Trending Themes for Preschools in 2023
<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 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>
<!-- <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>
<div class="container mx-auto">
<div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 mt-32 mb-16">
<div class="container mx-auto xl:px-24">
<div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16">
<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">
<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="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">
@ -198,7 +267,7 @@
</div>
</div>
<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 v-else>
Thank you!
@ -212,15 +281,35 @@
</div>
<div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div>
</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>
</template>
<script>
export default {
setup(){
// const route = useRoute();
},
data() {
return {
isLoading: true,
faqAdministrators: null,
name:null,
phone:null,
msg:null,
@ -358,6 +447,13 @@ export default {
this.adminstration=data.data
// console.log(this.marketing)
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=administrators')
.then(resp => resp.json())
.then(data => {
this.faqAdministrators=data.data
// console.log(this.faqAdministrators)
})
},
@ -366,8 +462,52 @@ export default {
}
</script>
<style>
.text-color-1 {
color: #7C4C23;
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
.font-20px {
font-size: 20px;
}
@media screen and (min-width: 1500px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 1499px) {
.hero-text {
font-size: 40px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 30px;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 25px;
}
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
</style>

41
src/components/Educators.vue
View File

@ -3,10 +3,11 @@
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-6 w-full justify-center">
<h1 class="text-color-1 hero-text font-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>
<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 class="flex w-fit justify-center place-items-center">
@ -34,25 +35,25 @@
<section class="container mx-auto xl:px-24">
<h1 class="text-center text-color-1 hero-text font-semibold pt-24 ">Lesson Plans Curated for You</h1>
<p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4" >
<div class="grid background rounded-xl shadow-xl ">
<div class="bottombar cursor-pointer">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">"The Scholarly Plan" </h1>
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Scholarly Plan </h1>
<p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
</div>
</div>
<div class="grid background rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<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>
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl " src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Engaging Plan </h1>
<p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
</div>
</div>
<div class="grid background rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">"The Effective Plan" </h1>
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Effective Plan </h1>
<p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
</div>
</div>
@ -168,8 +169,8 @@
<div class="grid w-fit" v-for="(item, index) in tbBlog">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<h1 class="text-color-1 text-2xl font-semibold pt-10 px-4">{{ item.title}}</h1>
<div class="text-lg text-justify font-light w-96 text-color-2 px-4" v-html="item.preview_text"></div>
<h1 class="text-color-1 text-2xl font-semibold pt-10 px-4">{{ item.meta}}</h1>
<div class="text-lg text-justify font-light w-96 text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
<!-- <a class=" text-blue-800" href="">Read More>></a> -->
<router-link :to="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </router-link>
</div>
@ -189,7 +190,8 @@
<router-link to="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
</div></router-link>
</div>
</router-link>
</section>
<section class="container mx-auto mt-16 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 ">
@ -246,7 +248,7 @@
<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">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 class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
@ -264,6 +266,10 @@
</div>
</template>
<style scoped>
.h2 {
font-size: 40px;
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
.h1-text {
@ -288,6 +294,7 @@
white-space: normal;
width: auto;
height: auto;
padding: 16px;
background-color: #f9b8ce;
border-radius: 16px;
}

325
src/components/Homepage.vue
View File

@ -1,104 +1,121 @@
<template>
<div class="">
<div>
<section class="container-fluid ">
<div class="flex load-wraper">
<img class="relative md:opacity-100 opacity-70 h-max " src="/img/home-page-1.png" alt=""/>
<div class="absolute p-2 pl-4 md:pt-24 lg:pt-40 xl:pl-28 ">
<h1 class="text-color-1 text-xl lg:text-4xl font-semibold">This Event is Round The Corner</h1>
<h1 class="font-semibold text-sm lg:text-2xl text-color-2 py-2">Strat Planning Your Classroom Curriculum now</h1>
<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"><button>Speak with Us</button></div>
<!-- This Event is Round The Corner -->
<section class="bg3 shadow-2xl container-fluid h-fit">
<div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
<div class="flex flex-col justify-center">
<h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-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="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>
</section>
<section class="container mx-auto">
<div class="md:text-xl text-justify pt-14 px-4">
<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>
</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">
<div class="flex md:justify-center justify-center font-bold text-3xl mt-8 text-color-1 py-14">Discover our solutions</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">
<img draggable="false" src="/img/plan.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">Creat Personalised Plan</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>
<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="/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 class="grid place-items-center pb-8 px-6">
<img draggable="false" src="/img/report.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">Report Card Format</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>
<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> -->
<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 class="grid place-items-center pb-8 px-6">
<img draggable="false" src="/img/classroom.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">All Classroom Resources</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>
<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="/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 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="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Popular Curriculum</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>
<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> -->
<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 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="">
<h1 class="text-2xl 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">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>
<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="/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>
</section>
<section class="container mx-auto">
<div class="mt-16 px-4">
<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-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>
<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-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>
<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">
<div class="flex flex-rows-2 justify-center font-semibold text-2xl mt-8 text-color-1 py-20">Resources To Choose From</div>
<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"><a href=""><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Worksheet.png" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Videos.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"><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"><a href=""><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" 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"><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 ">
<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="md:text-3xl text-2xl text-color-1 font-semibold py-3">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>
<div class="text-lg bg-blue-700 p-2 text-white rounded-tl-xl rounded-br-xl w-fit">Check Out Now</div>
<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
<vueper-slides
class="no-shadow w-96 px-14 md:px-0" arrows-outside
:visible-slides="1"
:bullets="false"
@ -108,16 +125,16 @@
:touchable="true"
:dragging-distance="200"
: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-slides> -->
<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">
<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-16">
<p class="text-color-1 md:text-4xl text-xl font-semibold mt-20">Discover Our Preschool <br>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>
<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>
@ -141,14 +158,14 @@
</div>
</div>
</section> -->
<section class="container mx-auto pt-16">
<h1 class="text-color-1 text-3xl font-bold text-center">EYFS Curriculum & Its Impact</h1>
<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 ">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>
<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 ">
@ -156,62 +173,99 @@
<div class="flex relative justify-center text-xs ">
<RoundChart/>
</div>
<h1 class="text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</h1>
<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>
<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">
<div class="grid text-color-1 text-3xl font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your School
<p class="text-xl text-center font-light text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div>
<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"><a href="/educators"><img src="/img/left-slid.png" alt=""></a></div>
<div class="grid"><a href="/administrators"><img src="/img/right-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"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
</div>
</section>
<section class="container mx-auto cursor-pointer">
<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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start ">
<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">
<div class="bottombar cursor-pointer">
<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>
<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>
<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">
<div class="bottombar cursor-pointer">
<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>
<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>
<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">
<div class="bottombar cursor-pointer">
<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>
<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>
<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">
<div class="bottombar cursor-pointer">
<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>
<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>
<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>
<faqSection/>
<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>
</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{
position: relative;
height: 100%;
@ -394,7 +448,6 @@ details summary::-webkit-details-marker { display: none; }
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
}
.bottombar:hover{
@ -405,20 +458,64 @@ details summary::-webkit-details-marker { display: none; }
}
.text-color-1 {
color: #7C4C23;
font-family: 'Quicksand';
}
.text-color-2 {
color: #333333;
font-family: 'Quicksand';
}
.font-20px {
font-size: 18px;
}
.h1-text {
font-size: 30px;
}
/* @media screen and (min-width: 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>
<!-- <script>
<script>
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'
export default {
setup(){
const route = useRoute();
// const route = useRoute();
useHead({
title: 'Teenybeans Preschool Curriculum',
meta: [
@ -438,8 +535,9 @@ components: { VueperSlides, VueperSlide },
data() {
return {
page: null,
faqHome: null,
themes:null,
allworksheet:null,
lessonplan:null,
stories: null,
ideas: null,
worksheets: null,
@ -451,15 +549,22 @@ components: { VueperSlides, VueperSlide },
}
},
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(data => {
this.allworksheet = data.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> -->
</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 w-full justify-center">
<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 text-justify font-20px text-color-2 pt-4">{{page[0].occassion_details }}</div>
</div>
@ -37,8 +37,8 @@
</section> -->
<!-- celebration ideas -->
<section class="container mx-auto px-3 xl:px-24">
<div class="h1-text text-color-1 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>
<div class="h1-text text-blue-700 font-semibold pt-10">Celebretion Ideas </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-for="ida in ideas.slice(0, 3)" :key="ideas.id" class=" bg-grey-400">
<div class=" relative">
@ -54,7 +54,7 @@
</div>
</div>
</div>
<a href="/plan">
<router-link to="/plan">
<div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class=" ">
<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" />
@ -64,13 +64,13 @@
</div>
</div>
</div>
</a>
</router-link>
</div>
</section>
<!-- Worksheets -->
<section class="container mx-auto xl:px-24 p-4 py-14">
<div class="h1-text text-color-1 ">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>
<div class="h1-text text-blue-700 font-semibold">Worksheets</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-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4 ">
<div class="flex relative">
@ -82,7 +82,7 @@
</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 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" />
@ -92,13 +92,13 @@
</div>
</div>
</div>
</a>
</router-link>
</div>
</section>
<!-- Videos -->
<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="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>
<div class="h1-text text-blue-700 font-semibold py-4">Videos</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-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)">
@ -128,7 +128,7 @@
</label>
</label> -->
</div>
<a href="/plan">
<router-link to="/plan">
<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 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 class="mt-6 text-center text-lg ">...</div>
</div></a>
</div></router-link>
</div>
</section>
<!-- Audio Books -->
<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="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>
<div class="h1-text text-blue-700 font-semibold py-4">Audio Books</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 v-for="aud in audio" :key="audio.id" class="p-2">
<label :for="aud.file" >
@ -162,19 +162,19 @@
</label>
</label>
</div>
<a href="/plan">
<router-link to="/plan">
<div>
<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>
</a>
</router-link>
</div>
</section>
<!-- Celebration Stories -->
<section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-color-1">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="h1-text text-blue-700 font-semibold">Celebretion stories</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 v-for="slide in stories" :key="stories.id" class="p-4 pt-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="" /> -->
<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>
<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>
@ -192,9 +192,8 @@
<SubmitCelebration />
<!-- Youtube Videos -->
<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="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>
<div class="h1-text text-blue-700 font-semibold pt-16">YouTube Videos for your reference </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 v-for="yt in youtube" :key="youtube.id" class="p-2">
<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>
<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">
<a :href="'/occassion/'+occassion.occassion_slug">
<router-link :to="'/occassion/'+occassion.occassion_slug">
<div>
<img class="rounded-lg shadow-2xl" v-if="occassion.occassion_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + occassion.occassion_icon" alt=""/>
</div>
</a>
</router-link>
</div>
</div> -->
@ -233,7 +232,7 @@
<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">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 class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
@ -262,6 +261,7 @@
</div>
</template>
<script is:inline>
export default {
setup(){
// const route = useRoute();
@ -307,7 +307,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + occassionID)
.then(resp => resp.json())
.then(stories => {
this.stories=stories.data
this.stories=stories.data.reverse().slice(0, 4)
// console.log(this.stories)
})
// console.log(occassionID)
@ -317,7 +317,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/Occassion_celebration_ideas?filter[Occassion_key][_in]=' + occassionID)
.then(resp => resp.json())
.then(ideas => {
this.ideas=ideas.data
this.ideas=ideas.data.reverse().slice(0, 4)
// console.log(this.ideas)
})
return occassionID
@ -326,7 +326,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_worksheets?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(worksheets => {
this.worksheets=worksheets.data
this.worksheets=worksheets.data.reverse().slice(0, 4)
// console.log(this.worksheets)
})
return occassionID
@ -335,7 +335,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(videos => {
this.videos=videos.data
this.videos=videos.data.reverse().slice(0, 4)
// console.log(this.videos)
})
return occassionID
@ -344,7 +344,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_youtube_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(youtube => {
this.youtube=youtube.data
this.youtube=youtube.data.reverse().slice(0, 3)
// console.log(youtube)
})
return occassionID
@ -353,7 +353,7 @@ methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_audio_book?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(audio => {
this.audio=audio.data
this.audio=audio.data.reverse().slice(0, 3)
// console.log(this.audio)
})
})
@ -371,7 +371,7 @@ methods: {
.then(resp => resp.json())
.then(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 class="grid">
<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.">
Literacy</abbr>
</p>
@ -29,6 +29,10 @@
</div>
</template>
<style>
.literacy {
top: 110px;
transform: rotate(25deg);
}
.comunication {
transform: rotate(80deg);
/* left: 360px; */

80
src/components/Themes.vue
View File

@ -40,13 +40,13 @@
</section> -->
<!-- section Celebretion Ideas -->
<section class="container mx-auto xl:px-24 py-16 px-4">
<div class="h1-text text-color-1">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="h1-text text-blue-700 font-semibold">Celebration Ideas </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-for="ida in ideas.slice(0, 3)" :key="ideas.id" class="">
<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" />
<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 class="absolute top-16 py-3 left-8 text-xl text-color-2">{{ida.celebration_ideas_body_text}}
</div>
@ -58,7 +58,7 @@
</div>
<!-- <div class=" text-center text-lg ">{{ida.title}}</div> -->
</div>
<a href="/plan">
<router-link to="/plan">
<div v-for="ida in ideas.slice(3, 4)" :key="ideas.id" class="">
<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" />
@ -69,13 +69,13 @@
</div>
<!-- <div class=" text-center text-lg ">...</div> -->
</div>
</a>
</router-link>
</div>
</section>
<!-- section Worksheets -->
<section class="container mx-auto xl:px-24 py-10 px-4">
<div class="h1-text text-color-1">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="h1-text text-blue-700 font-semibold">Worksheets</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-for="wkst in worksheets.slice(0, 3)" :key="worksheets.id" class="p-4">
<div class="flex relative">
@ -88,7 +88,7 @@
</div>
<!-- <div class=" text-center text-lg ">{{wkst.title}}</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 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" />
@ -99,13 +99,13 @@
</div>
<!-- <div class=" text-center text-lg ">...</div> -->
</div>
</a>
</router-link>
</div>
</section>
<!-- section videos -->
<section class="container mx-auto xl:px-24 py-16 px-4">
<div class="h1-text text-color-1">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="h1-text text-blue-700 font-semibold">Videos </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-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)">
@ -135,7 +135,7 @@
</label>
</label> -->
</div>
<a href="/plan">
<router-link to="/plan">
<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 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 class="mt-6 text-center text-lg ">...</div>
</div></a>
</div></router-link>
</div>
</section>
<!-- section audio book -->
<section class="container mx-auto xl:px-24 px-4" >
<div class="h1-text text-color-1 ">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="h1-text text-blue-700 font-semibold ">Audio Books</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 v-for="aud in audio" :key="audio.id" class="p-2">
<label :for="aud.file" >
@ -170,18 +170,18 @@
</label>
</label>
</div>
<a href="/plan">
<router-link to="/plan">
<div>
<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>
</a>
</router-link>
</div>
</section>
<!-- Celebration Stories -->
<section class="container mx-auto xl:px-24 pt-16 px-4">
<h1 class="h1-text text-color-1 ">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>
<h1 class="h1-text text-blue-700 font-semibold">Celebration stories</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 v-for="slide in stories" :key="stories.id" class="p-4 ">
<div class="flex bg-gray-200 rotate-6 gap-8">
@ -189,7 +189,7 @@
<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>
<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>
@ -200,7 +200,7 @@
<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>
<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> -->
@ -210,9 +210,8 @@
<SubmitCelebration />
<!-- section youtube -->
<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="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="h1-text text-blue-700 font-semibold">YouTube Videos for your reference </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 v-for="yt in youtube" :key="youtube.id" class="p-2">
<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>
<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">
<a :href="'/themes/'+ themes.theme_slug">
<router-link :to="'/themes/'+ themes.theme_slug">
<div>
<img class="rounded-lg shadow-2xl" v-if="themes.theme_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/' + themes.theme_icon" alt=""/>
</div>
</a>
</router-link>
</div>
</div>
@ -250,7 +249,7 @@
<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">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 class="grid h-fit text-color-2">
<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>
</section>
<!-- Youtube Modal -->
<div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
<div class="modal-content">
@ -291,11 +288,6 @@ export default {
setup(){
// const route = useRoute();
},
methods: {
// onReady() {
// this.$refs.youtube.playVideo()
// },
},
data() {
return {
@ -333,8 +325,7 @@ methods: {
this.isLoading = false
// console.log(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)
.then(resp => resp.json())
.then(stories => {
@ -344,13 +335,12 @@ methods: {
// console.log(themeID)
return themeID
})
.then((themeID) => {
}).then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_ideas?filter[theme_key][_in]=' + themeID)
.then(resp => resp.json())
.then(ideas => {
this.ideas=ideas.data
// console.log(themeID)
// console.log(ideas)
})
return themeID
})
@ -389,13 +379,13 @@ methods: {
// 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(data => {
this.allThemes = data.data
// this.isLoading = false
// // console.log(this.page[0].id)
console.log(this.allThemes)
// return this.page[0].id
})
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;
width: 80%;
} */
</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 Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import Administrators from "../components/Administrators.vue";
import Footer from "../components/Footer.vue";
---
<Layout>
<Header/>
<Administrators/>
<Footer/>
<Layout title="">
<!-- <Header/> -->
<Menu/>
<Administrators client:visible/>
<Footer client:visible/>
</Layout>

2
src/pages/educators.astro
View File

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

747
src/pages/homepage.astro
View File

@ -3,239 +3,562 @@ import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import Roundchart from "../components/Roundchart.vue";
---
<Layout title="Welcome to Teenybeans">
<Menu/>
<main>
<section class="container-fluid hero-bg">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col justify-center w-full">
<h1 class="hero-text font-semibold text-color-1 w-full">This Event is Round The Corner</h1>
<p class="h2-text font-semibold py-8">Start Planning Your Classroom Curriculum now</p>
<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 gap-16 place-items-center px-4 pt-6">
<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>
<p class="text-xl font-semibold">OR</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>
<main>
<div class="">
<div>
<!-- This Event is Round The Corner -->
<section class="bg3 shadow-2xl container-fluid h-fit">
<div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
<div class="flex flex-col justify-center">
<h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-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="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>
</div>
<div class="flex justify-center">
<img class="w-fit h-fit" src="/img/homepage1b.png" alt="">
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<h1 class="text-color-1 h1-text font-semibold text-center">Discover our solutions</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 px-4 h-fit">
<div class="grid place-items-center">
<img src="/img/plan.png" alt="">
<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>
<!-- <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 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>
</div>
</section>
</main>
</main>
<Footer/>
</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>
.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;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
height: auto;
}
details[open] > *:not(summary) { color: inherit; }
/* # Style 2 # */
details.style2 summary::before {
content: "×";
font-size: 2rem;
line-height: 1rem;
transform: rotate(-45deg);
top: 1.2rem;
left: 0.5rem;
}
details[open].style2 > summary:before {
transform: rotate(90deg);
color: rgb(0, 0, 0) !important;
transition: color ease 2s, transform ease 1s;
}
/* # Style 3 # */
details .moon-new { display: inline; }
details .moon-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }
/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { margin: 0; padding-bottom: 10px; }
p:last-child { padding: 0; }
details {
max-width: 800px;
box-sizing: border-box;
margin-top: 5px;
background: rgb(255, 255, 255);
}
summary {
border: 4px solid transparent;
outline: none;
padding: 8px;
display: block;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details[open] summary,
summary:hover {
color: #1e293b;
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
color: #1e293b;
}
.content {
padding: 10px;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
}
.line-clamp-3:hover {
overflow: visible;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: none;
}
.hero-bg {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
}
.text-color-1 {
color: #7C4C23;
font-family: 'Quicksand';
}
.h1-text {
font-size: 50px;
.text-color-2 {
color: #333333;
font-family: 'Quicksand';
}
@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;
}
}
.font-18px {
.font-20px {
font-size: 18px;
}
.hover-expand {
overflow: hidden;
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;
.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: 37px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 30px;
}
}
</style>
.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>

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>