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

u

Browse Source
This commit is contained in:
dev sp
2023-01-18 11:14:29 +00:00
parent c0460334ef
commit 4032087bfb
137 changed files with 4979 additions and 2879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
src/components/Administrators.vue Normal file
View File

@@ -0,0 +1,373 @@
<template>
<div>
<section class="container-fluid">
<div class="text-blue-700 text-3xl md:text-6xl bg-gradient-to-t from-blue-200 pt-28 pb-28 md:pl-48 text-center md:text-start">Discover Solutions <br>
<span class="text-color-1">For Your Preschool</span>
</div>
</section>
<section class="container-fluid shadow-xl">
<p class="container mx-auto text-2xl text-justify p-6">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>
</section>
<section class="container mx-auto px-6" >
<h1 class="text-center text-3xl md:text-4xl pt-28 text-color-1">Marketing Solutions</h1>
<h2 class="text-center text-2xl pt-8 text-color-2">Preschool Marketing Solutions</h2>
<p class="text-justify text-xl pt-2 text-color-2">Want to increase your enrollments and profit? Why don’t you try the most efficacious and lucrative methods that have been tested and tried by us and our partners? </p>
<p class="text-justify text-xl pt-2 text-color-2">We are here with our professionals to serve you the best experience and tell you the techniques that actually help in boosting admissions! Our preschool marketing solutions have been made specifically for your preschool’s growth. </p>
</section>
<section>
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 md:text-xl pt-10">
<div class="grid grid-rows-3 md:text-left px-8">
<h1 class="p-2">Social Media Advertisement </h1>
<h1 class="p-2">FAQ Webinars</h1>
<h1 class="p-2">Video Marketing </h1>
</div>
<div class="grid grid-rows-2 md:text-center px-8">
<h1 class="p-2">Virtual Tour</h1>
<h1 class="p-2">Instant Message Marketing</h1>
</div>
<div class="grid grid-rows-3 md:text-right px-8">
<h1 class="p-2">SEO (Search Engine Optimization)</h1>
<h1 class="p-2">E-mail Marketing</h1>
<h1 class="p-2">Audio Marketing</h1>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Check Out Our Marketing Blog</div>
<p class="text-center text-xl pt-2 text-color-2">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">
<div class="grid w-fit" v-for="marketing in marketing" :key="marketing">
<img class="w-full rounded-tl-3xl rounded-br-3xl" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-64 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div>
<h2 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ marketing.title}}</h2>
<div class="text-lg text-justify line-clamp-3 font-light text-color-2" v-html="marketing.preview_text"></div>
<a :href="'/blog/' + marketing.slug" class="text-blue-600 ">Read More >> </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>
<section class="container mx-auto px-4 my-32">
<div class="grid bg-amber-100 grid-cols-1 lg:grid-cols-2">
<div class="grid place-items-center "><img class="w-96 h-88 rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/person4.png" alt=""/></div>
<div class="grid px-4 w-fit">
<div class="text-blue-700 text-2xl lg:text-5xl pt-16">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
<h3 class="text-sm lg:text-2xl py-4 text-color-2">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3>
<form class="" v-if="MarketingSolutionsQry">
<div class="flex flex-wrap mb-6 md:mb-0">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full text-gray-700 border border-gray-400 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="name" type="text" placeholder="Your Name">
</div>
<div class="w-full md:w-1/2 px-3">
<input class="appearance-none block w-full text-gray-700 border border-gray-400 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="phone" type="text" placeholder="Your Phone No.">
</div>
</div>
<div class="form-control px-3">
<textarea class="w-full textarea textarea-bordered border box text-lg h-40 focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea>
</div>
</form>
<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 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" @click="saveMarketingSolutionsQry">Send Now</button></div>
</div>
</div>
<h1 class="text-color-1 text-3xl text-center mt-8">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
<p class="text-justify text-xl pt-2 text-color-2">Smoothen your daily preschool management process with the administration preschool solutions provided by us. Minimize the troubles and save your efforts, time and ideas for the most essential tasks, while we guide and support in fulfillment of your administrative tasks.
With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
<h1 class="text-color-1 text-3xl text-center mt-16">Our Solutions Help You in Adminstrating your Preschool</h1>
<p class="text-justify text-xl pt-2 text-color-2">Teeny Beans Preschool Curriculum offers a blend of all types of preschool solutions that you must need to fulfill your preschool’s daily needs. Whether it is marketing, operations or technology, we have covered it all for you! </p>
<h1 class="text-color-1 text-3xl text-center my-16">Technology Solution For Preschool</h1>
<p class="text-justify text-xl pt-2 text-color-2">Escalate your playschool’s growth with the technological preschool solution that offers administration with digitization! Accuracy, effectiveness and newer ways of management comes true with our efficacious solution curated for your preschool’s needs. Find the fundamental technology solutions for your preschool below and raise your growth seamlessly. </p>
</section>
<section>
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 md:place-items-center text-blue-700 md:text-xl pt-10">
<div class="grid grid-rows-3 md:text-left px-8">
<h1 class="p-2">Digital Books</h1>
<h1 class="p-2">Blockchain Technology</h1>
<h1 class="p-2">Artificial Inteligence</h1>
</div>
<div class="grid grid-rows-2 md:text-center px-8">
<h1 class="p-2">Multi Sensory Classrooms</h1>
<h1 class="p-2">VR and AR</h1>
<h1 class="p-2">Attendance & Progress Tracking</h1>
</div>
<div class="grid grid-rows-3 md:text-right px-8">
<h1 class="p-2">Remote Learning</h1>
<h1 class="p-2">Intractive Gamification</h1>
<h1 class="p-2">Staff Management</h1>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Check Out Our Adminstration Blog</div>
<p class="text-center text-xl pt-2 text-color-2">Read the most suitable administration preschool solutions and be familiar with all necessary information for your management decisions. </p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
<div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration">
<img class="w-full rounded-tl-3xl rounded-br-3xl" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
<h1 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ adminstration.title}}</h1>
<div class="text-lg text-justify line-clamp-3 font-light w-96 text-color-2" v-html="adminstration.preview_text"></div>
<a :href="'/blog/' + adminstration.slug" class="text-blue-600 "> Read More >> </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>
<section class="container mx-auto">
<div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6">
<div class="grid"></div>
<div class="grid text-2xl lg:text-3xl text-blue-700 pt-16">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
<p class="text-base lg:text-2xl py-2 text-color-2 pr-6 ">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p>
<div class="flex justify-start mt-2 pb-20">
<button class="bg-blue-700 p-1 text-lg text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Know More</button>
</div>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="grid md:grid-cols-2 place-items-between pt-20">
<div class="grid justify-start text-2xl lg:text-4xl text-color-1 px-6">Latest Trends In Preschool Education
<p class="text-justify text-xl pt-2 text-color-2">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p>
</div>
<div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl text-lg bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Read All </button></div>
</div>
</section>
<section class="container mx-auto">
<div class="grid md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16">
<div class="grid place-items-center">
<div class="text-color-1 text-2xl lg:text-4xl pt-6">Reach Out to Us</div>
<h3 class="text-center p-6 text-lg lg:text-xl text-color-2">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3>
<form class="grid place-items-center" v-if="rOutQry">
<div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name">
</div>
<div class="md:w-1/2 px-3">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number">
</div>
</div>
<div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutEmail" type="email" placeholder="Your E-mail">
</div>
<div class="md:w-1/2 px-3">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutAddress" type="text" placeholder="Your Address">
</div>
</div>
<div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9">Contact Us</button></div>
</form>
<div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div>
</div>
<div class="grid place-items-center"><img src="/img/rectangle100.png" alt=""></div>
</div>
</section>
<section class="container mx-auto">
<div class="grid md:grid-cols-2 place-items-between pt-20">
<div class="grid justify-start text-2xl lg:text-4xl text-color-1 px-6">Trending Themes for Preschools in 2022
<p class="text-justify text-xl pt-2 text-color-2">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p>
</div>
<div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl bg-blue-700 p-1 text-lg text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-2 h-9">Read All </button></div>
</div>
</section>
<section>
<div class="container mx-auto">
<div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 mt-32 mb-16">
<div class="grid place-items-center">
<div class="grid text-color-1 text-3xl pt-6">Case Study</div>
<div class="w-full max-w-lg" v-if="csQry">
<h3 class="text-center text-xl p-4">You can download the case study here</h3>
<div class="flex flex-wrap mb-6">
<div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" type="text" placeholder="Your Name">
</div>
</div>
<div class="flex flex-wrap mb-6">
<div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csEmail" type="text" placeholder="Your E-mail Id">
</div>
</div>
<div class="flex justify-center -mt-4">
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" @click="saveCsQry" >Download Now</button></div>
</div>
<div v-else>
Thank you!
</div>
</div>
<div class="grid place-items-center">
<div class="grid bg-gray-300 ml-0 w-80 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl"></div>
</div>
</div>
</div>
<div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div>
</section>
<div class="my-32"></div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
name:null,
phone:null,
msg:null,
MarketingSolutionsQry:true,
rOutName:null,
rOutPhone:null,
rOutEmail:null,
rOutAddress:null,
rOutQry:true,
csName:null,
csEmail:null,
csQry:true,
marketing:null,
adminstration:null,
// contact_form:{}
}
},
mounted: function () {
// this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)
},
methods: {
saveMarketingSolutionsQry() {
let formData = new FormData();
formData.append('Name', this.name);
formData.append('Phone', this.phone);
formData.append('MessageDetails', this.msg);
formData.append('formName', 'tb-administrators-Marketing-Solutions-Questions');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
// headers: {
// 'Content-Type': 'multipart/form-data',
// // 'Authorization': 'Bearer my-token',
// // 'My-Custom-Header': 'foobar'
// },
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.MarketingSolutionsQry=false
},
saveReachoutQry() {
let formData = new FormData();
formData.append('Name', this.rOutName);
formData.append('Phone', this.rOutPhone);
formData.append('Email', this.rOutEmail);
formData.append('MessageDetails', this.rOutAddress);
formData.append('formName', 'tb-administrators-Reach-Out');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
// headers: {
// 'Content-Type': 'multipart/form-data',
// // 'Authorization': 'Bearer my-token',
// // 'My-Custom-Header': 'foobar'
// },
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.rOutQry=false
},
saveCsQry() {
let formData = new FormData();
formData.append('Name', this.csName);
formData.append('Email', this.csEmail);
formData.append('formName', 'tb-administrators-Case-Study');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
// headers: {
// 'Content-Type': 'multipart/form-data',
// // 'Authorization': 'Bearer my-token',
// // 'My-Custom-Header': 'foobar'
// },
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.csQry=false
},
// saveReachoutQry() {
// let formData={
// "name":this.rOutName,
// "email":this.rOutEmail,
// "phone":this.rOutPhone,
// "address":this.rOutAddress,
// "form_id":"tb-administrators-Reach-Out-to-Us"
// }
// let dataToSave = {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// // 'Authorization': 'Bearer my-token',
// // 'My-Custom-Header': 'foobar'
// },
// body: JSON.stringify(formData)
// };
// fetch('https://curriculum-app-api.beanstalkedu.com/items/contact_form', dataToSave)
// .then(response => response.json())
// .then(data => this.contact_form = data.data);
// // console.log(this.contact_form)
// this.rOutQry=false
// }
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=marketing&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
.then(resp => resp.json())
.then(data => {
this.marketing=data.data
// console.log(this.marketing)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=adminstration&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
.then(resp => resp.json())
.then(data => {
this.adminstration=data.data
// console.log(this.marketing)
})
},
}
</script>
<style>
.text-color-1 {
color: #7C4C23;
}
</style>

166
src/components/Blog.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div>
<div class="container-fluid z-0" style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
<div class="flex justify-center">
<div class="mt-9 inline-flex p-2">
</div>
</div>
<div class="flex justify-center">
<div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
<span class="text-blue-600">Teeny Beans Curriculum</span> &nbsp; <span class=" text-yellow-900" > Blog </span>
</div>
</div>
<div class="flex justify-center">
<div class="mb-9 inline-flex p-1">
<form>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative w-96">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
<button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
</div>
</form>
</div>
</div>
<div class="flex justify-center">
<div class="mt-9 inline-flex p-2">
</div>
</div>
</div>
<section class="container mx-auto">
<div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
<div class="ml-12 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
<div class="ml-9 mr-9 md:hidden"> &nbsp;</div>
<a to="/blog/?category=classroom-solution" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Classroom Solution</a>
<a to="/blog/?category=preschool-solution" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Preschool Solution</a>
<a to="/blog/?category=technology" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Technology </a>
<a to="/blog/?category=curriculum" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Curriculum </a>
<a to="/blog/?category=marketting" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Marketing </a>
<a to="/blog/?category=lesson-plans" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Lesson Plans </a>
<a to="/blog/?category=video-articles" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Video Articles </a>
<a to="/blog/?category=occassion" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 "> Occassion </a>
</div>
<div class="p-5">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<div v-for="(item, index) in tbBlog" class="shadow-md rounded p-2 m-2">
<figure class=" p-4 ">
<img class="w-full" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute -mt-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<div class="pt-6 space-y-4">
<blockquote>
<p class="text-3xl font-medium text-color-1 line-clamp-1">{{ item.title }}</p>
</blockquote>
<figcaption class="font-medium">
<!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
<div class="text-color-2 line-clamp-3 text-xl" v-html="item.preview_text"></div>
<div class="text-slate-700 p-2 shadow-md rounded text-center">
<a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
</div>
</figcaption>
</div>
</figure>
</div>
</div>
</div>
</section>
</div>
</template>
<style>
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
line-clamp: 2;
}
.line-clamp-3 {
/* display: -webkit-box; */
-webkit-line-clamp: 2;
}
</style>
<script>
export default {
// setup(){
// // const route = useRoute();
// useHead({
// title: 'Teenybeans Preschool Curriculum - Blog',
// meta: [
// {
// name: `title`,
// content: `Blogs - Teeny Beans Preschool Curriculum`
// },
// {
// name: `description`,
// content: `Get detailed information about the preschool industry and the challenges it faces.`
// },
// ],
// })
// },
data() {
return {
isLoading: true,
tbBlog: {},
tbBlog_classroom_solution: [],
tbBlog_preschool_solution: {},
tbBlog_technology: {},
tbBlog_curriculum: {},
tbBlog_marketting: {},
tbBlog_lession_plan: {},
tbBlog_video_articles: {},
tbBlog_occassion: {}
}
},
mounted: function () {
this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)
},
methods: {
getItemByCategory() {
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum')
.then(response => response.json())
.then(data => {
this.tbBlog = data.data
console.log(data)
this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });
this.tbBlog_technology = data.data.filter(item => { if (item.category == "technology") return item });
this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
this.tbBlog_marketting = data.data.filter(item => { if (item.category == "marketting") return item });
this.tbBlog_lession_plan = data.data.filter(item => { if (item.category == "lession-plan") return item });
this.tbBlog_video_articles = data.data.filter(item => { if (item.category == "video-articles") return item });
this.tbBlog_occassion = data.data.filter(item => { if (item.category == "occassion") return item });
this.isLoading = false
})
}
}
}
</script>

310
src/components/Educators.vue Normal file
View File

@@ -0,0 +1,310 @@
<template>
<div>
<section class="container-fluid">
<div class="bg-yellow-100 py-40 px-4">
<h1 class="text-blue-700 text-3xl lg:text-6xl p-4 font-semibold">Educate Conveniently by Acquiring <span class="text-color-1"> <br> Resources Smoothly!</span></h1>
<div class="p-4"><button class="bg-blue-700 text-xl text-white p-2 px-4 rounded-br-xl rounded-tl-xl">Know More</button></div>
</div>
</section>
<section class="conatiner-fluid shadow-xl">
<p class="container mx-auto px-6 text-xl p-4">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>
</section>
<section class="container mx-auto">
<h1 class="text-center text-color-1 text-2xl md:text-4xl font-semibold pt-24 ">Lesson Plans Curated for You</h1>
<p class="text-xl pb-16 pt-4 text-justify">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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-6">
<div class="grid background rounded-xl shadow-xl ">
<div class="bottombar cursor-pointer">
<img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">"The Scholarly Plan" </h1>
<p class="text-white text-xl text-justify mx-6 mb-4">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
</div>
</div>
<div class="grid background rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">"The Engaging Plan" </h1>
<p class="text-white text-justify mx-6 mb-4 text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
</div>
</div>
<div class="grid background rounded-xl shadow-xl">
<div class="bottombar cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">"The Effective Plan" </h1>
<p class="text-white text-xl text-justify mx-6 mb-4">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-4">
<div class="flex justify-center text-2xl md:text-4xl text-color-1 font-semibold mt-20 p-4">Make your Ideal Lesson Plan</div>
<p class="text-xl text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p>
<div class="grid grid-cols-1 md:grid-cols-3 place-items-center mt-16">
<abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/dailyplan"><img src="/img/Daily.png" alt=""></a></abbr>
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/weeklyplan"><img src="/img/Weekly.png" alt=""></a></abbr>
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/monthlyplan"><img src="/img/Monthly.png" alt=""></a></abbr>
</div>
</section>
<section class="container mx-auto my-32">
<div class="flex flex-col lg:flex-row place-items-center justify-center">
<div class="flex flex-col justify-center ">
<div class="bg-yellow-100 text-center border-radius px-16">
<p class="text-3xl md:text-4xl text-center p-3 text-blue-700 pt-32">Get in Touch</p>
<p class="text-2xl md:text-3xl text-color-1">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p>
</div>
<!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
</div>
<div class="flex flex-col" id="getintouch">
<div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
<div v-if="getinTouchQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<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 class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input type="email" v-model="gtemail" 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 type="text" v-model="gtphone" 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="exampleInputYourAddress" class="form-label inline-block mb-2 text-gray-700">Your Address</label>
<input type="text" v-model="gtaddress" 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 form-check mb-6"><input type="checkbox" value="whatsapp" class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
<label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
</div>
<button @click="saveGetinTouchQry" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded 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">Contact us</button>
</div>
<div v-else>
<h2 class="text-center py-40 text-4xl">Thank You!</h2>
</div>
</div>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-28 p-4">Resources For Your Classroom</div>
<p class="text-xl text-center">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept. </p>
<div class="grid grid-cols-1 md:grid-cols-5 mt-16 gap-8 place-items-center">
<div class=""> <a href="/celebrationstories#submitCelebration"><img draggable="false" src="/img/event-ideas1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/games1.png" alt=""></a></div>
<div class=""><a href="/worksheets"><img src="/img/worksheets1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/activities1.png" alt=""></a></div>
<div class=""><a href="#"><img src="/img/more1.png" alt=""></a></div>
</div>
<div class="flex justify-center md:mt-20 mt-8">
<button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
</div>
</section>
<section class="container mx-auto px-2 ">
<div class="flex text-color-1 text-2xl md:text-4xl justify-center pt-32">Curriculum Blogs</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
<div class="grid w-fit" v-for="(item, index) in tbBlog">
<img class="w-full rounded-tl-3xl rounded-br-3xl" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<h1 class="text-color-1 text-2xl font-semibold pt-10 line-clamp-1">{{ item.title}}</h1>
<div class="text-lg text-justify line-clamp-3 font-light w-96 text-color-2" v-html="item.preview_text"></div>
<a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
</div>
</div>
<router-link to="/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></router-link>
</section>
<section class="container mx-auto mt-16">
<div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 ">
<div class="grid"></div>
<div class="grid py-20 px-4">
<h1 class="text-2xl md:text-4xl text-blue-700">Skill Up with Us & <br>
<span class="text-color-1">to Be a superhero at your Preschool</span></h1>
<h1 class="text-base md:text-xl text-color-2">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
<div class="flex py-4"><button class="text-white bg-blue-700 p-2 text-lg rounded-tl-lg rounded-br-lg">Know More</button></div>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="flex justify-center text-color-1 text-2xl md:text-4xl pt-32 py-16">Download Report Card Format</div>
<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 place-items-center text-center mt-16 gap-y-16 gap-x-8 px-4">
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card1.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 2-3</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 3-4</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 4-5</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
</div>
<div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt=""><h1 class="absolute inset-4 text-xl text-blue-700"> Years 5-6</h1>
<button class="bg-blue-700 p-1 absolute left-24 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg ">Download</button>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="grid place-content-center text-color-1 text-2xl md:text-4xl font-bold pt-48 py-24"> EYFS Curriculum & Its Impact</div>
<div class="grid grid-cols-1 md:grid-cols-2 p-6">
<div class="grid text-sm md:text-lg text-justify text-color-2">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).
<img src="/img/legends.png" alt="" class=""/>
</div>
<div class="grid">
<div class="flex relative justify-center text-xs">
<Roundchart/>
</div>
</div>
</div>
</section>
<section class="container mx-auto py-20 px-4">
<div class="grid grid-cols-1 xl:grid-cols-2 place-items-center">
<div class="grid h-fit text-color-2">
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div tabindex="0" class="collapse collapse-arrow border-y">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;1. What are the main components of EYFS preschool curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>An EYFS preschool curriculum contains following teaching : <br>
● Literacy<br>
● Pre-numeracy <br>
● Understanding of the world <br>
● Extra curricular activities <br>
● Social behavior
</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b ">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;2. How does the quality of a preschool curriculum impact the rate of enrollments?
</div>
<div class="collapse-content md:text-lg">
<p>The better the quality of your preschool curriculum is, the more will be the enrollments. Parents always desire the best education for their children especially when it comes to the foremost stage of learning. Your preschool image will be known by how you mold a child’s personality. Consequently, the better your preschool curriculum molds a child, the better your preschool image will be and parents will prefer your preschool more.</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;3. What is the significance of a play school curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>A good play school curriculum makes sure that toddlers are provided education as per their development needs. It should ensure their physical, social and emotional development through teaching the right subjects essential for schooling and future education. It is a preschool curriculum that established a sound base of learning in children.</p>
</div>
</div>
<div tabindex="0" class="collapse collapse-arrow border-b">
<div class="collapse-title md:text-xl ">
&#43; &nbsp;4. Which is the most ideal preschool curriculum?
</div>
<div class="collapse-content md:text-lg">
<p>The Early Years Foundation Stage (EYFS) British curriculum is the best preschool curriculum for any play school. The curriculum keeps in mind all aspects of development necessary for a child. Teeny Beans, a zero royalty preschool franchise provides the EYFS preschool curriculum to its partners and helps them implement it successfully.</p>
</div>
</div>
</div>
<div class="grid">
<img src="/img/frequently.png" alt="">
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
name:null,
phone:null,
msg:null,
getinTouchQry:true,
gtname:null,
gtphone:null,
gtemail:null,
gtaddress:null,
tbBlog: {},
curriculum: {},
// contact_form:{}
}
},
mounted: function () {
// this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)
},
mounted: function () {
this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)
},
methods: {
saveGetinTouchQry() {
let formData = new FormData();
formData.append('Name', this.gtname);
formData.append('Phone', this.gtphone);
formData.append('Email', this.gtemail);
formData.append('MessageDetails', this.gtaddress);
formData.append('formName', 'tb-educators-Need-Help-Planning-Curriculum');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
console.log(data)
});
// formData=""
this.getinTouchQry=false
},
getItemByCategory() {
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=curriculum&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
.then(response => response.json())
.then(data => {
this.tbBlog = data.data
this.curriculum
this.isLoading = false
console.log(this.data)
})
},
}
}
</script>
<style>
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
.text-color-1 {
color: #7C4C23;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
background-color: #f9b8ce;
border-radius: 16px;
}
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
background-color: #f9b8ce;
border-radius: 16px;
}
</style>

19
src/components/Faq.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<section class="container mx-auto py-20 px-4">
<div class="grid grid-cols-1 xl:grid-cols-2 place-items-center">
<div class="grid h-fit text-color-2">
<h1 class="text-4xl py-6 text-blue-700">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div class="accordion">
<ul class="accordion__wrapper">
</ul>
</div>
</div>
<div class="grid">
<img src="/img/frequently.png" alt="">
</div>
</div>
</section>
</template>
<style>
</style>

198
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div class="">
<div class="container-fluid">
<div class="overflow-x-auto">
<div class="grid grid-rows-1 bg-slider opacity-75 place-items-center">
<div class="flex bg-slider text-white text-center text-lg w-max pl-14 pr-14 p-3">
<a href="/worksheets">&#60&nbsp; Preschool Worksheets &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Event Ideas &nbsp;|</a>
<a href="/videos">&nbsp; Preschool Videos &nbsp;|</a>
<a href="/occassion">&nbsp; Preschool Occasions &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Monthly Themes &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
</div>
</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="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>
<div class="grid grid-cols-2 pt-4 h-fit place-items-center">
<div class="grid ml-4 ">
<a class="py-2" href="/">Home</a>
<a class="py-2" href="/educators" >Educators</a>
<a class="py-2" href="/administrators">Administrators</a>
<a class="py-2" href="/themes">Themes</a>
<a class="py-2" href="/occassion" >Occassions</a>
<a class="py-2" href="/faq">FAQs</a>
</div>
<div class="grid ml-4 h-fit">
<a class="py-2" href="/celebrationstories#submitCelebration">Event Ideas</a>
<a class="py-2" href="/worksheets" >Worksheets</a>
<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>
</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>
<div class="flex mt-4 place-items-center">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path d="M469.666,216.45,271.078,33.749a34,34,0,0,0-47.062.98L41.373,217.373,32,226.745V496H208V328h96V496H480V225.958ZM248.038,56.771c.282,0,.108.061-.013.18C247.9,56.832,247.756,56.771,248.038,56.771ZM448,464H336V328a32,32,0,0,0-32-32H208a32,32,0,0,0-32,32V464H64V240L248.038,57.356c.013-.012.014-.023.024-.035L448,240Z" class="ci-primary" />
</svg>
<p class="ml-4 font-normal my-2 leading-loose">DE 28, VIP Rd, Desh Bandhu Nagar, Baguiati, Rajarhat, West Bengal 700059</p>
</div>
<div class="flex place-items-center ">
<svg class="w-7 h-7 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m0 0h24v24h-24z" fill="none" />
<path
d="m21 15.46-5.27-.61-2.52 2.52c-2.83-1.44-5.15-3.75-6.59-6.59l2.53-2.53-.61-5.25h-5.51c-.58 10.18 7.79 18.55 17.97 17.97z" />
</svg>
<p class="ml-4 font-normal my-2">+91-334058-5535</p>
</div>
<div class="flex place-items-center ">
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" />
</svg>
<p class="ml-4 font-normal my-2">enquiry@beanstalkedu.com</p>
</div>
<div class="flex place-items-center ">
<svg class="w-7 h-7" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="m12 6v6l4 4" /></g>
</svg>
<p class="ml-4 font-normal my-2">Monday - Saturday: 09:00 - 18:00, Sunday Closed</p>
</div>
</div>
<div class="grid grid-cols-1 mt-4 ml-4 font-bold text-sm lg:place-items-center"> <h1 class="" style="color: #414141; text-align: left;">Get a look at our offerings</h1>
<div class="flex ml-4">
<div v-if="FooterQry" class="pt-8">
<label class="block">
<span class="block font-medium text-slate-700"></span>
<div class="relative flex w-full flex-wrap items-stretch mb-3 font-light">
<input v-model="footeremail" type="text" placeholder="Enter Your Email"
class="w-64 px-3 py-3 placeholder-slate-300 text-slate-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full pr-10" />
<span class="z-10 h-full leading-snug font-normal absolute text-center text-slate-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
<svg @click="saveFooterQry" class="cursor-pointer" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<rect fill="#37aee2" height="512" rx="15%" width="512"/>
<path d="m199 404c-11 0-10-4-13-14l-32-105 245-144" fill="#c8daea"/>
<path d="m199 404c7 0 11-4 16-8l45-43-56-34" fill="#a9c9dd"/>
<path d="m204 319 135 99c14 9 26 4 30-14l55-258c5-22-9-32-24-25l-321 124c-21 8-21 21-4 26l83 26 190-121c9-5 17-3 11 4" fill="#f6fbfe"/>
</svg>
</span>
</div>
</label>
</div>
<div v-else class="bg-white p-3 px-20 text-base rounded shadow text-slate-600"> Thank You!</div>
</div>
<div class="flex pt-2 ml-4 flex-inline gap-6 ">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 50; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 51.358 90 c -0.238 0 -0.472 -0.086 -0.654 -0.244 c -0.22 -0.189 -0.346 -0.466 -0.346 -0.756 V 58.708 c 0 -0.553 0.447 -1 1 -1 h 9.733 l 1.332 -10.388 H 51.358 c -0.553 0 -1 -0.447 -1 -1 v -7.909 c 0 -3.477 0.845 -7.031 7.107 -7.031 l 5.524 -0.002 v -9.186 c -1.686 -0.165 -4.913 -0.383 -8.508 -0.383 c -9.298 0 -14.849 5.748 -14.849 15.375 v 9.136 c 0 0.553 -0.448 1 -1 1 h -9.64 v 10.388 h 9.64 c 0.552 0 1 0.447 1 1 v 30.291 c 0 0.29 -0.126 0.566 -0.346 0.757 c -0.22 0.188 -0.512 0.272 -0.798 0.232 C 16.547 86.79 0 67.549 0 45.233 C 0 20.292 20.187 0 45 0 c 24.813 0 45 20.292 45 45.233 c 0 22.321 -16.551 41.562 -38.498 44.756 C 51.454 89.996 51.406 90 51.358 90 z M 52.358 59.708 v 28.12 C 72.759 84.285 88 66.178 88 45.233 C 88 21.394 68.71 2 45 2 C 21.29 2 2 21.394 2 45.233 C 2 66.174 17.237 84.28 37.633 87.826 V 59.708 h -9.64 c -0.552 0 -1 -0.447 -1 -1 V 46.32 c 0 -0.552 0.448 -1 1 -1 h 9.64 v -8.136 c 0 -10.717 6.456 -17.375 16.849 -17.375 c 4.476 0 8.428 0.335 9.641 0.497 c 0.496 0.066 0.867 0.49 0.867 0.991 v 11.08 c 0 0.552 -0.447 1 -1 1 l -6.524 0.003 c -4.317 0 -5.107 1.694 -5.107 5.031 v 6.909 h 11.202 c 0.287 0 0.561 0.124 0.751 0.339 c 0.189 0.216 0.277 0.502 0.241 0.788 l -1.589 12.388 c -0.064 0.499 -0.489 0.873 -0.992 0.873 H 52.358 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35" height="35" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 30.318 79.749 c -9.466 0 -18.684 -2.702 -26.659 -7.812 L 0 69.591 L 4.317 70.1 c 1.291 0.152 2.62 0.23 3.947 0.23 c 6.65 0 12.969 -1.91 18.428 -5.548 c -6.56 -1.122 -12.061 -5.799 -14.136 -12.275 l -0.515 -1.605 l 1.656 0.318 c 1.046 0.2 2.109 0.305 3.146 0.289 c -6.164 -2.93 -10.31 -9.231 -10.31 -16.302 c 0 -0.094 0 -0.183 0.005 -0.272 l 0.087 -1.598 l 1.398 0.778 c 1.218 0.678 2.524 1.193 3.873 1.532 C 8.577 32.3 6.672 27.756 6.672 22.936 c 0 -3.184 0.845 -6.32 2.443 -9.067 l 0.727 -1.25 l 0.913 1.121 c 8.213 10.075 20.223 16.353 33.117 17.353 c -0.142 -0.918 -0.214 -1.857 -0.214 -2.804 c 0 -9.946 8.094 -18.038 18.042 -18.038 c 4.778 0 9.402 1.923 12.773 5.293 c 3.512 -0.751 6.865 -2.064 9.973 -3.906 l 2.266 -1.343 l -0.803 2.509 c -0.903 2.823 -2.487 5.36 -4.59 7.408 c 1.898 -0.464 3.745 -1.093 5.524 -1.884 L 90 16.926 l -1.917 2.872 c -2.26 3.384 -5.055 6.329 -8.312 8.759 c 0.019 0.568 0.027 1.139 0.027 1.711 C 79.798 54.591 61.29 79.749 30.318 79.749 z M 8.317 72.331 c 6.775 3.554 14.303 5.416 22.002 5.416 c 29.719 0 47.479 -24.141 47.479 -47.48 c 0 -0.723 -0.015 -1.442 -0.047 -2.158 l -0.024 -0.54 l 0.438 -0.317 c 2.329 -1.683 4.414 -3.639 6.228 -5.84 c -2.202 0.722 -4.48 1.226 -6.808 1.505 l -4.647 0.555 l 4.013 -2.407 c 2.569 -1.541 4.638 -3.743 5.999 -6.348 c -2.736 1.337 -5.624 2.309 -8.618 2.898 l -0.543 0.107 l -0.38 -0.404 c -3.023 -3.221 -7.291 -5.068 -11.707 -5.068 c -8.845 0 -16.041 7.194 -16.041 16.037 c 0 1.25 0.14 2.48 0.415 3.657 l 0.303 1.294 l -1.327 -0.067 c -13.439 -0.675 -26.065 -6.854 -34.876 -17.015 c -0.985 2.115 -1.501 4.431 -1.501 6.778 c 0 5.377 2.668 10.368 7.137 13.351 l 2.906 1.94 l -3.492 -0.107 c -2.276 -0.07 -4.536 -0.582 -6.627 -1.493 c 0.624 7.005 5.816 12.902 12.803 14.301 l 4.156 0.833 l -4.089 1.114 c -2.081 0.566 -4.249 0.76 -6.425 0.556 c 2.488 5.693 8.088 9.488 14.404 9.605 l 2.814 0.053 l -2.215 1.735 C 23.789 69.725 16.277 72.319 8.317 72.331 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 63.429 2 C 76.977 2 88 13.023 88 26.571 v 36.858 C 88 76.977 76.977 88 63.429 88 H 26.571 C 13.023 88 2 76.977 2 63.429 V 26.571 C 2 13.023 13.023 2 26.571 2 H 63.429 M 63.429 0 H 26.571 C 11.896 0 0 11.896 0 26.571 v 36.858 C 0 78.104 11.896 90 26.571 90 h 36.858 C 78.104 90 90 78.104 90 63.429 V 26.571 C 90 11.896 78.104 0 63.429 0 L 63.429 0 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 45 25.542 c 10.729 0 19.458 8.729 19.458 19.458 S 55.729 64.458 45 64.458 S 25.542 55.729 25.542 45 S 34.271 25.542 45 25.542 M 45 23.542 c -11.851 0 -21.458 9.607 -21.458 21.458 S 33.149 66.458 45 66.458 S 66.458 56.851 66.458 45 S 56.851 23.542 45 23.542 L 45 23.542 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<circle cx="69.043" cy="20.983" r="4.683" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
<path d="M 69.047 18.296 c 1.479 0 2.683 1.203 2.683 2.683 s -1.203 2.683 -2.683 2.683 s -2.683 -1.203 -2.683 -2.683 S 67.568 18.296 69.047 18.296 M 69.047 16.296 c -2.586 0 -4.683 2.097 -4.683 4.683 s 2.097 4.683 4.683 4.683 s 4.683 -2.097 4.683 -4.683 S 71.634 16.296 69.047 16.296 L 69.047 16.296 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 31.187 70.956 H 20.822 c -0.552 0 -1 -0.447 -1 -1 V 36.617 c 0 -0.552 0.448 -1 1 -1 h 10.365 c 0.552 0 1 0.448 1 1 v 33.339 C 32.187 70.509 31.739 70.956 31.187 70.956 z M 21.822 68.956 h 8.365 V 37.617 h -8.365 V 68.956 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 26.005 33.062 c -3.862 0 -7.005 -3.143 -7.005 -7.007 c 0 -3.866 3.143 -7.011 7.005 -7.011 s 7.005 3.145 7.005 7.011 C 33.01 29.919 29.867 33.062 26.005 33.062 z M 26.005 21.044 c -2.76 0 -5.005 2.248 -5.005 5.011 c 0 2.761 2.245 5.007 5.005 5.007 s 5.005 -2.246 5.005 -5.007 C 31.01 23.292 28.765 21.044 26.005 21.044 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 70 70.956 H 59.643 c -0.553 0 -1 -0.447 -1 -1 V 53.743 c 0 -4.442 -0.323 -7.84 -4.385 -7.84 c -3.753 0 -5.215 2.121 -5.215 7.562 v 16.491 c 0 0.553 -0.447 1 -1 1 H 37.686 c -0.552 0 -1 -0.447 -1 -1 V 36.617 c 0 -0.552 0.448 -1 1 -1 h 9.939 c 0.553 0 1 0.448 1 1 v 1.753 c 1.918 -1.937 4.937 -3.58 8.945 -3.58 c 11.834 0 13.43 8.533 13.43 16.88 v 18.285 C 71 70.509 70.553 70.956 70 70.956 z M 60.643 68.956 H 69 V 51.671 c 0 -8.932 -1.943 -14.88 -11.43 -14.88 c -4.694 0 -7.739 2.613 -8.92 4.852 c -0.174 0.328 -0.514 0.533 -0.885 0.533 h -0.141 c -0.553 0 -1 -0.448 -1 -1 v -3.559 h -7.939 v 31.339 h 8.357 V 53.465 c 0 -2.615 0 -9.562 7.215 -9.562 c 6.385 0 6.385 6.16 6.385 9.84 V 68.956 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 81.007 90 H 8.993 C 4.034 90 0 85.966 0 81.007 V 8.993 C 0 4.034 4.034 0 8.993 0 h 72.014 C 85.966 0 90 4.034 90 8.993 v 72.014 C 90 85.966 85.966 90 81.007 90 z M 8.993 2 C 5.137 2 2 5.137 2 8.993 v 72.014 C 2 84.863 5.137 88 8.993 88 h 72.014 C 84.863 88 88 84.863 88 81.007 V 8.993 C 88 5.137 84.863 2 81.007 2 H 8.993 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="https://www.youtube.com/channel/UC4ppJKZgGaOxexol-zMwZDQ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="33" height="33" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 5; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 45 15.5 L 45 15.5 c 0.279 0 27.959 0.021 34.646 1.813 c 3.184 0.851 5.69 3.357 6.542 6.542 C 87.978 30.537 88 44.856 88 45 c 0 0.144 -0.022 14.463 -1.813 21.146 c -0.851 3.184 -3.357 5.69 -6.542 6.542 C 72.959 74.479 45.279 74.5 45 74.5 c -0.279 0 -27.959 -0.021 -34.646 -1.813 c -3.184 -0.851 -5.69 -3.357 -6.542 -6.542 C 2.022 59.463 2 45.144 2 45 c 0 -0.144 0.022 -14.463 1.813 -21.146 c 0.851 -3.184 3.357 -5.69 6.542 -6.542 C 17.041 15.521 44.721 15.5 45 15.5 M 45 13.5 c 0 0 -28.144 0 -35.162 1.881 c -3.872 1.035 -6.922 4.085 -7.957 7.957 C 0 30.356 0 45 0 45 s 0 14.644 1.881 21.662 c 1.035 3.872 4.085 6.922 7.957 7.957 C 16.856 76.5 45 76.5 45 76.5 s 28.144 0 35.162 -1.881 c 3.872 -1.035 6.922 -4.085 7.957 -7.957 C 90 59.644 90 45 90 45 s 0 -14.644 -1.881 -21.662 c -1.035 -3.872 -4.085 -6.922 -7.957 -7.957 C 73.144 13.5 45 13.5 45 13.5 L 45 13.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 38 34.964 L 55.382 45 L 38 55.036 V 34.964 M 36 31.5 v 27 L 59.382 45 L 36 31.5 L 36 31.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex md:flex-row flex-col bg-color-2 p-2 justify-between px-8">
<div class="flex">© 2021 Teeny Beans | All Rights Reserved</div>
<div class="flex">Terms & Conditions</div>
</div>
</div>
</template>
<style>
.text-color-2 {
color: #333333
}
.back {
/* background: linear-gradient(359.73deg, #124bbd 0.22%, #ffff 85.4% ) ; */
}
.back2 {
background: linear-gradient(359.73deg, rgba(18, 75, 189, 0.1) 0.22%, rgba(255, 255, 255, 0) 85.04%);
}
.bg-color-2 {
background-color: #C9D438;
}
.bg-slider {
background-color: #124BBD;
}
</style>
<script>
export default {
data() {
return {
page: null,
isLoading: true,
footeremail: null,
FooterQry: true,
}
},
methods: {
saveFooterQry(){
let formData = new FormData();
formData.append('Email', this.footeremail);
formData.append('formName', 'tb-footeremail');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
// headers: {
// 'Content-Type': 'multipart/form-data',
// // 'Authorization': 'Bearer my-token',
// // 'My-Custom-Header': 'foobar'
// },
body: formData,
}
)
.then(response => response.json())
.then(data => {
console.log(data)
});
// formData=""
this.FooterQry=false
}
}
}
</script>

0
src/components/Footer.astro → src/components/Footerdemo.astro
View File

91
src/components/Header.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div class="navbar bg-base-100 shadow-sm">
<div class="container mx-auto" >
<div class="flex-1">
<a class=" "><a href="/"><div class=""><img class="h-20 w-64 animate-[bounce_1s_ease-in-out_3]" src="/img/tb-logo.png" alt=""/></div></a></a>
</div>
<div class="hidden md:flex py-2">
<ul class="text-color-1 menu menu-horizontal px-1">
<li tabindex="1"><a href="/educators">Educators</a></li>
<li tabindex="2"><a href="/administrators">Administrators</a></li>
<li tabindex="3" >
<a class="hover:bg-blue-600 hover:text-white">Resources
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
</a>
<ul class="z-50 p-1 bg-blue-700 text-white">
<li><a href="/worksheets">Worksheets</a></li>
<li><a href="/videos">Videos</a></li>
<li><a href="/audiobooks"> Audio Books</a></li>
<li><a href="/dailyplan"> Lesson Plan</a></li>
</ul>
</li>
<li tabindex="4"><a href="/occassion">Occassion</a></li>
<li tabindex="5"><a href="/themes">Themes</a></li>
<li tabindex="6"><a href="/blog">Blog</a></li>
</ul>
</div>
<div class="flex-none md:hidden">
<!-- <button for="my-modal-4" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button> -->
<!-- <label for="my-modal-4" class="btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </label> -->
<!-- Put this part before </body> tag -->
<!-- <input type="checkbox" id="my-modal-4" class="modal-toggle" />
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<div class="btn-group btn-group-vertical">
<button class="btn btn-active">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>
<div class="collapse">
<input type="checkbox" class="peer" />
<div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
Click me to show/hide content
</div>
<div class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
<p>hello</p>
</div>
</div>
</label>
</label> -->
<div class="text-color-1 dropdown dropdown-bottom dropdown-end">
<label tabindex="0" class="btn m-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/educators">Educators</a></li>
<li><a href="/administrators">Administrators</a></li>
<details class="pl-2">
<summary> Resources </summary>
<div class="content">
<li><a href="/worksheets">Worksheets</a></li>
<li><a href="/videobooks">Video Books</a></li>
<li><a href="/audiobooks"> Audio Books</a></li> </div>
</details>
<li><a href="/occassion">Occassion</a></li>
<li><a href="/themes">Themes</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</template>
<style>
.text-color-1 {
color:#7C4C23;
}
</style>

465
src/components/Homepage.vue Normal file
View File

@@ -0,0 +1,465 @@
<template>
<div class="">
<div>
<section class="container-fluid ">
<div class="flex load-wraper">
<img class="relative md:opacity-100 opacity-70 h-max " src="/img/home-page-1.png" alt=""/>
<div class="absolute p-2 pl-4 md:pt-24 lg:pt-40 xl:pl-28 ">
<h1 class="text-color-1 text-xl lg:text-4xl font-semibold">This Event is Round The Corner</h1>
<h1 class="font-semibold text-sm lg:text-2xl text-color-2 py-2">Strat Planning Your Classroom Curriculum now</h1>
<div class="grid grid-cols-7 md:text-base text-xs place-items-center py-2">
<div class="rounded-tl-full rounded-br-full col-span-3 text-blue-700 font-semibold pr-4 pl-4 p-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Speak with Us</button></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full rounded-br-full col-span-3 text-white font-semibold pr-4 pl-4 p-2 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Check Out Event</button></div>
</div>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="md:text-xl text-justify pt-14 px-4">
<p class="text-color-2">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors. </p>
<p class="text-color-2 mt-3">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. </p>
</div>
</section>
<section class="container mx-auto">
<div class="flex md:justify-center justify-center font-bold text-3xl 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">
<img draggable="false" src="/img/plan.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">Creat Personalised Plan</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">Planning your preschool’s daily schedule becomes convenient and efficient with our astonishing features which allows you all support to create your plan and accomplish it.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/dailyplan"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
<div class="grid place-items-center pb-8 px-6">
<img draggable="false" src="/img/report.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">Report Card Format</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">Use the most appropriate report card format with our <strong> preschool curriculum</strong> and let parents know everything they should, regarding their child’s progress.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button>
</div>
<div class="grid place-items-center pb-8 px-6">
<img draggable="false" src="/img/classroom.png" alt=""/>
<h1 class="text-2xl text-color-1 font-semibold py-2">All Classroom Resources</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2">No need to search syllabus for different subjects, or playful activities to promote learning. Our <strong> play school curriculum</strong> provides every resource you need to teach those little ones. Get tips, innovative ideas, different methods and much more.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/worksheets"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</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">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Popular Curriculum</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2 xl:px-24">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button>
</div>
<div class="grid place-items-center pb-8 px-6">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-2xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1>
<p class=" line-clamp-4 leading-loose text-justify text-color-2 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>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white p-2 text-sm rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
</div>
</section>
<section class="container mx-auto">
<div class="mt-16 px-4">
<p class="text-xl p-2 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-xl p-2 text-justify text-color-2"><strong>Worksheets :</strong> Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Lesson Plans :</strong> 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>
<p class="text-xl p-2 text-justify text-color-2"><strong>Videos :</strong> See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Audio Books :</strong> Enhance teaching with the use of multiple audio books which our preschool curriculum provides. Let the toddlers hear, learn and recognize simultaneously. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Games :</strong> Get different game ideas to play with your preschoolers while ensuring their physical development needs and promoting companionship in them. </p>
<p class="text-xl p-2 text-justify text-color-2"><strong>Themes :</strong> Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience. </p>
<p class="text-xl p-2 text-justify text-color-2">Plan your play school curriculum with us and give the highest quality service and receive enormous enrollments in return. Your success has no bounds with the correct preschool curriculum provided by our right guidance and support.</p>
</div>
</section>
<section class="container mx-auto">
<div class="flex flex-rows-2 justify-center font-semibold text-2xl mt-8 text-color-1 py-20">Resources To Choose From</div>
<div class="grid grid-rows-1 md:grid-rows-2 place-items-center m-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
<div class="grid"><a href=""><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Worksheet.png" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Videos.png" alt=""></a></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
<div class="grid"><a href=""><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></div>
</div>
</div>
</section>
<section class="container mx-auto mt-12 ">
<div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 ">
<div class="grid row-span-1 h-fit px-4">
<h1 class="md:text-3xl text-2xl text-color-1 font-semibold py-3">Trending Lesson Plans</h1>
<h1 class="md:text-xl text-lg text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
<div class="text-lg bg-blue-700 p-2 text-white rounded-tl-xl rounded-br-xl w-fit">Check Out Now</div>
</div>
<div class="grid row-span-2 place-items-center lg:place-items-end">
<!-- <vueper-slides
class="no-shadow w-96 px-14 md:px-0" arrows-outside
:visible-slides="1"
:bullets="false"
slide-multiple
:gap="1"
:slide-ratio="3/3"
:touchable="true"
:dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, } }">
<vueper-slide v-for="worksheet in allworksheet" :key="worksheet.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" />
</vueper-slides> -->
</div>
</div>
</section>
<section class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
<div class="grid place-items-start p-16">
<p class="text-color-1 md:text-4xl text-xl font-semibold mt-20">Discover Our Preschool <br>Solutions</p>
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white pr-4 h-10 pl-4">Discover All</button></router-link>
</div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
</div>
</section>
<!-- <section class="container mx-auto">
<div class="grid place-content-center text-color-1 text-2xl font-bold py-20"> EYFS Curriculum & Its Impact</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 px-4">
<div class="grid text-sm md:text-base">
<div class="text-justify text-color-2">
<p class="py-8 ">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
<p class="py-8">The <strong> play school curriculum</strong> will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS <strong> playschool curriculum</strong> is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
<p class="py-8">The British <strong> kindergarten curriculum</strong> will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
</div>
</div>
<div class="grid place-items-center">
<img src="/img/legends.png" alt="" class="p-8 ">
<img src="/img/Frame-184.png" alt="">
<div class="grid text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</div>
<p class="text-lg md:text-2xl text-color-2">Mentions are going to implemented Preschool Education System</p>
<div><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">Discover All</button></div>
</div>
</div>
</section> -->
<section class="container mx-auto pt-16">
<h1 class="text-color-1 text-3xl font-bold text-center">EYFS Curriculum & Its Impact</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
<div class="grid">
<div class="text-justify text-color-2">
<p class="py-8 ">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
<p class="py-8">The <strong> play school curriculum</strong> will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS <strong> playschool curriculum</strong> is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
<p class="py-8">The British <strong> kindergarten curriculum</strong> will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
</div>
</div>
<div class="grid ">
<img src="/img/legends.png" alt="" class="p-8">
<div class="flex relative justify-center text-xs ">
<RoundChart/>
</div>
<h1 class="text-2xl md:text-3xl font-bold text-color-2">Discover in Preschool Education</h1>
<p class="text-lg md:text-2xl text-color-2">Mentions are going to implemented Preschool Education System</p>
<div><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">Discover All</button></div>
</div>
</div>
</section>
<section class="container mx-auto px-4">
<div class="grid text-color-1 text-3xl font-bold text-center mt-20 pb-20 px-4">Teeny Beans in Your School
<p class="text-xl text-center font-light text-color-2">Seamless Intergration of Teeny Beans thorugh Technology</p></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid"><a href="/educators"><img src="/img/left-slid.png" alt=""></a></div>
<div class="grid"><a href="/administrators"><img src="/img/right-slid.png" alt=""></a></div>
</div>
</section>
<section class="container mx-auto cursor-pointer">
<h1 class="text-2xl lg:text-4xl text-center text-blue-700 leading-relaxed font-light py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start ">
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar">
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar">
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar">
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar">
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
<h1 class="text-xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
</div>
</div>
</div>
</section>
<section>
<faqSection/>
</section>
</div>
</div>
</template>
<style>
.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%;
}
}
.literacy {
transform: rotate(24deg);
/* left: 24px; */
top: 120px;
/* align-items: center; */
}
.comunication {
transform: rotate(80deg);
/* left: 360px; */
top: 170px;
}
.mathematics {
transform: rotate(-50deg);
top: 373px;
}
.world {
transform: rotate(-10deg);
top: 420px;
}
.physical {
transform: rotate(44deg);
top: 340px;
}
.expressive {
transform: rotate(-90deg);
top: 225px;
}
.preschool {
transform: rotate(-35deg);
top: 95px;
}
.border0 {
border-color: #F2F2F2;
border-width: 20px;
border-radius: 20px;
}
.border0:hover {
border-color: #FCFCFC;
border-width: 20px;
border-radius: 20px;
}
.background {
background-color: #F2F2F2;
}
.background:hover {
background-color: #FCFCFC;
}
/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
content: "▶";
position: absolute;
top: 1rem;
left: 0.8rem;
transform: rotate(0);
transform-origin: center;
transition: 0.2s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
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%;
opacity: 0;
transform: translateY(-100%);
}
}
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; }
/* # Style 2 # */
details.style2 summary::before {
content: "×";
font-size: 2rem;
line-height: 1rem;
transform: rotate(-45deg);
top: 1.2rem;
left: 0.5rem;
}
details[open].style2 > summary:before {
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-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }
/* # Just Some Pretty Styles # */
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; }
details {
max-width: 800px;
box-sizing: border-box;
margin-top: 5px;
background: rgb(255, 255, 255);
}
summary {
border: 4px solid transparent;
outline: none;
padding: 8px;
display: block;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details[open] summary,
summary:hover {
color: #1e293b;
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
color: #1e293b;
}
.content {
padding: 10px;
}
.bottombar {
font-size: large;
/* width: 42px; */
overflow: hidden;
white-space: nowrap;
/* position: fixed; */
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
}
.bottombar:hover{
overflow: visible;
white-space: normal;
width: auto;
height: auto;
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
</style>
<!-- <script>
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'
export default {
setup(){
const route = useRoute();
useHead({
title: 'Teenybeans Preschool Curriculum',
meta: [
{
name: `title`,
content: `Preschooling with #1 Preschool Curriculum and Lesson Plans`
},
{
name: `description`,
content: `Preschool curriculum and lesson plans are essential for developing children's abilities. Check out our digital curriculum for smart preschool management.`
},
],
})
},
components: { VueperSlides, VueperSlide },
data() {
return {
page: null,
themes:null,
allworksheet:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu')
.then(response => response.json())
.then(data => {
this.allworksheet = data.data
// this.isLoading = false
// console.log(this.page[0].id)
// return this.page[0].id
})
}
}
</script> -->

81
src/components/MainHeader.astro
View File

@@ -1,81 +0,0 @@
<header>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#home">Home</a>
<a href="#news">News</a>
</nav>
</header>
<style >
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>

210
src/components/Occassion.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div>
<section class="container-fluid">
<div class="flex w-screen load-wraper">
<div class="flex">
<img class="grid w-screen place-items-center relative" v-if="page" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].occassion" alt="">
</div>
<h1 class=" absolute pl-8 md:pl-20 pt-4 lg:p-32 text-color-1 text-2xl lg:text-5xl font-semibold md::w-3/5 "> Occassion of the Month - <br>
<div v-if="page">{{page[0].occasson_title}} </div>
</h1>
</div>
</section>
<section>
<div class="container-fluid shadow-xl">
<div v-if="page" class="container mx-auto p-4">
<div class="flex text-2xl md:text-3xl text-color-1 text-center mt-16">{{page[0].occassion_text }}</div>
<div class="flex text-justify text-xl md:text-2xl mt-6 text-color-2">{{page[0].occassion_details }}</div>
<div class="flex text-indigo-800 pb-8 text-xl md:text-2xl mt-2">
<a href="#">Check Out the ressources below.</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
// import { VueperSlides, VueperSlide } from 'vueperslides'
// import 'vueperslides/dist/vueperslides.css'
export default {
methods: {
showYtModal(ytID){
this.ytModal=true
this.ytID=ytID
},
hideYtModal(){
this.ytModal=false
this.ytID=ytID
}
},
// components: { VueperSlides, VueperSlide },
data() {
return {
page: null,
themes:null,
allOccassion:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
ytModal:false,
ytID:''
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?filter[status][_eq]=published')
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
// console.log(this.page[0].id)
return this.page[0].id
}).then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + occassionID)
.then(resp => resp.json())
.then(stories => {
this.stories=stories.data
// console.log(this.stories)
})
// console.log(occassionID)
return occassionID
}).then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/Occassion_celebration_ideas?filter[Occassion_key][_in]=' + occassionID)
.then(resp => resp.json())
.then(ideas => {
this.ideas=ideas.data
// console.log(this.ideas)
})
return occassionID
})
.then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_worksheets?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(worksheets => {
this.worksheets=worksheets.data
// console.log(this.worksheets)
})
return occassionID
})
.then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(videos => {
this.videos=videos.data
// console.log(this.videos)
})
return occassionID
})
.then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_youtube_videos?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(youtube => {
this.youtube=youtube.data
// console.log(youtube)
})
return occassionID
})
.then((occassionID) => {
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_audio_book?filter[occassion_key][_in]='+ occassionID)
.then(resp => resp.json())
.then(audio => {
this.audio=audio.data
// console.log(this.audio)
})
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion')
.then(response => response.json())
.then(data => {
this.allOccassion = data.data
// this.isLoading = false
// console.log(this.page[0].id)
// return this.page[0].id
})
}
}
</script>
<style scopped>
.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);
}
</style>

61
src/components/Roundchart.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div>
<div class="grid">
<div class="flex relative justify-center text-xs">
<img class="animate-[spin_20s_ease-in-out_1]" src="/img/frame1.png" alt="">
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Literacy</abbr>
</p>
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Comunication <br>& Language</abbr>
</p>
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Mathematics</abbr>
</p>
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Understanding <br> the World </abbr>
</p>
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Physical <br> Development </abbr>
</p>
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Expressive Arts<br> & Desgine </abbr>
</p>
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Preschool, Social <br>& Emotional <br>Development</abbr>
</p>
</div>
</div>
</div>
</template>
<style>
.comunication {
transform: rotate(80deg);
/* left: 360px; */
top: 170px;
}
.mathematics {
transform: rotate(-50deg);
top: 373px;
}
.world {
transform: rotate(-10deg);
top: 420px;
}
.physical {
transform: rotate(44deg);
top: 340px;
}
.expressive {
transform: rotate(-90deg);
top: 225px;
}
.preschool {
transform: rotate(-35deg);
top: 95px;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
</style>

54
src/pages/aa.astro Normal file
View File

@@ -0,0 +1,54 @@
---
import Layout from "../layouts/Layout.astro";
import Blog from "../components/Blog.vue";
---
<Layout title="Welcome to Astro.">
<main>
<section>
<div >
<ul>
<Blog client:visible/>
</ul>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 place-items-center gap-8">
<div class="grid"><img class="rounded-xl shadow-2xl" src="/img/person4.png" alt=""></div>
<div class="grid"><img class="rounded-xl shadow-2xl relative" src="/img/person3.png" alt="">
<p class="absolute">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos eius earum nostrum, ducimus commodi dicta corrupti delectus aliquid dolor consequuntur expedita fugiat eos doloremque natus minima culpa, quod hic quidem.</p>
</div>
</div>
<section class="container mx-auto">
<div>
<h1 class="text-4xl text-center p-6 text-red-800">Worksheets</h1>
<p class="text-2xl text-blue-700">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, laudantium dicta asperiores et repellat quas, architecto, eum ipsa autem sit deleniti maxime repellendus alias similique quo mollitia delectus voluptas commodi.</p>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 my-24 gap-16 place-items-center">
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person1.png" alt="">
</div>
<button class="rotate-6 rounded-br-3xl rounded-tl-3xl">Know More</button>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person2.png" alt="">
</div>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person3.png" alt="">
</div>
<div class="grid bg-gray-200 -rotate-6 rounded-br-3xl rounded-tl-3xl shadow-2xl">
<img class="rotate-6 rounded-br-3xl rounded-tl-3xl" src="/img/person4.png" alt="">
</div>
</div>
</div>
</section>
</main>
</Layout>
<script>
// let apiLink = "https://management.beanstalkedu.com/items/worksheet_menu"
// fetch (apiLink)
// .then(x => x.json())
// .then(y => document.getElementById("demo").innerHTML = y.data[2].file);
</script>

15
src/pages/about.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Homepage from '../components/Homepage.vue';
import Faq from '../components/Faq.vue';
import Roundchart from '../components/Roundchart.vue';
import Footer from '../components/Footer.vue';
---
<Layout title="Welcome to Astro.">
<Header />
<Homepage />
<Faq />
<Roundchart/>
<Footer />
</Layout>

11
src/pages/administrators.astro Normal file
View File

@@ -0,0 +1,11 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.vue";
import Administrators from "../components/Administrators.vue";
import Footer from "../components/Footer.vue";
---
<Layout>
<Header/>
<Administrators/>
<Footer/>
</Layout>

10
src/pages/eucators.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.vue";
import Educators from "../components/Educators.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="Welcome">
<Educators/>
<Footer/>
</Layout>

9
src/pages/index.astro
View File

@@ -1,12 +1,13 @@
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import MainHeader from '../components/MainHeader.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.vue';
import Homepage from '../components/Homepage.vue';
import Footer from '../components/Footer.vue';
---
<Layout title="Welcome to Astro.">
<MainHeader />
<Header />
<main>
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions">
@@ -32,7 +33,7 @@ import Footer from '../components/Footer.astro';
<Card
href="https://astro.build/chat/"
title="Community"
body="Come say hi to our amazing Discord community. ❤️"
body="Come say hi to our amazing Discord community.❤️"
/>
</ul>
</main>

11
src/pages/occassion.astro Normal file
View File

@@ -0,0 +1,11 @@
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.vue";
import Occassion from "../components/Occassion.vue";
import Footer from "../components/Footer.vue";
---
<Layout>
<Header/>
<Occassion/>
<Footer/>
</Layout>