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

modal not working

master
Suvodip Ghosh 2023-02-15 21:02:18 +05:30
parent f016cc33c6
commit 54f6d6fdcd
20 changed files with 245 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -18,5 +18,8 @@
"swiper": "^9.0.3", "swiper": "^9.0.3",
"tailwindcss": "^3.2.4", "tailwindcss": "^3.2.4",
"vue": "^3.2.45" "vue": "^3.2.45"
},
"devDependencies": {
"sass": "^1.58.1"
} }
} }

BIN
public/img/Daily.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/Monthly.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
public/img/Weekly.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 607 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/img/skill-up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 545 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

79
src/components/Administrators.vue
View File

@ -5,7 +5,7 @@
<div class="flex flex-col px-4 w-fit justify-center"> <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> <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> <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 class="pt-8"><button class="shadow-2xl text-lg px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
</div> </div>
<!-- <button>Discover Now</button> --> <!-- <button>Discover Now</button> -->
<div class="flex w-fit justify-center place-items-center"> <div class="flex w-fit justify-center place-items-center">
@ -52,7 +52,7 @@
</section> </section>
<section class="container mx-auto px-2 xl:px-24"> <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> <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> <p class="text-justify text-xl lg:text-2xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
<div class="grid w-fit" v-for="marketing in marketing" :key="marketing"> <div class="grid w-fit" v-for="marketing in marketing" :key="marketing">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" > <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" >
@ -64,15 +64,15 @@
</div> </div>
<a href="/blog"> <a href="/blog">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button> <button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div> </div>
</a> </a>
</section> </section>
<section class="container mx-auto px-4 my-16 xl:px-24"> <section class="container mx-auto px-4 my-16 xl:px-24">
<div class="grid bg-amber-100 grid-cols-1 lg:grid-cols-2"> <div class="grid bg-amber-100 grid-cols-1 lg:grid-cols-2">
<div class="grid place-items-center "><img class="w-96 h-88 rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/person4.png" alt=""/></div> <div class="grid place-items-center "><img class=" rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/marketing.png" alt=""/></div>
<div class="grid px-4 w-fit"> <div class="grid px-4 w-fit">
<div class="text-blue-700 hero-text pt-16 px-4">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div> <div class="text-blue-700 hero-text pt-16 px-4 font-semibold">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
<h3 class="font-20px py-4 text-color-2 px-4">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3> <h3 class="font-20px py-4 text-color-2 px-4">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3>
<form class="" v-if="MarketingSolutionsQry"> <form class="" v-if="MarketingSolutionsQry">
<div class="flex flex-wrap mb-6 md:mb-0"> <div class="flex flex-wrap mb-6 md:mb-0">
@ -84,7 +84,7 @@
</div> </div>
</div> </div>
<div class="form-control px-3"> <div class="form-control px-3">
<textarea class="w-full textarea textarea-bordered border box text-lg h-40 focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea> <textarea class="p-4 w-full textarea textarea-bordered border box text-lg h-40 focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea>
</div> </div>
</form> </form>
<div v-else> <div v-else>
@ -99,7 +99,7 @@
<h1 class="text-color-1 h1-text font-semibold text-center">Admininstration Solutions For Preschool Owners and Adminstrators</h1> <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. <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> With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
<div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 place-items-center" > <div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 pl-10" >
<p class="text-left">Adminstration Technology</p> <p class="text-left">Adminstration Technology</p>
<p class="text-left">Curriculum Implementation</p> <p class="text-left">Curriculum Implementation</p>
<p class="text-left">Employee Training</p> <p class="text-left">Employee Training</p>
@ -113,18 +113,18 @@
<section class="container mx-auto my-16 px-4 xl:px-24"> <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> <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> <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-cols-1 lg:grid-cols-3 text-blue-700 pt-10 font-20px justify-center">
<div class="grid grid-rows-3 md:text-left gap-10"> <div class="grid grid-rows-3 text-start md:text-left gap-10">
<h1 class="">Digital Books</h1> <h1 class="">Digital Books</h1>
<h1 class="">Blockchain Technology</h1> <h1 class="">Blockchain Technology</h1>
<h1 class="">Artificial Inteligence</h1> <h1 class="">Artificial Inteligence</h1>
</div> </div>
<div class="grid grid-rows-2 md:text-center gap-10"> <div class="grid grid-rows-3 text-start md:text-center gap-10">
<h1 class="">Multi Sensory Classrooms</h1> <h1 class="">Multi Sensory Classrooms</h1>
<h1 class="">VR and AR</h1> <h1 class="">VR and AR</h1>
<h1 class="">Attendance & Progress Tracking</h1> <h1 class="">Attendance & Progress Tracking</h1>
</div> </div>
<div class="grid grid-rows-3 md:text-right gap-10"> <div class="grid grid-rows-3 text-start md:text-right gap-10">
<h1 class="">Remote Learning</h1> <h1 class="">Remote Learning</h1>
<h1 class="">Intractive Gamification</h1> <h1 class="">Intractive Gamification</h1>
<h1 class="">Staff Management</h1> <h1 class="">Staff Management</h1>
@ -138,33 +138,35 @@
<div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration"> <div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" > <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-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> <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> <h1 class="text-color-1 text-2xl pt-4 px-4 line-clamp-2 font-semibold">{{ adminstration.meta}}</h1>
<div class="font-20px text-justify text-color-2 px-4" v-html="adminstration.preview_text"></div> <div class="font-20px text-justify text-color-2 px-4 line-clamp-4" v-html="adminstration.meta_description"></div>
<a href="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </a> <a href="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </a>
</div> </div>
</div> </div>
<a href="/blog"> <a href="/blog">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button> <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> </div></a>
</section> </section>
<section class="container mx-auto xl:px-24"> <section class="container mx-auto xl:px-24 px-4">
<div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6"> <div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6 gap-x-16">
<div class="grid"></div> <div class="grid">
<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> <img class="md:p-14" src="/img/skill-up.png" alt="">
<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>
<div class="grid hero-text text-blue-700 pt-16 leading-tight font-semibold">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
<p class=" font-20px py-2 text-color-2 pr-6 font-normal">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p>
<div class="flex justify-start mt-2 pb-20"> <div class="flex justify-start mt-2 pb-20">
<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> <button class="bg-blue-700 p-1 text-lg font-normal text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 ">Know More</button>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto px-4 xl:px-24"> <section class="container mx-auto px-4 xl:px-24">
<div class="grid md:grid-cols-2 place-items-between pt-20"> <div class="grid md:grid-cols-2 place-items-between pt-20">
<div class="grid justify-start h1-text text-color-1">Latest Trends In Preschool Education <div class="grid justify-start h1-text text-color-1 font-semibold">Latest Trends In Preschool Education
<p class="text-justify font-20px pt-2 text-color-2">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p> <p class="text-justify font-20px pt-2 text-color-2 font-normal">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p>
</div> </div>
<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 class="grid md:justify-evenly justify-start md:ml-72 px-6"><a href="/whatsnew" class="shadow-2xl text-lg bg-blue-700 p-1 text-white px-6 py-2 h-fit rounded-tl-lg rounded-br-lg mt-2">Read All </a></div>
</div> </div>
<div class="container mx-auto"> <div class="container mx-auto">
<!-- <carousel :items-to-show="2.5"> <!-- <carousel :items-to-show="2.5">
@ -192,7 +194,7 @@
<section class="container mx-auto xl:px-24"> <section class="container mx-auto xl:px-24">
<div class="grid md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16"> <div class="grid md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16">
<div class="grid place-items-center px-4"> <div class="grid place-items-center px-4">
<div class="text-color-1 hero-text pt-6">Reach Out to Us</div> <div class="text-color-1 hero-text pt-6 font-semibold">Reach Out to Us</div>
<h3 class="text-justify font-20px text-color-2 my-4 px-4">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3> <h3 class="text-justify font-20px text-color-2 my-4 px-4">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3>
<form class="grid place-items-center" v-if="rOutQry"> <form class="grid place-items-center" v-if="rOutQry">
<div class="flex flex-wrap mb-6 justify-center"> <div class="flex flex-wrap mb-6 justify-center">
@ -211,7 +213,7 @@
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutAddress" type="text" placeholder="Your Address"> <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutAddress" type="text" placeholder="Your Address">
</div> </div>
</div> </div>
<div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-2xl p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div> <div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-lg p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div>
</form> </form>
<div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div> <div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div>
</div> </div>
@ -221,10 +223,10 @@
</section> </section>
<section class="container mx-auto px-4 xl:px-24"> <section class="container mx-auto px-4 xl:px-24">
<div class="grid md:grid-cols-2 place-items-between "> <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 <div class="grid justify-start h1-text text-color-1 font-semibold">Trending Themes for Preschools in 2023
<p class="font-20px pt-2 text-color-2 text-justify">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p> <p class="font-20px pt-2 text-color-2 text-justify font-normal">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p>
</div> </div>
<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 class="grid md:justify-evenly justify-start md:ml-72"><a href="/themes" class="shadow-2xl bg-blue-700 p-1 text-lg text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 h-fit">Explore Themes</a></div>
</div> </div>
<!-- <carousel :items-to-show="2.5"> <!-- <carousel :items-to-show="2.5">
<slide v-for="slide in 10" :key="slide"> <slide v-for="slide in 10" :key="slide">
@ -253,7 +255,7 @@
<div class="container mx-auto xl:px-24"> <div class="container mx-auto xl:px-24">
<div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16 gap-y-8"> <div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16 gap-y-8">
<div class="grid place-items-center"> <div class="grid place-items-center">
<div class="grid text-color-1 h1-text pt-6">Case Study</div> <div class="grid text-color-1 h1-text pt-6 font-semibold">Case Study</div>
<div class="w-full max-w-lg" v-if="csQry"> <div class="w-full max-w-lg" v-if="csQry">
<h3 class="text-center text-xl lg:text-3xl p-4">You can download the case study here</h3> <h3 class="text-center text-xl lg:text-3xl p-4">You can download the case study here</h3>
<div class="flex flex-wrap mb-6"> <div class="flex flex-wrap mb-6">
@ -267,7 +269,7 @@
</div> </div>
</div> </div>
<div class="flex justify-center -mt-4"> <div class="flex justify-center -mt-4">
<button class="bg-blue-700 p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8 text-xl" @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-lg" @click="saveCsQry" >Download Now</button></div>
</div> </div>
<div v-else> <div v-else>
Thank you! Thank you!
@ -275,11 +277,12 @@
</div> </div>
<div class="grid place-items-center"> <div class="grid place-items-center">
<div class="grid bg-gray-300 ml-0 w-72 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl"></div> <div class="grid ml-0 w-72 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl">
<img src="/img/case_study.png" alt="">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div>
</section> </section>
<section class="container mx-auto py-20 px-4 xl:px-24"> <section class="container mx-auto py-20 px-4 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48"> <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
@ -462,6 +465,18 @@ export default {
</script> </script>
<style> <style>
.line-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
details { details {
font-weight: lighter; font-weight: lighter;
border-bottom: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;

61
src/components/Educators.vue
View File

@ -7,7 +7,7 @@
<span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span> <span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span>
<p class="font-20px text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p> <p class="font-20px text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p>
<div class="grid md:text-base place-items-center py-2 w-fit pt-8"> <div class="grid md:text-base place-items-center py-2 w-fit pt-8">
<div class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-2xl font-semibold pr-8 pl-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Reach Us</button></a></div> <div class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-base font-semibold px-6 py-2 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> </div>
</div> </div>
<div class="flex w-fit justify-center place-items-center"> <div class="flex w-fit justify-center place-items-center">
@ -45,18 +45,18 @@
<section class="container mx-auto px-4 xl:px-24"> <section class="container mx-auto px-4 xl:px-24">
<div class="flex justify-center hero-text text-color-1 font-semibold mt-20 py-4 text-center">Make your Ideal Lesson Plan</div> <div class="flex justify-center hero-text text-color-1 font-semibold mt-20 py-4 text-center">Make your Ideal Lesson Plan</div>
<p class="font-20px text-color-2 text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p> <p class="font-20px text-color-2 text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p>
<div class="grid grid-cols-1 md:grid-cols-3 place-items-center mt-16"> <div class="grid grid-cols-1 md:grid-cols-3 place-items-center">
<abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/dailyplan"><img src="/img/Daily.png" alt=""></a></abbr> <abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/lesson-plan/dailyplan"><img class="w-72 drop-shadow-xl" src="/img/daily.png" alt=""></a></abbr>
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/weeklyplan"><img src="/img/Weekly.png" alt=""></a></abbr> <abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/lesson-plan/weeklyplan"><img class="w-72 drop-shadow-xl" src="/img/weekly.png" alt=""></a></abbr>
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/monthlyplan"><img src="/img/Monthly.png" alt=""></a></abbr> <abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/lesson-plan/monthlyplan"><img class="w-72 drop-shadow-xl" src="/img/monthly.png" alt=""></a></abbr>
</div> </div>
</section> </section>
<section class="container mx-auto xl:px-24 mt-32"> <section class="container mx-auto xl:px-24 mt-32">
<div class="flex flex-col lg:flex-row place-items-center justify-center"> <div class="flex flex-col lg:flex-row place-items-center justify-center">
<div class="flex flex-col justify-center "> <div class="flex flex-col justify-center ">
<div class="bg-yellow-100 text-center border-radius px-16"> <div class="bg-yellow-100 text-center border-radius px-16">
<p class="hero-text text-center p-3 text-blue-700 pt-32" style="font-family:Quicksand">Get in Touch</p> <p class="hero-text text-center p-3 text-blue-700 pt-32 font-semibold" style="font-family:Quicksand">Get in Touch</p>
<p class="text-2xl md:text-3xl text-color-1 lg:text-justify">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p> <p class="text-2xl text-color-1 lg:text-justify font-semibold">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p>
</div> </div>
</div> </div>
<div class="flex flex-col" id="getintouch"> <div class="flex flex-col" id="getintouch">
@ -89,29 +89,28 @@
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto xl:px-24 px-4"> <section class="container mx-auto px-4 xl:px-24">
<div class="flex text-color-1 hero-text justify-center pt-8 p-4">Resources For Your Classroom</div> <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-16 text-color-1 py-4 px-4">Resources To Choose From</div>
<p class="text-xl lg:text-3xl text-justify ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept. </p> <h2 class="text-justify text-2xl ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
<div class="grid grid-cols-1 md:grid-cols-5 mt-16 gap-8 place-items-center"> <div class="grid place-items-center w-auto ">
<div class=""> <a href="/celebrationstories#submitCelebration"> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
<img draggable="false" src="/img/event-ideas1.png" alt=""> </a></div> <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class=""><a href="#"><img src="/img/games1.png" alt=""> </a></div> <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class=""><a href="/worksheets"><img src="/img/worksheets1.png" alt=""> </a></div> <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
<div class=""><a href="#"><img src="/img/activities1.png" alt=""> </a></div> <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class=""><a href="#"><img src="/img/more1.png" alt=""> </a></div> <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div> </div>
<div class="flex justify-center md:mt-20 mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
</div> </div>
<div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
</section> </section>
<section class="container mx-auto pt-20 xl:px-24"> <section class="container mx-auto pt-20 xl:px-24">
<div class="flex text-color-1 hero-text justify-center ">Curriculum Blogs</div> <div class="flex text-color-1 hero-text justify-center font-semibold">Curriculum Blogs</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 justify-center">
<div class="grid w-fit" v-for="(item, index) in tbBlog"> <div class="grid w-fit h-fit" v-for="(item, index) in tbBlog">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" > <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div> <div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<h1 class="text-color-1 text-2xl font-semibold pt-10 px-4">{{ item.meta}}</h1> <h1 class="text-color-1 text-2xl font-semibold pt-4 px-4 line-clamp-2 w-fit">{{ 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> <div class="text-lg text-justify font-light w-fit text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
<!-- <a class=" text-blue-800" href="">Read More>></a> --> <!-- <a class=" text-blue-800" href="">Read More>></a> -->
<a :href="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </a> <a :href="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </a>
</div> </div>
@ -130,7 +129,7 @@
</div> </div>
<a href="/blog"> <a href="/blog">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button> <button class="bg-blue-700 p-2 text-base text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
</div> </div>
</a> </a>
</section> </section>
@ -234,6 +233,18 @@
</div> </div>
</template> </template>
<style> <style>
.line-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
details { details {
font-weight: lighter; font-weight: lighter;
border-bottom: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;

28
src/components/Modal.astro Normal file
View File

@ -0,0 +1,28 @@
---
const {id, open} = Astro.props;
---
<style lang="scss">
dialog {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(255, 0, 0, 0.1);
}
}
</style>
<button onclick={`window.${id}.showModal()`}>{open}</button>
<dialog id='{id}'>
<slot name="main" />
<form method="dialog">
<slot name="close" />
</form>
</dialog>

127
src/components/Modal.vue
View File

@ -1,127 +0,0 @@
<template>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</template>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>

41
src/components/Worksheets-literacy.vue
View File

@ -5,13 +5,13 @@
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div> <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4"> <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex"> <div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1> <h1 class=" font-semibold py-4">Age:&nbsp;</h1>
<select class="select max-w-xs bg3"> <select class="select max-w-xs bg3" @change="switchSelect($event)">
<option>Select your Age</option> <option value="2">Select Age</option>
<option>2-3 Year</option> <option value="2">2-3 Year</option>
<option>3-4 Year</option> <option value="3">3-4 Year</option>
<option>4-5 Year</option> <option value="4">4-5 Year</option>
<option>5-6 Year</option> <option value="5">5-6 Year</option>
</select> </select>
</div> </div>
<!-- <div class="flex "> <!-- <div class="flex ">
@ -27,7 +27,7 @@
</div> </div>
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24"> <section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">All Worksheet</span> <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
<p class=" text-lg text-color-2 text-base md:text-2xl 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> <p class=" text-lg text-color-2 text-base md:text-2xl 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 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
<div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid"> <div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
@ -36,7 +36,7 @@
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/> <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> </div>
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1> <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 pr-1 inline" src="/img/download.png" alt="">Download</a> <!-- <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 pr-1 inline" src="/img/download.png" alt="">Download</a> -->
</div> </div>
</div> </div>
@ -44,11 +44,11 @@
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16"> <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
<a href="/premium"> <a href="/premium">
<div class="flex prime-bg p-10 relative"> <div class="flex prime-bg p-16 relative">
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1> <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
<div class="flex justify-center absolute inset-0 place-items-center"> <div class="flex justify-center absolute inset-0 place-items-center">
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div> <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20 w-full">
<div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.id" class="grid"> <div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.id" class="grid">
<div class="grid place-items-center"> <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"> <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
@ -124,19 +124,30 @@ export default {
} }
}, },
mounted: function () { methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy') 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+'&filter[Category][_eq]=literacy')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsLiteracy=worksheets.data.reverse().slice(0, 4) this.wsLiteracy=worksheets.data.reverse().slice(0, 4)
// console.log(this.wsLiteracy) // console.log(this.wsLiteracy)
}) })
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy') fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsfLiteracy=worksheets.data.reverse().slice(5, 12) this.wsfLiteracy=worksheets.data.reverse().slice(4, 16)
// console.log(this.wsfLiteracy) // console.log(this.wsfLiteracy)
}) })
}
},
mounted: function () {
this.getWorksheets()
} }
} }

41
src/components/Worksheets-mathematics.vue
View File

@ -5,13 +5,13 @@
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div> <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4"> <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex"> <div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1> <h1 class=" font-semibold py-4">Age:&nbsp;</h1>
<select class="select max-w-xs bg3"> <select class="select max-w-xs bg3" @change="switchSelect($event)">
<option>Select your Age</option> <option value="2">Select Age</option>
<option>2-3 Year</option> <option value="2">2-3 Year</option>
<option>3-4 Year</option> <option value="3">3-4 Year</option>
<option>4-5 Year</option> <option value="4">4-5 Year</option>
<option>5-6 Year</option> <option value="5">5-6 Year</option>
</select> </select>
</div> </div>
<!-- <div class="flex "> <!-- <div class="flex ">
@ -27,7 +27,7 @@
</div> </div>
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24"> <section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">All Worksheet</span> <span class="h1-text text-color-1 font-semibold">All Worksheet</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> <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 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
<div v-for="worksheet in wsmath" :key="wsmath.id" class="grid"> <div v-for="worksheet in wsmath" :key="wsmath.id" class="grid">
@ -44,7 +44,7 @@
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16"> <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
<a href="/premium"> <a href="/premium">
<div class="flex prime-bg p-10 relative"> <div class="flex prime-bg p-16 relative">
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1> <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
<div class="flex justify-center absolute inset-0 place-items-center"> <div class="flex justify-center absolute inset-0 place-items-center">
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div> <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
@ -128,19 +128,30 @@ export default {
} }
}, },
mounted: function () { methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics') 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+'&filter[Category][_eq]=mathematics')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsmath=worksheets.data.reverse().slice(0, 4) this.wsmath=worksheets.data.reverse().slice(0, 4)
// console.log(this.wsmath) // console.log(this.wsLiteracy)
}) })
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics') fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=mathematics')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsfmath=worksheets.data.reverse().slice(5, 12) this.wsfmath=worksheets.data.reverse().slice(4, 16)
// console.log(this.wsfmath) // console.log(this.wsfLiteracy)
}) })
}
},
mounted: function () {
this.getWorksheets()
} }
} }

41
src/components/Worksheets-world.vue
View File

@ -5,13 +5,13 @@
<div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div> <div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4"> <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex"> <div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1> <h1 class=" font-semibold py-4">Age:&nbsp;</h1>
<select class="select max-w-xs bg3"> <select class="select max-w-xs bg3" @change="switchSelect($event)">
<option>Select your Age</option> <option value="2">Select Age</option>
<option>2-3 Year</option> <option value="2">2-3 Year</option>
<option>3-4 Year</option> <option value="3">3-4 Year</option>
<option>4-5 Year</option> <option value="4">4-5 Year</option>
<option>5-6 Year</option> <option value="5">5-6 Year</option>
</select> </select>
</div> </div>
<!-- <div class="flex "> <!-- <div class="flex ">
@ -27,7 +27,7 @@
</div> </div>
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24"> <section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">All Worksheet</span> <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
<p class="font-20px text-color-2 pt-6 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> <p class="font-20px text-color-2 pt-6 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 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center my-10 pt-10"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center my-10 pt-10">
<div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid"> <div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
@ -44,7 +44,7 @@
</section> </section>
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16"> <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
<a href="/premium"> <a href="/premium">
<div class="flex prime-bg p-10 relative"> <div class="flex prime-bg p-16 relative">
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1> <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
<div class="flex justify-center absolute inset-0 place-items-center"> <div class="flex justify-center absolute inset-0 place-items-center">
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div> <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
@ -126,19 +126,30 @@ export default {
} }
}, },
mounted: function () { methods: {
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world') 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+'&filter[Category][_eq]=world')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsWorld=worksheets.data.reverse().slice(0, 4) this.wsWorld=worksheets.data.reverse().slice(0, 4)
// console.log(this.wsWorld) // console.log(this.wsLiteracy)
}) })
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world') fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
.then(resp => resp.json()) .then(resp => resp.json())
.then(worksheets => { .then(worksheets => {
this.wsfWorld=worksheets.data.reverse().slice(5, 12) this.wsfWorld=worksheets.data.reverse().slice(4, 16)
// console.log(this.wsfWorld) // console.log(this.wsfLiteracy)
}) })
}
},
mounted: function () {
this.getWorksheets()
} }
} }

2
src/pages/modal.astro
View File

@ -1,6 +1,6 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Modal from "../components/Modal.vue"; import Modal from "../components/Modal.astro";
--- ---
<Layout title=""> <Layout title="">
<Modal client:visible/> <Modal client:visible/>

12
src/pages/test-modal.astro Normal file
View File

@ -0,0 +1,12 @@
---
// Component Imports
import Modal from '../components/Modal.astro';
---
<Modal id="dialog" open="Open modal">
<main slot="main">
<p>Some extra content you would like here</p>
<hr />
</main>
<button slot="close">Close modal</button>
</Modal>

18
yarn.lock
View File

@ -1092,7 +1092,7 @@ character-reference-invalid@^2.0.0:
resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz" resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
chokidar@^3.5.3: "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
version "3.5.3" version "3.5.3"
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz" resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -1910,6 +1910,11 @@ ieee754@^1.2.1:
resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz" resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
immutable@^4.0.0:
version "4.2.4"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.4.tgz#83260d50889526b4b531a5e293709a77f7c55a2a"
integrity sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==
import-meta-resolve@^2.1.0: import-meta-resolve@^2.1.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.0.tgz" resolved "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.0.tgz"
@ -3243,6 +3248,15 @@ sass-formatter@^0.7.5:
dependencies: dependencies:
suf-log "^2.5.3" suf-log "^2.5.3"
sass@^1.58.1:
version "1.58.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.1.tgz#17ab0390076a50578ed0733f1cc45429e03405f6"
integrity sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
section-matter@^1.0.0: section-matter@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz" resolved "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz"
@ -3327,7 +3341,7 @@ slash@^4.0.0:
resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz" resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
source-map-js@^1.0.2: "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==