352 lines
16 KiB
Vue
352 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<section class="container-fluid bg3 shadow-2xl">
|
||
<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>
|
||
Age Filter Triger
|
||
<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-blue-700 font-bold">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-16 gap-10 place-items-center px-4">
|
||
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
|
||
<div @click="showAbModal(audiobooks.file)">
|
||
<div class="grid place-items-center">
|
||
<div class=" ">
|
||
<img class="w-56" v-if="audiobooks.img" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||
</div>
|
||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||
</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>
|
||
<!-- <section class="container mx-auto pt-10 px-4 xl:px-24">
|
||
<span class="h1-text text-blue-700">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://management.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://management.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-blue-700 font-bold">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-16 gap-10 place-items-center px-4">
|
||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid">
|
||
<div @click="showAbModal(audiobooks.file)">
|
||
<div class="grid place-items-center">
|
||
<div class=" ">
|
||
<img class="w-56" v-if="audiobooks.img" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||
</div>
|
||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||
</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>
|
||
<!-- Understanding the Worlds section -->
|
||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||
<span class="h1-text text-blue-700 font-bold">Understanding the World</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 px-4">
|
||
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
|
||
<div @click="showAbModal(audiobooks.file)">
|
||
<div class="grid place-items-center">
|
||
<div class=" ">
|
||
<img class="w-56" v-if="audiobooks.img" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||
</div>
|
||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||
</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>
|
||
<!-- 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://management.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-bold">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 v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||
<div class="modal-content" @click="doNothing()">
|
||
<span @click="hideAbModal" class="close">×</span>
|
||
<audio controls>
|
||
<source :src="'https://management.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
abModal:false,
|
||
abliteracy:null,
|
||
abworld:null,
|
||
abmath:null,
|
||
abID:''
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
showAbModal(abID){
|
||
this.abModal=true
|
||
this.abID=abID
|
||
// alert(abID)
|
||
},
|
||
hideAbModal(){
|
||
this.abModal=false
|
||
// // this.abID=abID
|
||
},
|
||
doNothing(){
|
||
// alert();
|
||
}
|
||
|
||
},
|
||
mounted: function () {
|
||
// this.getVideos()
|
||
fetch('https://management.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
|
||
.then(resp => resp.json())
|
||
.then(worksheets => {
|
||
this.abliteracy=worksheets.data.reverse().slice(0, 3)
|
||
// console.log(this.abliteracy)
|
||
})
|
||
fetch('https://management.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics')
|
||
.then(resp => resp.json())
|
||
.then(worksheets => {
|
||
this.abmath=worksheets.data.reverse().slice(0, 3)
|
||
// console.log(this.abmath)
|
||
})
|
||
fetch('https://management.beanstalkedu.com/items/audio_books?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)
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.abModal {
|
||
/* display: none; */
|
||
position: fixed;
|
||
z-index: 999991;
|
||
padding-top: 100px;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgb(0,0,0);
|
||
background-color: rgba(0,0,0,0.4);
|
||
}
|
||
.modal-content{
|
||
background-color: rgb(255, 255, 255);
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: fit-content;
|
||
height: fit-content;
|
||
margin: 0 auto;
|
||
border-radius: 16px;
|
||
}
|
||
.close {
|
||
display: flex;
|
||
place-items: center;
|
||
color: #aaaaaa;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close:hover,
|
||
.close:focus {
|
||
color: #000;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
.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> |