350 lines
18 KiB
Vue
350 lines
18 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">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>
|
||
<!-- Age Filter Triger -->
|
||
<!-- <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-blue-700 font-bold">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-blue-700 font-bold">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-blue-700 font-bold">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[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[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[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> |