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

meta data

master
Suvodip Ghosh 2023-02-21 20:28:48 +05:30
parent feb6d0d9e9
commit c988711c4d
21 changed files with 424 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Administrators.vue
View File

@ -1,18 +1,17 @@
<template>
<div>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-4 w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Discover Solutions<span class="text-color-1 "> For Your Preschool</span></h1>
<p class="font-20px pt-8 text-justify">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods.</p>
<div class="pt-8"><button class="shadow-2xl text-lg px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
</div>
<!-- <button>Discover Now</button> -->
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src="/img/administrator1a.png" alt="">
</div>
</div>
</section>
</section> -->
<!-- <section class="container-fluid">
<div class="flex relative"><img class="w-screen" src="/img/header-administrator.jpg" alt="">
<div class="absolute pl-6 pt-4 xl:pl-40 2xl:pt-40">
@ -90,7 +89,7 @@
<div v-else>
Thank you, we will get back to you soon!
</div>
<div class="flex justify-center md:justify-end mt-3 px-4"><button class="bg-blue-700 text-2xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8" @click="saveMarketingSolutionsQry">Send Now</button></div>
<div class="flex justify-center md:justify-end mt-3 px-4"><button class="bg-blue-700 text-lg text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8" @click="saveMarketingSolutionsQry">Send Now</button></div>
</div>
</div>
</section>

152
src/components/AdministratorsHeroButton.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<div>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-4 w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Discover Solutions<span class="text-color-1 "> For Your Preschool</span></h1>
<p class="font-20px pt-8 text-justify">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods.</p>
<div @click="showAbModal('abModal')" class="pt-8"><button class="shadow-2xl text-lg px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
</div>
<!-- <button>Discover Now</button> -->
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src="/img/administrator1a.png" alt="">
</div>
</div>
</section>
<!-- <div @click="showAbModal('abModal')"> Show Modal</div> -->
<!-- Modal -->
<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="block p-6 shadow-lg bg-white border-2 2xl:w-96 text-xl" style="background-color: #f5f6d7;">
<p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="admname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input v-model="admemail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="admnumber" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
<textarea v-model="admdescription" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"></textarea>
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
abModal:false,
abID:'',
admname: null,
admemail: null,
admnumber: null,
BlogQry: true,
admdescription:null,
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
},
saveBlogQry(){
let formData = new FormData();
formData.append('Name', this.admname);
formData.append('Email', this.admemail);
formData.append('Phone', this.admnumber);
formData.append('Message', this.admdescription);
formData.append('formName', 'educators-reach-us');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.BlogQry=false
}
},
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: fit-content;
margin: 0 auto;
}
.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>

10
src/components/Audio-books.vue
View File

@ -32,7 +32,7 @@
<!-- <div class="my-24"></div> -->
<!-- Literacy section -->
<section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">Literacy</span>
<span class="h1-text text-blue-700 font-bold">Literacy</span>
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
@ -54,7 +54,7 @@
</div>
</section>
<!-- <section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">Literacy</span>
<span class="h1-text text-blue-700">Literacy</span>
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-14 gap-10 place-items-center">
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
@ -86,7 +86,7 @@
</section> -->
<!-- Mathematics section -->
<section class="container mx-auto px-4 xl:px-24">
<span class="h1-text text-color-1">Mathematics</span>
<span class="h1-text text-blue-700 font-bold">Mathematics</span>
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid">
@ -109,7 +109,7 @@
</section>
<!-- Understanding the Worlds section -->
<section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">Understanding the World</span>
<span class="h1-text text-blue-700 font-bold">Understanding the World</span>
<p class="font-20px text-color-2 text-justify">Increase the imaginative power of young creative minds of children, speaking skills and provide them a better comprehension of the world with the listening books for preschoolers in the subject ‘Understanding of the World’ where you get all concepts in the audio form. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
@ -149,7 +149,7 @@
<section class="container mx-auto py-20">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
<div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<h1 class="text-4xl py-6 text-blue-700 font-bold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqAudio in faqAudio" :key="faqAudio.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">

4
src/components/Educators.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="z-10">
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-6 w-full justify-center">
<h1 class="text-color-1 hero-text font-semibold w-full">Educate Conveniently by </h1>
@ -14,7 +14,7 @@
<img class="w-fit h-fit" src="/img/educators1e.png" alt="">
</div>
</div>
</section>
</section> -->
<section class="container mx-auto xl:px-24">
<h1 class="text-center text-color-1 hero-text font-semibold pt-24 ">Lesson Plans Curated for You</h1>
<p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan. </p>

153
src/components/EducatorsHeroButton.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
<div class="flex flex-col px-6 w-full justify-center">
<h1 class="text-color-1 hero-text font-semibold w-full">Educate Conveniently by </h1>
<span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span>
<p class="font-20px text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p>
<div class="grid md:text-base place-items-center py-2 w-fit pt-8">
<div @click="showAbModal('abModal')" class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-base font-semibold px-6 py-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Reach Us</button></div>
</div>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src="/img/educators1e.png" alt="">
</div>
</div>
</section>
<!-- <div @click="showAbModal('abModal')"> Show Modal</div> -->
<!-- Modal -->
<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="block p-6 shadow-lg bg-white border-2 2xl:w-96 text-xl" style="background-color: #f5f6d7;">
<p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="edrname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input v-model="edremail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="edrnumber" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
<textarea v-model="edrdescription" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"></textarea>
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
abModal:false,
abID:'',
edrname: null,
edremail: null,
edrnumber: null,
BlogQry: true,
edrdescription:null,
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
},
saveBlogQry(){
let formData = new FormData();
formData.append('Name', this.edrname);
formData.append('Email', this.edremail);
formData.append('Phone', this.edrnumber);
formData.append('Message', this.edrdescription);
formData.append('formName', 'educators-reach-us');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.BlogQry=false
}
},
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: fit-content;
margin: 0 auto;
}
.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>

8
src/components/EducatorsLicense.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<section class="container mx-auto ">
<h1 class="text-color-3 text-5xl text-center py-16">Educator's License</h1>
<section class="container mx-auto px-4 xl:px-24">
<h1 class="text-color-3 text-5xl text-center py-16 font-semibold">Educator's License</h1>
<div class="flex justify-center">
<div class="grid ">
<div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
@ -25,9 +25,9 @@
<input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
</div>
<div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
<div class="flex justify-center my-10"><button class="background text-white py-3 px-4 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
</section>
<section class="container mx-auto px-4 my-16">
<section class="container mx-auto px-4 xl:px-24 my-16">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
<div class="grid grid-rows-2 w-full ">
<div class="grid background place-items-center rounded-lg py-8">

11
src/components/Footer.vue
View File

@ -14,8 +14,8 @@
</div>
</div>
</div>
<div class="">
<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-2 text-sm back2 text-color-2 py-12">
<div class="container-fluid back2">
<div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-2 text-sm text-color-2 py-12">
<div class="grid grid-cols-1 ml-4 mt-6 px-10 text-justify"><a href="/"><img src="/img/tb-logo.png" alt="" class="w-72 h-28"></a> &nbsp; A non-franchise and
zero-royality based holistic solution for new and existing preschool franchise practitioners in the
space of early childhood education.</div>
@ -34,7 +34,7 @@
<a class="py-2" href="/videos">Videos</a>
<a class="py-2" href="/audio-books">Audiobooks</a>
<a class="py-2" href="/premium">Pricing Plans</a>
<a class="py-2" href="/whatsnew">What's New</a>
<a class="py-2" href="/whats-new">What's New</a>
</div>
</div>
<div class="grid grid-cols-1 mt-4 ml-4 font-bold text-sm h-fit "><h1 style="color: #414141"> Get in touch with Us</h1>
@ -131,11 +131,14 @@
</div>
</div>
</div>
<div class="flex md:flex-row flex-col bg-color-2 p-2 justify-between px-8">
<div class="container-fluid bg-color-2">
<div class="container mx-auto flex md:flex-row flex-col p-2 justify-between px-8">
<div class="flex">© 2021 Teeny Beans | All Rights Reserved</div>
<div class="flex">Terms & Conditions</div>
</div>
</div>
</div>
</template>
<style>
.text-color-2 {

52
src/components/HeroButton.vue
View File

@ -12,32 +12,32 @@
<span @click="hideAbModal" class="close">&times;</span>
<div>
<div class="block p-6 shadow-lg bg-white border-2 2xl:w-96 text-xl" style="background-color: #f5f6d7;">
<p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="indexname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input v-model="indexemail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="indexnumber" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
<textarea v-model="indexdescription" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"></textarea>
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
<p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="indexname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input v-model="indexemail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="indexnumber" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
<textarea v-model="indexdescription" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"></textarea>
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
</div>
</div>
</div>

31
src/components/Homepage.vue
View File

@ -485,7 +485,7 @@ details[open] summary {
background-color: #FCFCFC;
}
/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
/* details summary::-webkit-details-marker { display: none; }
summary::before {
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
content: "▶";
@ -501,12 +501,11 @@ details[open] summary {
transition: 0.45s transform ease;
}
/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
position: relative;
z-index: 10;
}
} */
@keyframes details-show {
from {
margin-bottom: -80%;
@ -514,18 +513,18 @@ details[open] summary {
transform: translateY(-100%);
}
}
details > *:not(summary) {
/* details > *:not(summary) {
animation: details-show 500ms ease-in-out;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
color: transparent;
overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }
} */
/* details[open] > *:not(summary) { color: inherit; } */
/* # Style 2 # */
details.style2 summary::before {
/* details.style2 summary::before {
content: "×";
font-size: 2rem;
line-height: 1rem;
@ -537,19 +536,19 @@ details[open] summary {
transform: rotate(90deg);
color: rgb(0, 0, 0) !important;
transition: color ease 2s, transform ease 1s;
}
} */
/* # Style 3 # */
details .moon-new { display: inline; }
/* details .moon-new { display: inline; }
details .moon-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }
details.style7 .content { background: #DDD; } */
/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
/* body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { margin: 0; padding-bottom: 10px; }
p:last-child { padding: 0; }
@ -558,8 +557,8 @@ details[open] summary {
box-sizing: border-box;
margin-top: 5px;
background: rgb(255, 255, 255);
}
summary {
} */
/* summary {
border: 4px solid transparent;
outline: none;
padding: 8px;
@ -567,8 +566,8 @@ details[open] summary {
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details[open] summary,
} */
/* details[open] summary,
summary:hover {
color: #1e293b;
}
@ -577,7 +576,7 @@ details[open] summary {
summary:hover::before,
details[open] summary::before {
color: #1e293b;
}
} */
.content {
padding: 10px;
}

2
src/components/Menu.astro
View File

@ -7,7 +7,7 @@
<div class="flex flex-col"></div>
<div class="flex place-items-center py-4 font-semibold">
<div class="navbar w-full">
<a href="/educators font-semibold">Educators</a>
<a href="/educators">Educators</a>
<a href="/administrators">Administrators</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop" style="font-family: quicksand;">Recources <span class="">v</span>

6
src/components/Videos.vue
View File

@ -50,7 +50,7 @@
</section>
<!-- Literacy section -->
<section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-color-1">Literacy</span>
<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">
@ -78,7 +78,7 @@
</section>
<!-- Mathematics section -->
<section class="container mx-auto px-4 xl:px-24">
<span class="h1-text text-color-1">Mathematics</span>
<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">
@ -105,7 +105,7 @@
</section>
<!-- Understanding the Worlds section -->
<section class="container mx-auto px-4 xl:px-24">
<span class="h1-text text-color-1">Understanding the Worlds</span>
<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">

14
src/components/WhatsNew.vue
View File

@ -2,13 +2,13 @@
<div>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto px-4 xl:px-24">
<div class="flex flex-col px-6 justify-center w-fit">
<h1 class="text-color-1 hero-text font-bold">What’s New In Preschool Education ?</h1>
<p class="font-20px text-justify">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones.</p>
</div>
<div class="flex w-full justify-center place-items-center">
<img class="w-full rounded-3xl" src="/img/whats_new1.png" alt="">
</div>
<div class="flex flex-col px-6 justify-center w-fit">
<h1 class="text-color-1 hero-text font-bold">What’s New In Preschool Education?</h1>
<p class="font-20px text-justify">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones.</p>
</div>
<div class="flex w-full justify-center place-items-center">
<img class="w-full rounded-3xl" src="/img/whats_new1.png" alt="">
</div>
</div>
</section>

15
src/layouts/Layout.astro
View File

@ -3,26 +3,29 @@ export interface Props {
title: string;
}
const { title } = Astro.props;
const { title,metaTitle, description,ogImg,schema } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml/ico" href="/tb-logo.ico" />
<meta name="generator" content={Astro.generator} />
<meta name="generator" content="siliconpin website builder" />
<meta name="title" content={metaTitle} />
<meta name="description" content={description} />
<title>{title}</title>
<meta property="og:image" content={ogImg}/>
</head>
<body class="body">
<style>
</style>
<slot/>
</style>
<slot/>
<div> {schema}</div>
</body>
</html>

4
src/pages/administrators.astro
View File

@ -1,13 +1,13 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import AdministratorsHeroButton from "../components/AdministratorsHeroButton.vue";
import Administrators from "../components/Administrators.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="">
<!-- <Header/> -->
<Menu/>
<AdministratorsHeroButton client:visible/>
<Administrators client:visible/>
<Footer client:visible/>
</Layout>

3
src/pages/blog/index.astro
View File

@ -7,8 +7,7 @@ import Blog from "../../components/Blog.vue";
import Footer from "../../components/Footer.vue";
---
<Layout title="Welcome to Astro.">
<Menu/>
<Layout title="" metaTitle="teenybeans title" description="description" ogImg="https://teenybeanspreschoolcurriculum.com/img/tb-logo.png" schema="" > <Menu/>
<BlogHeroSearch client:visible/>
<BlogFilter client:visible/>
<Blog client:visible/>

3
src/pages/educators.astro
View File

@ -1,12 +1,13 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.vue";
import Menu from "../components/Menu.astro";
import EducatorsHeroButton from "../components/EducatorsHeroButton.vue";
import Educators from "../components/Educators.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="Welcome">
<Menu clint:visible/>
<EducatorsHeroButton client:visible/>
<Educators client:visible/>
<Footer client:visible/>
</Layout>

2
src/pages/index.astro
View File

@ -384,7 +384,7 @@ import Footer from "../components/Footer.vue";
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
content: "▶";
position: absolute;
top: 1rem;
/* top: 1rem; */
left: 0.8rem;
transform: rotate(0);
transform-origin: center;

328
src/pages/occasion/[id].astro
View File

@ -1,328 +0,0 @@
---
import Layout from "../../layouts/Layout.astro";
import Menu from "../../components/Menu.astro";
const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?filter[status][_eq]=published');
const data = await response.json();
const occassion = data.data;
const thisOccasionID = data.data[0].id;
const blogResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[category][_eq]=occassions&filter[property][_eq]=teenybeans_curriculum');
const blogRespJson = await blogResp.json();
const blogRespData = blogRespJson.data.reverse().slice(0, 3);
const csResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + thisOccasionID);
const csRespJson = await csResp.json();
const csRespData = csRespJson.data.reverse().slice(0, 4);
const wkstResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_worksheets?filter[occassion_key][_in]=' + thisOccasionID);
const wkstRespJson = await wkstResp.json();
const wkstRespData = wkstRespJson.data.reverse().slice(0, 3);
const wkstRespData2 = wkstRespJson.data[3];
import OccassionVideo from "../../components/OccassionVideo.vue";
import OccasionAudioBook from "../../components/OccasionAudioBook.vue";
const ytResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_youtube_videos?filter[occassion_key][_in]=' + thisOccasionID);
const ytRespJson = await ytResp.json();
const ytRespData = ytRespJson.data;
const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=occassion');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
import SubmitCelebration from "../../components/SubmitCelebration.vue";
import Footer from "../../components/Footer.vue";
---
<Layout title="TeenyBeans Occassion">
<Menu/>
<main>
<!-- hero section -->
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
<div class="flex flex-col w-full justify-center">
<div >
<h1 class="text-blue-700 hero-text font-bold">Occasion Based Resources <br> <span class="text-color-1" >{occassion[0].occasson_title}</span></h1>
<div class="flex h2-text text-color-1 font-semibold pt-8">{occassion[0].occassion_text }</div>
<div class="flex text-justify font-20px text-color-2 pt-4">{occassion[0].occassion_details }</div>
</div>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[0].occassion} alt={occassion[0].occassion_text }>
</div>
</div>
</section> <!-- hero section Ends -->
<section class="container mx-auto px-2 xl:px-24 pt-24">
<h1 class=" text-blue-700 h1-text px-4 font-semibold">Check Out Our Occasion Blog</h1>
<p class="text-justify text-xl lg:text-3xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
{blogRespData.map((data) =>
<div class="grid w-fit" >
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="occassionblog.img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img+'?width=420&amp;height=280'} alt="" >
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{ data.date}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4 line-clamp-2">{ data.title}</h2>
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4 line-clamp-4" set:html="data.meta_description"></div>
<a href={'/blog/' + data.slug} class="text-blue-600 font-20px px-4">Read More &gt;&gt;</a>
</div>
)}
</div>
<a href="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div>
</a>
</section>
<!-- Worksheets Section -->
<section class="container mx-auto xl:px-24 p-4 py-14">
<div class="h1-text text-blue-700 font-semibold">Worksheets</div>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{occassion[0].worksheets_text}</h1>
<div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-0">
{wkstRespData.map((data) =>
<div class="flex relative p-4">
<img v-if="wkst.occassion_worksheets_img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.occassion_worksheets_img} alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
<div v-if="wkst.file" class="absolute bottom-10 left-28">
<a href={'https://curriculum-app-api.beanstalkedu.com/assets/'+ data.file+'?download'}>
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> Download </h3>
</a>
</div>
</div>
)}
<a href="/plan">
<div class="p-4">
<div class="flex relative">
<img v-if="wkst.occassion_worksheets_img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+ wkstRespData2.occassion_worksheets_img} alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
<div class="absolute top-40 left-24">
<h3 class="text-center inline-block px-6 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> + Subscribe </h3>
<h3 class=""> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
</a>
</div>
</section>
<OccassionVideo client:visible/>
<OccasionAudioBook client:visible/>
<!-- Celebration Stories -->
<section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{occassion[0].celebretion_stories_text}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 py-10 px-4 gap-12">
{csRespData.map((data) =>
<div class="flex bg-gray-200 rotate-6 rounded-tl-lg rounded-br-lg">
<div class="flex -rotate-6 relative"><img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{data.title}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-4">{data.text}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry &#62;&#62; </a></span>
</div>
</div>
)}
</div>
</section>
<SubmitCelebration client:visible/>
<section class="container mx-auto px-4 xl:px-24">
<div class="h1-text text-blue-700 font-semibold pt-16 ">YouTube Videos for your reference </div>
<h1 class="text-2xl text-justify text-color-2 py-4">{occassion[0].youtube_text}</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">
{ytRespData.map((data) =>
<div class="p-2">
<a href={'https://www.youtube.com/watch?v='+data.youtube_id}>
<div>
<img class="rounded-tl-xl rounded-br-xl" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+ data.youtube_thumbnail} alt="">
<div class="text-center text-xl line-clamp-1 text-color-2 pt-4" >{data.about_the_video}</div>
</div>
</a>
</div>
)}
</div>
</section>
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<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>
{faqRespData.map((data) =>
<details>
<summary>
<div class="flex inline-flex cursor-pointer"> {data.title}</div>
</summary>
<div set:html="data.content"></div>
</details>
)}
</div>
<div class="grid place-items-center">
<img src="/img/frequently.png" alt="">
</div>
</div>
</section>
</main>
<Footer/>
</Layout>
<style scopped>
.line-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .75em 0;
font-size: 17px;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .75em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px;
}
.font-20px {
font-size: 20px;
}
@media screen and (min-width: 1500px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 1499px) {
.hero-text {
font-size: 40px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 30px;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (min-width: 1500px) {
.h2-text {
font-size: 30px;
}
}
@media screen and (max-width: 1499px) {
.h2-text {
font-size: 24px;
}
}
@media screen and (max-width: 1199px) {
.h2-text {
font-size: 20px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 30px;
}
}
.load-wraper{
position: relative;
height: 100%;
width: 100%;
background-color: rgb(211,211,211);
z-index: 44;
overflow: hidden;
border-radius: 5px;
}
.activity{
position: absolute;
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
animation: loading 1s infinite;
z-index: 45;
}
@keyframes loading {
0%{
left: -45%;
}
100%{
left: 100%;
}
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
.box{
width: 380px;
height: 220px;
}
.box1 {
width: 500px;
height: 220px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
.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);
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
</style>

50
src/pages/occasion/index.astro
View File

@ -28,6 +28,10 @@ const ytResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/oc
const ytRespJson = await ytResp.json();
const ytRespData = ytRespJson.data;
const cbsResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[category][_eq]=celebration_stories&filter[property][_eq]=teenybeans_curriculum');
const cbsRespJson = await cbsResp.json();
const cbsRespData = cbsRespJson.data.reverse().slice(0, 3);
const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=occassion&filter[property][_eq]=teenybeans_curriculum');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
@ -60,19 +64,17 @@ import Footer from "../../components/Footer.vue";
{blogRespData.map((data: { title: string | undefined; date: string | undefined; slug: string | undefined; img: string | undefined; }) =>
<div class="grid w-fit" >
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="occassionblog.img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img+'?width=420&amp;height=280'} alt="" >
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{ data.date}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4 line-clamp-2">{ data.title}</h2>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} style="width:100%; height: 205px;" alt="" >
<div class="flex bg-yellow-200 absolute mt-32 lg:mt-36 ml-8 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full place-items-center text-center p-1">{ data.date}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4 line-clamp-2 ">{ data.title}</h2>
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4 line-clamp-4" set:html="data.meta_description"></div>
<a href={'/blog/' + data.slug} class="text-blue-600 font-20px px-4">Read More &gt;&gt;</a>
<a href={'/blog/' + data.slug} class="text-blue-600 font-20px px-4">Read More &gt;&gt;</a>
</div>
)}
</div>
<a href="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div>
</a>
</section>
@ -83,8 +85,8 @@ import Footer from "../../components/Footer.vue";
<div v-if="worksheets" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-0">
{wkstRespData.map((data: { occassion_worksheets_img: string | undefined; file: string | undefined; }) =>
<div class="flex relative p-4">
<img v-if="wkst.occassion_worksheets_img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.occassion_worksheets_img} alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
<div v-if="wkst.file" class="absolute bottom-10 left-28">
<img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.occassion_worksheets_img} alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
<div class="absolute bottom-10 left-28">
<a href={'https://curriculum-app-api.beanstalkedu.com/assets/'+ data.file+'?download'}>
<h3 class="text-center inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-blue-400 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> Download </h3>
</a>
@ -108,20 +110,26 @@ import Footer from "../../components/Footer.vue";
<OccasionAudioBook client:visible/>
<!-- Celebration Stories -->
<section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
<section class="container mx-auto px-2 xl:px-24 pt-24">
<h1 class="text-blue-700 h1-text px-4 font-semibold">Celebration Stories</h1>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{occassion[0].celebretion_stories_text}</h1>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 py-10 px-4 gap-12">
{csRespData.map((data: { img: string | undefined; title: string | undefined; text: string | undefined; }) =>
<div class="flex bg-gray-200 rotate-6 rounded-tl-lg rounded-br-lg">
<div class="flex -rotate-6 relative"><img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{data.title}</div>
<p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-4">{data.text}</p>
<span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="/blog" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry &#62;&#62; </a></span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-0 place-items-center">
{cbsRespData.map((data: { title: string | undefined; date: string | undefined; slug: string | undefined; img: string | undefined; }) =>
<div class="grid w-fit" >
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} style="width:100%; height: 205px;" alt="" >
<div class="flex bg-yellow-200 absolute mt-32 lg:mt-36 ml-8 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full place-items-center text-center p-1">{ data.date}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4 line-clamp-2 ">{ data.title}</h2>
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4 line-clamp-4" set:html="data.meta_description"></div>
<a href={'/blog/' + data.slug} class="text-blue-600 font-20px px-4">Read More &gt;&gt;</a>
</div>
)}
</div>
<a href="/blog">
<div class="flex justify-center mt-8">
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
</div>
</a>
</section>
<SubmitCelebration client:visible/>
<section class="container mx-auto px-4 xl:px-24">
@ -164,7 +172,7 @@ import Footer from "../../components/Footer.vue";
<style >
.line-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

2
src/pages/themes/index.astro
View File

@ -40,7 +40,7 @@ const faq = faqdata.data;
import Footer from "../../components/Footer.vue";
---
<Layout title="">
<Layout title="" metaTitle="metaTitle" description="description" ogImg="https://teenybeanspreschoolcurriculum.com/img/tb-logo.png" schema="" >
<Menu clint:visible/>
<main>
<div>

3
src/pages/whats-new.astro
View File

@ -1,12 +1,11 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Header from "../components/Header.vue";
import WhatsNew from "../components/WhatsNew.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="">
<Menu clint:visible/>
<WhatsNew client:visible/>
<Footer client:visible/>
</Layout>