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

update

master
Suvodip Ghosh 2023-02-11 17:03:21 +05:30
parent ff82456c67
commit af529f802c
27 changed files with 1407 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/audiobook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/img/fire-fighter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
public/img/jane-martina.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
public/img/nirmal-singh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
public/img/occasions.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/img/owner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/img/sharmistha-mishra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
public/img/sudha-gosavi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
public/img/teacher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
public/img/theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/img/videos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/img/workshet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

308
src/components/Blog.vue
View File

@ -1,166 +1,150 @@
<template> <template>
<div> <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="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="flex justify-center">
<div class="mt-9 inline-flex p-2"> <div class="mt-9 inline-flex p-2">
</div> </div>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold"> <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> <span class="text-blue-600" >Teeny Beans Curriculum </span> &nbsp; <span class=" text-yellow-900" > Blog </span>
</div> </div>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="mb-9 inline-flex p-1"> <div class="mb-9 inline-flex p-1">
<form> <form>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label> <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="relative w-96">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <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> <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> </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> <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> <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> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="mt-9 inline-flex p-2"> <div class="mt-9 inline-flex p-2">
</div> </div>
</div> </div>
</div> </div>
<section class="container mx-auto"> <section class="container mx-auto">
<div class="flex justify-center pt-2 pb-2 m-5 overflow-x-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-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 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> <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 href="/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 href="/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 href="/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 href="/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 href="/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 href="/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 href="/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> <a href="/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>
<div class="p-5"> <div class="xl:px-24">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3"> <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"> <div v-for="(item, index) in tbBlog" class="shadow-md rounded p-2 m-2">
<figure class=" p-4 "> <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="" > <img class="w-full" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img" alt="" style="width:100%; height: 205px;">
<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> <!-- '?width=420&amp;height=280' -->
<div class="pt-6 space-y-4"> <div class="flex place-items-center 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>
<blockquote> <div class="pt-6 space-y-4">
<p class="text-3xl font-medium text-color-1 line-clamp-1">{{ item.title }}</p> <blockquote>
</blockquote> <p class="text-3xl font-medium text-color-1">{{ item.title }}</p>
<figcaption class="font-medium"> </blockquote>
<!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> --> <figcaption class="font-medium">
<div class="text-color-2 line-clamp-3 text-xl" v-html="item.preview_text"></div> <!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
<div class="text-slate-700 p-2 shadow-md rounded text-center"> <div class="text-color-2 text-xl position-fixed line-clamp-4" v-html="item.meta_description"></div>
<a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a> <div class="text-slate-700 p-2 shadow-md rounded text-center">
</div> <a :href="'/blog/' + item.slug" class="text-blue-600"> Read More >> </a>
</figcaption> </div>
</div> </figcaption>
</figure> </div>
</div> </figure>
</div> </div>
</div> </div>
</section> <FaqSection />
</div>
</div> </section>
</template> </div>
<style>
.line-clamp-1 { </template>
display: -webkit-box; <style>
-webkit-line-clamp: 1; .text-color-1 {
-webkit-box-orient: vertical; color: #7C4C23;
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 is:inline>
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
})
} }
.text-color-2 {
color: #333333;
}
</style>
<script>
export default {
setup(){
// const route = useRoute();
// useHead({
// title: 'Teenybeans Preschool Curriculum',
// 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&sort=sort,-date_created')
.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> }
</script>

99
src/components/BlogFaq.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<section v-if="faqBlog" class="container mx-auto py-20 px-4 ">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqBlog in faqBlog" :key="faqBlog.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqBlog" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqBlog.title }}</div>
<div class="collapse-content md:text-lg">
<p class="list-disc" v-html="faqBlog.content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
</template>
<script>
export default {
setup(){
// // const siteData = reactive({
// title: 'Blogs - Teeny Beans Preschool Curriculum',
// description: `My beautiful website`,
// })
},
data() {
return {
page: null,
faqBlog: null,
isLoading: true,
bname: null,
bemail: null,
bnumber: null,
BlogQry: true,
metaname: "KKKK",
metadescription: "Description",
items:null
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
this.metaTitle=this.page[0].title
const descEl = document.querySelector('head meta[name="description"]');
const titleEl = document.querySelector('head title');
descEl.setAttribute('content', this.page[0].title);
titleEl.textContent = this.page[0].title;
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
.then(resp => resp.json())
.then(data => {
this.faqBlog=data.data
console.log(this.faqBlog)
})
},
methods: {
saveBlogQry(){
let formData = new FormData();
formData.append('Name', this.bname);
formData.append('Email', this.bemail);
formData.append('Phone', this.bnumber);
formData.append('formName', 'tb-blog');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.BlogQry=false
}
},
}
</script>

116
src/components/BlogGetinTouch.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<div class="block p-6 shadow-lg bg-white border-2 2xl:w-96 text-xl" style="background-color: #f5f6d7;">
<p class="text-blue-700 text-2xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="bname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
<input v-model="bemail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="bnumber" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
</template>
<script>
export default {
setup(){
// const siteData = reactive({
// title: 'Blogs - Teeny Beans Preschool Curriculum',
// description: `My beautiful website`,
// })
// useHead({
// title: computed(() => siteData.title),
// 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 {
page: null,
faqBlog: null,
isLoading: true,
bname: null,
bemail: null,
bnumber: null,
BlogQry: true,
metaname: "KKKK",
metadescription: "Description",
items:null
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
this.metaTitle=this.page[0].title
const descEl = document.querySelector('head meta[name="description"]');
const titleEl = document.querySelector('head title');
descEl.setAttribute('content', this.page[0].title);
titleEl.textContent = this.page[0].title;
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
.then(resp => resp.json())
.then(data => {
this.faqBlog=data.data
// console.log(this.faqBlog)
})
},
methods: {
saveBlogQry(){
let formData = new FormData();
formData.append('Name', this.bname);
formData.append('Email', this.bemail);
formData.append('Phone', this.bnumber);
formData.append('formName', 'tb-blog');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.BlogQry=false
}
},
}
</script>

167
src/components/EducatorsLicense.vue Normal file
View File

@ -0,0 +1,167 @@
<template>
<div>
<section class="container mx-auto ">
<h1 class="text-color-3 text-5xl text-center py-16">Educator's License</h1>
<div class="flex justify-center">
<div class="grid ">
<div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
<!-- <h1 class="justify-center">Teacher Accounts</h1> -->
<!-- <input class="flex w-96 slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue"> -->
<!-- <div class="flex flex-row"><span class="border-2 border-black px-1" v-text="sliderValue"></span></div> -->
</div>
<div class="grid grid-cols-2 py-3">
<h1 class="grid ">Student Accounts</h1>
<div class="grid place-items-end"><strong class="">(30)</strong></div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-center gap-4 px-4">
<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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</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>
<div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
</section>
<section class="container mx-auto px-4 my-16">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
<div class="grid grid-rows-2 w-full ">
<div class="grid background place-items-center rounded-lg py-8">
<h1 class="text-3xl text-white ">Monthly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl">
<h1 class="text-4xl p-1 text-center">&#36;100</h1>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
<div class="grid grid-rows-2 w-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white ">Bi-Yearly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
<span class="text-lg text-color-2">(10% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
<div class="grid grid-rows-2 w-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white ">Yearly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
<span class="text-lg text-color-2">(15% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
</div>
<div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div>
</section>
<section class="container mx-auto my-16 px-4">
<div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
<div class="flex flex-col justify-center">
<div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
<h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
<h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
</div>
</div>
<div class="flex flex-col">
<div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
<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" 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" 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="flex flex-col form-control place-content-center">
<div class="text-left py-2">Your Message</div>
<textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
</div>
<div class="form-group form-check mb-6 pt-4">
<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="" 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>
</div>
</section>
</div>
</template>
<style scoped>
.slider {
-webkit-appearance: none;
height: 6px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.3);
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
/* .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2px;
height: 2px;
background: rgba(0, 102, 255, 1);
border-radius: 50px;
cursor: pointer;
} */
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: rgba(0, 102, 255, 1);
border-radius: 50px;
cursor: pointer;
}
.slider:hover::-moz-range-thumb {
width: 20px;
height: 20px;
background: rgb(0, 102, 255, 1);
border-radius: 50px;
border-width: 6px;
border-color: rgba(217, 214, 214, 1);
cursor: pointer;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
.background {
background-color: #00CD08;
}
.text-color-1 {
color: #333333;
}
.text-color-2 {
color: #00CD08;
}
.text-color-3 {
color: #00CD08;
}
</style>
<script>
export default {
data() {
return {
sliderValue: 55,
}
},
}
</script>

260
src/components/Homepage.vue
View File

@ -56,8 +56,8 @@
</div> </div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt=""> <img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Popular Curriculum</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">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> <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link> <router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div> </div>
@ -72,7 +72,7 @@
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12"> <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit"> <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt=""> <img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas for your Classroom</h1> <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p> <p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> --> <!-- <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 px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link> <router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
@ -95,49 +95,62 @@
</section> </section>
<section class="container mx-auto xl:px-24"> <section class="container mx-auto xl:px-24">
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div> <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">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-rows-1 md:grid-rows-2 place-items-center my-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between"> <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 place-items-center">
<div class="grid"><a href="/audio-books"><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div> <div class="grid text-2xl font-semibold text-slate-700"><a href="/audio-books"><img class="flex inline-flex" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid"><a href="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></a></div> <div class="grid text-2xl font-semibold text-slate-700"><a href="/worksheets"><img class="flex inline-flex" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid"><a href="/videos"><img draggable="false" src="/img/Videos.png" alt=""></a></div> <div class="grid text-2xl font-semibold text-slate-700"><a href="/videos"><img class="flex inline-flex" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between"> <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 place-items-center">
<div class="grid"><a href="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div> <div class="grid text-2xl font-semibold text-slate-700"><a href="/occassion"><img class="flex inline-flex" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></div> <div class="grid text-2xl font-semibold text-slate-700"><a href="/themes"><img class="flex inline-flex" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div> </div>
</div> </div>
</section> </section>
<section class="container mx-auto mt-12 xl:px-24"> <section class="container mx-auto my-16 px-4 xl:px-24">
<div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 "> <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center gap-y-10">
<div class="grid row-span-1 h-fit px-4"> <div class="grid h-fit">
<h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1> <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1> <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today's popular lesson <br> plans specially curated for your classroom.</h1>
<div><a href="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div> <div><a href="/lesson-plan/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
</div>
<div class="grid row-span-2 place-items-center lg:place-items-end cursor-pointer">
<swiper class="w-96"
:modules="modules"
:slides-per-view="1"
:space-between="0"
navigation
:autoplay=" { delay: 25000, disableOnInteraction: false}"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
</swiper-slide>
</swiper>
</div>
</div> </div>
<div class="grid place-items-center">
<swiper class="slider-width" draggable="false"
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
pagination
:scrollbar="{ draggable: true }"
:autoplay=" { delay: 2500, disableOnInteraction: false}"
@swiper="onSwiper"
@slideChange="onSlideChange">
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
<img class="" lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
</swiper-slide>
</swiper>
</div>
</div>
</section> </section>
<section class="container mx-auto xl:px-24"> <!-- <section class="container mx-auto xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200"> <div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
<div class="grid place-items-start p-10 h-fit"> <div class="grid place-items-start p-10 h-fit">
<p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p> <p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link> <router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
</div> </div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div> <div class="grid place-items-center md:place-items-end h-fit w-fit"><img class="h-fit w-fit" src="/img/fire-fighter.png" alt=""/></div>
</div> </div>
</section> -->
<section class="container mx-auto px-4 xl:px-24 bg-gray-200">
<div class="flex flex-row place-content-between">
<div class="flex flex-col justify-center ">
<h2 class="text-color-1 hero-text font-bold 2xl:w-8/12">Discover our Worksheets for Preschoolers</h2>
<button class="bg-blue-700 text-white text-lg rounded-tl-lg rounded-br-lg shadow-xl w-fit px-6 py-2">Discover All</button>
</div>
<div class="flex ">
<img class="w-80" src="/img/fire-fighter.png" alt=""/>
</div>
</div>
</section> </section>
<!-- <section class="container mx-auto"> <!-- <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 place-content-center text-color-1 text-2xl font-bold py-20"> EYFS Curriculum & Its Impact</div>
@ -212,39 +225,54 @@
<div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div> <div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
</div> </div>
</section> </section>
<section class="container mx-auto xl:px-24"> <section class="container mx-auto px-4 xl:px-24">
<h1 class="hero-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</h1> <h1 class="hero-text text-center text-blue-700 py-20">What people are saying!</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
<div class="grid background border0 rounded-xl shadow-xl"> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer"> <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/person1.png" alt=""> <img class=" w-full rounded-t-2xl" src="/img/sudha-gosavi.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1> <h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Sudha Mangesh Gosavi" </h1>
<p class="text-color-2 font-20px">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> <p class="text-color-2 font-20px">I'm very thankful to Teeny Beans, because when I planned to open a preschool in Nagpur, I was very confused about how to start and what to do and things were going very messy. When I found Teeny Beans, I was completely happy since there was no royalty, no deposit, and no franchise fee, but I received complete help to open my preschool.
</div> <br>
</div> <strong><br> <br>
<div class="grid background border0 rounded-xl shadow-xl"> Stepping Stones International Preschool<br>
<div class="bottombar cursor-pointer"> Director
<img class=" w-full rounded-t-2xl" src="/img/person2.png" alt=""> </strong> </p>
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">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 cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">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 cursor-pointer">
<img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
<p class="text-color-2 font-20px">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>
</div> </div>
</section> <div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/nirmal-singh.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Nirmal Singh" </h1>
<p class="text-color-2 font-20px">As many other preschool service providers do not give us an opportunity to create our own brand, Teeny Beans does. Building our own brand is beneficial for us in the long run as we are not only targeting preschool education but also high-level eucation (secondary) in the long run. It’s also a matter of pride for pre school owners to operate their own brand.
<br> <br> <strong> <br>
Dakshya International Preschool<br>
Director</strong>
</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/sharmistha-mishra.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Sharmistha Mishra" </h1>
<p class="text-color-2 font-20px">Being a beginner in this business, I was a bit tense about opening up the PRE-SCHOOL. But the continuous support and guidance regarding the whole training process, benefits, selection of area, pre-advertising, etc., made me confident and satisfied to start with it.
<br> <br> <strong> <br>
NEST International Preschool <br>Founder and Director</strong>
</p>
</div>
</div>
<div class="grid background border0 rounded-xl shadow-xl">
<div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
<img class=" w-full rounded-t-2xl" src="/img/jane-martina.png" alt="">
<h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Ms. Jane Martina" </h1>
<p class="text-color-2 font-20px">You need the right partner to support you in establishing your school. Teeny Beans was extremely supportive, right from choosing the teaching aids, play items, and furniture, and they said that a friendly ambiance is much more preferred than a very expensive outlook. "You need to trust your partner. Every communication was very supportive, even when you doubted yourself. Teeny beans were giving options."
<br><br> <strong> <br>
Chinchilla International Preschool<br>Founder and Director</strong>
</p>
</div>
</div>
</div>
</section>
<section class="container mx-auto py-20 px-4 xl:px-24"> <section class="container mx-auto py-20 px-4 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48"> <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit"> <div class="grid h-fit">
@ -269,42 +297,41 @@
</div> </div>
</template> </template>
<script> <script>
// Import Swiper Vue.js components // Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
import 'swiper/css/pagination'; import 'swiper/css/pagination';
import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper'; import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
// Import Swiper styles
import 'swiper/css';
// const swiper = new Swiper('.swiper', {
// autoplay: {
// delay: 5000,
// },
// });
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
// Import Swiper styles };
import 'swiper/css'; },
// const swiper = new Swiper('.swiper', {
// autoplay: {
// delay: 5000,
// },
// });
import { computed, defineComponent, ref } from "vue";
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
};
},
data() { data() {
return { return {
page: null, page: null,
@ -322,7 +349,7 @@
} }
}, },
mounted: function () { mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily') fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.lessonplan = data.data this.lessonplan = data.data
@ -337,24 +364,27 @@
// console.log(this.faqHome) // console.log(this.faqHome)
}) })
}, },
name: "ExpandableBlockContent", // name: "ExpandableBlockContent",
props: { // props: {
content: { type: String }, // content: { type: String },
}, // },
setup() { // setup() {
const isExpanded = ref(true); // const isExpanded = ref(true);
const toggleCtaLabel = computed(() => // const toggleCtaLabel = computed(() =>
isExpanded.value ? "Read Less >" : "Read More >" // isExpanded.value ? "Read Less >" : "Read More >"
); // );
return { // return {
isExpanded, // isExpanded,
toggleCtaLabel, // toggleCtaLabel,
}; // };
}, // },
}; };
</script> </script>
<style > <style >
.slider-width {
width: 400px;
}
.block-content { .block-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

127
src/components/Modal.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</template>
<script is:inline>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>

317
src/components/Premium.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<div>
<section class="container-fluid bg3 shadow-2xl">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col px-6 w-full justify-center">
<h1 class="text-blue-700 hero-text font-bold">Check out our Premium Plans</h1>
<p class="font-20px text-color-2">We have plans according to everyone's needs.</p>
<p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit rounded-3xl py-4 cursor-none" src="/img/price1.png" alt="">
</div>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24">
<div class="grid grid-cols-1 md:grid-cols-2 place-items-center my-24 gap-16">
<div class="grid box1 relative">
<div id="d-wrapper">
<div class="zig-zag-bottom absolute inset-x-0 top-0 ">
<h1 class="text-center text-4xl text-white ">Educator’s License</h1>
</div>
</div>
<h1 class="text-center mt-48 text-2xl text3">For Individual Educators</h1>
<h1 class="text-center mt-4 text-3xl text3">1 Teacher’s Account</h1>
<h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
<div class="mt-28 flex justify-center">
<a href="/educators-license"><h1 class="text-center text-3xl bg2 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
</div>
</div>
<div class="grid box2 relative">
<div id="d-wrapper2" class="bg3">
<div class="zig-zag-bottom absolute inset-x-0 top-0">
<h1 class="text-center text-4xl text-white">School License</h1>
</div>
</div>
<h1 class="text-center mt-40 text-2xl text3">For Preschools</h1>
<h1 class="text-center mt-4 text-3xl text3">Multiple Teacher’s Accounts</h1>
<h1 class="text-center mt-4 text-2xl text3">10 Children Accounts/ Teacher</h1>
<h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
<div class="mt-10 flex justify-center">
<a href="/teachers-license"><h1 class="text-center text-3xl bg4 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
</div>
</div>
</div>
</section>
<section class="container mx-auto px-4 xl:px-24 mb-16">
<details>
<summary>
<div class="grid grid-cols-3 place-items-center ">
<div class="grid text1 text-xl ">Educator's License</div>
<div class="grid text-black">VS</div>
<div class="grid text2 text-xl">School License</div>
</div>
</summary>
<div class="grid grid-cols-2 place-items-center ">
<div class="grid">
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
</div>
<div class="grid">
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
</div>
</div>
</details>
</section>
<section class="container mx-auto px-4 xl:px-24">
<div class="flex flex-col lg:flex-row place-items-center justify-center">
<div class="flex flex-col justify-center md:px-28 lg:px-0">
<div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
<h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700">Talk to Us ></h1>
<h1 class="text-xl lg:text-2xl lg:w-96">If you want to know which plan works for you the best, write to us and we’ll get back to you with best advice</h1>
</div>
<!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
</div>
<div class="flex flex-col ">
<div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
<div v-if="isLoading">
<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="name" 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="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
</div>
<div class="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input type="text" v-model="phone" 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="address" 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 v-model="flag" 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="saveContactForm" 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>
</div>
</template>
<style scoped>
details {
border: 1px solid #d4d4d4;
padding: .75em .75em 0;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
font-weight: bold;
margin: -.75em -.75em 0;
padding: .75em;
background-color: #F9F9F9;
color: #fff;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px;
}
.font-20px {
font-size: 20px;
}
@media screen and (min-width: 801px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 800px) {
.hero-text {
font-size: 30px;
}
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
.bg0 {
background-color: #00CD08;
}
.text {
color: #00CD08;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
}
.text1 {
color: #FFA25F;
}
.text2{
color:#5F008C;
}
.text3 {
color: #666666;
}
.bg2 {
background-color: #FFA25F;
}
.bg4 {
background-color: #5F008C;
}
.box {
background-color: #dfdedf;
border-top-left-radius: 200px;
}
#d-wrapper {
background-color: #fff;
}
#d-wrapper * {
margin:0;
padding:0;}
#d-wrapper div.sep {
min-height: 200px;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #FFA25F;
width: 100%;
}
#d-wrapper .zig-zag-bottom,
#d-wrapper .zig-zag-top{
padding: 32px 0;
}
#d-wrapper2 .zig-zag-bottom,
#d-wrapper2 .zig-zag-top{
padding: 32px 0;
}
#d-wrapper .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #FFA25F 0),
linear-gradient(45deg, transparent 16px, #FFA25F 0);
background-size: 24px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:50px;
left:0px;
}
#d-wrapper2 .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #9B00FA 0),
linear-gradient(45deg, transparent 16px, #9B00FA 0);
background-size: 24px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:50px;
left:0px;
}
#d-wrapper2 .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #9B00FA;
width: 100%;
}
.box1 {
width: 100%;
height: 550px;
/* padding: 25px; */
border: 1px solid #FFA25F;
}
.box2 {
width: 100%;
height: 550px;
/* padding: 25px; */
border: 1px solid #9B00FA;
}
</style>
<script>
export default {
data() {
return {
isLoading: true,
name:null,
email:null,
phone:null,
address:null,
flag:null,
contact_form:{}
}
},
mounted: function () {
// this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)
},
methods: {
saveContactForm() {
let formData={
"name":this.name,
"email":this.email,
"phone":this.phone,
"address":this.address,
"flag":this.flag,
}
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.isLoading=false
}
}
}
</script>

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

@ -0,0 +1,166 @@
<template>
<div>
<section class="container mx-auto px-4 xl:px-24">
<h1 class="text-color-3 text-5xl text-center py-16">Teacher's License </h1>
<div class="flex flex-row justify-center">
<h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
<input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue"> &nbsp;
<span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
</div>
<div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
<div class="flex">Student Accounts</div>
<div class="flex">30</div>
</div>
<div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
<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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</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>
<div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
</section>
<section class="container mx-auto my-16 px-4 xl:px-24">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6">
<div class="grid grid-rows-2 w-full ">
<div class="grid background place-items-center rounded-lg py-8">
<h1 class="text-3xl text-white ">Monthly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl">
<h1 class="text-4xl p-1 text-center">&#36;100</h1>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
<div class="grid grid-rows-2 w-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white ">Bi-Yearly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
<span class="text-lg text-color-2">(10% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
<div class="grid grid-rows-2 w-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white ">Yearly</h1>
</div>
<div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
<span class="text-lg text-color-2">(15% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
</div>
</div>
</div>
<div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div>
</section>
<section class="container mx-auto my-16 px-4">
<div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
<div class="flex flex-col justify-center">
<div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
<h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
<h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
</div>
</div>
<div class="flex flex-col">
<div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
<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" 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" 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="flex flex-col form-control place-content-center">
<div class="text-left py-2">Your Message</div>
<textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
</div>
<div class="form-group form-check mb-6 pt-4">
<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="" 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>
</div>
</section>
</div>
</template>
<style scoped>
.slider {
-webkit-appearance: none;
height: 6px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.3);
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
width: 50%;
}
/* .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2px;
height: 2px;
background: rgba(0, 102, 255, 1);
border-radius: 50px;
cursor: pointer;
} */
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: rgba(0, 102, 255, 1);
border-radius: 50px;
cursor: pointer;
}
.slider:hover::-moz-range-thumb {
width: 20px;
height: 20px;
background: rgb(0, 102, 255, 1);
border-radius: 50px;
border-width: 6px;
border-color: rgba(217, 214, 214, 1);
cursor: pointer;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
width: 100%;
}
.background {
background-color: #124BBD;
}
.text-color-1 {
color: #333333;
}
.text-color-2 {
color: #124BBD;
}
.text-color-3 {
color: #124BBD;
}
</style>
<script>
export default {
data() {
return {
sliderValue: 55,
}
},
}
</script>

4
src/components/Slider.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<swiper <swiper class="w-40 "
:modules="modules" :modules="modules"
:slides-per-view="3" :slides-per-view="3"
:space-between="50" :space-between="50"
@ -23,7 +23,7 @@
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles // Import Swiper styles
import 'swiper/css'; // import 'swiper/css';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
import 'swiper/css/pagination'; import 'swiper/css/pagination';
import 'swiper/css/scrollbar'; import 'swiper/css/scrollbar';

12
src/components/TestSwiper.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<swiper <swiper class="width"
:modules="modules" :modules="modules"
:slides-per-view="1" :slides-per-view="1"
:space-between="0" :space-between="0"
@ -82,4 +82,12 @@
}) })
}, },
}; };
</script> </script>
<style>
.width {
width: 400px;
display: flex;
justify-items: flex-end;
}
</style>

82
src/pages/blog/[id].astro
View File

@ -1,21 +1,89 @@
--- ---
import Layout from "../../layouts/Layout.astro";
import BlogGetinTouch from "../../components/BlogGetinTouch.vue";
import BlogFaq from "../../components/BlogFaq.vue";
const imgPrefix='https://curriculum-app-api.beanstalkedu.com/assets/';
const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog'); const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
const data = await response.json(); const data = await response.json();
export async function getStaticPaths() { const faq = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
const faqJson = await faq.json();
export async function getStaticPaths() {
const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog'); const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
const data = await response.json(); const data = await response.json();
const finalData = data.data.map((n: { slug: any; })=>{ const finalData = data.data.map((n: { slug: any; })=>{
return {params: {id:n.slug}} return {params: {id:n.slug}}
}) })
// console.log(finalData) // console.log(finalData)
return finalData; return finalData;
} }
const { id } = Astro.params; const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id); const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const mainImg='https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[idx].img;
--- ---
<h1>{id}</h1> <Layout title="">
{data.data[idx].slug} <br> <main>
{data.data[idx].status} <br> <div class="grid grid-cols-1 xl:grid-cols-6 xl:px-24">
{data.data[idx].title} <br> <div class="grid xl:col-span-4 container mx-auto">
{data.data[idx].property} <br> <div class="bg-white mt-3">
<!-- <h2 class="ml-28 text-4xl">Loading ...</h2> -->
<div>
<div ></div>
<!-- <p>{{ page[0].meta }}</p> -->
<figure class=" p-4 xl:pl-20 2xl:pl-32">
<h1 class="text-3xl lg:text-4xl font-semibold text-color-1 py-4">{data.data[idx].title}</h1>
<!-- <img class="w-full" v-if="page[0].img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].img" alt="" style="width:100%;"> -->
<!-- <img src="" alt="">{data.data[idx].img} -->
<img src={ mainImg} alt="image description" style="width:100%;"/>
<div class="pt-6 space-y-4">
<blockquote>
</blockquote>
<figcaption class="font-medium">
<!-- <div class="text-color-2 text-justify text-lg" >{{page[0].preview_text }}</div> -->
<div class="text-color-2 text-lg text-justify" set:html={data.data[idx].preview_text}></div>
</figcaption>
</div>
</figure>
<!-- <div v-html="page[0].content" class="container mx-auto">
</div> -->
</div>
</div>
</div>
<section class="z-50">
<div>
<a href="#" target="_blank" style=" position: fixed; top: 200px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/link.svg" alt="">
</a>
<a href="https://api.whatsapp.com/send/?phone=919163646431&text&app_absent=0" target="_blank" style=" position: fixed; top: 260px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/whatsapp.svg" alt="">
</a>
<a href="#" target="_blank" style=" position: fixed; top: 320px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/facebook.svg" alt="">
</a>
<a href="#" target="_blank" style=" position: fixed; top: 380px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/twitterw.svg" alt="">
</a>
</div>
</section>
<section class="container z-40">
<div class="grid xl:col-span-2 place-items-center">
<div class="xl:fixed top-40 xl:right-24">
<BlogGetinTouch client:visible/>
</div>
</div>
</section>
</div>
<BlogFaq client:visible/>
</main>
</Layout>
<style scoped>
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333
}
</style>

11
src/pages/educators-license.astro Normal file
View File

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

111
src/pages/modal.astro
View File

@ -1,110 +1,7 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Modal from "../components/Modal.vue";
--- ---
<Layout title="modal"> <Layout title="">
<h2>Modal Example</h2> <Modal client:visible/>
</Layout>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>njhnjhnhnhn</p>
</div>
</div>
</Layout>
<script is:inline>
export default {
data() {
return {
page: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=occassion')
.then(resp => resp.json())
.then(data => {
this.faqOccassion=data.data
console.log(this.faqOccassion)
})
}
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

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

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

11
src/pages/school-license.astro Normal file
View File

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