dwd-projects
/
teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index-modal

master
Suvodip Ghosh 2023-02-22 11:47:28 +05:30
parent 374b1499a4
commit 736b1da167
8 changed files with 899 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/ModalIndex copy 2.vue Normal file
View File

@ -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">&times;</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">&times;</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>

138
src/components/ModalIndex.vue Normal file
View File

@ -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">&times;</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">&times;</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>

119
src/components/ModalIndexEventIdeas.vue Normal file
View File

@ -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 &gt;&gt;</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">&times;</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">&times;</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>

120
src/components/ModalIndexLesson.vue Normal file
View File

@ -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 &gt;&gt;</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">&times;</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">&times;</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>

120
src/components/ModalIndexThemes.vue Normal file
View File

@ -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 &gt;&gt;</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">&times;</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">&times;</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>

120
src/components/ModalIndexVideos.vue Normal file
View File

@ -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 &gt;&gt;</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">&times;</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">&times;</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>

120
src/components/ModalIndexWorksheet.vue Normal file
View File

@ -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 &gt;&gt;</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">&times;</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">&times;</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>

52
src/pages/index.astro
View File

@ -4,6 +4,11 @@ import Menu from "../components/Menu.astro";
import SliderLessonplan from "../components/SliderLessonplan.vue"; import SliderLessonplan from "../components/SliderLessonplan.vue";
import HeroButton from "../components/HeroButton.vue"; import HeroButton from "../components/HeroButton.vue";
import Roundchart from "../components/Roundchart.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 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(); const faqRespJson = await faqResp.json();
@ -35,48 +40,29 @@ import Footer from "../components/Footer.vue";
<div class="container-fluid mt-10"> <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 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> </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="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 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"> <div class="grid place-items-center">
<img draggable="false" src="/img/plan.png" alt=""> <ModalIndexWorksheet client:visible />
<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> </div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit"> <div class="grid place-items-center">
<img draggable="false" src="/img/report.png" alt=""> <ModalIndexLesson client:visible />
<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>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit"> <div class="grid place-items-center">
<img draggable="false" src="/img/classroom.png" alt=""> <ModalIndexThemes client:visible />
<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> </div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12"> <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 text-center">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit"> <div class="grid place-items-center">
<img draggable="false" src="/img/popular.png" alt=""> <ModalIndexEventIdeas client:visible />
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1> </div>
<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> <div class="grid place-items-center">
<!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> --> <ModalIndexVideos client:visible />
<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> </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>
</div> </div>
</section>
<section class="container mx-auto xl:px-24"> <section class="container mx-auto xl:px-24">
<div class="mt-10 px-4 font-20px pb-20 px-6"> <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> <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>