update
Suvodip Ghosh
parent
d8478b86bf
commit
85a03a3f24
|
|
@ -15,6 +15,7 @@
|
|||
"@astrojs/vue": "^1.2.2",
|
||||
"astro": "^1.7.2",
|
||||
"daisyui": "^2.46.1",
|
||||
"swiper": "^9.0.3",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,345 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="container-fluid bg3">
|
||||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col w-fit justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold">Audio Books<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px text-justify pt-8">Develop children’s listening skills, confidence, vocabulary, innovativity and much more by adding preschool audio books to their routine and witness the positive change in their personality.</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<img class="w-fit h-fit" src="/img/audio-book1a.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl">
|
||||
<div class="flex flex-col xl:flex-row place-items-center">
|
||||
<div class="flex flex-col px-6 pt-6">
|
||||
<h1 class="text-blue-700 hero-text font-bold xl:w-5/12">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px xl:w-8/12 text-justify">Develop children’s listening skills, confidence, vocabulary, innovativity and much more by adding preschool audio books to their routine and witness the positive change in their personality.</p>
|
||||
<p class="font-20px xl:w-8/12 text-justify pt-4">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum.</p>
|
||||
</div>
|
||||
<div class="flex w-full justify-center place-items-center">
|
||||
<img class="w-full h-fit rounded-3xl py-4 cursor-none" src="/img/audio-book1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section>
|
||||
<!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-4">Develop children’s listening skills, confidence, vocabulary, innovativity and much more by adding preschool audio books to their routine and witness the positive change in their personality. </p> -->
|
||||
<!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum. </p> -->
|
||||
<div class="flex flex-col md:flex-row bg3 justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
|
||||
<div class="flex ">
|
||||
<h1 class="pt-3 font-semibold">Age: </h1>
|
||||
<select class="select max-w-xs bg3" @change="switchSelect($event)">
|
||||
<option value="2">Select Age</option>
|
||||
<option value="2">2-3 Year</option>
|
||||
<option value="3">3-4 Year</option>
|
||||
<option value="4">4-5 Year</option>
|
||||
<option value="5">5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container-fluid pt-10">
|
||||
<p class="container mx-auto px-4 xl:px-24 font-20px text-justify pt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum.</p>
|
||||
</section>
|
||||
<!-- <div class="my-24"></div> -->
|
||||
<!-- Literacy section -->
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Literacy</span>
|
||||
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-10 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="grid place-items-center">
|
||||
<img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
|
||||
<a href="/audio-books/mathematics"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Literacy</span>
|
||||
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-14 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative flex ">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 flex justify-center w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="grid place-items-center">
|
||||
<img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
|
||||
<a href="/audio-books/literacy"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- Mathematics section -->
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Mathematics</span>
|
||||
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-10 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="grid place-items-center">
|
||||
<img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
|
||||
<a href="/audio-books/mathematics"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Understanding the Worlds section -->
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Understanding the Worlds</span>
|
||||
<p class="font-20px text-color-2 text-justify">Increase the imaginative power of young creative minds of children, speaking skills and provide them a better comprehension of the world with the listening books for preschoolers in the subject ‘Understanding of the World’ where you get all concepts in the audio form. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-14 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="grid place-items-center">
|
||||
<img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
|
||||
<a href="/audio-books/understanding-the-worlds"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Others section -->
|
||||
<!-- <section class="container mx-auto pt-20 px-4">
|
||||
<span class="text-2xl md:text-4xl text-color-1 px-6">Literacy</span>
|
||||
<p class=" text-lg text-color-2 pt-6 text-base md:text-2xl px-6 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aut, explicabo velit saepe quas tenetur dolores tempore enim aspernatur magnam amet, laboriosam perferendis voluptatem. Dolorem neque esse sed minima blanditiis?</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-32 mt-32 place-items-center gap-32">
|
||||
<div v-for="worksheet in worksheets" :key="worksheets.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 ">{{ worksheet.title}}</h1>
|
||||
<button class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto py-20">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqAudio in faqAudio" :key="faqAudio.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
<div v-if="faqAudio" class="collapse-title md:text-xl ">+ {{ faqAudio.title }}</div>
|
||||
<div class="collapse-content md:text-lg">
|
||||
<p class="" v-html="faqAudio.content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqAudio: null,
|
||||
worksheets: null,
|
||||
abliteracy: null,
|
||||
abmath: null,
|
||||
abworld: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
switchSelect(event) {
|
||||
// alert(event.target.value)
|
||||
this.getAudio(event.target.value)
|
||||
// this.selected = event.target.value;
|
||||
},
|
||||
getAudio(age=2){
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abliteracy=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.abliteracy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abmath=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.abmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abworld=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.abworld)
|
||||
})
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=audio-books')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqAudio=data.data
|
||||
// console.log(this.faqAudio)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
this.getAudio()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
|
||||
.text-color-2 {
|
||||
color: #333333;
|
||||
}
|
||||
/* DROPDOWN MENU */
|
||||
.services {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown {
|
||||
z-index: 999;
|
||||
background-color: rgb(247, 235, 173);
|
||||
padding: 1em 0;
|
||||
position: absolute; /*WITH RESPECT TO PARENT*/
|
||||
display: none;
|
||||
border-radius: 8px;
|
||||
top: 35px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.dropdown li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dropdown li {
|
||||
padding: 0.5em 1em;
|
||||
width: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: rgb(250, 230, 133);
|
||||
color: #ff0000;
|
||||
}
|
||||
.services:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Literacy</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in ablitreacy" :key="ablitreacy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="audiobooks in abfliteracy" :key="abfliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
audiobooks: null,
|
||||
ablitreacy: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
abfliteracy: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.ablitreacy=audiobooks.data
|
||||
// console.log(this.ablitreacy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy&limit=10')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abfliteracy=audiobooks.data
|
||||
// console.log(this.abfliteracy)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Mathematics</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid mt-16">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="audiobooks in abfmath" :key="abfmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
worksheets: null,
|
||||
ablitreacy: null,
|
||||
abmath: null,
|
||||
wsWorld: null,
|
||||
abfmath: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abmath=worksheets.data
|
||||
// console.log(this.abmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=10')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abfmath=worksheets.data
|
||||
// console.log(this.abfmath)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Understanding the Worlds</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Increase the imaginative power of young creative minds of children, speaking skills and provide them a better comprehension of the world with the listening books for preschoolers in the subject ‘Understanding of the World’ where you get all concepts in the audio form.</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="audiobooks in abfworld" :key="abfworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
audiobooks: null,
|
||||
abworld: null,
|
||||
abfworld: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abworld=audiobooks.data
|
||||
// console.log(this.abworld)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world&limit=10')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abfworld=audiobooks.data
|
||||
// console.log(this.abfworld)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<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">×</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>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="container-fluid bg3">
|
||||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col w-full justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold 2xl:w-10/12">Start Creating Daily <span class="text-color-1">Lesson Plan</span></h1>
|
||||
</div>
|
||||
<div class="flex w-fit">
|
||||
<img class="w-fit" src="/img/lesson-plan1c.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<nav class="bg-white border-gray-200 py-2.5 rounded dark:bg-gray-900 bg3">
|
||||
<div class="container flex flex-wrap items-center justify-between mx-auto px-4 xl:px-24">
|
||||
<div class="w-full md:block md:w-auto " id="navbar-default container mx-auto">
|
||||
<ul class="flex bg3 flex-col p-4 mt-4 md:gap-20 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li><a href="/lesson-plan/dailyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Daily</p></a></li>
|
||||
<li><a href="/lesson-plan/weeklyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Weekly</p></a></li>
|
||||
<li><a href="/lesson-plan/monthlyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Monthly</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-16 place-items-center mb-32 gap-16 ">
|
||||
<div v-for="lessonplan in dailyplan" :key="lessonplan.id">
|
||||
<div @click="showLpModal(lessonplan.file)">
|
||||
<!-- <div class="grid h-80 w-64 border-4 place-items-center">
|
||||
<router-link to=""><img class="" src="/img/svg/plus.svg" alt="">
|
||||
<h1 class="text-center">Add New Plan</h1></router-link></div> -->
|
||||
<div class="grid gap-4"><img class="cursor-pointer w-96 h-6/6 " v-if="lessonplan.lesson_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lessonplan.lesson_icon" alt=""/></div>
|
||||
</div>
|
||||
<!-- <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div>
|
||||
<div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Youtube Modal -->
|
||||
<div @click="hideLpModal" v-if="lpModal" id="lpModal" class="flex justify-center lpModal ">
|
||||
<div class="modal-content">
|
||||
<span @click="hideLpModal" class="close text-4xl font-bold cursor-pointer text-gray-200 border-2 rounded-full p-1">X</span>
|
||||
<div>
|
||||
<img width="540" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ file" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
lessonplan: null,
|
||||
dailyplan: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
vbfliteracy: null,
|
||||
isLoading: true,
|
||||
lpModal:false,
|
||||
file:''
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLpModal(file){
|
||||
this.lpModal=true
|
||||
this.file=file
|
||||
},
|
||||
hideLpModal(){
|
||||
this.lpModal=false
|
||||
// this.ytID=ytID
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.dailyplan=data.data
|
||||
// console.log(this.dailyplan)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.lpModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 50px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
|
||||
.menu2 {
|
||||
color: #212325;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -114,8 +114,21 @@
|
|||
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
|
||||
<div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
|
||||
</div>
|
||||
<div class="grid row-span-2 place-items-center lg:place-items-end">
|
||||
<vueper-slides
|
||||
<div class="grid row-span-2 place-items-center lg:place-items-end w-fit">
|
||||
<swiper class="w-min"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="0"
|
||||
navigation
|
||||
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
|
||||
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <vueper-slides
|
||||
class="no-shadow w-96 px-14 md:px-0" arrows-outside
|
||||
:visible-slides="1"
|
||||
:bullets="false"
|
||||
|
|
@ -126,7 +139,7 @@
|
|||
:dragging-distance="200"
|
||||
:breakpoints="{ 800: { visibleSlides: 1, } }">
|
||||
<vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
|
||||
</vueper-slides>
|
||||
</vueper-slides> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -171,7 +184,7 @@
|
|||
<div class="grid ">
|
||||
<img src="/img/legends.png" alt="" class="p-8">
|
||||
<div class="flex relative justify-center text-xs ">
|
||||
<RoundChart/>
|
||||
<Roundchart/>
|
||||
</div>
|
||||
<h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
|
||||
<p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
|
||||
|
|
@ -241,6 +254,79 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
// const swiper = new Swiper('.swiper', {
|
||||
// autoplay: {
|
||||
// delay: 5000,
|
||||
// },
|
||||
// });
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
const onSwiper = (swiper) => {
|
||||
// console.log(swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
// console.log('slide change');
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqHome: null,
|
||||
themes:null,
|
||||
lessonplan:null,
|
||||
stories: null,
|
||||
ideas: null,
|
||||
worksheets: null,
|
||||
videos: null,
|
||||
youtube: null,
|
||||
audio: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.page[0].id)
|
||||
// return this.page[0].id
|
||||
}),
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqHome=data.data
|
||||
// console.log(this.faqHome)
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.position {
|
||||
|
|
@ -508,63 +594,3 @@ details summary::-webkit-details-marker { display: none; }
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
import { VueperSlides, VueperSlide } from 'vueperslides'
|
||||
import 'vueperslides/dist/vueperslides.css'
|
||||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
useHead({
|
||||
title: 'Teenybeans Preschool Curriculum',
|
||||
meta: [
|
||||
{
|
||||
name: `title`,
|
||||
content: `Preschooling with #1 Preschool Curriculum and Lesson Plans`
|
||||
},
|
||||
{
|
||||
name: `description`,
|
||||
content: `Preschool curriculum and lesson plans are essential for developing children's abilities. Check out our digital curriculum for smart preschool management.`
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
components: { VueperSlides, VueperSlide },
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqHome: null,
|
||||
themes:null,
|
||||
lessonplan:null,
|
||||
stories: null,
|
||||
ideas: null,
|
||||
worksheets: null,
|
||||
videos: null,
|
||||
youtube: null,
|
||||
audio: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.page[0].id)
|
||||
// return this.page[0].id
|
||||
}),
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqHome=data.data
|
||||
// console.log(this.faqHome)
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="container-fluid bg3">
|
||||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col w-full justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold 2xl:w-10/12">Start Creating Monthly <span class="text-color-1">Lesson Plan</span></h1>
|
||||
</div>
|
||||
<div class="flex w-fit h-fit">
|
||||
<img class="w-fit h-fit" src="/img/lesson-plan1c.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<nav class="bg-white border-gray-200 py-2.5 rounded dark:bg-gray-900 bg3">
|
||||
<div class="container flex flex-wrap items-center justify-between mx-auto px-24 xl:px-24">
|
||||
<div class="w-full md:block md:w-auto" id="navbar-default container mx-auto">
|
||||
<ul class="flex bg3 flex-col p-4 mt-4 md:gap-20 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li><a href="/lesson-plan/dailyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Daily</p></a></li>
|
||||
<li><a href="/lesson-plan/weeklyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Weekly</p></a></li>
|
||||
<li><a href="/lesson-plan/monthlyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Monthly</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-16 place-items-center mb-32 gap-16 ">
|
||||
<div v-for="lessonplan in monthlyplan" :key="lessonplan.id">
|
||||
<div @click="showLpModal(lessonplan.file)">
|
||||
<!-- <div class="grid h-80 w-64 border-4 place-items-center">
|
||||
<router-link to=""><img class="" src="/img/svg/plus.svg" alt="">
|
||||
<h1 class="text-center">Add New Plan</h1></router-link></div> -->
|
||||
<div class="grid gap-4"><img class=" cursor-pointer w-96 h-6/6 " v-if="lessonplan.lesson_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lessonplan.lesson_icon" alt=""/></div>
|
||||
</div>
|
||||
<!-- <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div>
|
||||
<div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Youtube Modal -->
|
||||
<div @click="hideLpModal" v-if="lpModal" id="lpModal" class="flex justify-center lpModal ">
|
||||
<div class="modal-content">
|
||||
<span @click="hideLpModal" class="close text-4xl font-bold cursor-pointer text-gray-200 border-2 rounded-full p-1">X</span>
|
||||
<div>
|
||||
<img width="540" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ file" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
lessonplan: null,
|
||||
monthlyplan: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
vbfliteracy: null,
|
||||
isLoading: true,
|
||||
lpModal:false,
|
||||
file:''
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLpModal(file){
|
||||
this.lpModal=true
|
||||
this.file=file
|
||||
},
|
||||
hideLpModal(){
|
||||
this.lpModal=false
|
||||
// this.ytID=ytID
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=monthly')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.monthlyplan=data.data
|
||||
// console.log(this.monthlyplan)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.lpModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 50px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
|
||||
.menu2 {
|
||||
color: #212325;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:slides-per-view="3"
|
||||
:space-between="50"
|
||||
navigation
|
||||
:pagination="{ clickable: true }"
|
||||
:scrollbar="{ draggable: true }"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon">Slide 1</swiper-slide>
|
||||
<swiper-slide>Slide 2</swiper-slide>
|
||||
<swiper-slide>Slide 3</swiper-slide>
|
||||
...
|
||||
</swiper>
|
||||
</template>
|
||||
<script>
|
||||
// import Swiper core and required modules
|
||||
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
|
||||
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/scrollbar';
|
||||
|
||||
// Import Swiper styles
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
const onSwiper = (swiper) => {
|
||||
console.log(swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
console.log('slide change');
|
||||
};
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, Pagination, Scrollbar, A11y],
|
||||
page: null,
|
||||
faqHome: null,
|
||||
themes:null,
|
||||
lessonplan:null,
|
||||
stories: null,
|
||||
ideas: null,
|
||||
worksheets: null,
|
||||
videos: null,
|
||||
youtube: null,
|
||||
audio: null,
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
console.log(this.page[0].id)
|
||||
// return this.page[0].id
|
||||
}),
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqHome=data.data
|
||||
console.log(this.faqHome)
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="0"
|
||||
navigation
|
||||
:autoplay=" { delay: 2500, disableOnInteraction: false}"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
|
||||
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
|
||||
</swiper-slide>
|
||||
<!-- <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
|
||||
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
|
||||
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
|
||||
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
|
||||
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide> -->
|
||||
|
||||
</swiper>
|
||||
</template>
|
||||
<script>
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
// const swiper = new Swiper('.swiper', {
|
||||
// autoplay: {
|
||||
// delay: 5000,
|
||||
// },
|
||||
// });
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
const onSwiper = (swiper) => {
|
||||
// console.log(swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
// console.log('slide change');
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
|
||||
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqHome: null,
|
||||
themes:null,
|
||||
lessonplan:null,
|
||||
stories: null,
|
||||
ideas: null,
|
||||
worksheets: null,
|
||||
videos: null,
|
||||
youtube: null,
|
||||
audio: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.lessonplan)
|
||||
// return this.page[0].id
|
||||
})
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqHome=data.data
|
||||
// console.log(this.faqHome)
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -116,7 +116,6 @@
|
|||
</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" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Literacy</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-8 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Videos</span>
|
||||
<p class="font-20px text-color-2 pb-16 text-justify">Find preschool learning videos enriched with entertainment together with the fundamental topics concerned with literacy that will enlighten children in a playful manner. Get a mixture of videos of rhymes, alphabets, and much more. <br>
|
||||
with entertainment , fun videos, learning becomes easy, time saving learning, fun learning , educate and entertain,</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
|
||||
<div v-for="videobooks in vbliteracy" :key="vbliteracy.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="w-96 relative -rotate-6 rounded-tl-xl rounded-br-xl cursor-pointer" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 cursor-pointer" src="/img/svg/play.svg" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-8 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="videobooks in vbfliteracy" :key="vbfliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="flex rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="-rotate-6 rounded-tl-xl rounded-br-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</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">×</span>
|
||||
<div>
|
||||
<iframe width="380" height="320" :src="'https://www.youtube.com/embed/'+ytID"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
videobooks: null,
|
||||
vbliteracy: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
vbfliteracy: 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/video_book?filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbliteracy=videobooks.data.reverse().slice(0, 4)
|
||||
// console.log(this.vbliteracy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbfliteracy=videobooks.data.reverse().slice(5, 12)
|
||||
// console.log(this.vbfliteracy)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Mathematics</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Videos</span>
|
||||
<p class="font-20px text-color-2 pb-16 text-justify">Learning becomes easy with videos for preschoolers by Teeny Beans Preschool Curriculum that assists in a stronger foundation in Mathematics to instill the accurate skills and knowledge among children and practice time saving learning. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
|
||||
<div v-for="videobooks in vbmath" :key="vbmath.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="w-96 relative -rotate-6 rounded-tl-xl rounded-br-xl cursor-pointer" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 cursor-pointer" src="/img/svg/play.svg" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="videobooks in vbfmath" :key="vbfmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="flex rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="-rotate-6 rounded-tl-xl rounded-br-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16" src="/img/svg/play.svg" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</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">×</span>
|
||||
<div>
|
||||
<iframe width="380" height="320" :src="'https://www.youtube.com/embed/'+ytID"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
videobooks: null,
|
||||
vbmath: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
vbfmath: 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/video_book?filter[category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbmath=videobooks.data
|
||||
// console.log(this.vbmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=mathematics&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbfmath=videobooks.data
|
||||
// console.log(this.vbfmath)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Understanding the Worlds</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Videos</span>
|
||||
<p class=" text-lg text-color-2 pb-16 text-base md:text-2xl text-justify">Our educational videos for preschoolers will bring a blend of education and entertainment to provide an easy comprehension of the world to students while they enjoy the visual and audio effects. Each topic concerns general knowledge of a child’s surroundings. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
|
||||
<div v-for="videobooks in vbworld" :key="vbworld.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="w-96 relative -rotate-6 rounded-tl-xl rounded-br-xl cursor-pointer" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 cursor-pointer" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div v-for="videobooks in wbfworld" :key="wbfworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="flex rounded-tl-xl rounded-br-xl bg-gray-200 rotate-6">
|
||||
<img class="-rotate-6 rounded-tl-xl rounded-br-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16" src="/img/svg/play.svg" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-4 w-fit">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</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">×</span>
|
||||
<div>
|
||||
<iframe width="380" height="320" :src="'https://www.youtube.com/embed/'+ytID"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</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,
|
||||
videobooks: null,
|
||||
vbworld: null,
|
||||
wsWorld: null,
|
||||
wbfworld: null,
|
||||
isLoading: true,
|
||||
ytModal:false,
|
||||
ytID:''
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbworld=videobooks.data
|
||||
// console.log(this.vbworld)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=world&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.wbfworld=videobooks.data
|
||||
// console.log(this.wbfworld)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="container-fluid bg3">
|
||||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col w-fit justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold">Videos<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px text-justify pt-8">It’s time to bring out the best among your toddlers with a blend of visual and audio effects! Present them a world filled with magnificent effects and make them learn enthusiastically with preschool learning videos filled with rhyming sounds, attractive effects, graphic images and cartoons, etc.</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<img class="w-fit h-fit" src="/img/videos1a.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl">
|
||||
<div class="flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col px-6 xl:pt-28">
|
||||
<h1 class="text-blue-700 hero-text font-bold xl:w-5/12">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px xl:w-8/12 text-justify">It’s time to bring out the best among your toddlers with a blend of visual and audio effects! Present them a world filled with magnificent effects and make them learn enthusiastically with preschool learning videos filled with rhyming sounds, attractive effects, graphic images and cartoons, etc.</p>
|
||||
<p class="font-20px xl:w-8/12 text-justify pt-4">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic.</p>
|
||||
</div>
|
||||
<div class="flex w-full justify-center place-items-center">
|
||||
<img class="w-full h-fit rounded-3xl py-4 cursor-none" src="/img/videos1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- <section class="container-fluid">
|
||||
<div class="relative"><img src="/img/header-worksheet.png" alt="">
|
||||
<div class="absolute inset-0 lg:inset-16">
|
||||
<h1 class="hero-text text-blue-700 font-bold p-6 2xl:p-24 lg:w-5/12">Videos <span class="text-color-1">For Your Classroom</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section>
|
||||
<!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">It’s time to bring out the best among your toddlers with a blend of visual and audio effects! Present them a world filled with magnificent effects and make them learn enthusiastically with preschool learning videos filled with rhyming sounds, attractive effects, graphic images and cartoons, etc. </p> -->
|
||||
<!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic. </p> -->
|
||||
<div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
|
||||
<div class="flex ">
|
||||
<h1 class="pt-3 font-semibold">Age: </h1>
|
||||
<select class="select max-w-xs bg3" @change="switchSelect($event)">
|
||||
<option value="2">Select Age</option>
|
||||
<option value="2">2-3 Year</option>
|
||||
<option value="3">3-4 Year</option>
|
||||
<option value="4">4-5 Year</option>
|
||||
<option value="5">5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container-fluid pt-10">
|
||||
<p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic.</p>
|
||||
</section>
|
||||
<!-- Literacy section -->
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Literacy</span>
|
||||
<p class="font-20px text-color-2 text-justify">Find preschool learning videos enriched with entertainment together with the fundamental topics concerned with literacy that will enlighten children in a playful manner. Get a mixture of videos of rhymes, alphabets, and much more.
|
||||
Learn with entertainment , fun videos, learning becomes easy, time saving learning, fun learning , educate and entertain, </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-10 gap-10 place-items-center px-4">
|
||||
<div v-for="videobooks in vbliteracy" :key="vbliteracy.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/video_thumb.png" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<a href="/videos/literacy" class="pt-8"><h1 class="w-fit text-lg text-white bg-blue-700 px-4 py-1 rounded-br-xl rounded-tl-xl">View All</h1> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Mathematics section -->
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Mathematics</span>
|
||||
<p class="font-20px text-color-2 text-justify">Learning becomes easy with videos for preschoolers by Teeny Beans Preschool Curriculum that assists in a stronger foundation in Mathematics to instill the accurate skills and knowledge among children and practice time saving learning. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="videobooks in vbmath" :key="vbmath.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/video_thumb.png" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<a href="/videos/mathematics" class="pt-8"><h1 class="w-fit text-lg text-white bg-blue-700 px-4 py-1 rounded-br-xl rounded-tl-xl">View All</h1> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Understanding the Worlds section -->
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Understanding the Worlds</span>
|
||||
<p class="font-20px text-color-2 text-justify">Our educational videos for preschoolers will bring a blend of education and entertainment to provide an easy comprehension of the world to students while they enjoy the visual and audio effects. Each topic concerns general knowledge of a child’s surroundings. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="videobooks in vbworld" :key="vbworld.id" class="grid">
|
||||
<div @click="showYtModal(videobooks.youtube_id)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" v-if="videobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ videobooks.img" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{videobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/video_thumb.png" alt=""/>
|
||||
<img class="absolute inset-24 lg:inset-16 left-36 lg:left-24 w-16 rotate-6" src="/img/svg/play.svg" alt="">
|
||||
</div>
|
||||
<a href="/videos/understanding-the-worlds" class="pt-8"><h1 class="w-fit text-lg text-white bg-blue-700 px-4 py-1 rounded-br-xl rounded-tl-xl">View All</h1> </a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex justify-center lg:-mt-16 rotate-6">
|
||||
<div class="grid place-items-center relative bg-gray-200 -rotate-6 rounded-tl-xl rounded-br-xl">
|
||||
<img class="opacity-50 w-96 rotate-6 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/video_thumb.png" alt=""/>
|
||||
<a href="video-world">
|
||||
<div class="absolute inset-24 left-28 md:inset-28 lg:inset-24 xl:inset-20">
|
||||
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ">View All</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- Others section -->
|
||||
<!-- <section class="container mx-auto pt-20 px-4">
|
||||
<span class="text-2xl md:text-4xl text-color-1 px-6">Literacy</span>
|
||||
<p class=" text-lg text-color-2 pt-6 text-base md:text-2xl px-6 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aut, explicabo velit saepe quas tenetur dolores tempore enim aspernatur magnam amet, laboriosam perferendis voluptatem. Dolorem neque esse sed minima blanditiis?</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-32 mt-32 place-items-center gap-32">
|
||||
<div v-for="worksheet in videobooks" :key="videobooks.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 ">{{ worksheet.title}}</h1>
|
||||
<button class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto py-20 px-4">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqVideos in faqVideos" :key="faqVideos.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
<div v-if="faqVideos" class="collapse-title md:text-xl ">+ {{ faqVideos.title }}</div>
|
||||
<div class="collapse-content md:text-lg">
|
||||
<p class="" v-html="faqVideos.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">×</span>
|
||||
<div>
|
||||
<iframe width="380" height="320" :src="'https://www.youtube.com/embed/'+ytID"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqVideos: null,
|
||||
videobooks: null,
|
||||
vbliteracy: null,
|
||||
vbmath: null,
|
||||
vbworld: null,
|
||||
isLoading: true,
|
||||
ytModal:false,
|
||||
ytID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// showYtModal(ytID){
|
||||
// this.ytModal=true
|
||||
// this.ytID=ytID
|
||||
// },
|
||||
// hideYtModal(){
|
||||
// this.ytModal=false
|
||||
// // this.ytID=ytID
|
||||
// },
|
||||
switchSelect(event) {
|
||||
// alert(event.target.value)
|
||||
this.getVideos(event.target.value)
|
||||
// this.selected = event.target.value;
|
||||
},
|
||||
getVideos(age=2){
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbliteracy=videobooks.data.reverse().slice(0, 3)
|
||||
console.log(this.vbliteracy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbmath=videobooks.data.reverse().slice(0, 3)
|
||||
// console.log(this.vbmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(videobooks => {
|
||||
this.vbworld=videobooks.data.reverse().slice(0, 3)
|
||||
// console.log(this.vbworld)
|
||||
})
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=videos')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqVideos=data.data
|
||||
// console.log(this.faqVideos)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
|
||||
.text-color-2 {
|
||||
color: #333333;
|
||||
}
|
||||
/* DROPDOWN MENU */
|
||||
.services {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown {
|
||||
z-index: 999;
|
||||
background-color: rgb(247, 235, 173);
|
||||
padding: 1em 0;
|
||||
position: absolute; /*WITH RESPECT TO PARENT*/
|
||||
display: none;
|
||||
border-radius: 8px;
|
||||
top: 35px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.dropdown li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dropdown li {
|
||||
padding: 0.5em 1em;
|
||||
width: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: rgb(250, 230, 133);
|
||||
color: #ff0000;
|
||||
}
|
||||
.services:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="">
|
||||
<section class="container-fluid bg3">
|
||||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col w-full justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold 2xl:w-10/12">Start Creating Weekly <span class="text-color-1">Lesson Plan</span></h1>
|
||||
</div>
|
||||
<div class="flex w-fit h-fit">
|
||||
<img class="w-fit h-fit" src="/img/lesson-plan1c.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<nav class="bg-white border-gray-200 py-2.5 rounded dark:bg-gray-900 bg3">
|
||||
<div class="container flex flex-wrap items-center justify-between mx-auto px-4 xl:px-24">
|
||||
<div class="w-full md:block md:w-auto" id="navbar-default container mx-auto">
|
||||
<ul class="flex bg3 flex-col p-4 mt-4 md:gap-20 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li><a href="/lesson-plan/dailyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Daily</p></a></li>
|
||||
<li><a href="/lesson-plan/weeklyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Weekly</p></a></li>
|
||||
<li><a href="/lesson-plan/monthlyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Monthly</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-16 place-items-center mb-32 gap-16 ">
|
||||
<div v-for="lessonplan in weeklyplan" :key="lessonplan.id">
|
||||
<div @click="showLpModal(lessonplan.file)">
|
||||
<!-- <div class="grid h-80 w-64 border-4 place-items-center">
|
||||
<router-link to=""><img class="" src="/img/svg/plus.svg" alt="">
|
||||
<h1 class="text-center">Add New Plan</h1></router-link></div> -->
|
||||
<div class="grid gap-4"><img class="w-96 h-6/6 cursor-pointer" v-if="lessonplan.lesson_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lessonplan.lesson_icon" alt=""/></div>
|
||||
</div>
|
||||
<!-- <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div>
|
||||
<div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Youtube Modal -->
|
||||
<div @click="hideLpModal" v-if="lpModal" id="lpModal" class="flex justify-center lpModal ">
|
||||
<div class="modal-content">
|
||||
<span @click="hideLpModal" class="close text-4xl font-bold cursor-pointer text-gray-200 border-2 rounded-full p-1">X</span>
|
||||
<div>
|
||||
<img width="540" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ file" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
lessonplan: null,
|
||||
weeklyplan: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
vbfliteracy: null,
|
||||
isLoading: true,
|
||||
lpModal:false,
|
||||
file:''
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLpModal(file){
|
||||
this.lpModal=true
|
||||
this.file=file
|
||||
},
|
||||
hideLpModal(){
|
||||
this.lpModal=false
|
||||
// this.ytID=ytID
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=weekly')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.weeklyplan=data.data
|
||||
// console.log(this.weeklyplan)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.lpModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 50px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
|
||||
.menu2 {
|
||||
color: #212325;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Worksheet</span>
|
||||
<p class=" text-lg text-color-2 text-base md:text-2xl text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
|
||||
<div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
|
||||
<div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8 "><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
worksheets: null,
|
||||
wsLiteracy: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
wsfLiteracy: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsLiteracy=worksheets.data.reverse().slice(0, 4)
|
||||
// console.log(this.wsLiteracy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsfLiteracy=worksheets.data.reverse().slice(5, 12)
|
||||
// console.log(this.wsfLiteracy)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Worksheet</span>
|
||||
<p class="font-20px text-color-2 text-justify">Gaining smooth apprehension over mathematics becomes easier with the accurate Mathematics worksheet for playgroup. Equip children with pre-maths skills at an early stage of their life and transcend them with the correct knowledge of numbers, number names, addition, etc. through Teeny Beans’ worksheet for preschoolers. </p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
|
||||
<div v-for="worksheet in wsmath" :key="wsmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
|
||||
<div v-for="worksheet in wsfmath" :key="wsfmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8 "><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
worksheets: null,
|
||||
wsmath: null,
|
||||
wsfmath: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsmath=worksheets.data.reverse().slice(0, 4)
|
||||
// console.log(this.wsmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsfmath=worksheets.data.reverse().slice(5, 12)
|
||||
// console.log(this.wsfmath)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div>
|
||||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
||||
<select class="select max-w-xs">
|
||||
<option>Select your Category</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
<option>6-7 Year</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">All Worksheet</span>
|
||||
<p class="font-20px text-color-2 pt-6 text-justify">In the era of increasing competition, it becomes more essential for every child to be equipped with general understanding of his/her surroundings, which is the why, our worksheet for preschoolers aim at every topic including this to enhance IQ of every child and providing an absolute overview and comprehension of topics like family, senses, body, myself and others. </p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center my-10 pt-10">
|
||||
<div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 relative">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
|
||||
<div v-for="worksheet in wsfWorld" :key="wsfWorld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
||||
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8 "><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
worksheets: null,
|
||||
wsLiteracy: null,
|
||||
wsMath: null,
|
||||
wsWorld: null,
|
||||
wsfWorld: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsWorld=worksheets.data.reverse().slice(0, 4)
|
||||
// console.log(this.wsWorld)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsfWorld=worksheets.data.reverse().slice(5, 12)
|
||||
// console.log(this.wsfWorld)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
<div class="flex flex-col w-fit justify-center">
|
||||
<h1 class="text-blue-700 hero-text font-bold">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px text-justify pt-8">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents.</p>
|
||||
<p class="font-20px text-justify pt-6">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<img class="w-fit h-fit" src="/img/worksheet1a.png" alt="">
|
||||
|
|
@ -13,6 +12,7 @@
|
|||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl">
|
||||
<div class="flex flex-col xl:flex-row">
|
||||
<div class="flex flex-col px-6 xl:pt-28">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<section class="container-fluid">
|
||||
<!-- <p class="font-20px text-color-2 text-justify py-4 container mx-auto px-4">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents. </p> -->
|
||||
<!-- <p class="font-20px text-color-2 text-justify container mx-auto px-4">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children. </p> -->
|
||||
<div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
|
||||
<div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-64 px-4 shadow-xl lg:gap-4">
|
||||
<div class="flex">
|
||||
<h1 class="pt-3 font-semibold ">Age: </h1>
|
||||
<select class="select max-w-xs bg3" @change="switchSelect($event)">
|
||||
|
|
@ -49,12 +49,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container-fluid pt-10">
|
||||
<p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
|
||||
</section>
|
||||
<div class="my-24"></div>
|
||||
<!-- Literacy section -->
|
||||
<section class="container mx-auto pt-10 px-6">
|
||||
<span class="h1-text text-color-1">Literacy</span>
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-blue-700 font-semibold">Literacy</span>
|
||||
<p class="font-20px text-color-2 text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
|
|
@ -64,19 +67,30 @@
|
|||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="pt-16 md:pt-0">
|
||||
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
|
||||
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
|
||||
<router-link to="literacy"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
|
||||
</div>
|
||||
</span>
|
||||
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
|
||||
<a href="/worksheets/literacy" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <span class="pt-16 md:pt-0">
|
||||
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
|
||||
<a href="literacy"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></a>
|
||||
</div>
|
||||
</span> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- Mathematics section -->
|
||||
<section class="container mx-auto px-6">
|
||||
<span class="h1-text text-color-1">Mathematics</span>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-blue-700 font-semibold">Mathematics</span>
|
||||
<p class="font-20px text-color-2 text-justify">Gaining smooth apprehension over mathematics becomes easier with the accurate Mathematics worksheet for playgroup. Equip children with pre-maths skills at an early stage of their life and transcend them with the correct knowledge of numbers, number names, addition, etc. through Teeny Beans’ worksheet for preschoolers. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="worksheet in wsMath" :key="wsMath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
|
|
@ -86,19 +100,22 @@
|
|||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="pt-16 md:pt-0">
|
||||
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
|
||||
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
|
||||
<router-link to="mathematics"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
|
||||
<a href="/worksheets/mathematics" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Understanding the Worlds section -->
|
||||
<section class="container mx-auto px-6">
|
||||
<span class="h1-text text-color-1">Understanding the Worlds</span>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-blue-700 font-semibold">Understanding the Worlds</span>
|
||||
<p class="font-20px text-color-2 text-justify">In the era of increasing competition, it becomes more essential for every child to be equipped with general understanding of his/her surroundings, which is the why, our worksheet for preschoolers aim at every topic including this to enhance IQ of every child and providing an absolute overview and comprehension of topics like family, senses, body, myself and others</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 my-16 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
|
|
@ -108,12 +125,15 @@
|
|||
<a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class=" bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="pt-16 md:pt-0">
|
||||
<div class="grid bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl -top-16">
|
||||
<img class="w-56 h-72 rotate-6 relative opacity-50 rounded-tl-xl rounded-br-xl shadow-xl" src="/img/rectangle1.png" alt=""/>
|
||||
<router-link to="world"><button class="absolute inset-y-32 left-16 h-fit bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg rotate-6">View All</button></router-link>
|
||||
<div class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
||||
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
|
||||
</div>
|
||||
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
|
||||
<a href="/worksheets/understanding-the-worlds" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Others section -->
|
||||
|
|
@ -135,7 +155,7 @@
|
|||
<section class="container mx-auto py-20 px-4 ">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqWorksheets in faqWorksheets" :key="faqWorksheets.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
|
|
@ -156,7 +176,7 @@
|
|||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -178,22 +198,22 @@ export default {
|
|||
// this.selected = event.target.value;
|
||||
},
|
||||
getWorksheets(age=2){
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&literacy&limit=4')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsLiteracy=worksheets.data
|
||||
this.wsLiteracy=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.wsLiteracy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics&limit=4')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsMath=worksheets.data
|
||||
this.wsMath=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.wsMath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world&limit=4')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.wsWorld=worksheets.data
|
||||
this.wsWorld=worksheets.data.reverse().slice(0, 3)
|
||||
// console.log(this.wsWorld)
|
||||
})
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=worksheets')
|
||||
|
|
@ -222,26 +242,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media (min-width: 640px)
|
||||
{.colume {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px)
|
||||
{.colume {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px)
|
||||
{.colume {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px)
|
||||
{.colume {
|
||||
grid-column: 5;
|
||||
}
|
||||
}
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
|
|
@ -252,6 +252,7 @@ export default {
|
|||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ 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" />
|
||||
|
|
@ -28,6 +29,8 @@ const { title } = Astro.props;
|
|||
|
||||
</html>
|
||||
<style is:global>
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@500&family=Quicksand:wght@500&display=swap');
|
||||
/* :root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import AudioBooks from "../../components/Audio-books.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<AudioBooks client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import AudioLiteracy from "../../components/Audio-literacy.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<AudioLiteracy client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import AudioMathematics from "../../components/Audio-mathematics.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<AudioMathematics client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import AudioWorlds from "../../components/Audio-worlds.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<AudioWorlds client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -1,564 +0,0 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Header from "../components/Header.vue";
|
||||
import Footer from "../components/Footer.vue";
|
||||
import Roundchart from "../components/Roundchart.vue";
|
||||
---
|
||||
<Layout title="Welcome to Teenybeans">
|
||||
<Menu/>
|
||||
<main>
|
||||
<div class="">
|
||||
<div>
|
||||
<!-- This Event is Round The Corner -->
|
||||
<section class="bg3 shadow-2xl container-fluid h-fit">
|
||||
<div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
|
||||
<div class="flex flex-col justify-center">
|
||||
<h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
|
||||
<h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
|
||||
<p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
|
||||
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
|
||||
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <router-link to="/educators#getintouch"><button>Speak with Us</button></router-link></div>
|
||||
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
|
||||
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 text-white shadow-2xl px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full justify-end place-items-end">
|
||||
<img class="h-fit " src="/img/homepage1c.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="grid w-full"><img class="w-full" src="/img/hero-banner1a.png" alt="">#f9f9b4</div> -->
|
||||
</section>
|
||||
<div class="container-fluid mt-16">
|
||||
<div class="container mx-auto px-4/ xl:px-24 font-20px text-justify">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world.</div>
|
||||
</div>
|
||||
<!-- <section class="container-fluid">
|
||||
<div class="flex w-screen load-wraper">
|
||||
<img class="relative w-screen" src="/img/homepage.jpg" alt="">
|
||||
<div class="absolute pl-4 xl:pl-32 xl:pt-40">
|
||||
<h1 class="text-color-1 hero-text font-bold">This Event is Round The Corner</h1>
|
||||
<h2 class="font-semibold text-color-2 text-base lg:text-3xl font-bold">Strat Planning Your Classroom Curriculum now</h2>
|
||||
<div class="grid grid-cols-7 md:text-base text-xs place-items-center py-2">
|
||||
<div class="rounded-tl-full rounded-br-full col-span-3 text-blue-700 font-semibold pr-4 pl-4 p-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <router-link to="/educators#getintouch"><button>Speak with Us</button></router-link></div>
|
||||
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
|
||||
<div class="rounded-tl-full rounded-br-full col-span-3 text-white font-semibold pr-4 pl-4 p-2 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><router-link to="/themes"><button>Check Out Event</button></router-link></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- <section class="container-fluid shadow-xl py-4">
|
||||
<div class="container mx-auto text-justify pt-6 px-4 font-20px ">
|
||||
<p class="text-color-2 ">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors. </p>
|
||||
<div class="my-4"></div>
|
||||
<p class="text-color-2">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world. </p>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
|
||||
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
|
||||
<img draggable="false" src="/img/plan.png" alt="">
|
||||
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
|
||||
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
|
||||
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
|
||||
<router-link to="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
|
||||
</div>
|
||||
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
|
||||
<img draggable="false" src="/img/report.png" alt="">
|
||||
<h1 class="text-3xl text-color-1 font-semibold py-2">Popular Curriculum</h1>
|
||||
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
|
||||
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
|
||||
<router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
|
||||
</div>
|
||||
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
|
||||
<img draggable="false" src="/img/classroom.png" alt="">
|
||||
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
|
||||
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
|
||||
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
|
||||
<router-link to="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
|
||||
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
|
||||
<img draggable="false" src="/img/popular.png" alt="">
|
||||
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1>
|
||||
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
|
||||
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
|
||||
<router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
|
||||
</div>
|
||||
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
|
||||
<img draggable="false" src="/img/event.png" alt="">
|
||||
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
|
||||
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
|
||||
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
|
||||
<router-link to="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="mt-16 px-4 font-20px pb-20 px-6">
|
||||
<p class="text-justify text-color-2">Enrich every learning experience with your preschool’s best performance through the right preschool curriculumsolutions that Teeny Beans provide. Embellish your early education institution and provide a higher standing to your play school.</p>
|
||||
<div class="mt-8"></div>
|
||||
<p class="text-justify text-color-2">Plan your play school curriculum with us and give the highest quality service and receive enormous enrollments in return. Your success has no bounds with the correct preschool curriculum provided by our right guidance and support.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
|
||||
<div class="grid grid-rows-1 md:grid-rows-2 place-items-center m-8 w-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
|
||||
<div class="grid"><router-link to="/audiobooks"><img draggable="false" src="/img/Audiobooks.png" alt=""></router-link></div>
|
||||
<div class="grid"><router-link to="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></router-link></div>
|
||||
<div class="grid"><router-link to="/videos"><img draggable="false" src="/img/Videos.png" alt=""></router-link></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
|
||||
<div class="grid"><router-link to="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></router-link></div>
|
||||
<div class="grid"><router-link to=""><img draggable="false" src="/img/Reference-Links.png" alt=""></router-link></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto mt-12 xl:px-24">
|
||||
<div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 ">
|
||||
<div class="grid row-span-1 h-fit px-4">
|
||||
<h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
|
||||
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
|
||||
<div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
|
||||
</div>
|
||||
<div class="grid row-span-2 place-items-center lg:place-items-end">
|
||||
<!-- <vueper-slides
|
||||
class="no-shadow w-96 px-14 md:px-0" arrows-outside
|
||||
:visible-slides="1"
|
||||
:bullets="false"
|
||||
slide-multiple
|
||||
:gap="1"
|
||||
:slide-ratio="3/3"
|
||||
:touchable="true"
|
||||
:dragging-distance="200"
|
||||
:breakpoints="{ 800: { visibleSlides: 1, } }">
|
||||
<vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
|
||||
</vueper-slides> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
|
||||
<div class="grid place-items-start p-10 h-fit">
|
||||
<p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
|
||||
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
|
||||
</div>
|
||||
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="container mx-auto">
|
||||
<div class="grid place-content-center text-color-1 text-2xl font-bold py-20"> EYFS Curriculum & Its Impact</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 px-4">
|
||||
<div class="grid text-sm md:text-base">
|
||||
<div class="text-justify text-color-2">
|
||||
<p class="py-8 ">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
|
||||
<p class="py-8">The <strong> play school curriculum</strong> will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS <strong> playschool curriculum</strong> is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
|
||||
<p class="py-8">The British <strong> kindergarten curriculum</strong> will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center">
|
||||
<img src="/img/legends.png" alt="" class="p-8 ">
|
||||
<img src="/img/Frame-184.png" alt="">
|
||||
<div class="grid text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</div>
|
||||
<p class="text-lg md:text-2xl text-color-2">Mentions are going to implemented Preschool Education System</p>
|
||||
<div><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">Discover All</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
|
||||
<h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
|
||||
<div class="grid">
|
||||
<div class="text-justify text-color-2">
|
||||
<p class="py-8 font-20px">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
|
||||
<p class="py-8 font-20px">The play school Curriculum will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS playschool curriculum is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
|
||||
<p class="py-8 font-20px">The British kindergarten curriculum will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid ">
|
||||
<img src="/img/legends.png" alt="" class="p-8">
|
||||
<div class="flex relative justify-center text-xs ">
|
||||
<Roundchart/>
|
||||
</div>
|
||||
<h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
|
||||
<p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
|
||||
<div class="pl-8"><button class="bg-blue-700 text-white px-6 py-2 rounded-tl-lg rounded-br-lg text-2xl">Discover All</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<div class="grid text-color-1 hero-text font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your Preschool
|
||||
<p class="text-xl text-center text-xl md:text-3xl text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid"><router-link to="/educators"><img src="/img/left-slid.png" alt=""></router-link></div>
|
||||
<div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<h1 class="hero-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
|
||||
<div class="grid background border0 rounded-xl shadow-xl">
|
||||
<div class="bottombar cursor-pointer">
|
||||
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
|
||||
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
|
||||
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid background border0 rounded-xl shadow-xl">
|
||||
<div class="bottombar cursor-pointer">
|
||||
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
|
||||
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
|
||||
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid background border0 rounded-xl shadow-xl">
|
||||
<div class="bottombar cursor-pointer">
|
||||
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
|
||||
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
|
||||
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid background border0 rounded-xl shadow-xl">
|
||||
<div class="bottombar cursor-pointer">
|
||||
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
|
||||
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
|
||||
<p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="container mx-auto py-20 px-4 xl:px-24">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqHome in faqHome" :key="faqHome.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
<div v-if="faqHome" class="collapse-title md:text-xl ">+ {{ faqHome.title }}</div>
|
||||
<div class="collapse-content md:text-lg">
|
||||
<p class="" v-html="faqHome.content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer/>
|
||||
</Layout>
|
||||
<!-- <script>
|
||||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqHome: null,
|
||||
themes:null,
|
||||
lessonplan:null,
|
||||
stories: null,
|
||||
ideas: null,
|
||||
worksheets: null,
|
||||
videos: null,
|
||||
youtube: null,
|
||||
audio: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.page[0].id)
|
||||
// return this.page[0].id
|
||||
}),
|
||||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.faqHome=data.data
|
||||
// console.log(this.faqHome)
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script> -->
|
||||
|
||||
<style scoped>
|
||||
.position {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
}
|
||||
@media screen and (min-width: 1500px) {
|
||||
.h2-text {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1499px) {
|
||||
.h2-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.h2-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
|
||||
.load-wraper{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(211,211,211);
|
||||
z-index: 44;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.activity{
|
||||
position: absolute;
|
||||
left: -45%;
|
||||
height: 100%;
|
||||
width: 45%;
|
||||
background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
|
||||
background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
|
||||
background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
|
||||
animation: loading 1s infinite;
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0%{
|
||||
left: -45%;
|
||||
}
|
||||
100%{
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
.literacy {
|
||||
transform: rotate(24deg);
|
||||
/* left: 24px; */
|
||||
top: 120px;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.comunication {
|
||||
transform: rotate(80deg);
|
||||
/* left: 360px; */
|
||||
top: 170px;
|
||||
}
|
||||
.mathematics {
|
||||
transform: rotate(-50deg);
|
||||
top: 373px;
|
||||
}
|
||||
.world {
|
||||
transform: rotate(-10deg);
|
||||
top: 420px;
|
||||
}
|
||||
.physical {
|
||||
transform: rotate(44deg);
|
||||
top: 340px;
|
||||
}
|
||||
.expressive {
|
||||
transform: rotate(-90deg);
|
||||
top: 225px;
|
||||
}
|
||||
.preschool {
|
||||
transform: rotate(-35deg);
|
||||
top: 95px;
|
||||
}
|
||||
.border0 {
|
||||
border-color: #F2F2F2;
|
||||
border-width: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.border0:hover {
|
||||
border-color: #FCFCFC;
|
||||
border-width: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.background {
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.background:hover {
|
||||
background-color: #FCFCFC;
|
||||
}
|
||||
/* # The Rotating Marker # */
|
||||
details summary::-webkit-details-marker { display: none; }
|
||||
summary::before {
|
||||
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
|
||||
content: "▶";
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 0.8rem;
|
||||
transform: rotate(0);
|
||||
transform-origin: center;
|
||||
transition: 0.2s transform ease;
|
||||
}
|
||||
details[open] > summary:before {
|
||||
transform: rotate(90deg);
|
||||
transition: 0.45s transform ease;
|
||||
}
|
||||
|
||||
/* # The Sliding Summary # */
|
||||
details { overflow: hidden; }
|
||||
details summary {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
@keyframes details-show {
|
||||
from {
|
||||
margin-bottom: -80%;
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
details > *:not(summary) {
|
||||
animation: details-show 500ms ease-in-out;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
details[open] > *:not(summary) { color: inherit; }
|
||||
|
||||
/* # Style 2 # */
|
||||
details.style2 summary::before {
|
||||
content: "×";
|
||||
font-size: 2rem;
|
||||
line-height: 1rem;
|
||||
transform: rotate(-45deg);
|
||||
top: 1.2rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
details[open].style2 > summary:before {
|
||||
transform: rotate(90deg);
|
||||
color: rgb(0, 0, 0) !important;
|
||||
transition: color ease 2s, transform ease 1s;
|
||||
}
|
||||
|
||||
/* # Style 3 # */
|
||||
|
||||
|
||||
details .moon-new { display: inline; }
|
||||
details .moon-full { display: none; }
|
||||
details[open] .moon-new { display: none; }
|
||||
details[open] .moon-full { display: inline; }
|
||||
details.style7 .content { background: #DDD; }
|
||||
|
||||
/* # Just Some Pretty Styles # */
|
||||
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
|
||||
img { max-width: 100%; }
|
||||
p { margin: 0; padding-bottom: 10px; }
|
||||
p:last-child { padding: 0; }
|
||||
details {
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
summary {
|
||||
border: 4px solid transparent;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
display: block;
|
||||
padding-left: 2.2rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
details[open] summary,
|
||||
summary:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
summary:hover strong,
|
||||
details[open] summary strong,
|
||||
summary:hover::before,
|
||||
details[open] summary::before {
|
||||
color: #1e293b;
|
||||
}
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
.bottombar {
|
||||
font-size: large;
|
||||
/* width: 42px; */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
/* position: fixed; */
|
||||
bottom: 12;
|
||||
line-clamp: 3;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bottombar:hover{
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
font-family: 'Quicksand';
|
||||
}
|
||||
|
||||
.text-color-2 {
|
||||
color: #333333;
|
||||
font-family: 'Quicksand';
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 18px;
|
||||
}
|
||||
.h1-text {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* @media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
} */
|
||||
@media screen and (min-width: 1500px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1499px) {
|
||||
.hero-text {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hero-text {
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +1,16 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Header from '../components/Header.vue';
|
||||
import Homepage from '../components/Homepage.vue';
|
||||
import Footer from '../components/Footer.vue';
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Header from "../components/Header.vue";
|
||||
import Footer from "../components/Footer.vue";
|
||||
import Roundchart from "../components/Roundchart.vue";
|
||||
import Homepage from "../components/Homepage.vue";
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<Header />
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community.❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Layout title="Welcome to Teenybeans">
|
||||
<Menu/>
|
||||
<Homepage client:visible/>
|
||||
<Footer/>
|
||||
</Layout>
|
||||
<script>
|
||||
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import Dailyplan from "../../components/Dailyplan.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<Dailyplan client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import Monthlyplan from "../../components/Monthlyplan.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<Monthlyplan client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import Weeklyplan from "../../components/Weeklyplan.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<Weeklyplan client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Footer from "../components/Footer.vue";
|
||||
import TestSwiper from "../components/TestSwiper.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<TestSwiper client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import Videos from "../../components/Videos.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<Videos client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import VideoLiteracy from "../../components/Video-literacy.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<VideoLiteracy client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import VideoMathematics from "../../components/Video-mathematics.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<VideoMathematics client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import VideoWorld from "../../components/Video-world.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<VideoWorld client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Header from "../../components/Header.vue";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import Worksheets from "../../components/Worksheets.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<Worksheets client:visible/>
|
||||
<Footer client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Header from "../../components/Header.vue";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import WorksheetsLiteracy from "../../components/Worksheets-literacy.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<WorksheetsLiteracy client:visible/>
|
||||
<Footer/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Header from "../../components/Header.vue";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import WorksheetsLiteracy from "../../components/Worksheets-mathematics.vue";
|
||||
import WorksheetsMathematics from "../../components/Worksheets-mathematics.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<WorksheetsMathematics client:visible/>
|
||||
<Footer/>
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Menu from "../../components/Menu.astro";
|
||||
import Header from "../../components/Header.vue";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
import WorksheetsWorld from "../../components/Worksheets-world.vue";
|
||||
---
|
||||
<Layout title="">
|
||||
<Menu/>
|
||||
<WorksheetsWorld client:visible/>
|
||||
<Footer/>
|
||||
</Layout>
|
||||
12
yarn.lock
12
yarn.lock
|
|
@ -3362,6 +3362,11 @@ sprintf-js@~1.0.2:
|
|||
resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
|
||||
integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
|
||||
|
||||
ssr-window@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
|
||||
integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
|
||||
|
||||
string-width@^4.1.0:
|
||||
version "4.2.3"
|
||||
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
|
||||
|
|
@ -3474,6 +3479,13 @@ svg-tags@^1.0.0:
|
|||
resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz"
|
||||
integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
|
||||
|
||||
swiper@^9.0.3:
|
||||
version "9.0.3"
|
||||
resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.0.3.tgz#9a8131b297c6cdc1957255ed7e1d4bdba584b0f0"
|
||||
integrity sha512-hHYI6CeUHcDyv6IakzAQrUv6nS5BMRn6KOkui16nhtdgYBlWgUdlaMbcdT0o4RJxpwSktCTLgpBtCm+WwwVYRw==
|
||||
dependencies:
|
||||
ssr-window "^4.0.2"
|
||||
|
||||
synckit@^0.8.4:
|
||||
version "0.8.4"
|
||||
resolved "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue