321 lines
18 KiB
Vue
321 lines
18 KiB
Vue
<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">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>
|
||
</div>
|
||
<div class="flex">
|
||
<img class="w-fit h-fit" src="/img/worksheet1a.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">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 xl:w-8/12 text-justify pt-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>
|
||
<div class="flex w-full justify-center place-items-center">
|
||
<img class="w-full h-fit rounded-3xl py-4 cursor-none" src="/img/worksheet1.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">Worksheet <span class="text-color-1">For Your Classroom</span></h1>
|
||
</div>
|
||
</div>
|
||
</section> -->
|
||
<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-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)">
|
||
<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">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-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-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">
|
||
<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 font-20px">{{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 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||
</div>
|
||
</div>
|
||
<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/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-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-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">
|
||
<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 font-20px">{{ 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 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</section>
|
||
<!-- Understanding the Worlds section -->
|
||
<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-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">
|
||
<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 h-4 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
</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 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 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">
|
||
<div v-if="faqWorksheets" class="collapse-title md:text-xl ">+ {{ faqWorksheets.title }}</div>
|
||
<div class="collapse-content md:text-lg">
|
||
<p class="" v-html="faqWorksheets.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(){
|
||
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
page: null,
|
||
faqWorksheets: null,
|
||
worksheets: null,
|
||
wsLiteracy: null,
|
||
wsMath: null,
|
||
wsWorld: null,
|
||
isLoading: true,
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
switchSelect(event) {
|
||
// alert(event.target.value)
|
||
this.getWorksheets(event.target.value)
|
||
// this.selected = event.target.value;
|
||
},
|
||
getWorksheets(age=2){
|
||
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.reverse().slice(0, 3)
|
||
// console.log(this.wsLiteracy)
|
||
})
|
||
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.reverse().slice(0, 3)
|
||
// console.log(this.wsMath)
|
||
})
|
||
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.reverse().slice(0, 3)
|
||
// console.log(this.wsWorld)
|
||
})
|
||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=worksheets')
|
||
.then(resp => resp.json())
|
||
.then(data => {
|
||
this.faqWorksheets=data.data
|
||
// console.log(this.faqWorksheets)
|
||
})
|
||
|
||
// fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?limit=3')
|
||
// .then(resp => resp.json())
|
||
// .then(worksheets => {
|
||
// this.worksheets=worksheets.data
|
||
// // console.log(this.Main_Menu)
|
||
// this.wsLiteracy= this.worksheets.filter(item => { if (item.Category == "literacy") return item });
|
||
// this.wsMath = this.worksheets.filter(item => { if (item.Category == "mathematics") return item });
|
||
// this.wsWorld = this.worksheets.filter(item => { if (item.Category == "world") return item });
|
||
// console.log(this.worksheets)
|
||
// })
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.getWorksheets()
|
||
}
|
||
}
|
||
</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> |