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

themes_occassion

Browse Source
This commit is contained in:
Suvodip Ghosh
2023-01-23 13:09:19 +05:30
parent 4032087bfb
commit b39b8d624b
119 changed files with 4850 additions and 2937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/Audio.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<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 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="aud in audio" :key="audio.id" class="p-2">
<div @click="showYtModal(aud.file)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer 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 shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</div>
</div>
</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="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 pt-6">
<div v-for="aud in audio" :key="audio.id" class="p-2">
<div @click="showYtModal(aud.file)"></div>
<label :for="aud.file" >
<img class="cursor-pointer rounded-tl-xl rounded-br-xl w-56" v-if="aud.audio_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.audio_icon" alt="">
<div class="cursor-pointer text-center text-xl text-color-2">{{aud.title}}</div>
</label>
<audio controls >
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.file" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<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>
</router-link>
</div>
<div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
<div class="modal-content">
<span @click="hideYtModal" class="close">&times;</span>
<div>
<iframe width="380" height="320"
:src="'https://www.youtube.com/embed/'+ytID">
</iframe>
</div>
</div>
</div>
</section>
</template>
<style>
.ytModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
</style>
<script>
export default {
setup(){
// const route = useRoute();
},
methods: {
showYtModal(ytID){
this.ytModal=true
this.ytID=ytID
},
hideYtModal(){
this.ytModal=false
// this.ytID=ytID
}
},
data() {
return {
page: null,
faqOccassion: null,
themes:null,
allOccassion:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
ytModal:false,
ytID:''
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?filter[status][_eq]=published')
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
// console.log(this.page[0].id)
return this.page[0].id
}).then((occassionID) => {
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
// console.log(this.stories)
})
// console.log(occassionID)
return occassionID
}).then((occassionID) => {
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
// console.log(this.ideas)
})
return occassionID
})
.then((occassionID) => {
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
// console.log(this.worksheets)
})
return occassionID
})
.then((occassionID) => {
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
// console.log(this.videos)
})
return occassionID
})
.then((occassionID) => {
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
// console.log(youtube)
})
return occassionID
})
.then((occassionID) => {
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
// console.log(this.audio)
})
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?limit=3')
.then(response => response.json())
.then(data => {
this.allOccassion = data.data
// this.isLoading = false
// console.log(this.allOccassion)
// return this.page[0].id
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=occassion')
.then(resp => resp.json())
.then(data => {
this.faqOccassion=data.data
console.log(this.faqOccassion)
})
}
}
</script>

6
src/components/Blog.vue
View File

@@ -75,7 +75,7 @@
</template>
<style>
.line-clamp-1 {
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@@ -102,7 +102,7 @@
}
</style>
<script>
<script is:inline>
export default {
// setup(){
// // const route = useRoute();
@@ -146,7 +146,7 @@
.then(response => response.json())
.then(data => {
this.tbBlog = data.data
console.log(data)
// console.log(data)
this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });

522
src/components/Educators.vue
View File

@@ -1,56 +1,119 @@
<template>
<div>
<section class="container-fluid">
<div class="bg-yellow-100 py-40 px-4">
<h1 class="text-blue-700 text-3xl lg:text-6xl p-4 font-semibold">Educate Conveniently by Acquiring <span class="text-color-1"> <br> Resources Smoothly!</span></h1>
<div class="p-4"><button class="bg-blue-700 text-xl text-white p-2 px-4 rounded-br-xl rounded-tl-xl">Know More</button></div>
<div class="z-10">
<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>
<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>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src="/img/educators1e.png" alt="">
</div>
</div>
</section>
<section class="conatiner-fluid shadow-xl">
<p class="container mx-auto px-6 text-xl p-4">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>
</section>
<section class="container mx-auto">
<h1 class="text-center text-color-1 text-2xl md:text-4xl font-semibold pt-24 ">Lesson Plans Curated for You</h1>
<p class="text-xl pb-16 pt-4 text-justify">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-6">
<!-- <section>
<div class="flex "><img class="w-screen" src="/img/header-educator.jpg" alt="">
<div class="absolute pl-4 lg:pl-40 pt-0 2xl:pt-28 ">
<h1 class="hero-text font-semibold text-color-1 lg:w-8/12">Educate Conveniently by Acquiring
<span class="text-blue-700">Resources Smoothly!</span></h1>
<div class="absolute">
<button class="bg-blue-700 pb-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg h-9 md:text-2xl" >Know More</button>
</div>
</div>
</div>
</section> -->
<!-- <div class="flex bg-yellow-100 md:h-96 h-72 px-4"></div> -->
<!-- <section class="p-6 container-fluid shadow-xl">
<div class="container mx-auto">
<p class="text-color-2 font-20px text-justify">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>
</section> -->
<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">
<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>
<p class="text-white text-xl text-justify mx-6 mb-4">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
<p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
</div>
</div>
<div 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>
<p class="text-white text-justify mx-6 mb-4 text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
<p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
</div>
</div>
<div 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 Effective Plan" </h1>
<p class="text-white text-xl text-justify mx-6 mb-4">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
<p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
</div>
</div>
</div>
<!-- <div class="z-10 grid grid cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16 place-items-center xl:px-24">
<div class="grid shadow-2xl">
<div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6 ">
<div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
<img class="rounded-lg" src="/img/plan.jpg" alt="">
<div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
<img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
</div>
</div>
</div>
<div class="grid shadow-2xl">
<div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6">
<div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
<img class="rounded-lg" src="/img/plan.jpg" alt="">
<div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
<img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
</div>
</div>
</div>
<div class="grid shadow-2xl">
<div class="flex flex-inline bg-slate-200 h-80 w-80 rounded-lg -rotate-6">
<div class="flex flex-inline h-80 w-80 rounded-lg rotate-6">
<img class="rounded-lg" src="/img/plan.jpg" alt="">
<div class="flex bg-white rounded-md h-9 w-32 justify-center absolute inset-y-64 mt-4 left-3">
<img src="/img/view.png" alt="" class="z-0 w-8 h-8"><button>View Plan</button></div>
</div>
</div>
</div>
</div> -->
</section>
<section class="container mx-auto px-4">
<div class="flex justify-center text-2xl md:text-4xl text-color-1 font-semibold mt-20 p-4">Make your Ideal Lesson Plan</div>
<p class="text-xl 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="flex flex-cols-3 justify-center font-bold text-lg py-16">
<button >
<div class="flex border-2 border-blue-700 rounded-l-md w-16 h-8 justify-center text-blue-700">&#60</div>
</button>
<div class="flex border-2 border-blue-700 w-16 h-8 justify-center text-blue-700">01 </div>
<button>
<div class="flex border-2 border-blue-700 rounded-r-md w-16 h-8 justify-center text-blue-700">&#62</div>
</button>
</div> -->
<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>
<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">
<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="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="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="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."><router-link to="/dailyplan"><img src="/img/Daily.png" alt=""></router-link></abbr>
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><router-link to="/weeklyplan"><img src="/img/Weekly.png" alt=""></router-link></abbr>
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><router-link to="/monthlyplan"><img src="/img/Monthly.png" alt=""></router-link></abbr>
</div>
</section>
<section class="container mx-auto my-32">
<!-- <div class="flex justify-center my-20">
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 mb-2 rounded-tl-lg rounded-br-lg text-lg ">Start Planning Now</button>
</div> -->
<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 justify-center ">
<div class="bg-yellow-100 text-center border-radius px-16">
<p class="text-3xl md:text-4xl text-center p-3 text-blue-700 pt-32">Get in Touch</p>
<p class="text-2xl md:text-3xl text-color-1">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="hero-text text-center p-3 text-blue-700 pt-32" 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>
</div>
<!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
</div>
@@ -75,7 +138,7 @@
<div class="form-group form-check mb-6"><input type="checkbox" value="whatsapp" class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
<label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
</div>
<button @click="saveGetinTouchQry" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact us</button>
<button @click="saveGetinTouchQry" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-2xl leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
</div>
<div v-else>
<h2 class="text-center py-40 text-4xl">Thank You!</h2>
@@ -84,134 +147,331 @@
</div>
</div>
</section>
<section class="container mx-auto">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-28 p-4">Resources For Your Classroom</div>
<p class="text-xl text-center">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept. </p>
<section class="container mx-auto xl:px-24 px-4">
<div class="flex text-color-1 hero-text justify-center pt-8 p-4">Resources For Your Classroom</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>
<div class="grid grid-cols-1 md:grid-cols-5 mt-16 gap-8 place-items-center">
<div class=""> <a href="/celebrationstories#submitCelebration"><img draggable="false" src="/img/event-ideas1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/games1.png" alt=""></a></div>
<div class=""><a href="/worksheets"><img src="/img/worksheets1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/activities1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/more1.png" alt=""></a></div>
<div class=""> <router-link to="/celebrationstories#submitCelebration">
<img draggable="false" src="/img/event-ideas1.png" alt=""> </router-link></div>
<div class=""><router-link to="#"><img src="/img/games1.png" alt=""> </router-link></div>
<div class=""><router-link to="/worksheets"><img src="/img/worksheets1.png" alt=""> </router-link></div>
<div class=""><router-link to="#"><img src="/img/activities1.png" alt=""> </router-link></div>
<div class=""><router-link to="#"><img src="/img/more1.png" alt=""> </router-link></div>
</div>
<div class="flex justify-center md:mt-20 mt-8">
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
</div>
</section>
<section class="container mx-auto px-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Curriculum Blogs</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
<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="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="(item, index) in tbBlog">
<img class="w-full rounded-tl-3xl rounded-br-3xl" 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>
<h1 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ item.title}}</h1>
<div class="text-lg text-justify line-clamp-3 font-light w-96 text-color-2" v-html="item.preview_text"></div>
<a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
<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>
<!-- <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>
<!-- <div class="grid"> <img src="/img/Curriculum-blog2.png" 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">1 DEC</div>
<h1 class="text-color-1 text-xl font-semibold pt-10">Importance of Pre-school education</h1>
<p class="text-base text-justify line-clamp-3 font-light w-96 text-color-2 leading-loose">This is the firs exercise in which children are isolated from the warmth and safe environment of their parents. It must therefore be a place that is the second home of the child.</p>
<a class=" text-blue-800" href="">Read More>></a>
</div>
<div class="grid"> <img src="/img/Curriculum-blog3.png" 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">1 DEC</div>
<h1 class="text-color-1 text-xl font-semibold pt-10">Importance of Pre-school education</h1>
<p class="text-base text-justify line-clamp-3 font-light w-96 text-color-2 leading-loose">This is the firs exercise in which children are isolated from the warmth and safe environment of their parents. It must therefore be a place that is the second home of the child.</p>
<a class=" text-blue-800" href="">Read More>></a>
</div> -->
</div>
<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" style="font-family:Quicksand">Read All Articles</button>
</div></router-link>
</section>
<section class="container mx-auto mt-16">
<section class="container mx-auto mt-16 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 ">
<div class="grid"></div>
<div class="grid py-20 px-4">
<h1 class="text-2xl md:text-4xl text-blue-700">Skill Up with Us & <br>
<div class="grid py-10 px-4">
<h1 class="hero-text text-blue-700" style="font-family:Quicksand">Skill Up with Us & <br>
<span class="text-color-1">to Be a superhero at your Preschool</span></h1>
<h1 class="text-base md:text-xl text-color-2">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
<div class="flex py-4"><button class="text-white bg-blue-700 p-2 text-lg rounded-tl-lg rounded-br-lg">Know More</button></div>
<h1 class="text-xl md:text-2xl text-color-2 pt-6">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
<div class="flex py-4"><button class="text-white bg-blue-700 p-2 text-2xl rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Know More</button></div>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="flex justify-center text-color-1 text-2xl md:text-4xl pt-32 py-16">Download Report Card Format</div>
<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 place-items-center text-center mt-16 gap-y-16 gap-x-8 px-4">
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card1.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 2-3</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
<section class="container mx-auto xl:px-24">
<div class="flex justify-center text-color-1 font-bold hero-text py-16 px-4">Download Report Card Format</div>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 place-items-center text-center gap-y-16 gap-x-8 px-4 " >
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card1.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 2-3</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 3-4</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 3-4</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 4-5</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 4-5</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 5-6</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 5-6</h1>
<button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="grid place-content-center text-color-1 text-2xl md:text-4xl font-bold pt-48 py-24"> EYFS Curriculum & Its Impact</div>
<section class="container mx-auto xl:px-24">
<div class="grid place-content-center text-color-1 hero-text font-bold pt-48 py-24"> EYFS Curriculum & Its Impact</div>
<div class="grid grid-cols-1 md:grid-cols-2 p-6">
<div class="grid text-sm md:text-lg text-justify text-color-2">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).
<img src="/img/legends.png" alt="" class=""/>
<div class="grid font-20px text-justify text-color-2">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).
<img src="/img/legends.png" alt="" class="md:-mt-24">
</div>
<div class="grid">
<div class="flex relative justify-center text-xs">
<Roundchart/>
<RoundChart/>
</div>
</div>
</div>
</section>
<section class="container mx-auto xl:px-24">
<div class="flex justify-center place-items-right py-20"><img src="/img/bnnr.png" alt="">
<div class="absolute md:pt-8 xl:pt-40 text-white px-4 md:px-0 xl:pl-72">
<h1 class="text-lg md:text-2xl lg:text-4xl" >New Interventions in Preschool Education</h1>
<h1 class="text-sm lg:text-2xl" >Check Out what new interventions are going to be implemented <br> in Preschool education system</h1>
<div class="md:py-2">
<button class="text-blue-700 bg-white text-center w-fit p-1 px-2 lg:text-2xl rounded-tl-xl rounded-br-xl" >Discover Now</button>
</div>
</div>
</div>
</section>
<section class="container mx-auto py-20 px-4">
<div class="grid grid-cols-1 xl:grid-cols-2 place-items-center">
<div class="grid h-fit text-color-2">
<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>
<div tabindex="0" class="collapse collapse-arrow border-y">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;1. What are the main components of EYFS preschool curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>An EYFS preschool curriculum contains following teaching : <br>
● Literacy<br>
● Pre-numeracy <br>
● Understanding of the world <br>
● Extra curricular activities <br>
● Social behavior
</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b ">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;2. How does the quality of a preschool curriculum impact the rate of enrollments?
</div>
<div class="collapse-content md:text-lg">
<p>The better the quality of your preschool curriculum is, the more will be the enrollments. Parents always desire the best education for their children especially when it comes to the foremost stage of learning. Your preschool image will be known by how you mold a child’s personality. Consequently, the better your preschool curriculum molds a child, the better your preschool image will be and parents will prefer your preschool more.</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;3. What is the significance of a play school curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>A good play school curriculum makes sure that toddlers are provided education as per their development needs. It should ensure their physical, social and emotional development through teaching the right subjects essential for schooling and future education. It is a preschool curriculum that established a sound base of learning in children.</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;4. Which is the most ideal preschool curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>The Early Years Foundation Stage (EYFS) British curriculum is the best preschool curriculum for any play school. The curriculum keeps in mind all aspects of development necessary for a child. Teeny Beans, a zero royalty preschool franchise provides the EYFS preschool curriculum to its partners and helps them implement it successfully.</p>
<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">
<div v-if="faqEducators" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqEducators.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqEducators.content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<img src="/img/frequently.png" alt="">
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
</section>
</div>
</template>
<style scoped>
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
.h1-text {
font-size: 30px;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
background-color: #f9b8ce;
border-radius: 16px;
}
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
background-color: #f9b8ce;
border-radius: 16px;
}
.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;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
content: "▶";
position: absolute;
top: 1rem;
left: 0.8rem;
transform: rotate(0);
transform-origin: center;
transition: 0.2s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
transition: 0.45s transform ease;
}
/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
position: relative;
z-index: 10;
}
@keyframes details-show {
from {
margin-bottom: -80%;
opacity: 0;
transform: translateY(-100%);
}
}
details > *:not(summary) {
animation: details-show 500ms ease-in-out;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
color: transparent;
overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }
/* # Style 2 # */
details.style2 summary::before {
content: "×";
font-size: 2rem;
line-height: 1rem;
transform: rotate(-45deg);
top: 1.2rem;
left: 0.5rem;
}
details[open].style2 > summary:before {
transform: rotate(90deg);
color: rgb(0, 0, 0) !important;
transition: color ease 2s, transform ease 1s;
}
/* # Style 3 # */
details .moon-new { display: inline; }
details .moon-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }
/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { margin: 0; padding-bottom: 10px; }
p:last-child { padding: 0; }
details {
max-width: 800px;
box-sizing: border-box;
margin-top: 5px;
background: rgb(255, 255, 255);
}
summary {
border: 4px solid transparent;
outline: none;
padding: 8px;
display: block;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details[open] summary,
summary:hover {
color: #1e293b;
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
color: #1e293b;
}
.content {
padding: 10px;
}
.text-color-1 {
color: #7C4C23;
font-family: 'Quicksand';
}
.text-color-2 {
color: #333333;
font-family: 'Quicksand';
}
.text-color-3 {
color: #434343;
}
.menu3 {
color: #c9d438;
}
.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;
}
}
</style>
<script>
export default {
setup(){
// const route = useRoute();
},
data() {
return {
isLoading: true,
faqEducators: null,
name:null,
phone:null,
msg:null,
@@ -226,6 +486,7 @@ export default {
}
},
mounted: function () {
// this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
@@ -254,7 +515,7 @@ export default {
)
.then(response => response.json())
.then(data => {
console.log(data)
// console.log(data)
});
// formData=""
this.getinTouchQry=false
@@ -264,47 +525,22 @@ export default {
.then(response => response.json())
.then(data => {
this.tbBlog = data.data
// console.log(data)
this.curriculum
this.isLoading = false
console.log(this.data)
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=educators')
.then(resp => resp.json())
.then(data => {
this.faqEducators=data.data
// console.log(this.faqEducators)
})
},
}
}
}
</script>
<style>
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
.text-color-1 {
color: #7C4C23;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
background-color: #f9b8ce;
border-radius: 16px;
}
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
background-color: #f9b8ce;
border-radius: 16px;
}
</style>
</script>

196
src/components/Menu.astro Normal file
View File

@@ -0,0 +1,196 @@
<main class="container-fluid navbar">
<!-- Desktop Menu -->
<div class="container mx-auto flex justify-center">
<div class="hidden md:block py-4">
<div class="navbar">
<a href="#home">Educators</a>
<a href="#news">Administrators</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">Recources
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">Worksheets</a>
<a href="#">Videos</a>
<a href="#">Audio Books</a>
<a href="#">Lesson Plan</a>
</div>
</div>
<a href="occassion">Occassion</a>
<a href="themes">Themes</a>
<a href="blog">Blog</a>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobileTopMenu block md:hidden">
<div class="topnavMobile">
<a href="#home" class="active">Logo</a>
<div id="mobileMenu" class="hidden">
<a href="#news">Educators</a>
<a href="#contact">Administrators</a>
<div class="dropdown">
<button class="dropbtn">Dropdown &#11183</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2Link 2Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
</div>
<a class="icon" onclick="openMobileMenu()">
&#9776;
</a>
</div>
</div>
</main>
<script is:inline>
function openMobileMenu() {
var element = document.getElementById("mobileMenu");
element.classList.toggle("hidden");
}
</script>
<style>
.navbar {
overflow: hidden;
background-color: rgb(150, 39, 39);
/* position: absolute;
width: 100%;
left: 0;
top: 0; */
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownDesktop {
float: left;
overflow: hidden;
}
.dropdownDesktop .dropbtnDesktop {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: red;
}
.dropdown-contentDesktop {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentDesktop a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contentDesktop a:hover {
background-color: #ddd;
}
.dropdownDesktop:hover .dropdown-contentDesktop {
display: block;
}
/* .mobileTopMenu{
position: absolute;
top:0;
left:0;
width:100%;
} */
.dropdown:hover .dropdown-content {
display: block;
background-color: #ddd;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.topnavMobile {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnavMobile a, .topnavMobile >div > div {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnavMobile a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnavMobile a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #aa6204;
color: white;
}
</style>

343
src/components/Occassion.vue
View File

@@ -1,35 +1,271 @@
<template>
<div>
<section class="container-fluid">
<!-- hero section -->
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<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>
<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>
</div>
<div class="flex w-fit justify-center place-items-center">
<!-- <img class="w-full h-fit drop-shadow-2xl rounded-3xl py-4 cursor-none" src="/img/occassion1.png" alt=""> -->
<img class="w-fit h-fit" v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].occassion" alt="">
</div>
</div>
</section>
<!-- <section class="container-fluid">
<div class="flex w-screen load-wraper">
<div class="flex">
<img class="grid w-screen place-items-center relative" v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].occassion" alt="">
<img class="w-screen place-items-center relative" v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].occassion" alt="">
</div>
<h1 class=" absolute pl-8 md:pl-20 pt-4 lg:p-32 text-color-1 text-2xl lg:text-5xl font-semibold md::w-3/5 "> Occassion of the Month - <br>
<h1 class=" absolute lg:inset-16 2xl:pl-32 2xl:pt-16 p-4 text-color-1 hero-text font-bold"> Occassion of the Month -
<div v-if="page">{{page[0].occasson_title}} </div>
</h1>
</div>
</section>
<section>
</section> -->
<!-- <section>
<div class="container-fluid shadow-xl">
<div v-if="page" class="container mx-auto p-4">
<div class="flex text-2xl md:text-3xl text-color-1 text-center mt-16">{{page[0].occassion_text }}</div>
<div class="flex text-justify text-xl md:text-2xl mt-6 text-color-2">{{page[0].occassion_details }}</div>
<div class="flex text-indigo-800 pb-8 text-xl md:text-2xl mt-2">
<a href="#">Check Out the ressources below.</a>
<div v-if="page" class="container mx-auto px-4">
<div class="flex h1-text text-color-1 mt-10">{{page[0].occassion_text }}</div>
<div class="flex text-justify text-xl font-20px mt-2 text-color-2">{{page[0].occassion_details }}</div>
<div class="flex text-indigo-800 pb-8 mt-2 text-xl lg:text-3x"> Check Out the ressources below.</div>
</div>
</div>
</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 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">
<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" />
<div class="absolute top-10 left-8 text-2xl text-color-1 text-ellipsis">{{ida.occassion_celebration_title}}
</div>
<div class="absolute top-16 py-3 left-8 text-xl text-ellipsis text-color-2">{{ida.occassion_celebration_body_text}}
</div>
<div v-if="ida.file" class="absolute bottom-10 left-36 md:left-36 lg:left-28">
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.file+'?download'">
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Download</h3>
</a>
</div>
</div>
</div>
<a href="/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" />
<div class="absolute bottom-10 left-36 md:left-36 lg:left-28">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> + Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
</a>
</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 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">
<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" />
<div v-if="wkst.file" class="absolute bottom-10 left-20">
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.file+'?download'">
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> Download </h3>
</a>
</div>
</div>
</div>
<a href="/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" />
<div class="absolute top-40 left-24">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> + Subscribe </h3>
<h3 class=""> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
</a>
</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 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)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer 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 shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</div>
<!-- <label :for="vdo.videos_file" >
<div class="flex bg-gray-200 -rotate-6 cursor-pointer 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 shadow-2xl" />
<img v-else src="/img/image_not_available.png" alt="" />
<img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</label>
<input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
<label :for="vdo.videos_file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<iframe width="340"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</label>
</label> -->
</div>
<a href="/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" />
<div class="absolute top-16 left-20">
<h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
<div class="mt-6 text-center text-lg ">...</div>
</div></a>
</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="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" >
<img class="cursor-pointer rounded-tl-xl rounded-br-xl w-56" v-if="aud.audio_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.audio_icon" alt="">
<div class="cursor-pointer text-center text-xl text-color-2">{{aud.title}}</div>
</label>
<input type="checkbox" :id="aud.file" class="modal-toggle" />
<label :for="aud.file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<audio controls >
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.file" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</label>
</label>
</div>
<a href="/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>
</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>
<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 ">
<div class="flex -rotate-6 relative"><img v-if="slide.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+slide.img" alt="" class="rounded-tl-lg rounded-br-lg" />
<!-- <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>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- Submit your Celebration Story here -->
<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="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">
<div><img class="rounded-tl-xl rounded-br-xl" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+yt.youtube_thumbnail" alt="">
<div class="text-center text-xl line-clamp-1 text-color-2 ">{{yt.about_the_video}}</div>
</div>
</a>
</div>
</div>
</section>
<!-- Other's Occassion -->
<section class="container mx-auto my-16">
<!-- <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">
<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>
</div>
</div> -->
<!-- <vueper-slides
class="no-shadow"
:visible-slides="3"
slide-multiple
:gap="1"
:slide-ratio="1/4"
:touchable="true"
:dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, slideMultiple: 1 } }">
<vueper-slide v-for="occassion in allOccassion" :key="occassion.id" image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ occassion.occassion_icon" />
</vueper-slides> -->
</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">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">
<div v-if="faqOccassion" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqOccassion.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqOccassion.content"></p>
</div>
</div>
</div>
</div>
</div>
<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">
<span @click="hideYtModal" class="close">&times;</span>
<div>
<iframe width="380" height="320"
:src="'https://www.youtube.com/embed/'+ytID">
</iframe>
</div>
</div>
</div>
</div>
</template>
<script>
// import { VueperSlides, VueperSlide } from 'vueperslides'
// import 'vueperslides/dist/vueperslides.css'
<script is:inline>
export default {
setup(){
// const route = useRoute();
},
methods: {
showYtModal(ytID){
this.ytModal=true
@@ -37,14 +273,13 @@ methods: {
},
hideYtModal(){
this.ytModal=false
this.ytID=ytID
// this.ytID=ytID
}
},
// components: { VueperSlides, VueperSlide },
data() {
return {
page: null,
faqOccassion: null,
themes:null,
allOccassion:null,
stories: null,
@@ -124,19 +359,81 @@ methods: {
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion')
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?limit=3')
.then(response => response.json())
.then(data => {
this.allOccassion = data.data
// this.isLoading = false
// console.log(this.page[0].id)
// console.log(this.allOccassion)
// return this.page[0].id
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=occassion')
.then(resp => resp.json())
.then(data => {
this.faqOccassion=data.data
console.log(this.faqOccassion)
})
}
}
</script>
<style scopped>
.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 (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;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 30px;
}
}
.load-wraper{
position: relative;
height: 100%;
@@ -204,6 +501,8 @@ methods: {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}

555
src/components/Themes.vue Normal file
View File

@@ -0,0 +1,555 @@
<template>
<div>
<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 w-fit justify-center px-4 ">
<div v-if="page" class="">
<h1 class="text-blue-700 hero-text font-bold">Theme of the Month- <span class="text-color-1" v-if="page">{{page[0].theme_title}}</span></h1>
<div class="flex h2-text text-color-1 font-semibold pt-8">{{page[0].theme_text }}</div>
<div class="flex text-justify font-18px text-color-2 pt-4">{{page[0].theme_details }}</div>
</div>
</div>
<div class="flex w-fit justify-center place-items-center">
<!-- <img class="w-full h-fit drop-shadow-2xl rounded-3xl py-4 cursor-none" src="/img/occassion1.png" alt=""> -->
<img class="w-fit h-fit" v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].theme_hero_img" alt="">
</div>
</div>
</section>
<!-- <div v-if="isLoading">
<div class="flex justify-center ml-28 text-4xl animate-spin"><img class="w-32" src="/img/svg/loading.svg" alt=""></div>
<h1 class="text-5xl text-center py-32">Loading.....</h1>
</div>
<div v-else></div> -->
<!-- section hero -->
<!-- <section class="container-fluid">
<div class="flex place-items-center load-wraper">
<img class="w-screen " v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].theme_hero_img" alt="">
<div class="absolute lg:inset-16 2xl:pl-32 2xl:pt-16 p-4 text-color-1 hero-text font-bold"> Theme of the month -
<div v-if="page">{{page[0].theme_title}} </div>
</div>
</div>
</section> -->
<!-- <section>
<div class="container-fluid shadow-xl">
<div v-if="page" class="container mx-auto p-4">
<div class="flex h1-text text-color-1 mt-16">{{ page[0].theme_text }}</div>
<div class="flex text-justify font-18px mt-6 text-color-2">{{ page[0].theme_details }}</div>
<div class="flex text-indigo-800 pb-82font-18px md:text-2xl mt-2"> Check Out the ressources below.</div>
</div>
</div>
</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 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>
<div class="absolute top-16 py-3 left-8 text-xl text-color-2">{{ida.celebration_ideas_body_text}}
</div>
<div class="absolute bottom-10 left-32 md:left-28">
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ida.celebration_ideas_img+'?download'">
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xl leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> View Now </h3>
</a>
</div>
</div>
<!-- <div class=" text-center text-lg ">{{ida.title}}</div> -->
</div>
<a href="/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" />
<div class="absolute bottom-20 left-32 md:left-28">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xl leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> + Subscribe </h3>
<h3 class="-ml-2 absolute left-10"> &nbsp;To download <br> more resources</h3>
</div>
</div>
<!-- <div class=" text-center text-lg ">...</div> -->
</div>
</a>
</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 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">
<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" />
<div class="absolute bottom-10 left-20">
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+wkst.file+'?download'">
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> Download </h3>
</a>
</div>
</div>
<!-- <div class=" text-center text-lg ">{{wkst.title}}</div> -->
</div>
<a href="/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" />
<div class="absolute top-40 left-20">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xl leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> + Subscribe </h3>
<h3 class="-ml-2 absolute left-8"> &nbsp;To download <br> more resources</h3>
</div>
</div>
<!-- <div class=" text-center text-lg ">...</div> -->
</div>
</a>
</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 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)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8 rounded-tl-xl rounded-br-xl shadow-2xl">
<div class="flex rotate-6 relative"><img class="rounded-tl-xl rounded-br-xl shadow-2xl w-96" v-if="vdo.video_thumb" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" />
<img class="absolute inset-16 left-40 w-20" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</div>
<!-- <label :for="vdo.videos_file" >
<div class="flex bg-gray-200 -rotate-6 cursor-pointer 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 shadow-2xl" />
<img v-else src="/img/image_not_available.png" alt="" />
<img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</label>
<input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
<label :for="vdo.videos_file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<iframe width="340"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</label>
</label> -->
</div>
<a href="/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" />
<div class="absolute top-20 left-28 ">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
<div class="mt-6 text-center text-lg ">...</div>
</div></a>
</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="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" >
<img class="cursor-pointer rounded-tl-xl rounded-br-xl w-56" v-if="aud.audio_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.audio_icon" alt="">
<div class="cursor-pointer text-center text-xl text-color-2 pt-2">{{aud.title}}</div>
</label>
<!-- <label :for="aud.file" class="btn">{{aud.id}} -</label> -->
<input type="checkbox" :id="aud.file" class="modal-toggle" />
<label :for="aud.file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<audio controls>
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.file" type="audio/mpeg">Your browser does not support the audio element.
</audio>
</label>
</label>
</div>
<a href="/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>
</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>
<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">
<div class="flex -rotate-6 relative"><img v-if="slide.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+slide.img" alt="" class="rounded-tl-lg rounded-br-lg" />
<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>
</div>
</div>
</div>
<!-- <div v-for="slide in stories.slice(3, 4)" :key="stories.id" class="p-4 ">
<div class="flex bg-gray-200 rotate-6 gap-8">
<div class="flex -rotate-6 relative">
<img v-if="slide.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+slide.img" alt="" class="rounded-tl-lg rounded-br-lg" />
<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>
</div>
</div>
</div> -->
</div>
</section>
<!-- Submit your Celebration Story here -->
<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="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">
<div><img class="rounded-tl-xl rounded-br-xl" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+yt.youtube_thumbnail" alt="">
<div class="text-center text-lg ">{{yt.about_the_video}}</div>
</div>
</a>
</div>
</div>
</section>
<!-- section for theme slug page -->
<section class="container mx-auto px-4 xl:px-24 my-16">
<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">
<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>
</div>
</div>
<!-- <vueper-slides
class="no-shadow"
:visible-slides="3"
slide-multiple
:gap="1"
:slide-ratio="1/4"
:dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, slideMultiple: 1 } }">
<vueper-slide v-for="themes in allThemes" :key="themes.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ themes.theme_icon" />
</vueper-slides> -->
</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">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">
<div v-if="faqThemes" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqThemes.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqThemes.content"></p>
</div>
</div>
</div>
</div>
</div>
<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">
<span @click="hideYtModal" class="close">&times;</span>
<div>
<iframe width="380" height="320"
:src="'https://www.youtube.com/embed/'+ytID">
</iframe>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// components: { YouTube },
setup(){
// const route = useRoute();
},
methods: {
// onReady() {
// this.$refs.youtube.playVideo()
// },
},
data() {
return {
page: null,
faqThemes: null,
themes:null,
allThemes:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
ytModal:false,
ytID:''
}
},
methods: {
showYtModal(ytID){
this.ytModal=true
this.ytID=ytID
},
hideYtModal(){
this.ytModal=false
// this.ytID=ytID
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[status][_eq]=published')
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
// console.log(this.page[0].id)
return this.page[0].id
})
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_celebration_stories?filter[theme_key][_in]=' + themeID)
.then(resp => resp.json())
.then(stories => {
this.stories=stories.data
// console.log(this.stories)
})
// console.log(themeID)
return 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)
})
return themeID
})
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_workshets?filter[theme_key][_in]='+ themeID)
.then(resp => resp.json())
.then(worksheets => {
this.worksheets=worksheets.data
// console.log(this.worksheets)
})
return themeID
})
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]='+ themeID)
.then(resp => resp.json())
.then(videos => {
this.videos=videos.data
// console.log(this.videos)
})
return themeID
})
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_youtube_videos?filter[theme_key][_in]='+ themeID)
.then(resp => resp.json())
.then(youtube => {
this.youtube=youtube.data
// console.log(youtube)
})
return themeID
})
.then((themeID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_audio_book?limit=3')
.then(resp => resp.json())
.then(audio => {
this.audio=audio.data
// console.log(this.audio)
})
})
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)
// return this.page[0].id
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=themes')
.then(resp => resp.json())
.then(data => {
this.faqThemes=data.data
// console.log(this.faqThemes)
})
}
}
</script>
<style scopped>
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
@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-size: 18px;
}
@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;
}
}
.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%;
}
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
.box{
width: 380px;
height: 220px;
}
.box1 {
width: 500px;
height: 220px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
.ytModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Modal Content
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
} */
</style>

8
src/layouts/Layout.astro
View File

@@ -9,15 +9,23 @@ const { title } = Astro.props;
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<style>
body {
font-family: Quicksand;
}
</style>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
/* :root {

54
src/pages/aa.astro
View File

@@ -1,54 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
import Blog from "../components/Blog.vue";
---
<Layout title="Welcome to Astro.">
<main>
<section>
<div >
<ul>
<Blog client:visible/>
</ul>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 place-items-center gap-8">
<div class="grid"><img class="rounded-xl shadow-2xl" src="/img/person4.png" alt=""></div>
<div class="grid"><img class="rounded-xl shadow-2xl relative" src="/img/person3.png" alt="">
<p class="absolute">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos eius earum nostrum, ducimus commodi dicta corrupti delectus aliquid dolor consequuntur expedita fugiat eos doloremque natus minima culpa, quod hic quidem.</p>
</div>
</div>
<section class="container mx-auto">
<div>
<h1 class="text-4xl text-center p-6 text-red-800">Worksheets</h1>
<p class="text-2xl text-blue-700">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, laudantium dicta asperiores et repellat quas, architecto, eum ipsa autem sit deleniti maxime repellendus alias similique quo mollitia delectus voluptas commodi.</p>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 my-24 gap-16 place-items-center">
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person1.png" alt="">
</div>
<button class="rotate-6 rounded-br-3xl rounded-tl-3xl">Know More</button>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person2.png" alt="">
</div>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person3.png" alt="">
</div>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person4.png" alt="">
</div>
</div>
</div>
</section>
</main>
</Layout>
<script>
// let apiLink = "https://management.beanstalkedu.com/items/worksheet_menu"
// fetch (apiLink)
// .then(x => x.json())
// .then(y => document.getElementById("demo").innerHTML = y.data[2].file);
</script>

7
src/pages/audio.astro Normal file
View File

@@ -0,0 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import Audio from "../components/Audio.vue";
---
<Layout title="Audio Books">
<Audio client:visible/>
</Layout>

20
src/pages/blog.astro Normal file
View File

@@ -0,0 +1,20 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Blog from "../components/Blog.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="Welcome to Astro.">
<Menu/>
<Blog client:visible/>
<Footer/>
</Layout>
<script>
// let apiLink = "https://management.beanstalkedu.com/items/worksheet_menu"
// fetch (apiLink)
// .then(x => x.json())
// .then(y => document.getElementById("demo").innerHTML = y.data[2].file);
</script>

2
src/pages/eucators.astro → src/pages/educators.astro
View File

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

241
src/pages/homepage.astro Normal file
View File

@@ -0,0 +1,241 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.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>
</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>
</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>
<Footer/>
</Layout>
<style scoped>
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
height: 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%);
}
.text-color-1 {
color: #7C4C23;
}
.h1-text {
font-size: 50px;
}
@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-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;
}
@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>

110
src/pages/modal.astro Normal file
View File

@@ -0,0 +1,110 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="modal">
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>njhnjhnhnhn</p>
</div>
</div>
</Layout>
<script is:inline>
export default {
data() {
return {
page: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=occassion')
.then(resp => resp.json())
.then(data => {
this.faqOccassion=data.data
console.log(this.faqOccassion)
})
}
}
// 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

9
src/pages/occassion.astro
View File

@@ -1,11 +1,12 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.vue";
import Menu from "../components/Menu.astro";
import Occassion from "../components/Occassion.vue";
import Footer from "../components/Footer.vue";
---
<Layout>
<Header/>
<Occassion/>
<Layout title="TeenyBeans Occassion">
<Menu/>
<Occassion client:visible/>
<Footer/>
<main></main>
</Layout>

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

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