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>