index-modal
Suvodip Ghosh
parent
374b1499a4
commit
736b1da167
|
|
@ -0,0 +1,138 @@
|
|||
|
||||
<template>
|
||||
<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>
|
||||
<button @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
|
||||
</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">Lesson Plans</h1>
|
||||
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
|
||||
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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</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>
|
||||
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content{
|
||||
background-color: aliceblue;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
|
||||
<template>
|
||||
<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>
|
||||
<button @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
|
||||
</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">Lesson Plans</h1>
|
||||
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
|
||||
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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</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>
|
||||
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content{
|
||||
background-color: aliceblue;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div>
|
||||
<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</h1>
|
||||
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">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>
|
||||
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More >></span>
|
||||
<a class="pt-2" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<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</h1>
|
||||
<p class="text-xl text-justify text-color-2 w-64">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
border-width: 5px;
|
||||
border-color: rgb(40, 99, 226);
|
||||
}
|
||||
.close {
|
||||
color: rgb(40, 99, 226);
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: rgb(40, 99, 226);
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
background-color: rgb(237, 240, 239);
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<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">Lesson Plans</h1>
|
||||
<p class="font-20px text-justify text-color-2 line-clamp-3">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
|
||||
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More >></span>
|
||||
<a class="pt-2" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<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">Lesson Plans</h1>
|
||||
<p class="text-xl text-justify text-color-2 w-64">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
border-width: 5px;
|
||||
border-color: rgb(40, 99, 226);
|
||||
}
|
||||
.close {
|
||||
color: rgb(40, 99, 226);
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: rgb(40, 99, 226);
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
background-color: rgb(237, 240, 239);
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<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 line-clamp-3">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
|
||||
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More >></span>
|
||||
<a class="pt-2" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<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="text-xl text-justify text-color-2 w-64">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
border-width: 5px;
|
||||
border-color: rgb(40, 99, 226);
|
||||
}
|
||||
.close {
|
||||
color: rgb(40, 99, 226);
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: rgb(40, 99, 226);
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
background-color: rgb(237, 240, 239);
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<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 line-clamp-3 xl:px-24">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
|
||||
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More >></span>
|
||||
<a class="pt-2" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<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="text-xl text-justify text-color-2 w-64">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
border-width: 5px;
|
||||
border-color: rgb(40, 99, 226);
|
||||
}
|
||||
.close {
|
||||
color: rgb(40, 99, 226);
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: rgb(40, 99, 226);
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
background-color: rgb(237, 240, 239);
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div>
|
||||
<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 line-clamp-3">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
|
||||
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More >></span>
|
||||
<a class="pt-2" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<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="text-xl text-justify text-color-2 w-64">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<div>
|
||||
Modal text Modal text Modal text<br> Modal text Modal text Modal text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
z-index: 999991;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
border-width: 5px;
|
||||
border-color: rgb(40, 99, 226);
|
||||
}
|
||||
.close {
|
||||
color: rgb(40, 99, 226);
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: rgb(40, 99, 226);
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
background-color: rgb(237, 240, 239);
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,11 @@ import Menu from "../components/Menu.astro";
|
|||
import SliderLessonplan from "../components/SliderLessonplan.vue";
|
||||
import HeroButton from "../components/HeroButton.vue";
|
||||
import Roundchart from "../components/Roundchart.vue";
|
||||
import ModalIndexWorksheet from "../components/ModalIndexWorksheet.vue";
|
||||
import ModalIndexLesson from "../components/ModalIndexLesson.vue";
|
||||
import ModalIndexThemes from "../components/ModalIndexThemes.vue";
|
||||
import ModalIndexEventIdeas from "../components/ModalIndexEventIdeas.vue";
|
||||
import ModalIndexVideos from "../components/ModalIndexVideos.vue";
|
||||
|
||||
const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
|
||||
const faqRespJson = await faqResp.json();
|
||||
|
|
@ -35,48 +40,29 @@ import Footer from "../components/Footer.vue";
|
|||
<div class="container-fluid mt-10">
|
||||
<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 mx-auto xl:px-24">
|
||||
<div 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>
|
||||
<!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
|
||||
<a target="_blank" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center">
|
||||
<div class="grid place-items-center">
|
||||
<ModalIndexWorksheet client:visible />
|
||||
</div>
|
||||
<div class="grid place-items-center">
|
||||
<ModalIndexLesson client:visible />
|
||||
</div>
|
||||
<div class="grid place-items-center">
|
||||
<ModalIndexThemes client:visible />
|
||||
</div>
|
||||
</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">Lesson Plans</h1>
|
||||
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
|
||||
<!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
|
||||
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
|
||||
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 text-center">
|
||||
<div class="grid place-items-center">
|
||||
<ModalIndexEventIdeas client:visible />
|
||||
</div>
|
||||
<div class="grid place-items-center">
|
||||
<ModalIndexVideos client:visible />
|
||||
</div>
|
||||
</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</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>
|
||||
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
|
||||
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</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>
|
||||
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
|
||||
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="container mx-auto xl:px-24">
|
||||
<div class="mt-10 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue